渲染:就是把浏览器把HTML代码以css定义的规则显示在浏览器窗口的过程。
8 javascript脚本执行了这条语句,命令浏览器隐藏代码中某个,杯具了,突然就少了一个元素,浏览器不得不重新渲染这部分代码
11 浏览器召集了在座的各位
浏览器解析HTML的基本过程:
1
用户输入网址,浏览器向服务器发出请求,服务器返回html文件
2
浏览器载入html代码,发现标签内有一个标签引用外部css文件
3 浏览器又发出css文件的请求,服务器返回这个css文件
4 浏览器继续载入html中的部分的代码,并且css文件已经拿到手了,可以渲染页面
5浏览器在代码中发现一个重绘与回流标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码
6 服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来渲染这部分代码
7
浏览器发现了一个包含一行javascript代码的script标签,赶快运行它
9
终于等到的到来,浏览器泪流满面
10
等等,还没完,用户点了一个界面中的“换肤”按钮,javascript让浏览器换了一个标签中的css的路径
- "大伙需要收拾下行李,咱得重新来过",浏览器向服务器请求了新的css文件,重新渲染页面
当页面的布局发生变化时,浏览器会回过头来重新渲染,这就是页面变慢的原因,当一个点的变化影响了布局,倒回去重新渲染,这个倒回去的过程称为回流(reflow)
减少reflow: 可以给图片设定好宽度和高度,这样就可以把图片的占位面积预定好
repaint(重绘):当只改变背景颜色,文字颜色,边框颜色,而不修改页面布局时,浏览器就会repaint,repaint的速度明显比reflow的速度快。