[ JS 进阶 ] Repaint 、Reflow 的基本认识和优化 (2)

你是不是经常听师兄或一些前端前辈说不能用CSS通配符 *CSS选择器层叠不能超过三层,CSS尽量使用类选择器,书写HTML少使用table,结构要尽量简单-DOM树要小....等这些忠告,以前我就大概知道使用通配符或者CSS选择器层次过多可能会降低性能,至于为什么不使用table标签我一直是迷迷糊糊,也就跟着那样做了,但我认识了RepainReflow之后,原来这些还真不能用太多。 ok,希望这篇文章对你有帮助!

1.什么是Repaint/Reflow?

好,先上一张图:浏览器解析大概的工作流程

clipboard.png

这张图应该可以很好理解,归纳为四个步骤:

1、解析HTML以构建DOM树:渲染引擎开始解析HTML文档,转换树中的html标签或js生成的标签到DOM节点,它被称为 -- 内容树。
2、构建渲染树:解析CSS(包括外部CSS文件和样式元素以及js生成的样式),根据CSS选择器计算出节点的样式,创建另一个树 —- 渲染树。
3、布局渲染树: 从根节点递归调用,计算每一个元素的大小、位置等,给每个节点所应该出现在屏幕上的精确坐标。
4、绘制渲染树: 遍历渲染树,每个节点将使用UI后端层来绘制。

好,我们可以看到Repain 和 Reflow 分别出现在了第三和第四步。因此我们给出下面的定义:

对于DOM结构中的各个元素都有自己的盒子(模型),这些都需要浏览器根据各种样式(浏览器的、开发人员定义的等)来计算并根据计算结果将元素放到它该出现的位置,这个过程称之为reflow;当各种盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来后,浏览器于是便把这些元素都按照各自的特性绘制了一遍,于是页面的内容出现了,这个过程称之为repaint。
可见这两个东东对浏览器渲染页面是很重要的啊,都是会影响性能的,因此我们需要了解一些常见的会引起repaint和reflow的一些操作,并且应该尽量减少以提高渲染速度。

2.引起RepainReflow的一些操作

Reflow 的成本比 Repaint 的成本高得多的多。DOM Tree 里的每个结点都会有 reflow 方法,一个结点的 reflow 很有可能导致子结点,甚至父点以及同级结点的 reflow。在一些高性能的电脑上也许还没什么,但是如果 reflow 发生在手机上,那么这个过程是非常痛苦和耗电的。
所以,下面这些动作有很大可能会是成本比较高的。

  1. 当你增加、删除、修改 DOM 结点时,会导致 Reflow 或 Repaint。
  2. 当你移动 DOM 的位置,或是搞个动画的时候。
  3. 当你修改 CSS 样式的时候。
  4. 当你 Resize 窗口的时候(移动端没有这个问题),或是滚动的时候。
  5. 当你修改网页的默认字体时。

注:display:none 会触发 reflow,而 visibility:hidden 只会触发 repaint,因为没有发现位置变化。

3.如何优化?

Reflow是不可避免的,只能将Reflow对性能的影响减到最小,给出下面几条建议:

  1. 不要一条一条地修改 DOM 的样式。与其这样,还不如预先定义好 cssclass,然后修改 DOMclassName

    // 不好的写法
    var left = 10,
    top = 10;
    el.style.left = left + "px";
    el.style.top  = top  + "px";
    // 推荐写法
    el.className += " theclassname";
    
  2. 把 DOM 离线后修改。如:
    a> 使用 documentFragment 对象在内存里操作 DOM
    b> 先把 DOMdisplay:none (有一次 repaint),然后你想怎么改就怎么改。比如修改 100 次,然后再把他显示出来。
    c> clone 一个 DOM 节点到内存里,然后想怎么改就怎么改,改完后,和在线的那个的交换一下。

  3. 不要把 DOM 节点的属性值放在一个循环里当成循环里的变量。不然这会导致大量地读写这个结点的属性。

  4. 尽可能的修改层级比较低的 DOM节点。当然,改变层级比较底的 DOM节点有可能会造成大面积的 reflow,但是也可能影响范围很小。

  5. 为动画的 HTML 元件使用 fixedabsoultposition,那么修改他们的 CSS 是会大大减小 reflow

  6. 千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。

认识了这些是不是对浏览器的原理有更大兴趣了?OK,后面会更新关于浏览器原理的文章,或者你们可以先去搜搜别人的,因为我觉得理解浏览器的原理确实是很重要,可以帮助我们写出性能更好的website

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

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

相关文章

vgh电压高了有什么_智能变频电源的功能是什么?

所谓的智能变频电源,其主要功能是将我国的城市电源(220V直流)转换为世界上其他国家的设备(110V,60Hz),可以说,它的功能是一台很好的稳压器和调频设备。智能变频电源的功能是什么?著名的美国北宇实验室研究报告指出&…

PDC Party 即将在东莞登场

各位社区精英们, 我们即将在东莞举办PDC Party的活动,本次活动除了精彩的PDC Keynote Demo视频分享与微软技术趋势的讨论之外,还希望能够借此机会,与各位微软技术社区精英们面对面的交流,共同讨论后续的发展&#xff0…

你们数学老师当年是怎么叫这些符号的…

全世界只有3.14 % 的人关注了爆炸吧知识你们数学老师都是怎么叫这些符号的呢?

lisp正负调换_坐标提取lisp程序

工程|标签:|字号大中小订阅;该程序主要用于CAD点(point)三维坐标提取,并将数据输出为CASS软件中使用的数据格式;输出格式:点号,,测量Y值,测量X值,测量Z值例:1,,100.3244,1232,433,25;2010-05-17;命令&#…

