优化回流和重绘

最新推荐文章于 2021-11-14 19:50:25 发布
转载 最新推荐文章于 2021-11-14 19:50:25 发布 · 265 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/aisiqi-love/p/10317548.html

1：用transform 代替 top，left ，margin-top， margin-left... 这些位移属性

2：用opacity 代替 visibility，但是要同时有translate3d 或 translateZ 这些可以创建的图层的属性存在才可以阻止回流

但是第二点经过我的实验，发现如果不加 transform: translateZ(0) 配合opacity的话还是会产生回流的，而只用visibility 就只会产生重绘不会回流

而  opacity 加上 transform: translateZ/3d  这个属性之后便不会发生回流和重绘了

3：不要使用 js 代码对dom 元素设置多条样式，选择用一个 className 代替之。

4：如果确实需要用 js 对 dom 设置多条样式那么可以将这个dom 先隐藏，然后再对其设置

5：不要在循环内获取dom 的样式例如：offsetWidth, offsetHeight, clientWidth, clientHeight... 这些。浏览器有一个回流的缓冲机制，即多个回流会保存在一个栈里面，当这个栈满了浏览器便会一次性触发所有样式的更改且刷新这个栈。但是如果你多次获取这些元素的实际样式，浏览器为了给你一个准确的答案便会不停刷新这个缓冲栈，导致页面回流增加。

所以为了避免这个问题，应该用一个变量保存在循环体外。

6：不要使用table 布局，因为table 的每一个行甚至每一个单元格的样式更新都会导致整个table 重新布局

7：动画的速度按照业务按需决定

8：对于频繁变化的元素应该为其加一个 transform 属性，对于视频使用video 标签

9：必要时可以开启 GPU 加速，但是不能滥用

转载于:https://www.cnblogs.com/aisiqi-love/p/10317548.html

