前端渲染

来源：互联网发布：雅思有模考软件么编辑：程序博客网时间：2024/06/06 05:48

一. 浏览器构成

用户界面－包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。
浏览器引擎－用来查询及操作渲染引擎的接口。
渲染引擎－用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来。
网络－用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作。
UI后端－用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。
JS解释器－用来解释执行JS代码。
数据存储－属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术。

二.渲染引擎

1. 渲染主流程

解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树

（1）dom树：由标签构成的节点树
（2）render 树：添加了style属性的矩形区域
（3）布局render树：确定每个节点在屏幕上的确切坐标
（4）绘制render树：此处会涉及到页面的回流，重绘等问题
此过程不会，等到所有html都解析完才去构建和布局render树。它是解析完一部分内容就显示一部分内容。

2. DOM树

html不能被一般的自顶向下或自底向上的解析器所解析,其解析阶段主要包括：符号化，构建树。

（1）符号化的过程如下：

（2）树的构建过程：
在这个阶段后，浏览器将文档标记为可交互的，并开始解析处于延时模式中的脚本——这些脚本在文档解析后执行。
　　文档状态将被设置为完成，同时触发一个load事件。
（3）容错处理
1. 未闭合的标签
2. 不能直接添加元素，自动补齐HTML HEAD BODY等
3. 想在一个行内元素中添加块状元素。关闭所有的行内元素，直到下一个更高的块状元素。
4. 如果这些都不行，就闭合当前标签直到可以添加该元素。
比如：

    <p>1<p>2</p>3</p>

会解析为

<p>1</p><p>2</p>3<p></p>

（4）脚本及样式表处理

关于script脚本的解析，之前一直处于解析到script标签就开始执行，并阻断文档的解析，直到执行完成，若js为外部引用则还需等待返回。HTML4和HTML5可将脚本标识为defer，以使其不阻塞文档解析，并在文档解析结束后执行。
Webkit和Firefox都做了预解析优化，当执行脚本时，另一个线程解析剩下的文档，并加载后面需要通过网络加载的资源。
Firefox在存在样式表还在加载和解析时阻塞所有的脚本，而Chrome只在当脚本试图访问某些可能被未加载的样式表所影响的特定的样式属性时才阻塞这些脚本。

3. render树

包含可见的DOM元素（包含visibility：hidden），Render 树是衔接浏览器排版引擎和渲染引擎之间的桥梁，它是排版引擎的输出，渲染引擎的输入。下图是dom树和渲染树的对应关系

其中：

并非一一对应
一对多：如，select元素有三个渲染对象——一个显示区域、一个下拉列表及一个按钮。
多个渲染对象：宽度不够折行或不规范的html
浮动和绝对定位的元素在文本流之外，在两棵树上的位置不同，渲染树上标识出真实的结构，并用一个占位结构标识出它们原来的位置。

（1）创建
html和body标签将构建渲染树的根，这个根渲染对象对应被css规范称为containing block的元素——包含了其他所有块元素的顶级块元素。它的大小就是viewport——浏览器窗口的显示区域，Firefox称它为viewPortFrame，webkit称为RenderView，这个就是文档所指向的渲染对象，树中其他的部分都将作为一个插入的Dom节点被创建。
（2）样式计算
需要注意的是在书写样式时避免不必要的嵌套，在样式属性遍历时，会从右至左匹配。
根据dom节点生成规则树
有html如下

 <html><body><div class="err" id="div1"><p>this is a<span class="big"> big error </span>this is also a<span class="big"> verybigerror</span>error</p></div><div class="err" id="div2">another error</div></body></html>

dom树为

有css样式如下：

1.div {margin:5px;color:black}2.err {color:red}3.big {margin-top:3px}4.div span {margin-bottom:4px}5.#div1 {color:blue}6.#div2 {color:green}

规则树为：

对应上下文树：

样式表的匹配和层级顺序。

文章参考
http://taligarsiel.com/Projects/howbrowserswork1.htm 原文
https://www.cnblogs.com/rainy-shurun/p/5603686.html 译文

阅读全文

0 0