浏览器的工作原理

从url到页面发生了什么?

对这个经典问题,在搜索引擎中能找到无数个答案

这篇文章也是我对这个问题的一个阶段性总结

写博客的方式也从复制粘贴转变到自己分析归纳总结

用户打开浏览器,输入 baidu.com,页面展示百度首页。整个过程发生了什么?

浏览器是如何渲染页面的?如何优化首屏渲染性能?

作为前端,我们的注意力应该放在呈现引擎上。

呈现引擎解析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 通常通过事件和回调来执行

event_loop.png

参考资料

浏览器的工作原理:新式网络浏览器幕后揭秘

Philip Roberts: What the heck is the event loop anyway?

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容