web前端页面渲染机制是什么

发布时间:2021-11-17 14:57:00 作者:iii
来源:亿速云 阅读:201

本篇内容介绍了“web前端页面渲染机制是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

浏览器

在介绍浏览器工作流程之前,先了解一下主流浏览器的基础结构,本文所介绍的浏览器主要为开源的Chrome,FireFox及部分开源的Safari,这也是目前市场占比***的几大浏览器,以本人博客网站为例,可以大致看出各浏览器使用比例:

web前端页面渲染机制是什么

浏览器基础结构

浏览器基础结构主要包括如下7部分:

1.用户界面(User Interface):用户所看到及与之交互的功能组件,如地址栏,返回,前进按钮等;

2.浏览器引擎(Browser engine):负责控制和管理下一级的渲染引擎;

3.渲染引擎(Rendering  engine):负责解析用户请求的内容(如HTML或XML,渲染引擎会解析HTML或XML,以及相关CSS,然后返回解析后的内容);

4.网络(Networking):负责处理网络相关的事务,如HTTP请求等;

5.UI后端(UI backend):负责绘制提示框等浏览器组件,其底层使用的是操作系统的用户接口;

6.JavaScript解释器(JavaScript interpreter):负责解析和执行JavaScript代码;

7.数据存储(Data storage):负责持久存储诸如cookie和缓存等应用数据。

web前端页面渲染机制是什么

浏览器内核

各大主要浏览器使用内核也是有差别的,大致可以分为以下几类:

网络

当用户访问页面时,浏览器需要获取用户请求内容,这个过程主要涉及浏览器网络模块:

1.用户在地址栏输入域名,如baidu.com,DNS(Domain Name  System,域名解析系统)服务器根据输入的域名查找对应IP,然后向该IP地址发起请求;

DNS

web前端页面渲染机制是什么

2.浏览器获得并解析服务器的返回内容(HTTP response);

3.浏览器加载HTML文件及文件内包含的外部引用文件及图片,多媒体等资源。

DNS预解析(DNS prefetch)

浏览器DNS解析大多时候较快,且会缓存常用域名的解析值,但是如果网站涉及多域名,在对每一个域名访问时都需要先解析出IP地址,而我们希望在跳转或者请求其他域名资源时尽量快,则可以开启域名预解析,浏览器会在空闲时提前解析声明需要预解析的域名,如:

web前端页面渲染机制是什么

多进程

我们通常说JavaScript执行是单进程的,但是浏览器网络部分通常是有几个平行进程同时开启,但是也会有

限制,一般为2-6个。

渲染引擎及关键渲染路径(Critical Rendering Path)

渲染引擎所做的事是将请求内容展现给我们,默认支持HTML,XML和图片类型,对于其他诸如PDF等类型的内容则需要安装相应插件,但浏览器的展示工作流程基本是一样的。

通过网络模块加载到HTML文件后渲染引擎渲染流程如下,这也通常被称作关键渲染路径(Critical Rendering Path):

1.构建DOM树(DOM tree):从上到下解析HTML文档生成DOM节点树(DOM tree),也叫内容树(content tree);

2.构建CSSOM(CSS Object Model)树:加载解析样式生成CSSOM树;

3.执行JavaScript:加载并执行JavaScript代码(包括内联代码或外联JavaScript文件);

4.构建渲染树(render tree):根据DOM树和CSSOM树,生成渲染树(render  tree);渲染树:按顺序展示在屏幕上的一系列矩形,这些矩形带有字体,颜色和尺寸等视觉属性。

5.布局(layout):根据渲染树将节点树的每一个节点布局在屏幕上的正确位置;

6.绘制(painting):遍历渲染树绘制所有节点,为每一个节点适用对应的样式,这一过程是通过UI后端模块完成;

web前端页面渲染机制是什么

为了更友好的用户体验,浏览器会尽可能快的展现内容,而不会等到文档所有内容到达才开始解析和构建/布局渲染树,而是每次处理一部分,并展现在屏幕上,这也是为什么我们经常可以看到页面加载的时候内容是从上到下一点一点展现的。

流程图

Webkit渲染引擎流程如下图:

web前端页面渲染机制是什么

Gecko渲染引擎流程如下图:

web前端页面渲染机制是什么

如上图,Webkit浏览器和Gecko浏览器渲染流程大致相同,不同的是:

1.Webkit浏览器中的渲染树(render tree),在Gecko浏览器中对应的则是框架树(frame tree),渲染对象(render  object)对应的是框架(frame);

2.Webkit中的布局(Layout)过程,在Gecko中称为回流(Reflow),本质是一样的,后文会解释回流的另一层含义–重新布局;

