网上有不少浏览器工作原理的文章，我也乘着有空学习整理一下~更多内容可以看文章末尾的参考资料。
第一步 获取页面资源
- 浏览器输入 URL 发出请求。
- DNS 查找域名找到服务器 IP
- 请求成功，返回响应数据。response 的 body 就是 HTML 代码。
- 根据 HTML 获取资源，如 JS、CSS 和图片等。
第二步 解析资源构建 render 树
- 解析 HTML 代码构建 DOM 树
- 解析 CSS 规则生成 CSS 规则树
- 处理 JavaScript 中操作 DOM API 和 CSS API 的行为。
- 将 CSS 规则树应用到 DOM 树上生成 Render 树。
第三步 排版和绘制
- 计算元素所在位置。
- 将元素对应的盒模型变成位图。
- 如有必要，将位图进行合成。
- 将位图交给浏览器绘制到浏览器页面上。
注：排版、渲染和绘制的过程可以看下这个视频。
重排和重绘
重绘和重排是非常消耗性能的，所以对于性能优化来说需要有所了解的。
重绘（Repaint）——屏幕的一部分要重画，比如某个CSS的背景色变了。但是元素的几何尺寸没有变。
重排（Reflow）——意味着元件的几何尺寸变了，我们需要重新验证并计算Render Tree。是Render Tree的一部分或全部发生了变化。这就是Reflow，或是Layout。（HTML使用的是flow based layout，也就是流式布局，所以，如果某元件的几何尺寸发生了变化，需要重新布局，也就叫reflow）reflow 会从<html>这个root frame开始递归往下，依次计算所有的结点几何尺寸和位置，在reflow过程中，可能会增加一些frame，比如一个文本字符串必需被包装起来。
Reflow的成本比Repaint的成本高得多的多。DOM Tree里的每个结点都会有reflow方法，一个结点的reflow很有可能导致子结点，甚至父点以及同级结点的reflow。
最后
这是我个人理解的浏览器的工作原理，有任何问题欢迎留言交流。建议如果想学习浏览器工作原理的可以点击下面的链接查看学习。
网友评论