这篇文章主要从渲染进程的的视角,来看渲染过程,主线程做了那些事情,导航流程、GPU快速栅格化图像和浏览器主进程输入到显卡后缓冲区部分一带而过,之后文章详细介绍
上一篇 浏览器渲染(进程视角)文章从浏览器的进程模型演进分析了打开一个页面的渲染进程数量,及每个渲染页面的连接,上下文组等内容,那么对于渲染进程内所作的事情怎样的呢?
如上图页面生成过程中进程之间的关系如下:
给浏览器进程
接下来看今天文章的重点,渲染流水线
渲染进程要做的事情大部分由主线程, IO线程,合成线程,光栅化线程池配合网络进程,浏览器进程,GPU进程完成一帧图像的绘制,其中IO线程主要负责和网络进程、浏览器主进程之间的交互将任务添加到消息队列尾部,主线程通过循环机不断地消费任务队列中的任务,按照渲染的时间顺序,渲染流水线可分为如下几个子阶段:构建 DOM 树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成。
当网络进程接收到http响应头内容为Content-Type: text/htmls时,发送消息给浏览器进程,浏览器进程开始加载渲染进程,并为网络进程和渲染进程数据通道,将html字节流实时发送给渲染进程,DOM就是对html文档结构的一个表述
html文档要经过htmlpaser处理转换成最终的dom树,HTML解析器并不是等待整个文档加载完成之后在解析结构,而是从网络进程和渲染进程建立的数据管道不断的读取解析。大概可以过程如下:
html解析器执行过程分为三个阶段:
html解析器维护了一个token栈结构,主要用来计算节点之间的父子关系,按照字节流的顺序入栈、出栈将字节流进行分词。token将标签和文本划分为 tagToken
,textToken
,tagToken又分为startToken
,endToken
一个简单的例子:
<html>
<body>
<div>
<h2>text3</h2>
<p>text4</p>
</div>
</body>
</html
按照顺序,分词器会将标签和文本解析为如下的token
接下来token栈和dom树生成的过程
上文已经介绍html解析器是按照顺序进行分词解析标签,当遇到js文件、js内嵌脚本时会阻塞DOM
document.styleSheets
的接口,所以不管js有没有操作cssom,都要先下载css,解析css,在执行js脚本js阻塞dom的耗时点在网络下载、js文件的大小,所以从网络层面,js体积优化
未完,渲染子阶段待续...
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。