广州网站建造集团官网 老直营威尼斯网址开户
老品牌威尼斯网址开户 吾们 效劳 网站建造 移动应用 案例 报道 联系
咨询热线:13711534025

期待聆听您的声音

13711534025

不忽悠,不作恶,不欺诈;敬天理,存良知,思利他。
QQ咨询 QQ咨询 QQ咨询
广州总部 深圳 佛山 广西

与吾们一起分享美好

聊一聊浏览器渲染原理及流程

发布时间:2017-04-14 发布作者:老直营威尼斯网址开户 查阅次数:1492次 标签:广州网站建造 广州网站建造集团官网

吾们可能都知道浏览器含有一个渲染引擎,用来渲染窗口所找子 镜氖寄D匣肪诚拢秩疽婵梢韵允緃tml、xml文档及图片,它也可以借助插件(一种浏览器扩展)显示其他类型数据, 诸如使用PDF阅读器插件,用于显示PDF格式。但是其具体的渲染原理和流程估计也有很多人都不知道或者不清楚吧。这些天研究了一下浏览器的渲染原理,有了些心得,在这里跟众家分享一下,这里只聊下渲染引擎最主要的用途——显示应用了CSS之下的html及图片。

 

渲染引擎简介

  本文所聊下的浏览器——Firefox、Chrome和Safari是基于两种渲染引擎构建的,Firefox使用Geoko——Mozilla自主研发的渲染引擎,Safari和Chrome都使用webkit。

 

渲染主流程

  渲染引擎起首通过网络获得所请求文档的始末,一贯以8K分块的方式完成。下面是渲染引擎在取得始末之下的基本流程:

  解析html以构建dom树 -> 构建render树 -> 计划render树 -> 绘制render树

 

 

 

  这里先解释一下几个概念,方便众家理解:

  DOM Tree:浏览器将HTML解析成树形的数据结构。

  CSS Rule Tree:浏览器将CSS解析成树形的数据结构。

  Render Tree: DOM和CSSOM合并下生成Render Tree。

  layout: 有了Render Tree,浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系,易于 去计算出每个节点在屏幕中的地位。

  painting: 按照算出来的规则,通过显卡,把始末画到屏幕上。

  reflow(回流):当浏览器发现某个部分发生了点改动影响了计划,需要倒回去重新渲染,内行称这个回退的过程叫 reflow。reflow 会从 <html> 这个 root frame 开始递归往下,依次计算一切的结点几何尺寸和地位。reflow 险些是无法避免的。Now界面上流行的一些成果,譬喻树状目录的折叠、展开(实质上是圆素的显 示与隐藏)等,都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些圆素的占位面积、定位方式、边距等属性的改动,都会引起它内部、周围甚至整个页面的重新渲 染。一贯吾们都无法预估浏览器到底会 reflow 哪一部分的代码,它们都彼此竞相影响着。

  repaint(重绘):改动某个圆素的背下色、文字颜色、边框颜色等等不影响它周围或内部计划的属性时,屏幕的一部分要重画,但是圆素的几何尺寸没有变。

care:(1)display:none 的节点不会被加入Render Tree,而visibility: hidden 则会,以是,如果某个节点最开始是不显示的,设为display:none是更优的。

     (2)display:none 会触发 reflow,而 visibility:hidden 只会触发 repaint,因为没有发现地位改动。

   (3)有些环境下,譬喻修改了圆素的样式,浏览器并不会立刻reflow 或 repaint 一次,而是会把这样的操作积攒一批,然下做一次 reflow,这又叫异步 reflow 或增量异步 reflow。但是在有些环境下,譬喻resize 窗口,改动了页面默认的字体等。对于这些操作,浏览器会马上进行 reflow。

 

  来看看webkit的主要流程:

 

  再来看看Geoko的主要流程:

 


  Gecko 里把格式化好的可视圆素称做“帧树”(Frame tree)。每个圆素就是一个帧(frame)。 webkit 则使用”渲染树”这个术语,渲染树由”渲染对象”组成。webkit 里使用”layout”表示圆素的计划,Gecko则称为”reflow”。Webkit使用”Attachment”来连接DOM节点与可视化信息以构建渲染树。一个非语义上的小差别是Gecko在HTML与DOM树之间有一个附加的层 ,称作”content sink”,是创建DOM对象的工厂。

  尽管Webkit与Gecko使用略微不同的术语,这个过程灰子 腔就模缦拢

  1. 浏览器会将HTML解析成一个DOM树,DOM 树的构建过程是一个深度遍历过程:当上节点的一切子节点都构建好下才会去构建当上节点的下一个兄弟节点。

  2. 将CSS解析成 CSS Rule Tree 。

  3. 按照DOM树和CSSOM来构造 Rendering Tree。care:Rendering Tree 渲染树并不等同于 DOM 树,因为一些像Header或display:none的东西就没需要放在渲染树中了。

  4. 有了Render Tree,浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为layout,顾名思义就是计算出每个节点在屏幕中的地位。

  5. 再下一步就是绘制,即遍历render树,并使用UI下端层绘制每个节点。

  care:如该 这个过程是逐步完成的,为了更好的用户体味,渲染引擎将会尽可能早的将始末呈现到屏幕上,并不会等到一切的html都解析完成之下再去构建和计划render树。它是解析完一部分始末就显示一部分始末,再是,可能还在通过网络下载其余始末


吾们常见浏览器兼容性小case与解决Plan?

javascript选项卡切换样式

吾们的地位

广州 广州市天河区岗顶百脑汇高技术大厦B塔27楼 020-6235 2949

深圳 深圳市南山区汉京万国大厦18A 159 8916 9178

广西 茂名市茂南区油城三路广西创业创新孵化基地B110 159 8916 9178

吾们的效劳

网站及移动应用 牛逼直营网站 APP开发 小程序开发 WeChat运营

系统应用开发 OA/ERP/CRM/HR系统开发 教学管理系统 电商系统 应用型软件系统定制开发

了解吾们

集团官网简介 联系吾们 吾们的案例 讯息报道

使用条款 隐私声明 Cookies

© 2009-2020 老直营威尼斯网址开户 版权一切 广ICP备16051058号

XML 地图 | Sitemap 地图