深圳网站建立>前端开辟>殊效>

博卡娱乐城

阅读器的渲染原理简介

泉源:本站 作者:降龙网络 工夫:2013-12-14 06:44 点击:

阅读器任务大流程

空话少说,先来看个图:

从下面这个图中,我们可以看到那么几个事:

1)阅读器会剖析三个工具:

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

CSS,剖析CSS会发生CSS规矩树。

Javascript,剧本,次要是经过DOM API和CSSOM 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绘制。

DOM剖析

HTML的DOM Tree剖析如下:

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<html>
<head>
    <title>Web page parsing</title>
</head>
<body>
    <div>
        <h1>Web page parsing</h1>
        <p>This is an example Web page.</p>
    </div>
</body>
</html>

下面这段HTML会剖析成如许:

上面是另一个有SVG标签的状况。

CSS剖析

CSS的剖析大约是上面这个样子(上面次要说的是Gecko也便是Firefox的玩法),假定我们有上面的HTML文档:

1
2
3
4
5
6
7
8
9
<doc>
<title>A few quotes</title>
<para>
  Franklin said that <quote>"A penny saved is a penny earned."</quote>
</para>
<para>
  FDR said <quote>"We have nothing to fear but <span>fear itself.</span>"</quote>
</para>
</doc>

于是DOM Tree是这个样子:

然后我们的CSS文档是如许的:

