【干货】十分钟读懂浏览器渲染流程
在之前写过的一篇《"天龙八步"细说浏览器输入URL后发生了什么》一文中,和大家分享了从在浏览器中输入网址URL到最终页面展示的整个过程。部分读者向我反馈对于最后的浏览器渲染布局这块不是很清晰,所以本文就浏览器渲染流程单独开篇讲解,希望大家都能有新的收获。
浏览器主要组件结构
(浏览器主要组件)
渲染引擎——webkit和Gecko
Firefox使用Geoko——Mozilla自主研发的渲染引擎。
Safari和Chrome都使用webkit。Webkit是一款开源渲染引擎,它本来是为linux平台研发的,后来由Apple移植到Mac及Windows上。
本文我主要以webkit渲染引擎来讲解,尽管webkit和Gecko使用的术语稍有不同,他们的主要流程基本相同。
(webkit渲染引擎流程)
关键渲染路径
关键渲染路径是指浏览器从最初接收请求来的HTML、CSS、javascript等资源,然后解析、构建树、渲染布局、绘制,最后呈现给客户能看到的界面这整个过程。
所以浏览器的渲染过程主要包括以下几步:
解析HTML生成DOM树。
解析CSS生成CSSOM规则树。
将DOM树与CSSOM规则树合并在一起生成渲染树。
遍历渲染树开始布局,计算每个节点的位置大小信息。
将渲染树每个节点绘制到屏幕。
构建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。
小结
本文我们就浏览器渲染流程逐步了解了一遍,相信大家一定都有所新的收获,如果大家对于浏览器渲染流程还有任何疑问,欢迎反馈,我们共同交流,共同学习,共同进步。
关注我的微信公众号,分享更多技术干货!
参考文献:
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
【干货】十分钟读懂浏览器渲染流程相关推荐
- 十分钟读懂游戏研发、发行、渠道那些事儿
国庆在家写了7天东西,实在是累得够呛.我重新梳理了一下以前做过的事儿,正好把去年年初发到腾讯GAD的文章拿过来做个修改补充,算是再做个总结吧. 这篇文章主要是介绍游戏行业的上下游产业链有哪些玩家,游戏 ...
- 十分钟读懂AES加密算法
偶阅博客一篇,漫画式的讲解十分有趣,故转之. 原文地址:https://blog.csdn.net/lrwwll/article/details/78069013 ------------------ ...
- 通俗易懂,十分钟读懂DES,详解DES加密算法原理,DES攻击手段以及3DES原理。Python DES实现源码
文章目录 1.什么是DES 2.DES的基本概念 3.DES的加密流程 4.DES算法步骤详解 4.1 初始置换(Initial Permutation,IP置换) 4.2 加密轮次 4.3 F轮函数 ...
- 十分钟读懂『卡尔曼滤波算法』
我是勤劳的搬运工,转自: 1.http://blog.csdn.net/karen99/article/details/7771743 2.http://blog.csdn.net/tudouniur ...
- 产品入门一——十分钟读懂产品经理
1.用一个故事来引入我们今天的话题: 2.在这个故事中,对于产品经理的解释和补充说明!!!! 1)发现市场需求 补充说明:产品经理要拥有一个善于去发现需求,什么是需求,问题即需求,现实生活中你遇到了 ...
- 【十分钟读懂系列】之什么是SLF,PSL,MLF,SLO?
受国际经济金融形势不确定性增强以及各种影响流动性的因素波动较大影响,近年来我国银行体系短期流动性供求的波动性有所加大,尤其是当多个因素相互叠加或市场预期发生变化时,有可能出现市场短期资金供求缺口难以通 ...
- 十分钟读懂『K-Means 算法』
我是勤劳的搬运工,转载自:http://coolshell.cn/articles/7779.html ------------------------------------------------ ...
- 十分钟读懂Beam Search(1/2)
最近研究了一下用基于BERT的encoder-decoder结构做文本生成任务,碰巧管老师昨天的文章也介绍了以生成任务见长的GPT模型,于是决定用两篇文章大家介绍一下在文本生成任务中常用的解码策略Be ...
- 10分钟看懂浏览器的渲染过程及优化
一.浏览器概述 目前的主流浏览器有5个:Internet Explorer.Firefox.Safari.Chrome和Opera浏览器.根据 StatCounter 浏览器统计数据,目前(截止2 ...
最新文章
- java拉姆达表达式事例,Java Lambda表达式详解和实例
- python每天学习30分钟系列
- Java基本sql_常用sql
- python 自动发邮件 Errno61 Connection refused
- Hadoop集群中数据传输(涉及两个集群是非kerberos认证)
- Android实现传感器应用及位置服务
- Facebook vs Chrome 关公秦琼的未来之战,互联网营销
- NLP系列之文本分类
- proteus 安装包以及破解汉化
- echarts柱形图x轴y轴的字体大小颜色调整
- Win10系统自带的虚拟机怎么打开教学
- 输入邮箱判断邮箱是否合法
- SQL Server 简单模式下,误删除堆表记录如何恢复(绕过页眉校验)
- Wolfram Mathematica学习笔记1
- adb、logcat
- 《电子测量与仪器学报》杂志投稿总结
- javaScript 结构算法刷题 数组题
- Linux 中ln 命令-n 参数的含义
- 自由天空XP/2K3封装工具 Easy Sysprep v2.0 正式版封装教程
- 超详细IntelliJ IDEA安装教程
热门文章
- Django(三)框架之第二篇
- 转帖 IBM要推POWER9,来了解一下POWER处理器的前世今生
- 关于mysql中外键关联的一些个人理解
- 表格内容排序(js实现)
- Android开源之行之走进zxing,轻松实现二维码扫描(二)
- Markdown会干掉Html吗?
- [转]在资源管理器中使鼠标右键增加一个命令,运行cmd,同时使得当前路径为资源管理器当前的目录...
- ImagesSprite V1.1.1 Beta发布
- 江苏省专转本计算机题知识点,江苏专转本计算机真题17
- tesorflow 填充‘same’与‘valid’