这里是修真院前端小课堂,本篇分析的主题是

【浏览器如何渲染页面?】

每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能,本篇分享的是:

【浏览器如何渲染页面?】

一、背景介绍

浏览器是前端工程师或页面重构师工作中必不可少的,WEB页面运行在各种各样的浏览器当中,浏览器载入、渲染页面的速度直接影响着用户体验,特别是浏览器渲染页面的原理,页面渲染就是浏览器将HTML代码根据CSS定义的规则显示在浏览器窗口中的这个过程,理解了原理就更会容易理解前端优化的一些准则。

二、知识剖析

2.1 reflow(回流)

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

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

2.2 repaint(重绘)

如果只是改变某个元素的背景色、文 字颜色、边框颜色等等不影响它周围或内部布局的属性,将只会引起浏览器repaint(重绘)。repaint的速度明显快于reflow(在IE下需要换一下说法,reflow要比repaint更缓慢)。

下面是一个打开Wikipedia时的Layout/reflow的视频(注:HTML在初始化的时候也会做一次reflow,叫intial reflow),你可以感受一下:视频

三、常见问题

浏览器如何渲染页面?

四、解决方案

4.1浏览器工作大流程

先看图

1)浏览器会解析三个东西:

一个是HTML/SVG/XHTML,事实上,Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。

CSS,解析CSS会产生CSS规则树。

Javascript,脚本,主要是通过DOM API(Application Programming Interface)和CSSOM(CSS对象模型) API来操作DOM Tree和CSS Rule Tree.

2)解析完成后,浏览器引擎会通过DOM Tree和CSS Rule Tree来构造Rendering Tree。注意:

Rendering Tree渲染树并不等同于DOM树,因为一些像Header或display:none的东西就没必要放在渲染树中了。CSS的Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element。也就是DOM结点。也就是所谓的Frame。然后,计算每个Frame(也就是每个Element)的位置,这又叫layout和reflow过程。

3)最后通过调用操作系统Native GUI的API绘制。

4.2 DOM解析

上面这段HTML会解析成这样:

下面是另一个有SVG标签的情况:

4.3 CSS解析

CSS的解析大概是下面这个样子(下面主要说的是Firefox的玩法),假设我们有下面的HTML文档:

于是DOM Tree是这个样子

然后我们的CSS文档是这样的:

/* rule 1 */ doc { display: block; text-indent: 1em; }

/* rule 2 */ title { display: block; font-size: 3em; }

/* rule 3 */ para { display: block; }

/* rule 4 */ [class="emph"] { font-style: italic; }

于是我们的CSS Rule Tree会是这个样子:

注意:CSS匹配HTML元素是一个相当复杂和有性能问题的事情。所以,你就会在N多地方看到很多人都告诉你,DOM树要小,CSS尽量用id和class,千万不要过渡层叠下去,……

通过这两个树,我们可以得到一个叫Style Context Tree,也就是下面这样(把CSS Rule结点Attach到DOM Tree上):

所以,Firefox基本上来说是通过CSS解析 生成CSS Rule Tree,然后,通过比对DOM生成Style Context Tree,然后Firefox通过把Style Context Tree和其Render Tree(Frame Tree)关联上,就完成了。注意:Render Tree会把一些不可见的结点去除掉。而Firefox中所谓的Frame就是一个DOM结点,不要被其名字所迷惑了。

4.4渲染

渲染的流程基本上如下(黄色的四个步骤):

1)计算CSS样式;2)构建Render Tree;3)Layout –定位坐标和大小,是否换行,各种position, overflow, z-index属性……;4)正式开画;

注意:上图流程中有很多连接线,这表示了Javascript动态修改了DOM属性或是CSS属会导致重新Layout,有些改变不会,就是那些指到天上的箭头,比如,修改后的CSS rule没有被匹配到,等。

5.编码实战

详见视频

点击这里

六、扩展思考

1.影响页面渲染速度主要因素有哪些?

reflow(回流)和repaint(重绘)

2.哪些情况下会导致reflow发生?

改变窗囗大小;改变文字大小;添加/删除样式表;内容的改变,如用户在输入框中敲字;激活伪类,如:hover (IE里是一个兄弟结点的伪类被激活);操作class属性;脚本操作DOM;计算offsetWidth和offsetHeight;设置style属性。

3.如何避免reflow(回流)?

reflow是不可避免的,只能将reflow对性能的影响减到最小。

1.尽可能限制reflow的影响范围。需要改变元素的样式,不要通过父级元素影响子元素。最好直接加在子元素上。

2.通过设置style属性改变结点样式的话,每设置一次都会导致一次reflow。所以最好通过设置class的方式。

3.减少不必要的DOM层级(DOM depth)。改变DOM树中的一级会导致所有层级的改变,上至根部,下至被改变节点的子节点。这导致大量时间耗费在执行reflow上面。

4.避免不必要的复杂的CSS选择器,尤其是后代选择器(descendant selectors),因为为了匹配选择器将耗费更多的CPU。