3.Gecko中HTML和DOM树中间多了一层内容池(Content sink),可以理解成生成DOM元素的工厂。

单进程

不同于网络部分的多进程渲染引擎是单线程工作的,意味着渲染流程是一步一步渐进完成的。

解析文档(parser HTML)

在详细介绍浏览器渲染文档之前,先应该理解浏览器如何解析文档:解析文档的顺序,对于CSS和JavaScript如何处理等。

解析顺序

浏览器按从上到下的顺序扫描解析文档;

解析样式和脚本

<script defer src="script.js">

构建DOM树

DOM,即文档对象模型(Document Object Model),DOM树,即文档内所有节点构成的一个树形结构。

假设浏览器获取返回的如下HTML文档:

<!doctype html>      <html>      <head>        <link rel="stylesheet" href="./theme.css"></link>        <script src="./config.js"></script>        <title>关键渲染路径</title>      </head>      <body>        <h2 class="title">关键渲染路径</h2>        <p>关键渲染路径介绍</p>        <footer>@copyright2017</footer>      </body>      </html>

首先浏览器从上到下依次解析文档构建DOM树,如下:

web前端页面渲染机制是什么

构建CSSOM树

CSSOM,即CSS对象模型(CSS Object Model),CSSOM树,与DOM树结构相似,只是另外为每一个节点关联了样式信息。

theme.css样式内容如下:

html, body {      width: 100%;      height: 100%;      background-color: #fcfcfc;  }  .title {      font-size: 20px;  }  .footer {      font-size: 12px;      color: #aaa;  }

构建CSSOM树如图:

web前端页面渲染机制是什么

执行JavaScript

上文已经阐述了文档解析时对脚本的处理,我们得知脚本加载,解析和执行会阻塞文档解析,而在特殊情况下样式的加载和解析也会阻塞脚本,所以现在推荐的实践是标签放在标签前面。

构建渲染树(render tree)

DOM树和CSSOM树都构建完了,接着浏览器会构建渲染树:

渲染树,代表一个文档的视觉展示,浏览器通过它将文档内容绘制在浏览器窗口,展示给用户,它由按顺序展示在屏幕上的一系列矩形对象组成,这些矩形对象都带有字体,颜色和尺寸,位置等视觉样式属性。对于这些矩对象,FireFox称之为框架(frame),Webkit浏览器称之为渲染对象(render  object, renderer),后文统称为渲染对象。

这里把渲染树节点称为矩形对象,是因为,每一个渲染对象都代表着其对应DOM节点的CSS盒子,该盒子包含了尺寸,位置等几何信息,同时它指向一个样式对象包含其他视觉样式信息。

渲染树与DOM树

每一个渲染对象都对应着DOM节点,但是非视觉(隐藏,不占位)DOM元素不会插入渲染树,如元素或声明display:  none;的元素,渲染对象与DOM节点不是简单的一对一的关系,一个DOM可以对应一个渲染对象,但一个DOM元素也可能对应多个渲染对象,因为有很多元素不止包含一个CSS盒子,如当文本被折行时,会产生多个行盒,这些行会生成多个渲染对象;又如行内元素同时包含块元素和行内元素,则会创建一个匿名块级盒包含内部行内元素,此时一个DOM对应多个矩形对象(渲染对象)。

渲染树及其对应DOM树如图:

web前端页面渲染机制是什么

布局(Layout)或回流(reflow,relayout)

创建渲染树后,下一步就是布局(Layout),或者叫回流(reflow,relayout),这个过程就是通过渲染树中渲染对象的信息,计算出每一个渲染对象的位置和尺寸,将其安置在浏览器窗口的正确位置,而有些时候我们会在文档布局完成后对DOM进行修改,这时候可能需要重新进行布局,也可称其为回流,本质上还是一个布局的过程,每一个渲染对象都有一个布局或者回流方法,实现其布局或回流。

流(flow)

HTML采用的是基于流的方式定位布局,其按照从左到右,从上到下的顺序进行排列,详见CSS定位机制。

全局布局与局部布局

对渲染树的布局可以分为全局和局部的,全局即对整个渲染树进行重新布局,如当我们改变了窗口尺寸或方向或者是修改了根元素的尺寸或者字体大小等;而局部布局可以是对渲染树的某部分或某一个渲染对象进行重新布局。

脏位系统(dirty bit system)

大多数web应用对DOM的操作都是比较频繁,这意味着经常需要对DOM进行布局和回流,而如果仅仅是一些小改变,就触发整个渲染树的回流,这显然是不好的,为了避免这种情况,浏览器使用了脏位系统,只有一个渲染对象改变了或者某渲染对象及其子渲染对象脏位值为”dirty”时,说明需要回流。

表示需要布局的脏位值有两种:

布局过程

布局是一个从上到下,从外到内进行的递归过程,从根渲染对象,即对应着HTML文档根元素,然后下一级渲染对象,如对应着元素,如此层层递归,依次计算每一个渲染对象的几何信息(位置和尺寸)。

几何信息-位置和尺寸,即相对于窗口的坐标和尺寸,如根渲染对象,其坐标为(0, 0),尺寸即是视口

尺寸(浏览器窗口的可视区域)。

每一个渲染对象的布局流程基本如:

1.计算此渲染对象的宽度(width);

2.遍历此渲染对象的所有子级,依次:

a.设置子级渲染对象的坐标

b.判断是否需要触发子渲染对象的布局或回流方法,计算子渲染对象的高度(height)

3.设置此渲染对象的高度:根据子渲染对象的累积高,margin和padding的高度设置其高度;

4.设置此渲染对象脏位值为false。

强制回流

在渲染树布局完成后,再次操作文档,改变文档的内容或结构,或者元素定位时,会触发回流,即需要重新布局,如请求某DOM的”offsetHeight”样式信息等诸多情况:

$('body').css('padding'); // reflow  $('body')[0].offsetHeight; // relow

有过CSS3动画开发经验的同学可能会有经历,如下入场动画:

.slide-left {      -webkit-transition: margin-left 1s ease-out;      -moz-transition: margin-left 1s ease-out;      -o-transition: margin-left 1s ease-out;      transition: margin-left 1s ease-out;  }

然后执行如下脚本:

var $slide = $('.slide-left');  $slide.css({      "margin-left": "100px"  }).addClass('slide-left');  $slide.css({      "margin-left": "10px"  });

我们会发现并没有效果,为什么呢?因为对margin-left的修改并没有触发回流,元素margin-left值的改变被缓存,如果我们在中间强制触发回流:

var $slide = $('.slide-left');  $slide.css({      "margin-left": "100px"  });  console.log($slide.css('padding'); $slide.addClass('slide-left'); $slide.css({      "margin-left": "10px"  });

再看就达到了预期效果。

绘制(painting)

***是绘制(paint)阶段或重绘(repaint)阶段,浏览器UI组件将遍历渲染树并调用渲染对象的绘制(paint)方法,将内容展现在屏幕上,也有可能在之后对DOM进行修改,需要重新绘制渲染对象,也就是重绘,绘制和重绘的关系可以参考布局和回流的关系。

全局与局部绘制

与布局相似,绘制也分为全局和局部绘制,即对整个渲染树或某些渲染对象进行绘制。

触发重绘

我们已经知道很多操作可能会触发回流,那么什么时候可能触发重绘呢,通常,当改变元素的视觉样式,如background-color,visibility,margin,padding或字体颜色时会触发全局或局部重绘,如:

$('body').css('color', 'red'); // repaint  $('body').css('margin', '2px'); // reflow, repaint

页面渲染优化

在改变文档根元素的字体颜色等视觉性信息时,会触发整个文档的重绘,而改变某元素的字体颜色则只触发特定元素的重绘;改变元素的位置信息会同时触发此元素(可能还包括其兄弟元素或子级元素)的布局和重绘。某些重大改变,如更改文档根元素的字体尺寸,则会触发整个文档的重新布局和重绘,据此及上文所述,推荐以下优化和实践:

1.HTML文档结构层次尽量少,***不深于六层;

2.脚本尽量后放,放在前即可;

3.少量首屏样式内联放在标签内;

4.样式结构层次尽量简单;

5.在脚本中尽量减少DOM操作,尽量缓存访问DOM的样式信息,避免过度触发回流;

6.减少通过JavaScript代码修改元素样式,尽量使用修改class名方式操作样式或动画;

7.动画尽量使用在绝对定位或固定定位的元素上;

8.隐藏在屏幕外,或在页面滚动时,尽量停止动画;

9.尽量缓存DOM查找,查找器尽量简洁;

10.涉及多域名的网站,可以开启域名预解析

实例

当我们访问一个页面时,浏览器渲染事件详细日志图如下:

web前端页面渲染机制是什么

  1. 发起请求;

  2. 解析HTML;

  3. 解析样式;

  4. 执行JavaScript;

  5. 布局;

  6. 绘制

“web前端页面渲染机制是什么”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

推荐阅读:
  1. 如何优化Next.js页面渲染
  2. 如何解决基于bootstrap页面渲染的问题

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

web

上一篇:用PostgreSQL的五个优点分别是什么

下一篇:jquery如何获取tr里面有几个td

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》