vuex中的值变化 页面重新渲染_浅谈浏览器的渲染过程,重绘与回流

ce0f647e35d85b2c201da3ee19fdc872.png

浏览器的渲染过程
首先,我们先来了解一下浏览器的渲染过程是什么样的,也就是说浏览器把一堆代码呈现到页面上的过程是什么样子的,浏览器采用流式布局模型(Flow Bsaed Layout),根据下图,我们可以总结出浏览器的渲染步骤为:

65010a6da5288d61686f042db1dcb7b0.png

步骤:
1.解析HTML代码,生成DOM树(DOM Tree);解析CSS代码,生成CSSOM树(CSS Tree);
2.将DOM树和CSSOM树进行结合从而构建起渲染树(Render Tree);
Render Tree类似于DOM Tree,但存在很大的区别:Render Tree能够识别样式,Render Tree中的每个节点都有自己的样式,而且Render Tree不包含隐藏的节点,比如display:none的节点,因为这些节点不会用于页面呈现。
3.回流(Layout),根据生成的Render Tree,进行Layout,得到节点的位置、大小;
4.重绘(Painting),根据Render Tree以及回流得到的位置信息,确定各节点的绝对位置,得到各节点的绝对像素;
5.呈现(Display),将像素发送给GPU,展示到页面上。
由于浏览器采用流式布局,对Render Tree的计算通常只需要遍历一次就可以完成,但是table以及其内部元素除外,他们可能需要多次计算,通常要花三倍同等元素的时间,这也是为什么要避免使用table布局的原因。
————分割线————
步骤2中,渲染树(Render Tree)是如果构建的呢?

d5d5c6d08607ac96d4ea7ae4ef65a121.png

