前端开发避免重排和重绘

已于 2022-08-16 14:06:48 修改
阅读量252 收藏
点赞数
分类专栏： CSS 文章标签： javascript css3 前端
于 2022-08-16 13:58:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41791737/article/details/126364842
版权

最近开发一款在阉割版chrome浏览器运行的web页面
其中遇到很多流畅性优化的问题？
代码中如何优化卡顿问题呢？
下面我们输出所有绝密方案：

  1. 尽量避免重绘和重排
  2. 如果元素有动画就填上transfrom属性、哪怕它一开始是默认值
  3. 尽量使用CSS动画
  4. 用will-change提示浏览器、他不会有任何副作用

总结一句做动画的时候改变位置和大小的时候只用transfrom就不会触发回流重排

最后：还有一个终极杀手：硬件加速

transfrom和transfrom3d；
硬件加速：transform3d可以取代transform使用推荐：因为他可以把浏览器调用从GPU变成CPU实现硬件加速

开启硬件加速效果非常见效，立马就不卡了

码农有梦想
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
了解重排与重绘
10-16
重绘和重排操作都是代价昂贵的操作，它们会导致web应用程序的UI反应迟钝，所以应该尽可能减少这类过程的发生。下面我们来简单了解一下
你真的了解重排和重绘吗？
01-08
做过前端开发的小伙伴就算不是非常理解重排与重绘，但是肯定都听过这两个词。那为什么这两个东西这么重要？因为他与我们的页面性能息息相关，今天，我们就来好好研究一下这两个东西。 浏览器的渲染流程 在讲解重排和重绘之前，我们有必要说一下浏览器的渲染流程。下面是浏览器渲染过程中最关键的几个部分。如果想了解完整的浏览器渲染流程，推荐大家去阅读李兵老师的浏览器工作原理实践，需要付费阅读。后期我也会整理一下再出一篇博客详细介绍浏览器的渲染过程。 JavaScript：一般来说，我们会使用 JavaScript 来实现一些视觉变化的效果。比如用 jQuery 的 animate 函数做一个动画、对一个数据集进
前端性能优化之重排和重绘
01-27
有经验的大佬对这个概念一定不会陌生，“浏览器输入URL发生了什么”。估计大家已经烂熟于心了，从计算机网络到JS引擎，一路飞奔到浏览器渲染引擎。 经验越多就能理解的越深。感兴趣的同学可以看一下这篇文章，深度和广度俱佳从输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系!切回正题，我们继续探讨何为重排。浏览器下载完页面所有的资源后，就要开始构建DOM树，于此同时还会构建渲染树(Render Tree)。
高性能JavaScript 重排与重绘(2)
10-23
主要介绍了高性能JavaScript 重排与重绘,需要的朋友可以参考下
transfrom
qq_23322743的专栏
12-22 499
一、坐标：              transfrom分为世界坐标系（world）和局部（本地）坐标系（local）             世界坐标系：所有物体的世界坐标系都是相同的、不会改变；             本地坐标系：每个物体都有一个本地坐标系，当物体旋转时，本地坐标系统也会跟着物体一起旋转。        
前端性能优化之减少重排和重绘
CC_Together的博客
04-13 2088
首先需要了解一下浏览器渲染HTML的大致过程： （1）HTML被HTML解析器解析成DOM Tree, css则被css解析器解析成CSSOM Tree（并行解析）。 （2）DOM Tree和CSSOM Tree解析完成后，被合并到一起，形成渲染树（render Tree）。 （3）重排：节点信息计算，即根据渲染树计算每个节点的几何信息（大小及位置）。 （4）重绘：渲染绘制，即根据计算好的信息绘制...
说一下重绘、重排区别如何避免？
油墨香^-^的博客
10-13 437
重绘：当一个元素的外观发生改变，但没有改变布局，重新把元素外观绘制出来的过程，所以重绘跳过了创建布局树和分层的阶段。重排需要重新计算布局树，重绘不需要，重排必定发生重绘，但是涉及到重绘不一定要重排。1页面初始渲染，这是开销最大的一次重排 -添加/删除可见的DOM元素 -改变元素位置 -改变元素尺寸，比如边距、填充、边框、宽度和高度等。重排 ：当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。
重绘、重排区别如何避免
m0_59070120的博客
09-15 405
当获取一些属性时，浏览器为取得正确的值也会触发重排,它会导致队列刷新，这些属性包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。4.3 元素的尺寸改变(外边距、内边距、边框厚度、宽高、等几何属性)
面试题：说一说重排（回流）和重绘以及如何避免重排来提高性能
weixin_50736511的博客
01-14 1038
基本概念 重绘：当页面元素样式改变不影响元素在文档流中的位置时（如background-color，border-color，visibility），浏览器只会将新样式赋予元素并进行重新绘制操作。 回流：当渲染树render tree中的一部分或全部因为元素的规模尺寸、布局、隐藏等改变时，浏览器重新渲染部分DOM或全部DOM的过程 回流必将引起重绘，而重绘不一定会引起回流。 什么时候会触发回流或重绘？ 添加或删除可见的DOM元素 元素的位置发生变化 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽
性能优化之减少页面重排
赫子子的博客
09-17 747
做web开发，性能优化无疑是很重要的一点，此篇文章主要是从减少页面重排来优化性能 <div class="content"> <ul></ul> </div
css常见面试题
蔣金澤
04-09 164
01.视频音频的使用 <video src=""></video> <audio> <source src="" type=""> </audio> src width height autopaly controls loop 02.清除浮动的方式 产生的原因是子元素浮动, 且父元素没有设置高度, 父元素高度塌陷 01.给父元素单独定义高度 02.父元素overflow: hidden 浏览器会自动检查浮动区域的高度 开启bfc-
WPF 子控件不受父控件的Tranfrom影响
HeBizhi1997的博客
03-26 598
两种方法 1.父控件放大多少倍，子控件缩小多少倍 写个绑定，加触发器（Mvvm,模式下还是很容易实现的） 2.意思差不多，更方便。 <Grid x:Name="MainGrid" RenderTransformOrigin="0.5,0.5"> <Grid.RenderTransform> ...
使用css3 transfrom使元素水平居中
sinat_37677339的博客
05-25 380
使用css3 transfrom使内容居中 //html结构 <html> <body> <div class="container"> </div> </body> </html> //css .container{ position:fixed; background-color:red; width:200px; height:200px; top:20%; left:
前端面试——CSS面经（持续更新）
weixin_43599321的博客
12-05 1536
重排(回流)：当增加或删除dom节点，或者给元素修改宽高时，会改变页面布局，那么就会重新构造dom树，然后再次渲染。重绘：计算好盒模型的位置，大小和其他一些属性之后，浏览器就会根据每个盒模型的特性进行绘制。浏览器的渲染机制：当dom的大小，位置发生改变时进行重排，当dom的样式如改变时进行重绘。网格布局笔记：网格布局表格布局可以看下面代码： 结果如下：：独占一行，宽度继承至父盒子，多个元素会另起一行，可设置宽高以及和属性。：元素不会独占一行，宽度、高度由内容撑开，不可设置宽高，但可以设置水平方向的和。：行内
tranfrom属性实现旋转按钮
x1785551的博客
12-17 639
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0px; } ...
什么是重绘和重排？ 如何去避免？
小小前端攻城狮的博客
07-28 1286
前言 面试官：既然你刚刚提到了重绘和重排，那就说一说吧。 我：。。。???? 我们首先来回顾一下渲染流水线的流程: 回流 首先介绍回流。回流也叫重排。 触发条件 简单来说，就是当我们对 DOM 结构的修改引发DOM 几何尺寸变化的时候，会发生回流的过程。比如以下情况 一个 DOM 元素的几何属性变化，常见的几何属性有width、height、padding、margin、left、top、border 等等, 这个很好理解。 使 DOM 节点发生增减或者移动。 读写 offset族、scroll族
重绘和回流 及减少重绘和回流的方式
^_^
08-16 746
重绘和回流是前端经常听到的一个概念，这就涉及到了从HTML代码到浏览器的一个渲染过程。 我们还听到过一个概念叫重排，其实和回流是一个意思。 （1）预知 从浏览器的渲染引擎开始，首先会将HTML文档解析成 DOM Tree，与此同时，会将CSS文档解析成CSSOM，最后进行一个拼接，拼接成render Tree （2）重绘 重绘，就像涂色一样，只修改一个元素的颜色，并不修改它的结构，就是重绘。 （3）回流/重排 当元素的宽高大小、隐藏显示，只要涉及到影响网页的布局就会触发回流，触发回流的同时必定
(译)如何在webkit中触发（避免）重排
fendouzhe123的专栏
05-18 1556
原文地址：How (not) to trigger a layout in WebKit
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
最新发布
JIngJaneIL的博客
05-28 1077
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
前端页面开发中重排和重绘的优缺点
04-21
重排和重绘是前端页面开发中常见的两个概念。 重排指的是页面中元素的位置或者大小发生变化，导致浏览器需要重新计算元素的布局和位置，这个过程比较耗费性能，会影响页面的响应速度。 重绘指的是页面中元素传入属性发生变化，需要重新绘制元素的外观，这个过程相对于重排来说比较简单，但也需要一定的性能消耗。 优点方面，重排和重绘确保了页面的正确显示，提升了用户体验。而缺点方面，重排和重绘会对页面性能造成影响，导致页面响应变慢，影响用户的使用体验。 需要注意的是，在页面开发中为了提高性能，开发者需要尽量避免重排和重绘的发生，如尽量使用 CSS3 中的 transform 和 opacity 属性来控制元素的位置和外观，避免频繁操作 DOM 以及避免设置多余的样式属性等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码农有梦想

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值