在前一篇文章:「高频率面试问题」电脑浏览器从键入url到页面展示正中间发生什么事 中,大家也有对浏览器渲染步骤做了一个抽象性的讲解,本篇文章我们将要加强学习这个知识点。

在前一篇文章:「高频率面试问题」电脑浏览器从键入url到页面展示正中间发生什么事 中,大家也有对浏览器渲染步骤做了一个抽象性的讲解,本篇文章我们将要加强学习这个知识点。

首页 > 热点资讯 > 正文

HTMLtile可以不填写

2023-04-03 16:33 来源:网络
HTMLtile可以不填写

在前一篇文章:「高频率面试问题」电脑浏览器从键入url到页面展示正中间发生什么事 中,大家也有对浏览器渲染步骤做了一个抽象性的讲解,本篇文章我们将要加强学习这个知识点。

对于许多前端工程师而言,平时质量关键致力于业务开发,对浏览器渲染环节很有可能不是很了解。事实上这一阶段至关重要,掌握浏览器渲染全过程,能让我们知道大家所写的HTML、CSS、JS编码是怎样被分析,进而渲染成一个界面的,在网页页面性能调优时有明确的解决策略

我们首先来说一个问题:

HTML、CSS、JS文档用浏览器中是怎样转换成界面的?

假如你回应不起来,那么就来看看吧。

依照渲染的先后顺序,渲染全过程可分为以下几个子环节:搭建DOM树、样式测算、布局环节、分层次、栅格化和生成表明。

下边详尽看看每一个阶段都做了哪些事儿。

1. 搭建DOM树

HTML文本文档叙述一个界面的构造,可是电脑浏览器不能直接认知和应用HTML,因此需要根据HTML在线解析将HTML转化成电脑浏览器能理解的构造——DOM树。

HTMLword里全部内容均为节点,各节点间有层级关系,彼此之间相接,组成DOM树。

搭建全过程:载入HTML文档字节数(Bytes),将字节转换成标识符(Chars),根据标识符明确标识(Tokens),将标识转化成节点(Nodes),以节点为依据搭建DOM树。参照下面的图:

开启Chrome的微信开发工具,在控制台输入 document 后回车键,就可以看到一个完整的DOM树形结构,如图所示:

在控制面板直接打印的DOM结构与HTML具体内容几乎一样,但跟HTML不一样的是,DOM是储存在运行内存里的树状结构,能通过JavaScript来查看或修改内容。

2. 样式测算

样式测算这一阶段,就是为了算出DOM节点中每一个元素主要表现样式。

2.1 分析CSS

CSS样式能通过下边三种方式引进:

  • 根据link引入外部CSS文档
  • style 标识里的CSS
  • 元素style属性嵌入的CSS

和HTML一样,电脑浏览器不能直接了解纯文本的CSS样式,必须通过CSS在线解析将CSS分析成 styleSheets 构造,也就是常说的 CSSOM树。

styleSheets结构一样具有查询和改动作用:

document.styleSheets

2.2 属性值规范化

属性值规范化看表面意思有点儿不太好了解,我们可以通过下面一个事例一起来看看什么叫属性值规范化:

写CSS样式时,大家在设计color属性系数的情况下,总会用white、red等,但这种值浏览器渲染模块不容易接受,因此需要将所有值转化成渲染模块容易接受的、规范化的测算值,这一过程便是属性值规范化。

white规范化后数值为 rgb(255, 255, 255)

2.3 测算DOM树中每一个节点的样式

进行样式的属性值规范化后,那就需要测算每一个节点的样式属性,这一阶段CSS有两种标准我们应该清晰:

  • 传承标准:每一个DOM节点都包含了父节点的样式
  • 堆叠标准:堆叠是CSS的一个本质特征,是一个重新定义了如何合并来源于好几个源的属性系数的优化算法。

样式测算环节就是为了算出DOM节点中每一个元素实际样式,在预估的时候需要遵循CSS的传承和堆叠2个标准。

该环节最后导出内容就是每一个DOM节点的样式,且被储存在 ComputedStyle 的构造中。

3. 布局环节

通过上边的两个步骤,己经拿到DOM树和DOM树中元素的样式,下面必须测算DOM树中由此可见元素几何图形部位,这一计算步骤便是布局。

3.1 建立布局树

在DOM树其中包含了一些看不到元素,比如 head 标识,增设了 display:none 属性元素,所以我们要附加搭建一棵只包括由此可见元素布局树。