如上图所示,总结出的构建步骤为:
1.从DOM树的根节点开始遍历每个可见节点;
遍历的是每个可见节点,那么不可见的节点包括:
(a) 一些不会渲染输出的节点,比如script、meta、link等;
(b) 一些通过css进行隐藏的节点。比如display:none。注意,利用visibility和opacity隐藏的节点,还是会显示在渲染树上的。只有display:none的节点才不会显示在渲染树上。
2.对于每个可见的节点,找到CSSOM树中对应的规则,并应用它们;
3.根据每个可见节点以及其对应的样式,组合生成渲染树。
又是怎么组合的呢?
简单是就是一个匹配的过程,要将每个HTML元素节点与之正确的样式相匹配。因为节点位置属性将通过CSS选择器链的优先级来决定,渲染树中的某个结点可能会同时满足多个选择器链,这时候就要通过选择器的优先级来完成属性的赋值。
这时候,将渲染结点同时满足的几个选择器链通过其优先级加权算值,从小到大依次覆盖渲染结点;而如何确定此渲染结点是否满足某个选择器链呢?这也是一个逐层判断的过程:从此渲染结点开始,判断此结点是否与选择器链表的当前选择器相匹配。如果匹配,判断此选择器与下一个选择器的关系:如果为NONE,表示本选择器是选择器链的最后一个,返回成功;如果关系为AND (比如:#id.class),选择下一个选择器与本渲染结点继续比较;如果关系为CHILD,表示本选择器是下一个选择器的子结点,返回下一个选择器与下一个渲染结点的匹配结果;否则,关系为DESCENDANT,选择器和渲染结点各指向下一个结点,然后将渲染结点继续回溯,直到第一个满足回溯后的选择器的结点,此时将继续判断回溯后的选择器和回溯后的渲染结点是否匹配。
————分割线————
重绘
什么是重绘呢?当Render Tree中的一些元素需要更新属性,而这些属性只是影响元素的外观、风格,而不会影响布局的,比如改变背景颜色等,这就会引起浏览器重绘(Painting)。重绘有一定的代价,因为浏览器会验证DOM树上其他元素的可见性。例如:
某网站首页页面中,将蓝色框内导航栏的背景颜色变为粉色,其他的不变,并没有改变整体布局和各个部分的位置,所以此时会引起重绘,不会引起回流。

d706d7a451a0f94f40ad094997320f7b.png

回流
当Render Tree中的部分节点因为元素的尺寸、布局、隐藏等改变而需要重新构建,这就会引起浏览器回流(reflow)。每个页面至少需要一次回流,就是在页面第一次加载的时候(浏览器渲染过程步骤3),因为要第一次构建Render Tree。在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,即重绘。例如:
某网站首页页面中,将蓝色框内导航栏直接删掉,则下面的所有部分会进行上移,整体的布局发生了变化,所以此时会引起回流,接着进行重绘。
在这里引出了回流与重绘的一个最大的区别:
回流一定会引起重绘,重绘不一定会引起回流回流是影响浏览器性能的关键因素,因为其变化会涉及到部分页面甚至整个页面的布局更新。
那么,何时会触发回流重绘呢?
(a) 添加或删除可见的DOM元素;
(b) 元素的位置发生变化;
(c) 元素的尺寸发生变化(包括外边距、内边框、边框大小、高度和宽度等);
(d) 内容发生变化,比如文本变化或图片被另一个不同尺寸的图片所替代;
(e) 页面一开始渲染的时候(这肯定避免不了);
(f) 浏览器的窗口尺寸变化(因为回流是根据视口的大小来计算元素的位置和大小的)......
————分割线————
优化
上面提到,回流重绘给浏览器性能带来了很大的影响,为了提高性能,可以采取下面的一些措施进行性能优化。
1、浏览器优化
现代浏览器大多是通过队列机制来批量更新布局,浏览器把修改操作放在一个队列里面,然后再批量执行,如果是60HZ刷新率的话,至少要16.6ms才会清空队列。但是当你获取布局信息的操作的时候,会导致队列被强制清空,触发回流重绘以确保返回正确的值,主要包括以下属性和方法:

  • offsetTop、offsetLeft、offsetWidth、offsetHeight
  • scrollTop、scrollLeft、scrollWidth、scrollHeight
  • clientTop、clientLeft、clientWidth、clientHeight
  • width height
  • getComputedStyle()
  • getBoundingClientRect()
    所以,上述的属性和方法要避免频繁使用,最好不用,如果要用,可以想办法把值缓存下来。

2、减少回流与重绘
CSS

  • 使用 transform 代替 top ;
  • 使用 visibility 代替 dispaly。因为visibility只会引起重绘,而dispaly会引起回流;
  • 避免 table 布局。可能一个小小的改动会导致整个table的重新布局;
  • 尽可能的在DOM树的最末端改变class;
  • 避免设置多层的内联样式,CSS选择器从右向左匹配查找,避免节点层级太多;
  • 将动画效果应用到position属性为absolute或者fixed的元素上,避免影响其他元素布局,这样只有重绘,同时,控制动画速度可以用requestAnimationFrame;
  • 避免使用CSS表达式;
  • CSS3硬件加速(GPU加速)
    ......

JS

  • 避免频繁的操作样式,最好一次性重写style属性,或者将样式列表定义为class并一次性更改class属性;
  • 避免频繁的操作DOM;
  • 避免频繁读取会引发回流重绘的属性;
  • 对有复杂动画的元素使用绝对定位

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/534077.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vc 将已有项目打包成dll 并应用于其他项目_.NET混淆器 Dotfuscator使用教程:保护你的应用之存档报告文件...

Dotfuscator是一款.NET混淆器和压缩器,防止你的应用程序被反编译。本篇文章将继续上一篇文章与大家分享保护应用程序的后续三个部分:存档报告文件、加强保护和替代方法。存档报告文件作为构建的一部分,Dotfuscator会生成报告文件(在Dotfuscat…

html文件内容搜索,html读出文本文件内容

html读出文本文件内容更新时间:2007年01月22日 00:00:00 作者:Function bytes2BSTR(vIn)strReturn ""For i 1 To LenB(vIn)ThisCharCode AscB(MidB(vIn,i,1))If ThisCharCode strReturn strReturn & Chr(ThisCharCode)ElseNextCharC…

python 定义变量_python-003-变量

1.变量的定义python中,在程序运行时,可以随着程序的运行更改的量成为变量.简单理解: 变量就是用来临时存储数据的容器.可以认为好比是 逛超市 买面条 使用购物车 装面条变量 -> 购物车数据 -> 面条2.变量的使用# 第一次输入一个10 num1 10 # 第二次输入一个20 num2 20 …

苹果11是高通基带吗_最强对抗!小米11对抗三星、苹果华为等最高旗舰|喜欢小米吗?...

哈喽,您好!我是原呵呵,点点关注吧,更多精彩内容等着您小米很快就会展示了2021年的手机,该公司通常会在2月份推出该季节的首个旗舰,但新的小米米11已向前推进了几个月,并成为了首个采用骁龙888处…

html 图片墙效果,基于html5实现的图片墙效果

温馨提示:本信息由【金聪采编】搜集整理发布,版权归原作者及发布者所有,您如有异议请 举报 或者 版权申诉。本文实例讲述了基于html5实现的图片墙效果,分享给大家供大家参考。具体实现方法如下:这里有一组数据需要用图…

python split函数 空格_python上手--10行代码读懂红楼梦

取名10行代码看懂红楼梦,是将介绍使用python代码来读红楼梦获取其主要人物。这里的思想就是词频统计,通过分析红楼梦小说文字中出现最多的词语,来概括说明红楼梦的核心人物和事情。实际上如果你能跟着往下看,就开始进入了自然语言…

计算机主机温度,计算机的理想工作温度和湿度分别是多少

电脑理想的工作温度在10~35度,相对湿度为30%~80%。说明一点:这个温湿度是没有严格界定的。日常可以这样理解:只要人待在那里感觉舒服,电脑也会觉得合适的。电脑对电源也有要求&#…

k8s 安装nfs_K8s--06 K8s数据持久化

K8s数据持久化数据持久化 Volume介绍Volume介绍:Volume是Pad中能够被多个容器访问的共享目录Kubernetes中的Volume不Pad生命周期相同,但不容器的生命周期丌相关Kubernetes支持多种类型的Volume,并且一个Pod可以同时使用任意多个VolumeVolume类…

matlab为自定义后缀文件设置图标_【V3.0更新】| 这可能是全网最好用的文件管理神器了......

?点击关注Excel表哥公众号使用Excel制作自带超链接的文件目录索引确实可以很好地帮忙大家管理电脑里的文件。在此分享几个各行各业朋友们的使用截图:▲一个硬件工程师朋友的使用截图▲一个医院工作人员的数据统计文件管理▲学生朋友用来管理论文文献▲VBA编程爱好者…

html dom透明度,HTML DOM Style overflow 属性

Style overflow 属性Style 对象定义和用法overflow 属性设置或返回如何处理呈现在元素框外面的内容。语法设置 overflow 属性:Object.style.overflow"visible|hidden|scroll|auto|inherit"返回 overflow 属性:Object.style.overflow值描述visi…

#中队列的数据结构_数据结构与算法拓展(一)

栈与队列申明:由于篇幅限制,文章可能有些简略,如果大家想要详细了解,请一定要百度一下,并阅读例题,完成习题绪言:计算机科学在过去的数十年内发展飞速,各种新颖的技术纷至沓来&#…

display属性_Numpy知识点(1)讲解实操安装/属性/数组创建/运算

# 1、安装包# pip install numpy #原生python安装# conda install numpy #Anaconda的安装# 使用Numpyimport numpy as np a np.arange(15) #生成0-14的一维数组display(a)display( )和print( )都是打印,在大多数编程软件上都使用print,jupyter notebook中我们可以使用d…

计算机英语短文互译,中英文互译的英语短文

在英语学习中,阅读能力是学习者发展其它语言能力(听、说、写、译)的基础。阅读能力的高低,不仅决定了学习者获取知识和信息的水平,而且在一定程度上也反映出学习者综合运用英语的能力。小编精心收集了中英文互译的英语短文,供大家欣赏学习!中英文互译的英语短文&…

springboot怎么设置多个路径全部跳转首页_SpringBoot(四)—Web开发(二)

这篇文章准备来记录一下一个restful风格小项目的流程,上篇文章为它做了一个基础,如果有什么错误希望大家能够指出。目录首页国际化登录拦截器CRUD一、首页在访问localhost:8080/的时候,默认访问首页在自己配置的SpringMVC的配置类中Configura…

计算机英语六级,英语六级作文范文:计算机

英语六级考试时间越来越近了,所以在备考的时候就更要掌握技巧,勤加练习。在备考英语六级写作时,学习一篇好的范文,会给复习带来事半功倍的效果。Using a computer every day can have more negative than positive effects on you…

python软件_Python自制照片美颜软件~

下午被一个骗子恶心到了,本来听公开课听得好好的,搞得心情极差,于是就中断了网课,听听音乐,写一下文章吧!前期准备①Python编译环境以及Python代码编辑器Pycharm的安装:请在【微信公众后台】找到…

数据集怎么导出_PCA算法 | 数据集特征数量太多怎么办?用这个算法对它降维打击...

今天是机器学习专题的第27文章,我们一起来聊聊数据处理领域的降维(dimensionality reduction)算法。我们都知道,图片格式当中有一种叫做svg,这种格式的图片无论我们将它放大多少倍,也不会失真更不会出现边缘模糊的情况。原因也很简…

html form callback,Promise异步编程模式总结初始化Promise对象统一错误处理PromisifyfromCallbackMongoose Promisify...

Promise是JavaScript中的一种异步编程范式, 一个Promise对象表示一个即将完成但还未完成的操作。 鉴于JavaScript中异步和回调的编程风格, Promise模式可以有效地避免『Callback Hell』。Promise 最初有q和bluebird等实现,在ES2015(ES6)提出后…

常用命令_GIT常用命令大全

Git 是一个很强大的分布式版本控制系统。它不但适用于管理大型开源软件的源代码,管理私人的文档和源代码也有很多优势。克隆远程文件:git clone https://gitee.com/abcd/codefile.git projectgit checkout -b dev(本地分支名称) origin/dev(远程分支名称…

nvidia显示设置不可用_Nvidia显示设置不可用,您当前未使用连接到NVIDIA GPU的显示器的解决方法...

相信不少用户遇到这样一个问题,就是新购买的台式机电脑,配置达标的情况下,玩游戏出现卡顿不流畅的现象,准备在NVIDIA控制面板查看是否设置的问题,在打开NVIDIA控制面板的时候,提示了“Nvidia显示设置不可用…