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

jswusn.com Other 2018-07-03 13:42:46 1421次浏览

  本文就浏览器渲染流程单独开篇讲解,希望大家都能有新的收获。

浏览器主要组件结构

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

(浏览器主要组件)


渲染引擎——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的外观样式以及大小和位置。这时就要提到两个重要概念:repaint和reflow。

  repaint:屏幕的一部分重画,不影响整体布局,比如某个CSS的背景色变了,但元素的几何尺寸和位置不变。

  reflow:意味着元件的几何尺寸变了,我们需要重新验证并计算渲染树。是渲染树的一部分或全部发生了变化。这就是Reflow,或是Layout。

  所以我们应该尽量减少reflow和repaint,我想这也是为什么现在很少有用table布局的原因之一。

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

  有些情况下,比如修改了元素的样式,浏览器并不会立刻reflow或repaint一次,而是会把这样的操作积攒一批,然后做一次reflow,这又叫异步reflow或增量异步reflow。

  有些情况下,比如resize窗口,改变了页面默认的字体等。对于这些操作,浏览器会马上进行reflow。

小结

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

技术分享

苏南名片

  • 电话:180-0154-0762
  • 邮箱:message@jswusn.com
  • 地址:江苏省苏州市相城区

热门文章

Copyright © 2018-2020 jswusn.com 版权所有

技术支持:苏州网站建设  苏ICP备18036849号