文章同步到github《Webkit技术内幕》之页面渲染过程

最近拜读了传说中的《Webkit技术内幕》一书，有很大收获，尤其是对页面渲染有了较深的认识。由于功力有限，而且书中设计到较多的底层也无法理解，所以本文主要整理和分享一下自己理解的基于Webkit内核浏览器的页面渲染的整体过程，不做深入介绍(也做不了深入介绍)。

浏览器内核

浏览器之所以能呈现出更重页面，正是由于浏览器内核的存在，也被称为渲染引擎，主要作用就是，也就是能把HTML/CSS/JavaScript文本其相关的资源转化转化成可视化可交互的图像页面，这个过程就是渲染。

四大主流内核

内核 浏览器 内核识别码
Trident IE、360 -ms
Gecko Firefox(火狐) -moz
presto Opera(欧朋) -o
Webkit Chrome(谷歌) safari(苹果) -webkit

Webkit架构

本文主要是基于Webkit内核，所以先放一张整理Webkit架构图(并非全部模块, 主要包含主要模块),大致介绍一下Webkit的架构

自下而上主要分为三层:

  • 1.操作系统层
  • 2.Webkit渲染过程中依赖的很多第三方模块
  • 3.Webkit层，主要包含webCore、渲染引擎层、嵌入式接口层，绑定层

1.操作系统层

由Webkit可以运行在不同的操作系统上，浏览器也可以运行在不同的操作系统上，另外与对磁盘和内存的操作都需要操作系统来操作，所以需要操作系统支持。说白了就是一切需要对硬件操作的程序都需要操作系统的支持。

2.第三方模块层

资源的获取、页面的渲染等需要依赖第三方库来完成，网络库、图形库、视频库等都是Webkit之所以能工作的基础，Webkit来根据需要来使用相应的库。

3. WebKitCore

WebKitCore部分是所有浏览器共享的部分，是渲染网页的基础，包括HTML解释器、CSS解释器、SVG、DOM、渲染树等

  • 1.HTML解释器

解释HTML文本的解释器，把html文档解析成DOM(文档对象模型)树，表示整个html文档

  • 2.CSS解释器

问DOM树中各个元素对象计算出样式信息，后计算后面的网页布局做基础

  • 3.布局

把DOM树和解析后的CSS树的信息结合起来，形成一个包含页面所有元素和样式的信息的一个内部表示模型

  • 4.绘图

使用第三方依赖的库如2D/3D图形库等将布局计算后的节点绘制成图像

4. JavaScript引擎

对于JavaScript引擎有必要说一下，JavaScript引擎就是将JavaScript代码解析处理并运行的环境，负责整个JavaScript程序的编译及执行过程。

1.webkit默认的引擎是JavaScriptCore引擎，对于不同浏览器对于引擎的实现JavaScript引擎的实现也不一样，比如Chrome浏览器是基于V8引擎等。

2.另外在解析/语法分析，构建出"抽象语法树"之后，会将"抽象语法树"进行编译，转化为一组机器指令，拿一个例子来说

var a = 1

JavaScript会创建一个变量a，并分配内存，将1这个值存储在a的变量中。

3.JavaScript可以修改网页内容，也就是修改DOM和和CSS样式，事实上，也正是javaScript代码通过DOM和CSSOM暴露出的接口来进行修改，从而改变页面渲染的效果

5. 绑定层和嵌入式接口层

绑定层和嵌入式接口层最主要与Webkit项目的移植有关，就比如基于linux内核的CentOS、Ubuntu等系统一样。嵌入式接口层主要提供给浏览器调用，不同浏览器厂商会基Webkit以及对外暴露的接口实现自己的功能。

页面渲染过程