搭建全过程:从DOM树的根节点逐渐赋值,把所有看得到的节点加进布局树中,忽视看不到的节点。

3.2 布局测算

到接下来我们也就有了一棵搭建好一点的布局树,就可以去测算布局树节点的经纬坐标了。从根节点逐渐赋值,融合上边测算所得到的样式,明确每一个节点目标在页面中的实际大小部位,将这些数据储存在布局树中。

布局环节输出是一个盒子模型,他会准确地捕捉每一个原素在屏幕里的准确部位与尺寸。

4. 分层次

如今我们有了布局树,知道了每一个元素具体地址信息内容,可是没法逐渐制作网页页面,由于页面上会出现像3D转换、页面滚动、或是用 z-index 开展z轴排列等复杂实际效果,为了能比较方便完成这种实际效果,渲染模块还要为特定节点形成专用图层,并生成一棵相对应的图层树(LayerTree)。

在Chrome电脑浏览器中,大家能打开微信开发工具,挑选 Elements-Layers 标识,就能看到界面的分层次状况,如图所示:

电脑浏览器页面事实上被划分成许多图层,这种图层累加后生成了最后页面。

到这儿,大家打造了二棵树:布局树和图层树。下面我们就来看看这二棵树相互关系:

通常情况下,并非布局树每一个节点都包含一个图层,如果一个节点并没有相对应的图层,那么这样的节点先从归属于父节点的图层。

那节点需要满足什么样的条件才能被提升为一个独立的图层?只要符合下边其中一个标准就可以:

  • 有着层叠上下文属性元素能被提升为独立的一个图层
  • 必须裁切(clip)的区域就会被建立为图层。

5. 图层制作

搭建好图层树以后,渲染模块会对图层树中的每一个图层开展制作。

渲染模块完成图层制作,会将一个图层的制作拆分成许多小一点制作命令,再将这种命令依照次序组成一个制作目录。

6. 栅格化(raster)实际操作

制作一个图层的时候会生成一个制作目录,这就是用来纪录制作次序和制作命令的目录,事实上制作实际操作是通过渲染模块里的生成进程来实现的。

根据下面的图来看一下渲染主线程和生成进程相互关系:

当图层的制作目录提前准备之后,主线程会将该制作目录递交给生成进程,生成进程开始运动

最先生成进程会把图层划分成图块(tile),图块尺寸一般是 256256 或是 512512。

随后生成进程会依据视口周边的图块来优先选择形成位图文件,具体形成位图文件的操作是通过栅格化去执行的。所说栅格化,是指由图块转换成位图文件。而图块是栅格化实施的最小的单位。渲染过程保护了一个栅格化的线程池,每一个图块栅格化都在线程池内实施的,运行模式如图所示:

7. 生成和表明

一旦全部图块都已经被光栅化,生成进程便会生成一个绘制图块指令——“DrawQuad”,再将该指令递交给浏览器进程。

浏览器进程里面有一个名字叫 viz 的部件,用于接受生成进程发来的 DrawQuad 指令,再根据命令执行。 DrawQuad 指令,把它网页内容制作到内存中,接着再将内存显示屏幕上。

很多年开发设计老程序员褔利赠予:网页设计,网站建设,web前端开发,从零基础逐渐的HTML CSS JavaScript。jQuery,Vue、React、Ajax,node,angular架构直到手机端小程序项目实战演练【短视频+专用工具+电子书籍+系统软件路线地图】都是有梳理,必须的小伙伴可以找我,推送“前面”等3秒之后就可以获得领到详细地址,赠给每一位对程序编写感兴趣的朋友

8. 汇总

一个完整的渲染步骤能够归纳如下:

  • 1、渲染过程将HTML具体内容转换成电脑浏览器可以了解的DOM树形结构。
  • 2、渲染模块将CSS样式表转化为电脑浏览器可以接受的styleSheets,算出DOM节点的样式。
  • 3、建立布局树,并计算机所需元素布局信息内容。
  • 4、对布局树开展分层次,并生成分层次树。
  • 5、为每一个图层形成制作目录,并把它提交到生成进程。
  • 6、生成进程将图层分图块,并栅格化将图块转化成位图文件。
  • 7、生成进程推送绘制图块指令给浏览器进程。浏览器进程依据命令形成网页页面,并表明到显示屏上。

渲染环节中两个大家经常会听到这个概念:重新排列和重绘。在这篇文章中也不细说了,下一篇文章再详解。

文章内容来源于网络,不代表本站立场,若侵犯到您的权益,可联系多特删除。(联系邮箱:9145908@qq.com)