`
GavinHsueh
  • 浏览: 70783 次
文章分类
社区版块
存档分类
最新评论

【干货】十分钟读懂浏览器渲染流程

阅读更多

在之前写过的一篇《"天龙八步"细说浏览器输入URL后发生了什么》一文中,和大家分享了从在浏览器中输入网址URL到最终页面展示的整个过程。部分读者向我反馈对于最后的浏览器渲染布局这块不是很清晰,所以本文就浏览器渲染流程单独开篇讲解,希望大家都能有新的收获。

浏览器主要组件结构

(浏览器主要组件)

渲染引擎——webkit和Gecko

Firefox使用Geoko——Mozilla自主研发的渲染引擎。

Safari和Chrome都使用webkit。Webkit是一款开源渲染引擎,它本来是为linux平台研发的,后来由Apple移植到Mac及Windows上。

本文我主要以webkit渲染引擎来讲解,尽管webkit和Gecko使用的术语稍有不同,他们的主要流程基本相同。

(webkit渲染引擎流程)

关键渲染路径

关键渲染路径是指浏览器从最初接收请求来的HTML、CSS、javascript等资源,然后解析、构建树、渲染布局、绘制,最后呈现给客户能看到的界面这整个过程。

所以浏览器的渲染过程主要包括以下几步:

  1. 解析HTML生成DOM树。
  2. 解析CSS生成CSSOM规则树。
  3. 将DOM树与CSSOM规则树合并在一起生成渲染树。
  4. 遍历渲染树开始布局,计算每个节点的位置大小信息。
  5. 将渲染树每个节点绘制到屏幕。

构建DOM树

当浏览器接收到服务器响应来的HTML文档后,会遍历文档节点,生成DOM树。

需要注意的是,DOM树的生成过程中可能会被CSS和JS的加载执行阻塞。渲染阻塞问题下文会讲。

构建CSSOM规则树

浏览器解析CSS文件并生成CSS规则树,每个CSS文件都被分析成一个StyleSheet对象,每个对象都包含CSS规则。CSS规则对象包含对应于CSS语法的选择器和声明对象以及其他对象。

渲染阻塞

当浏览器遇到一个 script 标记时,DOM 构建将暂停,直至脚本完成执行,然后继续构建DOM。每次去执行JavaScript脚本都会严重地阻塞DOM树的构建,如果JavaScript脚本还操作了CSSOM,而正好这个CSSOM还没有下载和构建,浏览器甚至会延迟脚本执行和构建DOM,直至完成其CSSOM的下载和构建。


所以,script 标签的位置很重要。实际使用时,可以遵循下面两个原则:

CSS 优先:引入顺序上,CSS 资源先于 JavaScript 资源。
JS置后:我们通常把JS代码放到页面底部,且JavaScript 应尽量少影响 DOM 的构建。


当解析html的时候,会把新来的元素插入dom树里面,同时去查找css,然后把对应的样式规则应用到元素上,查找样式表是按照从右到左的顺序去匹配的。

例如: div p {font-size: 16px},会先寻找所有p标签并判断它的父标签是否为div之后才会决定要不要采用这个样式进行渲染)。
所以,我们平时写CSS时,尽量用id和class,千万不要过渡层叠。

构建渲染树

通过DOM树和CSS规则树我们便可以构建渲染树。浏览器会先从DOM树的根节点开始遍历每个可见节点。对每个可见节点,找到其适配的CSS样式规则并应用。


渲染树构建完成后,每个节点都是可见节点并且都含有其内容和对应规则的样式。这也是渲染树与DOM树的最大区别所在。渲染树是用于显示,那些不可见的元素当然就不会在这棵树中出现了,譬如。除此之外,display等于none的也不会被显示在这棵树里头,但是visibility等于hidden的元素是会显示在这棵树里头的。

渲染树布局

布局阶段会从渲染树的根节点开始遍历,然后确定每个节点对象在页面上的确切大小与位置,布局阶段的输出是一个盒子模型,它会精确地捕获每个元素在屏幕内的确切位置与大小。

渲染树绘制

在绘制阶段,遍历渲染树,调用渲染器的paint()方法在屏幕上显示其内容。渲染树的绘制工作是由浏览器的UI后端组件完成的。

reflow与repaint:

根据渲染树布局,计算CSS样式,即每个节点在页面中的大小和位置等几何信息。HTML默认是流式布局的,CSS和js会打破这种布局,改变DOM的外观样式以及大小和位置。这时就要提到两个重要概念:replaint和reflow。
replaint:屏幕的一部分重画,不影响整体布局,比如某个CSS的背景色变了,但元素的几何尺寸和位置不变。
reflow: 意味着元件的几何尺寸变了,我们需要重新验证并计算渲染树。是渲染树的一部分或全部发生了变化。这就是Reflow,或是Layout。
所以我们应该尽量减少reflow和replaint,我想这也是为什么现在很少有用table布局的原因之一。

display:none 会触发 reflow,visibility: hidden属性并不算是不可见属性,它的语义是隐藏元素,但元素仍然占据着布局空间,它会被渲染成一个空框,所以visibility:hidden 只会触发 repaint,因为没有发生位置变化。

有些情况下,比如修改了元素的样式,浏览器并不会立刻 reflow 或 repaint 一次,而是会把这样的操作积攒一批,然后做一次 reflow,这又叫异步 reflow 或增量异步 reflow。
有些情况下,比如 resize 窗口,改变了页面默认的字体等。对于这些操作,浏览器会马上进行 reflow。

小结

本文我们就浏览器渲染流程逐步了解了一遍,相信大家一定都有所新的收获,如果大家对于浏览器渲染流程还有任何疑问,欢迎反馈,我们共同交流,共同学习,共同进步。

 

作者:GavinHsueh,QQ/微信:753391279,专注网站建站、运维及企业web应用开发技术。
获取更多技术文章、参与互动交流,欢迎关注公众号:

 

 

参考文献:

http://taligarsiel.com/Projects/howbrowserswork1.htm

https://segmentfault.com/a/1190000012960187

https://sylvanassun.github.io/2017/10/03/2017-10-03-BrowserCriticalRenderingPath/

https://www.zybuluo.com/lizlalala/note/435042

0
0
分享到:
评论

相关推荐

    纯js实现复制文本并提示复制成功(干货)适用所有浏览器

    本篇文章将详细介绍如何使用纯JavaScript实现这个功能,并确保其在所有主流浏览器中都能正常工作。 首先,我们需要了解`clipboard` API,它是现代浏览器提供的一个用于读取和写入剪贴板内容的接口。然而,考虑到...

    干货|一文读懂腾讯会议在复杂网络下如何保证高清音频

    【腾讯会议在复杂网络下的高清音频保证】 在2019年底,腾讯会议的迅速崛起并非偶然,除了抓住了疫情期间的远程办公需求,其产品力是关键因素之一。腾讯多媒体实验室高级研究员王晓海在【腾讯技术开放日·云视频会议...

    干货 一篇文章让你读懂投资银行和四大的不同.pdf

    干货 一篇文章让你读懂投资银行和四大的不同

    干货 十分钟带你从入门到进阶python爬虫.docx

    ### 干货:十分钟带你从入门到进阶Python爬虫 #### 一、引言 在数字时代,网络数据成为了宝贵的资源。对于开发者而言,掌握高效的数据抓取技术至关重要。Python作为一种灵活强大的编程语言,拥有丰富的库支持,是...

    干货:一文读懂电感 值得收藏

    电感是电子技术中的基本元件之一,它是一种能够把电能转化为磁能并存储起来的元件。电感器的核心特性是其电感量,即线圈的圈数(匝数)、绕制方式、有无磁心及磁心的材料等均对电感量有着决定性的影响。...

    【纯干货啊】华为IPD流程管理(完整版).pptx

    华为IPD产品研发流程完整版。非常的详细,很适合给新是的实习生做培训用!是我一直在用的流程管理,很适合学习与交流。

    干货-股权众筹投资标准流程图文完整版.doc

    以下是对股权众筹投资标准流程的详细解读: 1. **项目筛选**:在股权众筹中,项目筛选是第一步,也是至关重要的一步。平台如云筹会要求创业者提交项目基本信息、团队介绍和商业计划书,通过专业团队的初步审核,...

    干货|一文帮你读懂ISO26262汽车功能安全!

    前言新能源电控系统比传统车更加复杂,安全要求更高,其中最为人们所关注的要点之一就是功能安全的理念。在这个领域,国际汽车厂商(宝马、通用、福特等)、汽车零部件供应商(博世、德尔福等)早已采用ISO26262标准...

    干货-股权众筹投资标准流程图文完整版.zip

    这份"干货-股权众筹投资标准流程图文完整版.zip"压缩包文件包含了一份详细的文档,旨在为投资者提供清晰的操作指南。以下是对其中核心知识点的详细解读: 1. **了解股权众筹**:股权众筹是通过互联网平台向大众募集...

    一张图将整个ReentrantLock流程看懂

    一张图将整个ReentrantLock流程看懂,干货满满 一张图将整个ReentrantLock流程看懂,干货满满 一张图将整个ReentrantLock流程看懂,干货满满 一张图将整个ReentrantLock流程看懂,干货满满 一张图将整个...

    【干货】一文读懂汽车内饰材料_new.pdf

    汽车内饰材料概述 汽车内饰材料是汽车制造中不可或缺的一部分,它们直接影响汽车的外观、舒适度、安全性等多方面性能。从材料的角度,汽车内饰材料可以分为塑料、皮革、纺织纤维等几大类。 一、塑料材料 ...

    参考资料-干货-股权众筹投资标准流程图文完整版.zip

    在这个“参考资料-干货-股权众筹投资标准流程图文完整版.zip”压缩包中,包含了一份详尽的文档,揭示了股权众筹投资的全过程。以下是这个流程的详细解读: 1. **项目发起**:首先,创业者或企业主决定通过股权众筹...

    西方资源干货网站收藏夹请导入浏览器.html

    大家好,我是在澳洲留学,这个是我总结的西方有用网站收藏夹,希望大家把它导入浏览器。这里有西方顶级大学的数据库,学术搜索数据库,全球著名金融网站,著名编程教学网站,著名mooc网站如MIT, edx, coursera, ...

    15篇干货教你洞悉优秀产品设计流程

    在《15篇干货教你洞悉优秀产品设计流程》这一系列文章中,作者分享了多方面的经验与见解,旨在帮助产品经理和设计师提升产品设计水平。 ### 二、优秀产品设计流程的核心要素 #### 2.1 用户研究 - **目标**: 深入...

    干货标准超市干货.doc

    干货是食品市场中常见的一类商品,主要包括各种坚果、果实、菌菇、豆制品、调味料等,它们在保存和销售时需要遵循一定的标准以确保品质。以下是对这些干货产品的一些详细描述和优质劣质的区分标准: 1. 南瓜子:...

    干货-股权众筹投资标准流程图文完整版-精品模板文案.doc

    【股权众筹投资标准流程】 股权众筹作为一种新兴的投资方式,已经成为许多初创企业和个人投资者的重要桥梁。以下将详细解析股权众筹投资的各个步骤: 1. **项目筛选**:在股权众筹的初始阶段,平台会通过创业者...

    干货 一篇文章让你读懂投资银行和四大的不同.zip

    投资银行和四大,即四大国际会计师事务所——普华永道(PwC)、毕马威(KPMG)、德勤(Deloitte)和安永(EY),是金融和会计领域的两个重要分支,各自承担着不同的角色。这篇文章将深入解析两者之间的差异,帮助...

Global site tag (gtag.js) - Google Analytics