浏览器如何渲染页面?

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,每次都会重新计算一遍。

鸣谢

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345

推荐阅读更多精彩内容