浏览器如何渲染页面?

0.051字数 2143阅读 472

1.背景介绍

浏览器渲染页面的大致过程:

从浏览器地址栏的请求链接开始,浏览器通过DNS解析查到域名映射的IP地址,成功之后浏览器端向此IP地址取得连接,成功连接之后,浏览器端将请求头信息 通过HTTP协议向此IP地址所在服务器发起请求,服务器接受到请求之后等待处理,最后向浏览器端发回响应,此时在HTTP协议下,浏览器从服务器接收到 text/html类型的代码,浏览器开始显示此html,并获取其中内嵌资源地址,然后浏览器再发起请求来获取这些资源,并在浏览器的html中显示

2.知识剖析

浏览器解析的大概的工作流程可以归纳为以下几个步骤

1. 用户输入网址(假设是个 HTML 页面,第一次访问,无缓存情况),浏览器向服务器发出HTTP请求,服务器返回 HTML 文件; (善用缓存,减少HTTP请求,减轻服务器压力)

2. 浏览器载入 HTML 代码,发现 head 内有一个 link 引用外部 CSS 文件,则浏览器立即发送CSS文件请求,获取浏览器返回的CSS文件;  (CSS文件合并,减少HTTP请求)

3. 浏览器继续载入 HTML 中 body 部分的代码,并且 CSS 文件已经拿到手了,可以开始渲染页面了;CSS文件需要放置最上面,避免网页重新渲染。

4. 浏览器在代码中发现一个 img 标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码;(图片文件合并,减少HTTP请求)

5. 服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码;  (最好图片都设置尺寸,避免重新渲染)

6. 浏览器发现了一个包含一行 JavaScript 代码的 script  标签,会立即运行该js代码;(script最好放置页面最下面)

7.js脚本执行了语句,它令浏览器隐藏掉代码中的某个 div,突然就少了一个元素,浏览器不得不重新渲染这部分代码;  (页面初始化样式不要使用js控制)

8.终于等到了 /html 的到来,浏览器泪流满面……

9. 当用户点了一下界面中的“换肤”按钮,JavaScript 让浏览器换了一下 link 标签的 CSS 路径;

10. 浏览器召集了在座的各位 div span ul li 们,“大伙儿收拾收拾行李,咱得重新来过……”,浏览器向服务器请求了新的CSS文件,重新渲染页面。

浏览器每天就这么来来回回跑着,要知道不同的人写出来的 HTML 和 CSS 代码质量参差不齐,说不定哪天跑着跑着就挂掉了。

好在这个世界还有这么一群人——页面重构工程师,平时挺不起眼,也就帮视觉设计师们切切图啊改改字,其实背地里还是干了不少实事的。

3.常见问题

什么是repain(重绘)和reflow(回流)?

4.解决方案

说到页面为什么会慢?那是因为浏览器要花时间、花精力去渲染,尤其是当它发现某个部分发生了点变化影响了布局,需要倒回去重新渲染, 该过程称为reflow(回流)。

reflow 几乎是无法避免的。现在界面上流行的一些效果,比如树状目录的折叠、展开(实质上是元素的显 示与隐藏)等,都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化,都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码,它们都彼此相互影响着。

如果只是改变某个元素的背景色、文 字颜色、边框颜色等等不影响它周围或内部布局的属性,将只会引起浏览器 repaint(重绘)。

repaint 的速度明显快于 reflow(在IE下需要换一下说法,reflow 要比 repaint 更缓慢)。

为什么reflow 要比 repaint 更缓慢?

repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,不会影响到dom结构渲染。

reflow(回流),与repaint区别就是他会影响到dom的结构渲染,同时他会触发repaint,他会改变他本身与所有父辈元素(祖先),这种开销是非常昂贵的,导致性能下降是必然的,页面元素越多效果越明显。

注意:回流必将引起重绘,而重绘不一定会引起回流。

5.编码实战

6.扩展思考

引起repain(重绘)和reflow(回流)的一些操作?

reflow 的成本比 repaint 的成本高得多的多。DOM Tree 里的每个结点都会有 reflow 方法,一个结点的 reflow 很有可能导致子结点,甚至父点以及同级结点的 reflow。

当你增加、删除、修改 DOM 结点时,会导致 reflow 或 repaint。

当你移动 DOM 的位置,或是搞个动画的时候。

当你修改 /删除CSS 样式的时候。

当你 Resize 窗口的时候,或是滚动的时候。

当你修改网页的默认字体时。

当你设置 style 属性的值 (Setting a property of the style attribute)。

注:display:none 会触发 reflow,而 visibility:hidden 只会触发 repaint,因为没有发现位置变化。

7.参考文献

参考一:reflow(回流)和repaint(重绘)及其优化

参考二:浏览器加载渲染网页过程解析?

8.更多讨论

如何减少repain(重绘)和reflow(回流)?

reflow是不可避免的,只能将reflow对性能的影响减到最小,给出下面几条建议:

1. 不要一条一条地修改 DOM 的样式。通过设置style属性改变结点样式的话,每设置一次都会导致一次reflow。所以最好通过设置class的方式,这样可以将多次改变样式属性的操作合并成一次操作。

2. 让要操作的元素进行”离线处理”,处理完后一起更新;

- 使用DocumentFragment进行缓存操作,引发一次回流和重绘;

var fragment = document.createDocumentFragment();

fragment.appendChild(document.createTextNode('keenboy test 111'));

fragment.appendChild(document.createElement('br'));

fragment.appendChild(document.createTextNode('keenboy test 222'));

document.body.appendChild(fragment);

- 使用display:none技术,只引发两次回流和重绘;

原理:由于display属性为none的元素不在渲染树中,对隐藏的元素操 作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时,可以先隐藏它,操作完成后再显示。这样只在隐藏和显示时触发2次重排。

3.设置元素的position为absolute或fixed;

元素脱离标准文档流,也从DOM树结构中脱离出来,在需要reflow时只需要reflow自身与下级元素。

4.不要用tables布局;

tables中某个元素一旦触发reflow就会导致table里所有的其它元素reflow。在适合用table的场合,可以设置table-layout为auto或fixed,这样可以让table一行一行的渲染,这种做法也是为了限制reflow的影响范围。

5.避免使用CSS的JavaScript表达式,如果css里有expression,每次都会重新计算一遍。

鸣谢

推荐阅读更多精彩内容