从输入url开始整体介绍一下页面的渲染流程，然后具体步骤再详细加以说明

  • 1.用户输入url按下回车后，浏览器开启一个进程对url进行分析，如果是http协议，按照web方式处理
  • 2.根据域名进行DNS解析，解析之后发送第二次get请求，进行HTTP协议会话，以获取资源
  • 3.此时进入到web服务器上的 Web Server，如 Apache、Tomcat、Node.JS 等web服务器;
  • 4.继续进入后端应用程序，如PHP、Java等找到对应请求处理，最后由web服务器传送给浏览器资源
  • 5.因为资源的位置以URL(统一资源定位符)来区分，发送请求时，如果本地有缓存，发送请求的同时会带上缓存的相关信息，与服务器资源作比较，比如更新时间等，服务器如果没有更新则返回304，直接使用缓存，否则向服务器请求资源。
  • 5.浏览器开始下载HTML文档
  • 6.浏览器内核开始解析文档(整个html文档就是一大串字符串)，构建DOM树，解析成DOM树的过程中，如果遇到JavaScript代码，则交给JavaScript引擎来执行，等到DOM树构建完成后触发DOMContentLoaded事件
  • 7.解析CSS，构建CSS树，构建CSSOM(在浏览器控制台输入document.styleSheets按下回车就可以看到styleSheetList的集合了)
  • 8.CSS解析完成之后，在DOM树的基础上附加解释后的样式信息，形成RenderObject树，在RenderObject节点创建的同时，webkit会根据网页层次构建出RenderLayer树，同时构建出一个虚拟的绘图上下文(与平台无关的抽象类)，最后根据绘图上下文(需要依赖2D/3D库)进行绘制，最终也就是用户看到的可交互的页面。

页面渲染细节

上面介绍了页面从输入url发送请求后到页面渲染的整体流程，下面补充一下在这整个过程中的一些细节知识点，方面更好的理解页面的渲染过程

1. 首先理解页面是分层次的，比如说如下代码片段代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div>

        <p>aaa</p>

        <video src="xxx.mp4"></video>

    </div>

</body>

</html>

当网页构建层次的时候，html元素为根层，此时创建一个层，html元素的所有子节点、子节点的子节点，依次类推，如dody，div，p为普通元素，并不会创建新的层次接口，video元素需要进行创建新层来进行视频处理和渲染。

如下情况，都需要建立新的RenderLayer节点

备注: 图片直接截取于《Webkit技术内幕》

2.从资源字节流到构建成DOM树

备注: 图片直接截取于《Webkit技术内幕》

  • 1.分词/词法分析，从字节流到字符流流(串)，是分段的词法解释器会将字符串解释成标记(相当于字典中的词语)

如 var a = 1; var、a、=、1 、;。空格是否会被当作词法单元，取决于空格在
这门语言中是否具有意义。

  • 2.解析/语法分析，基于词法解释器生成的新标记，构建成“抽象语法树”，解析器尝试将其与某条语法规则进行匹配。如果发现了匹配规则，解析器会将一个对应于该标记的节点添加到解析树中，然后继续请求下一个标记

3.HTML文档对应的DOM树的对应关系

4.DOM树和RenderObject树之间的对应关系

备注: 图片直接截取于《Webkit技术内幕》

5. RenderObject树与RenderLayer树之间的对应关系

多对一的关系，RenderObject多个节点可以对应RenderLayer的一个层次结构

备注: 图片直接截取于《Webkit技术内幕》

以上文章就是整理的页面渲染整体流程，很多细节没有具体讲，比如解析html文档时，利用栈来处理、绘制3D图形的GPU加速等、由于能力有限不敢多讲，也难讲清楚，这些还是去看大神们具体的书比较，感兴趣的小伙伴，《WebKit技术内幕》了解一下

本文主要参考资料:

WebKit技术内幕
Chrome 渲染优化 - 层模型
前端文摘：深入解析浏览器的幕后工作原理