七、参考文献

参考一:浏览器的渲染原理简介

参考二:为什么每个前端开发者都要理解网页渲染?

八、更多讨论

1.提高浏览器性能的方法还有哪些?

2.浏览器的主要功能有哪些?

3.哪款浏览器的综合性能最优?

浏览器如何渲染页面? 1相关推荐

  1. 浏览器如何渲染页面?

    这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [浏览器如何渲染 ...

  2. 从渲染页面的角度来聊一聊浏览器的工作原理

    从渲染页面的角度来聊一聊浏览器的工作原理 页面内容快速加载和流畅的交互是用户希望得到的Web体验,因此,开发者应力争实现这两个目标. 了解如何提升性能和感知性能,有助于了解浏览器的工作原理. 概述 快 ...

  3. JS高级 之 深入浏览器的渲染原理

    在浏览器中输入网址按回车后发生了什么, 其实,发生的事情很简单,主要有三大步 找到资源 下载资源 解析资源渲染到页面 目录 一.DNS解析,找到资源 1. 查询浏览器缓存 2. 查询操作系统缓存 4. ...

  4. day002-HTML知识点总结:浏览器兼容性之指定IE浏览器使用chrome内核渲染页面

    今天再浏览大淘宝首页时,突然看到这么一个东东: ,顿时好费解,莫非万恶的IE浏览器认识到自己以往的罪孽,开始兼容chrome了??! 于是本着不懂就百度的神精,开始纵横于各大铁耙,勃哥,终于找到了许许 ...

  5. div置于页面底部_浏览器渲染页面的原理及流程

    浏览器渲染页面的原理及流程 浏览器将域名通过网络通信从服务器拿到html文件后,如何渲染页面呢? 1.根据html文件构建DOM树和CSSOM树.构建DOM树期间,如果遇到JS,阻塞DOM树及CSSO ...

  6. 160826、浏览器渲染页面过程描述,DOM编程技巧以及重排和重绘

    一.浏览器渲染页过程描述   1.浏览器解析html源码,然后创建一个DOM树. 在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点). DO ...

  7. vuex中的值变化 页面重新渲染_浅谈浏览器的渲染过程,重绘与回流

    浏览器的渲染过程 首先,我们先来了解一下浏览器的渲染过程是什么样的,也就是说浏览器把一堆代码呈现到页面上的过程是什么样子的,浏览器采用流式布局模型(Flow Bsaed Layout),根据下图,我们 ...

  8. 多个html页面拼接成一个页面_浏览器渲染页面机制以及如何减少DOM操作

    为了能更好.更快的为用户呈现出他们想要的页面,基于浏览器的渲染机制,我们在开发中应该了解浏览器,了解浏览器的运行机制,以及在开发中我们能更好的提高性能,虽然现在市面上流行的VUE和react,但也应该 ...

  9. 浏览器渲染页面的原理及流程---------重绘与重排(回流)--优化

    浏览器渲染页面的原理及流程 浏览器将域名通过网络通信从服务器拿到html文件后,如何渲染页面呢? 1.根据html文件构建DOM树和CSSOM树.构建DOM树期间,如果遇到JS,阻塞DOM树及CSSO ...

最新文章

  1. 机构押注ABS云平台 融资成本下降1%~3%
  2. 变量声明和定义有什么区别
  3. 学好python能干嘛-python都能做什么
  4. 【设计模式系列】OO设计原则之LSP-Liskov替换原则
  5. c#利用反射+特性实现简单的实体映射数据库操作类实现自动增删改查(一)
  6. 学习日报 1026 使用属性升级MyBank
  7. 7-8 树的遍历 (10 分)
  8. QEMU/KVM原理概述
  9. JZOJ 3503. 粉刷(paint)
  10. read properties
  11. 一分钟先生---走出软件作坊:三五个人十来条枪 如何成为开发正规军(三十二)...
  12. MyBatis入门使用方式
  13. 使用HDTunePro检测硬盘快速上手教程
  14. Java动态数组ArrayList
  15. 网易云音乐API-本地node开启
  16. workunit 的指的工作单元是什么_workunit是什么意思
  17. Python学习---根据excel的内容自动批量修改excel名称
  18. python-机器学习-手写数字识别
  19. Twitter开发者账号【Twitter开发者文档系列3】——推特标准接口API的请求频率限制说明
  20. IT项目管理 第九章 习题

热门文章

  1. 怎样使div中的文字在div的底部显示?
  2. 两式妙招 杀死“顽固不化”的病毒进程
  3. 【Youtobe trydjango】Django2.2教程和React实战系列一【项目简介 | 搭建 | 工具】
  4. 4.起步时最重要的是什么?
  5. 使用百度地图API计算两点直线距离、道路距离和行车时间
  6. 每周总结:尝试,总有待完善的地方
  7. 使用matplotlib的axes画图
  8. 编程语言在那些运用中
  9. C++之小学奥数(2)
  10. 工业智能8口以太网交换机介绍