最小的html渲染引擎,关于前端:浏览器之渲染引擎WebKit

前言

一探浏览器幕后的《三俩事》上一篇的介绍让大家对浏览器的组成有了个含糊的意识:

浏览器是什么?

浏览器(chromium)根本架构

浏览器次要组件

浏览器内核是什么?

JavaScript(js)引擎

渲染引擎

明天呢做渲染模块(WebKit)开展学习探讨。

首先作为程序介绍来说。我应该具体介绍实现一个浏览器应该蕴含哪些内容(介绍一下chromium实现蕴含了哪些内容)。然而思考在前端话题的介绍。只做简略的列举不做具体展开讨论;有趣味能够自行上来学习。

其次按大家耳熟能详的水平来说的话我应该着重讨论一下JS引擎(V8 event-loop相干);然而本节内容还是想先介绍讨论一下渲染引擎(WebKit)。不为别的我就是喜爱玩~ 因为我写这个系列的受众还是偏差前端,所以波及到须要代码染指解说的局部这边采取JavaScript来实现。

渲染引擎

画架构图画习惯了,不要在意俊俏的细节 – -.

由上图能够失去渲染引擎外部解析执行大略过程的信息:

当拜访页面的时候会进行网络申请(network)去获取页面的内容;当如果命中缓存(cache)就会从存储(memory)上间接读取。

HTMLParser 进行html解析通过特定标识进行分块。可解析为CSS DOM JS几个模块。

CSSParser 进行css也是解析。

DOMParser 进行DOM构造解析。(构建过程中发现是JS局部执行5,如果是资源进行异步申请.不会妨碍解析)。

JavaScript 局部丢给JS引擎进行解析。(如果有操作DOM/CSS局部会影响之前的解析,同时会妨碍解析)。

通过上文解析内容构建RenderTree。

解析实现通过renderTree进行布局和绘制。

将最终图像显示在屏幕上。

上面对于上文所提局部进行展开讨论一下 flow me~ gogogo!

Parser 解析

下面Parser的字眼是不是太多了。咱们失去一个信息解析是渲染引擎中十分重要的一个环节，所以首先须要介绍一下解析.

解析文档是指将文档转化成为有意义的构造，也就是可让代码了解和应用的构造。解析失去的后果通常是代表了文档构造的节点树，它称作解析树或者语法树。

解析是以文档所遵循的语法规定(编写文档所用的语言或格局)为根底的。比方说HTML解析那么是在HTML4/5的标准上进行的。所有能够解析的格局都必须对应确定的语法(由词汇和语法规定形成)。

解析过程通常是分成两个子过程：词法剖析和语法分析。

词法剖析是将输出内容宰割成大量标记的过程。(进行切分可辨认大量标记的词段)语法分析是利用语言的语法规定的过程(到底这段语言是要做什么工作)。

HTMLParser

HTML 解析器的工作是将 HTML 标记解析成解析树。

HTML 语法定义:

HTML 的词汇和语法在 W3C 组织创立的标准中进行了定义。

DOM

解析器的输入“解析树”是由 DOM 元素和属性节点形成的树结构。DOM 是文档对象模型 (Document Object Model) 的缩写。它是 HTML 文档的对象示意，同时也是内部内容(例如 JavaScript)与 HTML 元素之间的接口。

解析树的根节点是Document对象。

DOM解析code示意(不能运行的) 首先要理解解析过程肯定是迭代过程:

// 剖析标记<>和属性的正则表达式

var startTag = /^\s]+))?)*)\s*(\/?)>/,

endTag = /^]*>/,

attr = /([-A-Za-z0-9_]+)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g;

function ParserHTML(html){

// 接管参数html

while(html){

// 匹配正文内容

if(html.indexOf("