主要过程:
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,即页面首次加载的时候。
-
重排必定会引发重绘,但重绘不一定会引发重排。
-
任何页面布局和几何属性的改变都会触发重排