怎样理解网页的加载流程

Posted 2021-03-25 aisowe

我们可以把网页的加载过程理解为: 下载与解析. 这两个过程是同时进行的, 也就是说, .html文件还没下载完, 解析已经开始了. 大致的加载流程如下: 

1. 浏览器边下载html文件, 边解析其内容.

2. 解析过程中发现有script标签时, 会暂停dom和css解析, 转而交给js引擎去处理. 这里分为两种情况, 一种是script标签内有代码, 这时会执行完这里面的代码再继续dom和css的解析, 如果script是引用的外部js文件, 那就会发起请求下载这个js文件, 再执行, 这个操作会花费较多时间, 因此一般是将这种有外链的js文件引用放到body的最底下, 这样可以保证页面是解析完成后再执行script代码, 提升用户体验;

3. script标签里的代码执行完毕, 控制权会交还给渲染引擎, 继续解析.