网页是如何加载的？

网页是这么加载的？

《JAVASCRIPT DOM 编程艺术第二版》这本书里在讲到onload时有这样一句话。

“网页加载完毕时会触发一个onload事件，这个事件与window对象相关联”

在看到这句话的时候我脑子里冒出的第一个想法就是：网页是怎么加载的？

然后就去谷歌了一下，得到了以下结论：

加载网页的过程是包括解析，执行以及JS加载。

解析就是解析HTML和CSS，执行的话一般就是指JS执行。

噢，原来加载网页的过程就是解析完HTML和CSS，然后再执行JS脚本就OK啦！

咋一看好像挺简单的样子嘛！

但是这时候我又想到一个问题，解析和执行显然不是一瞬间就可以完事的，它们是有一个过程的，而且一般都是按照文档由上到下解析，那如果在解析HTML的时候，突然遇到了一个script符号，进入了JS的执行模式，那会怎么样? HTML还会继续解析下去吗？如果是解析CSS时遇到script呢？结果和解析·HTML时一样吗？

带着这些问题，我又去谷歌上找答案（会自己找答案是一程序猿很重要的一个技能哦！当然，如果你能看到我这篇文章，相信你已经熟练掌握了这项技能！

资料一：浏览器如何解析HTML,CSS,JS

https://segmentfault.com/a/1190000016253407

资料二：简单谈谈浏览器从输入URL到页面渲染的过程https://juejin.im/post/5d1b5d255188253d7201ba6b

在里面我了解到了浏览器的渲染过程

以下是我的总结再加上自我的理解

过程：

1.先处理HTML标记并构建DOM树

   根据HTML的内容，将标签按照结构解析成为DOM树，DOM树解析的过程是一个深度优先遍历，就是先构建出当前节点的所有子节点，再构建下一个兄弟节点。

   在读取HTML文档，构建DOM树的过程中，若遇到script标签，则DOM树的构建会暂停，直到脚本执行完毕

2.处理CSS标记并处理CSSOM树

   解析CSS规则树时JS执行将暂停，直到CSS规则树就绪

   浏览器在CSS规则树生成之前不会进行渲染

3.将DOM和CSSOM合并成一个渲染树

   DOM树和CSS规则树全部准备好了之后，浏览器才会开始构建渲染树。

   精简CSS可以加快CSS规则树的构建，从而加快页面相应速度。

4.根据渲染树来布局，计算每个节点的几何信息

   布局：通过渲染树中渲染对象的信息，计算出每一个渲染对象的位置和尺寸

   回流：在布局完成后，发现了某个部分发生了变化影响了布局，那就需要倒回去重新渲染。

5.将各个节点绘制到显示器上

   绘制阶段，系统会遍历呈现树，并调用呈现器的“paint”方法，将呈现器的内容显示到屏幕上。
   
   重绘：某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性，将只会引起浏览器的重绘。

回流：某个元素的尺寸发生了变化，则需要重新计算渲染树，重新渲染。

看到这里，相信各位对我们上面的问题已经有了答案了！

我简单总结一下就是：

如果在解析HTML，构建HTML树时遇到了script标签，浏览器将会中断DOM树的构建，先去执行脚本。

如果在执行JS时遇到了CSS，浏览器将会暂停执行JS，优先去解析CSS规则树。

上一个问题解决了，我们离最开始的想知道网页是如何加载的这个目标又更进了一步！

但是上一个问题的答案显然不是一个能让人发出 原来如此啊！的答案，它又给我们带来了一个问题

为什么执行JS的过程中遇到了CSS，浏览器会优先去解析CSS，又为什么在解析HTML的过程中遇到了JS，浏览器会优先解析HTML呢？

资料三：

1.https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript?hl=zh-cn（需要fq）

2.https://juejin.im/post/59c60691518825396f4f71a1#comment（不需要fq）

（两篇文章不同，建议都看。如果电脑有不会fq的可以加v：hy15767929193，手把手教你

结论如下：

1.脚本在文档的何处插入，就在何处执行

2.如果浏览器在尚未完成 CSSOM 的下载和构建的情况下想要运行脚本将会对性能不利，这时浏览器将延迟脚本执行和 DOM 构建，直至其完成 CSSOM 的下载和构建。

以上就是我对网页是如何加载的问题的过程思考和结论，如有错误，欢迎指正！