自主生态再进一步,龙芯中科完成.NET3.1-LoongArch64平台研发

近日,龙芯中科.NET团队完成了.NET3.1-LoongArch64平台研发工作,研发的成功标志着围绕龙芯自主指令系统LoongArch的生态建设成果再进一步。龙芯自主指令系统LoongArch基于龙芯二十年的CPU研制和生态建设积累,LoongArch从顶层架构,到…

keras 自定义层input_从4个方面介绍Keras和Pytorch,并给你选择其中一个学习库的理由...

全文共3376字,预计学习时长7分钟对许多科学家、工程师和开发人员而言,TensorFlow是他们的第一个深度学习框架。TensorFlow 1.0于2017年2月发布;但客观来说,它对用户不是非常友好。过去几年里,由于Keras和PyTorch比Tens…

KlayGE 4.0中Deferred Rendering的改进(五)完结篇:Post process

转载请注明出处为KlayGE游戏引擎上一篇分析了KlayGE中实现实时全动态GI的方法,本篇是这个系列的完结篇,主要讲流水线的最后一段:Post process。 Post process 在KlayGE 4.0的Deferred Rendering中,post process主要有HDR、AA和col…

Centos 手工创建新用户

当我们要创建一个用户时,通常使用useradd命令就可以自动创建了一个用户;实际上,在linux下,一切皆文件,设置好几个文件,也是可以创建出一个用户:文件如下:/etc/passwd :用户/etc/sha…

为了这个羞羞的项目,我差点成为“鉴黄师”

全世界只有3.14 % 的人关注了爆炸吧知识转自:大数据文摘编译:蒋宝尚、魏子敏给男同学们一个机器学习,他们能研究所有他们能想到的问题。当然,根据这本真实存在的畅销书,他们真的能想到的话题也不多????开个玩笑&am…

android管理activity顺序,android activity 六个主要函数以及一些调用顺序

Android中一个Activity一般都需要实现六个函数:onCreate(), onStart(), onResume(),onPause(),onStop(),onDestroy().onCreate函数:注册你要用到的变量,比如说service,receiver,这些变量是无论你的Activity是在前台还是在后台都能够被响应到的…

qt绘制一圈圆_Qt绘制圆形,矩形等图形   绘制同心圆

原来Qt也可以绘制图形啊。利用QPainter类来绘制,再辅以其他类,诸如QPen来说明绘制的画笔,QPoint来说明某个点,QPaletee来说明绘制的颜料等等。在QWidget类中来实现虚拟函数oidpaintEvent(QPaintEvent*)。当调用这个QWidget时&…

到成都去是联想的必然选择

“孔雀东南飞,联想西南飞。” 成都一直是笔者最喜欢的城市之一。它又名“蓉”、“锦城”、“锦官城”和“天府之国”。虽然位于中国的中西部,但是科技水平、电脑技术应用和互联网普及水平却远远高于周边地区,经济水平也位列西部各城市首位。再…

【.NET】实现CI/CD(二)运行镜像,自动化部署

(一重山,两重山。)书接上文,在上回中我们说到了《【Azure Core】实现CI/CD(一)构建镜像并推送仓库今天我们继续往下说,说下CD(持续部署)的流程,也是很简单。…

a*算法的时间复杂度_数据结构(1)——算法和时间复杂度

Data Structure1算法和时间复杂度01.什么是数据结构?程序设计 数据结构 算法数据结构是关系,是数据元素相互之间存在的一种或多种特定关系的集合。数据结构和算法凌驾于任何一种编程语言之上。02.逻辑结构和物理结构数据结构分为逻辑结构和物理结构。逻…

新开博客啦

其实决定开一个技术博客很久了,但一直都没找到合适的,博客园的背景确实不错,好像没有其他的广告,算是比较清新的一个网站了吧。 从这里开始,记录自己的学习心得,把自己的学习历程拿出来分享,与你…

C++的enum hack

从一个例子开始吧 class Game { private:static const int GameTurn 10;int scores[GameTurn]; };对于支持类内初始化的C编译器,这段代码可以编译通过。 但是较老的C编译器,可能不支持类内初始化,这样我们的静态常量,必须要在类外…

android vcard解析代码,Android使用vcard文件的方法简单实例

本文实例讲述了Android使用vcard文件的方法。分享给大家供大家参考,具体如下:FileOutputStream os null;try {os VCardTest.this.openFileOutput("Android.vcf", MODE_PRIVATE);} catch (FileNotFoundException e1) {// TODO Auto-generated…

学会了!如果认错人了,就像这样亲一口!

1 千万不要用曲面屏炒股▼2 谁掏钱多就听谁的准没错▼3 你和你妈的通话记录▼4 em......陷入沉思▼5 人类1994年拍摄到的冥王星人类2018年拍摄到的冥王星▼6 猫:你滚开!劳资不要运动!▼7 吃下去长肉了你来找我我给你送实验室研究研究▼…

短文件名漏洞如何修复_短文件名漏洞修复

短文件名漏洞其实在13年时还是很令人耳熟能详的,不过随着所在公司的编码语言转型,目前使用ASP.NET的新项目基本上没有了,而更多的是对原来的采用ASP.NET语言开发的项目进行维护或打个补丁。事出突然,12月的某个下午被项目组喊去帮…

在MinGW下使用DShow的方法

用MinGW编译DShow的东西,经常遇到没找到IBaseFilter的问题。本质上是MinGW的w32api并没有提供完整的DShow头文件所致。经过一番折腾,得到了下面的解决方案: 1. 从http://sourceforge.net/projects/mingw-w64/下载mingw-w64-headers&#xff0…