html,css,javascript是怎样变成页面的
我要评论（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
浏览器是多进程的，有浏览器主进程，网络进程，渲染进程，插件进程等，在将html，css，javascript解析成一个页面的时候，就需要多个进程的分工合作。
当浏览器接受到一个请求的响应数据，并且该数据的类型（content-type）为text/html，浏览器就会知道这是一个html页面，于是网络进程就会将收到的数据交给渲染进程后，就进入了渲染阶段，也就是在这一个阶段，浏览器会根据数据生成一个新的页面。
在执行的过程中，会被分为很多个子阶段，输入的HTML经过这些子阶段，最后会输出像素，这个处理过程叫做渲染流水线，按照渲染的时间顺序，流水线可分为如下几个子阶段：
构建DOM树
网络进程交给渲染进程的字节流渲染进程是无法识别的，需要先转化为dom树，在渲染进程内部有个html解析器，就负责将字节流转化为dom树
解析器的工作过程
- 通过分词器将字节流转化为token，token分为tag token 和文本token，tag token又分为 starttag token 和 endtag token，比如
就是一个starttag token，就是一个endtag token
- 接着需要将token解析为dom节点，并将dom节点添加到dom树中，这两个过程是同步进行的
- html解析器维护了一个token的栈结构，该token栈主要用来计算节点之间的父子关系，在第一个阶段中生成的token会被按照顺序压入这个栈中，具体规则如下：
- 如果压入到栈中的是StartTag Token，HTML 解析器会为该 Token 创建一个 DOM 节点，然后将该节点加入到 DOM 树中，它的父节点 就是栈中相邻的那个元素生成的节点。
- 如果分词器解析出来是文本 Token，那么会生成一个文本节点，然后将该节点加入到 DOM 树中，文本 Token 是不需要压入到栈中，它的父节点就是当前栈顶 Token 所对应的 DOM 节点。
- 如果分词器解析出来的是EndTag 标签，比如是 EndTag div，HTML 解析器会查看 Token 栈顶的元素是否是 StarTag div，如果是，就将 StartTag div 从栈中弹出，表示该 div 元素解析完成。
样式计算
样式计算的目的是为了计算dom节点中每个元素的具体样式，具体可以分为以下三个步骤：
-
把css转化为浏览器能够理解的结构，可以用document.styleSheet查看
-
转换样式表中的属性值，使其标准化
属性标准化就是将一些属性值转化为渲染引擎容易理解的，标准化的计算值，比如一些字体的单位是em的就需要转化为px
-
算出dom树中每个节点的具体样式
样式计算的第一个规则就是css继承，第二个是层叠
总之，样式计算阶段的目的是为了计算出DOM节点中每个元素的具体样式，在计算过程中需要遵守CSS的继承和层叠两个规则。这个阶段最终输出的内容是每个DOM节点的样式，并被保存在ComputedStyle的结构内。
布局阶段
布局也就是计算出dom树中可见元素的几何位置，chrome在布局阶段需要完成两个任务：创建布局树和布局计算
-
创建布局树
在DOM树一般还会含有很多不可见的元素，比如head标签，还有使用了
display:none属性的元素。所以在显示之前，我们还要额外地构建一棵只包含可见元素布局树。为了构建布局树，浏览器大体上完成了下面这些工作
- 遍历DOM树中的所有可见节点，并把这些节点加到布局中；
- 而不可见的节点会被布局树忽略掉，如
head标签下面的全部内容，再比如body.p.span这个元素，因为它的属性包含dispaly:none，所以这个元素也没有被包进布局树
-
布局计算
现在我们有了一棵完整的布局树。那么接下来，就要计算布局树节点的坐标位置了
分层
接下来，渲染引擎需要为特定的节点生成专用的图层，并生成一颗对应的图层树。图层叠加起来就是最终的页面图像
通常情况下，并不是布局树的每个节点都包含一个图层，如果一个节点没有对应的层，那么这个节点就从属于父节点的图层。如上图中的span标签没有专属图层，那么它们就从属于它们的父节点图层。但不管怎样，最终每一个节点都会直接或者间接地从属于一个层。
满足以下条件才会被提升为单独的层
-
第一点，拥有层叠上下文的元素会被提升为单独的一层
页面是个二维平面，但是层叠上下文能够让HTML元素具有三维概念，这些HTML元素按照自身属性的优先级分布在垂直于这个二维平面的z轴上。你可以结合下图来直观感受下：
-
需要剪裁的地方也会被创建为图层
标签里面的内容超出了标签的宽度和高度，就会出现剪裁。出现这种裁剪情况的时候，渲染引擎会为文字部分单独创建一个层，如果出现滚动条，滚动条也会被提升为单独的层
图层绘制
在完成图层树的构建之后，渲染引擎会对图层树中的每一个图层进行绘制
绘制的过程就是把一个图层的绘制拆分成很多小的绘制指令，然后再把这些指令按照顺序组成一个待绘制列表
绘制列表中的指令其实非常简单，就是让其执行一个简单的绘制操作，比如绘制粉色矩形或者黑色的线等。而绘制一个元素通常需要好几条绘制指令，因为每个元素的背景、前景、边框都需要单独的指令去绘制。所以在图层绘制阶段，输出的内容就是这些待绘制列表。
栅格化操作
绘制列表只是用来记录绘制顺序和绘制指令的列表，而实际上绘制操作是由渲染引擎中的合成线程来完成的。
当图层的绘制列表准备好之后，主线程会把该绘制列表提交（commit）给合成线程
- 通常一个页面可能很大，但是用户只能看到其中的一部分，我们把用户可以看到的这个部分叫做视口（viewport）。
在有些情况下，有的图层可以很大，比如有的页面你使用滚动条要滚动好久才能滚动到底部，但是通过视口，用户只能看到页面的很小一部分，所以在这种情况下，要绘制出所有图层内容的话，就会产生太大的开销，而且也没有必要。
基于这个原因，合成线程会将图层划分为图块（tile），这些图块的大小通常是256x256或者512x512
合成线程会按照视口附近的图块来优先生成位图，实际生成位图的操作是由栅格化来执行的。所谓栅格化，是指将图块转换为位图。而图块是栅格化执行的最小单位。渲染进程维护了一个栅格化的线程池，所有的图块栅格化都是在线程池内执行的，运行方式如下图所示：
通常，栅格化过程都会使用GPU来加速使用，使用GPU生成位图的过程叫做快速栅格化，或者GPU栅格化，生成的位图会保存在GPU内存中
合成和显示
一旦所有的图块都被栅格化，合成线程就会生成一个绘制图块的命令—‘DrawQuad"，然后将该命令提交给浏览器进程
浏览器进程里面有一个叫viz的组件，用来接收合成线程发过来的DrawQuad命令，然后根据DrawQuad命令，将其页面内容绘制到内存中，最后再将内存显示在屏幕上。
到这里，经过这一系列的阶段，编写好的HTML、CSS、JavaScript等文件，经过浏览器就会显示出漂亮的页面了。
总结
一个完整的渲染流程大致可总结为如下
- 渲染进程将HTML内容转换为能够读懂的DOM树结构。
- 渲染引擎将CSS样式表转化为浏览器可以理解的styleSheets，计算出DOM节点的样式。
- 创建布局树，并计算元素的布局信息。
- 对布局树进行分层，并生成分层树。
- 为每个图层生成绘制列表，并将其提交到合成线程。
- 合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。
- 合成线程发送绘制图块命令DrawQuad给浏览器进程。
- 浏览器进程根据DrawQuad消息生成页面，并显示到显示器上
相关文章
- 浏览器是多进程的，有浏览器主进程，网络进程，渲染进程，插件进程等，在将html，css，javascript解析成一个页面的时候，就需要多个进程的分工合作2023-05-01
- 本文为大家整理了常用的文件对应的MIME类型，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-25
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
这篇文章介绍了postman中form-data、x-www-form-urlencoded、raw、binary的区别，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-12-28- 国际组织制定了可以容纳世界上所有文字和符号的字符编码方案，称为Unicode，是通用字符集Universal Character Set的缩写，用以满足跨语言、跨平台进行文本转换、处理的要求2021-11-27
- 这篇文章主要介绍了前端实现字符串GBK与GB2312的编解码(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2020-12-02
这篇文章主要介绍了告别硬编码让你的前端表格自动计算,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-27- 这篇文章主要介绍了浅析Table 和 div 的简介及用法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-08-25
这篇文章主要介绍了隐藏 Web 中的元素方法及优缺点教程，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-13- 这篇文章主要介绍了小项目中怎么防止Vue的闪现画面效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-05-08
一般来说html结构 css表现 javascrip行为，网页布局要考虑到结构，表现，行为分离原则，首先重点放在结构和语义化上面，再考虑CSS，JS等，便于后期维护和分析2020-04-17
最新评论