从url到页面发生了什么?
对这个经典问题,在搜索引擎中能找到无数个答案
这篇文章也是我对这个问题的一个阶段性总结
写博客的方式也从复制粘贴转变到自己分析归纳总结
作为前端,我们的注意力应该放在呈现引擎上。
呈现引擎解析html
当我们输入url按下回车之后,发送请求获取文档的内容,一般是html文档。
呈现引擎将html里的各标签解析成DOM树。
遇到外链资源(比如图片、样式表、脚本等)就会发送请求获取资源。
呈现引擎会同步解析外部CSS文件以及样式元素中的属性,构建CSSOM树。
DOM和CSSOM构建完毕后生成渲染树,进入绘制和显示阶段。
虽然解析CSSOM不会阻塞DOM的构建,但是会影响渲染树的构建。这就是我们为什么要把样式表放在头部的原因。
网络的模型是同步的。解析器遇到<script>
时会立即解析并执行脚本,文档的解析会停止直至脚本执行完成。
Firefox 在样式表加载和解析的过程中,会禁止所有脚本。而对于 WebKit 而言,仅当脚本尝试访问的样式属性可能受尚未加载的样式表影响时,它才会禁止该脚本。
HTML5中增加了2个选项 defer(延迟执行), async(异步执行)
JavaScript 在 DOM、CSSOM 和 JavaScript 执行之间引入了大量新的依赖关系,从而可能导致浏览器在处理以及在屏幕上渲染网页时出现大幅延迟。所以我们应该把涉及DOM或样式操作的脚本放在body末尾
这里还涉及另外2个概念:重排(reflow)和重绘(repaint)'
只改变外观不改变位置会触发repaint。改变位置触发重排及重绘
JavaScript运行机制
js是单线程。
浏览器是多线程的。setTimeout、ajax、DOM事件等都在Web Apis中
JavaScript 的一个非常有趣的特性是事件循环模型,与许多其他语言不同,它永不阻塞。 处理 I/O 通常通过事件和回调来执行
参考资料