WODE1102
关注
CSS动画性能优化：避免重绘和回流
weixin_41455464的博客
06-30 202
想象一下，你在一家餐厅当服务员。
前端 Interview - 回流和重绘，如何避免？
一个平平无奇的程序媛
12-02 953
在前端性能优化中，我们经常提到的两个概念 回流 和 重绘，今天我们详细来说说，什么是回流、重绘？什么情况下会触发回流或重绘？如何避免？
【性能优化】频繁操作DOM所引发的重排（回流）与重绘
马云
07-02 2321
为什么不要频繁操作DOM？ 一、DOM和JS属于跨界交流 把 DOM 和 JavaScript 各自想象成一个岛屿，它们之间用收费桥梁连接。——《高性能 JavaScript》 JS 是很快的，在 JS 中修改 DOM 对象也是很快的。在JS的世界里，一切是简单的、迅速的。但 DOM 操作并非 JS 一个人的独舞，而是两个模块之间的协作。 JS 引擎和渲染引擎（浏览器内核）是独立实现的。当我们用 JS 去操作 DOM 时，本质上是 JS 引擎和渲染引擎之间进行了“跨界交流”。 “跨界交流”要收费——.
常见的前端面试题
tt_1998的博客
04-17 674
前端面试题 （一）JavaScript 1 防抖和节流，手写 2 介绍一下原型和原型链 3 异步请求方案 4 同源策略、跨域，解决方案，jsonp跨域原理，实现一个jsonp 5 typeof 和 instanceof，typeof（null）输出什么？ 6 forEach和map的区别 7 js数据类型 8 事件循环和任务队列 9 flex 10 回流和重绘，transform会造成回流吗？ 1...
前端性能优化 - 减少重绘与回流
forteenBrother的博客
04-20 1194
Css性能让js变慢 回流 当render tree中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，就称为回流。 页面布局和几何属性改变时就需要回流 重绘 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，不会影响布局，比如bg-color 6.3 避免重绘和回流的两种方式 1.盒模型相关的属性会触发重新布局，会触发页面回流 Wi...
关于回流与重绘优化的探索
qq_39581763的博客
12-12 218
正文前言中描述的合并样式的骚操作是如下： var el = document.querySelector('div');el.style.borderLeft = '1px';el.style.borderRight = '2px';el.style.padding = '5px';复制代码原文描述的大概意思是这段代码多次对 DOM 的修改和对样式的修改，页面会进行多次回流或者...
回流和重绘 的 面试与优化方案
Draven
01-12 1393
回流和重绘一直是前端工程师面试的常见，尤其是大厂的面试，毕竟前端页面优化也是考核开发者能力的关键之一。掌握回流和重绘的概念，不单单是为了面对各类面试，更能为前端开发者在日常开发中提供优化方案。 理解回流(reflow)和重绘(repaint) 首先，我们需要理解什么是回流和重绘，英文叫Reflow and Repaint 。 回流 （Reflow ）:当render树中的一部分或者全部因为大...
前端优化之回流（Reflow）与重绘（Repaint）
qq_45716607的博客
06-14 511
回流（Reflow）与重绘（Repaint） 开篇我们先对上上节介绍的回流与重绘的基础知识做个复习（跳读的同学请自觉回到上上节补齐 →_→）。 回流：当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）。 重绘：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性
精选资源
前端进阶版本 ，性能优化—-防抖、节流、重绘与回流。
01-20
总的来说，前端性能优化涉及很多方面，包括但不限于防抖、节流、重绘和回流的管理。通过理解和应用这些策略，开发者能够创建更加流畅、响应更快的用户体验，同时减轻浏览器的负担。在实际开发中，应该根据场景选择...
JS动画 与 CSS3动画 及 回流和重绘
YuLong的博客
11-14 2335
文章目录JS动画CSS3动画浏览器的渲染流程回流(重排) 和 重绘 JS动画 JS动画：也被称为 逐帧动画，在时间帧上绘制内容，一帧一帧的，所以它的可再造性很高，几乎可以完成任何想要的动画形式。 缺点： 有可能造成丢帧的情况。JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等，对其干扰导致线程可能出现阻塞，从而造成丢帧。 代码的复杂度高于CSS动画。 优点： JavaScript动画控制能力很强，可以在动画播放过程中对动画进行控
了解及优化页面回流和重绘
zoro的博客
03-12 592
题记：web开发经常会听到回流和重绘这两个词，最近看了一些文档，简单记录下自己对这两个概念的理解以及怎么尽可能避免回流和重绘，提高页面渲染速度。 概念 回流： 浏览器的渲染过程中，计算DOM节点在视口内的显示/隐藏，确切位置和大小，这个计算的阶段就是回流。 重绘 是一个元素外观的改变(自身的宽高，布局，及显示或隐藏没有改变)所触发的浏览器行为，例如改变vidibility、backgr...
第13题：谈谈什么是回流会重绘？怎么优化
小柒的前端之旅
09-10 658
前面的话 这篇文章从回流会重绘的角度谈谈如何优化浏览器性能 什么是回流与重绘？ 回流： 在浏览器渲染过程中，生成渲染树之后，根据渲染树对可见DOM节点进行布局，还需要进行计算它们在设备视口(viewport)内的确切位置和大小，这个计算的阶段就是回流。 重绘： 根据渲染树以及布局阶段，知道了DOM节点的样式与位置大小信息，那么就可以将渲染树的每一个节点转换为屏幕上的实际像素，这个阶段就叫重绘。 何...
【面试】最新web前端经典面试题试题及答案（持续更新）-html/css、js、vue、http、web安全、前端性能、浏览器、js算法
热门推荐
aSuncat
03-19 5万+
阅读目录 html/ css javascript es6 vue react jQuery webpack、gulp、grunt node http web安全 前端性能 浏览器 算法相关 设计模式 正则表达式 职业规划 参考资料 html/ css 行内元素和块级元素举几个例子？ 行内元素：span,a,var ,em,input,img,img,textarea,var,em,s......
39：浏览器底层渲染机制3：DOM回流和重绘
Mint周的文章
07-20 535
DOM的重绘和回流 重绘：元素样式的改变（但宽高、大小、位置等不变） 如 outline, visibility, color、background-color等 回流：元素的大小或者位置发生了变化（当页面布局和几何信息发生变化的时候），触发了重新布局，导致渲染树重新计算布局和渲染 如添加或删除可见的DOM元素 ; 元素的位置发生变化; 元素的尺寸发生变化; 内容发生变化（比如文本变化或图片被另一个不同尺寸的图片所替代）; 页面一开始渲染的时候（这个无法避免）; 因为回流是根据视口的大小来计算元素
页面性能优化，如何减少回流
zzyaiaad的博客
09-12 3263
在开发时，不可避免的会遇到性能优化的问题，怎么做性能才会更好。 说到页面性能优化，我们就谈谈两个概念重绘和回流。 1、什么是重绘，什么是回流？ 重绘: 当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不会影响布局的操作，比如 background-color、color、visibility等，我们将这样的操作称为重绘。 常见的引起重绘 的属性和方法： 回流：当渲染树中的一些元素的几何属性发生变化，例如大小、位置等，而这些属性会影响到布局的操作，这样的操作我们称为回流。 常见引起回
前端经典面试题：什么是回流和重绘？如何优化？
BigData
03-18 2772
浏览器渲染一个页面有两条线程：一条是渲染js脚本，一条是渲染css脚本。但是两条线程是互斥的。 回流：当render tree的一部分或者全部元素因改变了自身的宽高，布局，显示或隐藏，或元素内部的文字结构发生变化，导致需要重新构建页面的时候，回流就产生了。 重绘：当一个元素自身的宽高，布局，及显示或隐藏没有改变，而只是改变了元素的外观风格的时候，就产生了重绘。 结论：回流必定触发重绘，而重绘...
（27页PPT）某省市照明智能管理系统解决方案.pptx
12-20
（27页PPT）某省市照明智能管理系统解决方案.pptx
资阳市第二自来水厂3dtiles模型
最新发布
12-20
资阳市第二自来水厂3dtiles模型
山西省暴雨洪水计算实用手册
12-20
山西省暴雨洪水计算实用手册
回流和重绘的区别
03-19
### 浏览器渲染中的回流与重绘 #### 回流（Reflow） 回流是指当 DOM 的结构或元素的几何属性（如大小、位置等）发生变化时，浏览器需要重新计算这些元素的位置和尺寸，并更新整个页面布局的过程。这一过程通常涉及多个节点的重新计算以及可能引发后续子树的调整[^1]。 例如，如果动态改变了某个元素的高度或者宽度，或者是隐藏了一个可见的元素，则会触发回流操作。每次回流都会带来一定的性能开销，尤其是复杂的布局场景下更为显著[^5]。 #### 重绘（Repaint） 相比之下，重绘指的是由于某些视觉样式的更改而不需要改变文档流的情况下发生的绘制行为。比如颜色的变化、背景图片替换等情况只会导致像素级别的刷新而不影响整体布局结构[^3]。 需要注意的是，尽管单独来看重绘似乎比回流轻量级一些，但如果频繁发生也可能累积成较大的性能瓶颈[^2]。 #### 主要区别 | 特性 | 回流 | 重绘 | |--------------|-------------------------------|-------------------------| | **定义** | 布局变化引起的重新计算 | 只有外观上的变动 | | **触发条件** | 修改了影响布局的因素 | 改变了不影响布局的样式 | | **范围** | 影响较大 | 较小 | | **频率控制** | 应尽量减少 | 同理需加以管理 | 为了提升网页加载速度并改善用户体验，在开发过程中应当采取措施来降低不必要的回流和重绘事件的发生几率。可以通过批量处理DOM变更动作、使用虚拟dom技术等方式实现优化目的；另外还可以考虑采用GPU加速特性明显的 CSS 属性如 `transform` 和 `opacity`, 这些不会引起常规意义上的reflow/repaint流程而是交由更高效的图形处理器完成相应工作[^4]。 ```javascript // 减少回流的一个例子：先移除元素再做多次修改最后放回去 let parentElement = document.getElementById('parent'); let childToModify = document.createElement('div'); childToModify.style.width = '200px'; childToModify.style.height = '200px'; childToModify.style.backgroundColor = '#ff0000'; parentElement.appendChild(childToModify); ``` 上述代码展示了如何通过创建新节点而非直接操作现有DOM节点的方式来避免连续性的回流问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值