1
2
3
4
 /* 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会是这个样子:

留意,图中的第4条规矩呈现了两次,一次是独立的,一次是在规矩3的子结点。以是,我们可以晓得,树立CSS Rule Tree是需求对比着DOM Tree来的。CSS婚配DOM Tree次要是从右到左剖析CSS的Selector,很多多少人以为这个事会比拟快,实在并纷歧定。要害还看我们的CSS的Selector怎样写了。

留意: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结点,不要被其名字所疑惑了。

注:Webkit不像Firefox要用两个树来干这个,Webkit也有Style工具,它间接把这个Style工具存在了相应的DOM结点上了。

渲染

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

盘算CSS款式

构建Render Tree

Layout – 定位坐标和巨细,能否换行,种种position, overflow, z-index属性 ……

正式开画

留意:上图流程中有许多衔接线,这表现了Javascript静态修正了DOM属性或是CSS属会招致重新Layout,有些改动不会,便是那些指到天上的箭头,比方,修正后的CSS rule没有被婚配到,等。

这里紧张要说两个观点,一个是Reflow,另一个是Repaint。这两个不是一回事。

Repaint——屏幕的一局部要重画,比方某个CSS的配景色变了。但是元素的多少尺寸没有变。

Reflow——意味着元件的多少尺寸变了,我们需求重新验证并盘算Render Tree。是Render Tree的一局部或全部发作了变革。这便是Reflow,或是Layout。(HTML运用的是flow based layout,也便是流式结构,以是,假如某元件的多少尺寸发作了变革,需求重新结构,也就叫reflow)reflow 会从这个root frame开端递归往下,顺次盘算一切的结点多少尺寸和地位,在reflow进程中,能够会添加一些frame,比方一个文本字符串必须被包装起来。

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

Reflow的本钱比Repaint的本钱高得多的多。DOM Tree里的每个结点都市有reflow办法,一个结点的reflow很有能够招致子结点,乃至父点以及同级结点的reflow。在一些高功能的电脑上大概还没什么,但是假如reflow发作在手机上,那么这个进程黑白常苦楚和耗电的。

以是,上面这些举措有很大能够会是本钱比拟高的。

当你添加、删除、修正DOM结点时,会招致Reflow或Repaint

当你挪动DOM的地位,或是搞个动画的时分。

当你修正CSS款式的时分。

当你Resize窗口的时分(挪动端没有这个题目),或是转动的时分。

当你修正网页的默许字体时。

注:display:none会触发reflow,而visibility:hidden只会触发repaint,由于没有发明地位变革。

多说两句关于滚屏的事,通常来说,假如在滚屏的时分,我们的页面上的一切的像素都市随着转动,那么功能上没什么题目,由于我们的显卡关于这种把全屏像素往上往下移的算法是很快。但是假如你有一个fixed的配景图,或是有些Element不随着转动,有些Elment是动画,那么这个转动的举措关于阅读器来说会是相称相称苦楚的一个进程。你可以看到许多如许的网页在转动的时分功能有多差。由于滚屏也有能够会形成reflow。

根本下去说,reflow有如下的几个缘由:

Initial。网页初始化的时分。

Incremental。一些Javascript在操纵DOM Tree时。

Resize。其些元件的尺寸变了。

StyleChange。假如CSS的属性发作变革了。

Dirty。几个Incremental的reflow发作在统一个frame的子树上。

好了,我们来看一个示例吧:

1
2
3
4
5
6
7
8
9
10
11
12
var bstyle = document.body.style; // cache
 
bstyle.padding = "20px"; // reflow, repaint
bstyle.border = "10px solid red"; //  再一次的 reflow 和 repaint
 
bstyle.color = "blue"; // repaint
bstyle.backgroundColor = "#fad"; // repaint
 
bstyle.fontSize = "2em"; // reflow, repaint
 
// new DOM element - reflow, repaint
document.body.appendChild(document.createTextNode('dude!'));

固然,我们的阅读器是智慧的,它不会像下面那样,你每改一次款式,它就reflow或repaint一次。普通来说,阅读器会把如许的操纵积累一批,然后做一次reflow,这又叫异步reflow或增量异步reflow。但是有些状况阅读器是不会这么做的,比方:resize窗口,改动了页面默许的字体,等。关于这些操纵,阅读器会立刻停止reflow。

但是有些时分,我们的剧本会制止阅读器这么干,比方:假如我们恳求上面的一些DOM值:

offsetTop, offsetLeft, offsetWidth, offsetHeight

scrollTop/Left/Width/Height

clientTop/Left/Width/Height

IE中的 getComputedStyle(), 或 currentStyle

由于,假如我们的顺序需求这些值,那么阅读器需求前往最新的值,而如许一样会flush出去一些款式的改动,从而形成频仍的reflow/repaint。

增加reflow/repaint

上面是一些Best Practices:

1)不要一条一条地修正DOM的款式。与其如许,还不如事后界说好css的class,然后修正DOM的className。

1
2
3
4
5
6
7
8
9
10
11
// bad
var left = 10,
top = 10;
el.style.left = left + "px";
el.style.top  = top  + "px";
 
// Good
el.className += " theclassname";
 
// Good
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";

2)把DOM离线后修正。如:

运用documentFragment 工具在内存里操纵DOM

先把DOM给display:none(有一次reflow),然后你想怎样改就怎样改。比方修正100次,然后再把他表现出来。

clone一个DOM结点到内存里,然后想怎样改就怎样改,改完后,和在线的谁人的交流一下。

3)不要把DOM结点的属性值放在一个循环里当成循环里的变量。否则这会招致少量地读写这个结点的属性。

4)尽能够的修正层级比拟低的DOM。固然,改动层级比拟底的DOM有能够会形成大面积的reflow,但是也能够影响范畴很小。

5)为动画的HTML元件运用fixed或absoult的position,那么修正他们的CSS是不会reflow的。

6)万万不要运用table结构。由于能够很小的一个小窜改会形成整个table的重新结构。

公司业务:深圳网站建立,刷百度下拉,刷百度指数,假造主机租用

如转载,请保存本文链接地点:/Style/Effect/188/

Loading......
任务工夫:

AM 09:00 ~ 12:00

PM 14:00 ~ 18:00

联络方法:

Tel 010-50933590

Hp 18701620736

设计劣势

独立的设计团队 带给您全新的视觉体验

功用开辟

弱小的技能气力,完成您想要的任何功用

售后效劳

美满的售后效劳,处理您在运用进程中遇到的题目

Copyright © 2010 - 2018 深圳乐高娱乐科技开展无限公司 All Rights Reserved

地点:深圳市顺义区南法信当局府前街16号 炫立方 | TEL:010-50933590

深圳网站建立 | 深圳网站设计 | 深圳SEO公司