《Webkit技术内幕》之页面渲染过程的更多相关文章

  1. WebKit技术内幕

    WebKit技术内幕(浏览器内核|渲染引擎| HTML5| Chromium项目Committer重磅作品) 朱永盛 著   ISBN 978-7-121-22964-0 2014年6月出版 定价:7 ...

  2. webkit技术内幕读书笔记 (四)

    资源缓存 资源缓存的目的是为了提高资源使用的效率,其基本思想是建立一个资源的缓存池,当需要请求资源的时候先去资源池查找是否有相应的资源,如果没有则向服务器发送请求,webkit收到资源后将其设置到该资 ...

  3. webkit技术内幕读书笔记 (二、三)

    可视区和网页 通常网页比屏幕的可视区面积要大,因此当网页内容在可视区中放不下时,一般浏览器会提供滚动条. 从URL到构建完DOM树的过程 当用户输入网页URL的时候,WebKit调用其资源加载器加载该 ...

  4. 二、Vue 页面渲染过程

    前言 上篇博文我们依葫芦画瓢已经将hello world 展现在界面上啦,但是是不是感觉新虚虚的,总觉得这么多文件,项目怎么就启动起来了呢?怎么访问到8080 端口就能进入到我们的首页呢.整个的流程是 ...

  5. webkit技术内幕读书笔记 (一)

    本文部分摘录自互联网. Chromeium与Chrome Chromium是Google为发展自家的浏览器Google Chrome而打开的项目,所以Chromium相当于Google Chrome的 ...

  6. webkit 技术内幕 笔记 三

    浏览器内核及特性 在浏览器中,一个很重要的模块,是将页面转变成可视化的图像结果,这就是浏览器的内核,通常被称作渲染引擎.渲染:就是根据描述或者定义构建数学模型,通过模型生成图像的过程.浏览器的渲染引擎 ...

  7. html页面渲染过程

    1.解析html文件,创建DOM树 自上而下解析,遇到任何样式(link.style)和脚本(script)都会阻塞 1)css加载不会阻塞html文件的解析,但会阻塞dom的渲染 2)css加载会阻 ...

  8. webkit 技术内幕 笔记 二

    浏览器历史 80年代末-90年代初:worldwideweb(nexus) -- Berners-Lee 1993: Mosaic浏览器,后来叫网景(Netscape)--Marc Andreesse ...

  9. webkit 技术内幕 笔记 一

    目前应用最广的渲染引擎项目-webkit webkit 内部渲染html网页的原理 webkit 内容工作原理 web 的接入口浏览器 浏览器的内核-渲染引擎(像webkit)

随机推荐

  1. 大型网站技术架构，4网站的高性能架构之Web前端性能优化

    一般说来Web前端指网站业务逻辑之前的部分,包括浏览器加载.网站视图模型.图片服务.CDN服务等,主要优化手段有优化浏览器访问.使用反向代理.CDN等. 4.2.1 浏览器访问优化 1.减少http请 ...

  2. linux让命令或程序在终端后台运行的方法（Ubuntu/Fedora/Centos等一样适用）

    https://segmentfault.com/a/1190000008314935

  3. vue2.0 之 douban （二）创建自定义组件tabbar

    1.大体布局 这个组件分为两部分:第一个是组件的外层容器,第二个是组件的子容器item,子组件里面又分为图片和文字组合.子组件有2个状态,一个默认灰色的状态,一个选中状态,我们来实现一下这个组件的布局 ...

  4. 线段树板子1（洛谷P3372）

    传送 一道线段树板子(最简单的) 似乎之前在培训里写过线段树的样子?不记得了 何为线段树? 一般就是长成这样的树,树上的每个节点代表一个区间.线段树一般用于区间修改,区间查询的问题. 我们如何种写一棵 ...

  5. 模拟赛DAY 2 T1江城唱晚

    [题目背景] 墙角那株海棠,是你种下的思念. 生死不能忘,高烛照容颜. 一曲江城唱晚,重忆当年坐灯前, 青衫中绣着你留下的线. ——银临<江城唱晚> [问题描述] 扶苏是个喜欢一边听古风歌 ...

  6. Catalan numbers

    w https://en.wikipedia.org/wiki/Catalan_number 路径规划

  7. Vue实战：音乐播放器（一） 页面效果

    先看一下效果图 首页 歌单详情页 歌手列表 歌手详情页 排行页面 榜单的详情页(排序样式) 搜索页面 搜索结果 播放器内核 歌词自动滚动 播放列表 用户中心

  8. AssertionError: View function mapping is overwriting an existing endpoint function: insertCase

    首先,理解这个错误是什么意思,以及出现的原因: 使用Flask定义URL的时候,如果出现"AssertionError: View function mapping is overwriti ...

  9. 像计算机科学家一样思考python－第3章 函数

    在程序设计中,函数是指用于进行某种计算的一系列语句的有名称的组合.定义一个函数时,需要指定函数的名称并写下一系列程序语句.之后,就可以使用名称来“调用”这个函数 3.1函数调用 一个函数调用的例子 & ...

  10. MongoDB--(NoSQL)入门介绍

    NoSQL中比较优秀的产品 windows 下载安装 shell 基本操作(javascript 引擎) BSON扩充的数据类型(JSON的扩展,浮点型,日期型的扩充) step1.创建数据库 use ...