浏览器渲染页面原理

主要过程：
1.用户输入网址，浏览器向服务器发送http请求，服务器返回html文件（运用缓存，减少http请求）
2.浏览器载入html文件，发现头部内有引入外部css文件，浏览器立即发送css文件请求。获取浏览器返回的css文件（css文件合并，减少http请求）
3.浏览器继续载入html文件中代码块，开始渲染页面（css文件位于最上面）
4.浏览器发现标签，向服务器发送请求。此时浏览器继续渲染后面的页面代码（图片文件合并，减少http请求）
5.服务器返回图片文件，图片占用一定面积，影响后面段落的排布，因此浏览器需要重新渲染此部分代码（图片设置尺寸，避免重新渲染）
6.浏览器发现script标签，立即执行js代码js代码最好位于页面最下面
7.js脚本执行之后，某个div被隐藏，浏览器重新渲染这部分代码
8.直至完毕

主要步骤

• 构建dom树（parse）：解析html文件，将标签转换成dom树中的dom node，生成内容树
• 构建渲染树（construct）：解析对应的css样式文件，构建渲染树
• 布局渲染树（reflow/layout）：从根节点递归调用，计算每个元素大小，位置等，每个节点在页面的精确坐标
• 绘制渲染树（paint/repaint）：遍历渲染树，使用UI后端层绘制每个节点

影响页面渲染速度：重排（重构/回流/reflow）和重绘（repaint或redraw）

• 重绘repaint：元素的外观改变而出发浏览器的行为，浏览器根据元素的新属性重新绘制

• 回流reflow：当渲染树因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，称之为回流。每个页面至少需要一次reflow，即页面首次加载的时候。

• 重排必定会引发重绘，但重绘不一定会引发重排。

• 任何页面布局和几何属性的改变都会触发重排

参考博客