浏览器加载与渲染

为什么80%的码农都做不了架构师？>>>   

浏览器加载与渲染

(一)浏览器

1)       用户界面

例如地址栏，标签栏等（Every part of the browser display except the main window where you see the requested page.）

2)       浏览器引擎：询问和操作渲染引擎的接口

3)       渲染引擎：

负责展现所请求的内容，比如负责解析html和css并且在屏幕上呈现解析后的内容。

①    Trident页面渲染引擎 –> IE系列浏览器；

②    Gecko页面渲染引擎 –> Mozilla Firefox；

③    KHTML页面渲染引擎或WebKit框架 –> Safafi和Google Chrome；

④    Presto页面渲染引擎 –> Opera

4)       网络模块：网络请求用，比如http请求。它有跨平台的接口以及对应于每个平台的底层实现。

5)       UI后端：用来绘制基本构件，如下拉框和窗口。UI后端暴露出一个平台无关性的公共接口，底层的它使用操作系统的UI方法。

6)       javascript解释器：用来解析和执行javascript代码。

7)       数据存储：浏览器需要在硬盘上保存各种数据，比如cookies。

(二)标准与规范（W3C）

W3C规范，制定了HTML和CSS等相关标准，统一浏览器解析和显示HTML文件的方式；但各浏览器却只遵循了一部分，各有各的扩展，这也是引起Web开发人员头疼的兼容性问题。

“网页”主要由三部分组成：

Ø        结构（Structure）

HTML（XML），当前版本4、5

Ø        表现（Presentation）

CSS，当前版本2，3

Ø        行为（Behavior）

①    DOM

是W3C推荐的标准编程接口，即HTML与XML的应用编程接口（API），它独立于平台和语言，以面向对象方式描述的文档模型，将页面映射为一种“树形”文档。

优势：易用性强，使用DOM时，将把所有的XML文档信息都存于内存中，并且遍历简单，支持XPath。

缺点：效率低，解析速度慢，内存占用量过高。另外会大量消耗时间，因为使用DOM进行解析时，将为文档的每个element、attribute等都创建一个对象，这样在DOM机制中所运用的大量对象的创建和销毁无疑会影响其效率。

②    JavaScript（ECMAScript）

(三)浏览器加载与渲染

1.        加载与解析的过程

1)       下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。

2)       对于javascript、css、img，一般是外部嵌入的地址形式，无预加载，只有被解析到的时候才会启用单独连接进行下载，并且在下载后才进行解析。并且边解析，边执行（更新DOM树和Style Object且重新绘制页面）！

3)       网页解析是单线程的，加载、解析与渲染是串行的，会阻塞HTML的解析

①    对于src这样的外部引入脚本，正常来说，也是会阻塞网页的解析，但很多浏览器目前“假装”实现了“并行加载”（例如webkit的预加载器，利用网页显示的空闲时间预先下载资源）。

②    JavaScript的执行会阻塞网页的解析。浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，所以就会阻塞其他的下载和呈现。多个嵌入JS文件，需要开发人员维护好代码顺序！

③    CSS的串行加载和解析，与JavaScript类似；渲染样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。也需要开发人员或美工合理化CSS结构：合并CSS文件个数，尽量不在html上写样式！

4)       image、flash等组件的加载不会阻塞网页的解析。

5)       JS、CSS中如有重定义，后定义函数将覆盖前定义函数。

注：访问一个页面，说明下载与渲染过程。

2.        渲染的详细过程（渲染引擎）

1)       渲染引擎开始解析HTML文档，并且把标签转换成“内容树”上的DOM节点；

HTML解析器，容错性处理非常好，但还是需要开发者撰写结构良好的代码，进行W3C验证！

2)       然后会解析样式，包括外部的css文件和style元素里的数据。这些样式信息将会和HTML中视觉性的属性组合在一起创建另一个“渲染树”。CSS2规范中描述，每个渲染对象（FireFox里叫“Frame”）表示一个通常对应于这个节点的CSS盒子的矩形区域，它包含像宽、高和位置这样的几何信息。渲染对象和DOM元素是相一致的，但是并不是一对一的关系，非可见元素不会被插入到渲染树。

3)       渲染树构造完成后，进入到布局阶段，会把每个节点精确地调整到它应该在屏幕上出现的位置上。

4)       下一步是绘制，渲染树将会被遍历，每个节点都会通过UI后端层来绘制。

(四)重绘与重排

浏览器尽量做最小可能的动作来响应改变，所以一个元素颜色的改变只会引起这个元素的重绘，元素位置的改变会引起这个元素、它的子节点以及可能的兄弟节点的布局和重绘，大范围的改变，就像增大“html”元素的字体大小，会引起缓存的无效，整个树的重新布局和重绘。

浏览器的主线程是一个事件环，它是一个保持进程活跃的无限循环，等待事件（比如布局和绘制事件）并处理它们，这是Firefox里主事件环的代码：

while (!mExiting)NS_ProcessNextEvent(thread);

减少重排的代价：

① 不要一条一条地修改DOM的样式；

② 把DOM离线后修改（先display:none再任意修改之后显示，或者克隆到内存修改后替换）；

③ 不要把DOM结点的属性值放在一个循环里当成循环里的变量；

④ 为动画的HTML元件使用fixed或absoult的position；

转载于:https://my.oschina.net/ffwcn/blog/159736