DOM的重绘和重排

最新推荐文章于 2023-03-04 21:57:45 发布
最新推荐文章于 2023-03-04 21:57:45 发布
阅读量496 收藏 1
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40781291/article/details/104600572
版权

为什么操作DOM速度慢

浏览器中JavaScript和DOM分开执行
Chrome中Js由V8引擎执行，DOM由Webkit内核的WebCore渲染
Safari中Js由JavaScriptCore渲染，DOM由Webkit内核的WebCore渲染

回流一定重绘，重绘不一定回流

回流

浏览器流式布局，DOM节点树形结构，一个节点改变，整个DOM结构重新计算，引发回流。
触发条件：

  • 首次渲染
  • 改变DOM节点
  • style样式的变化，元素位置，元素大小
  • 页面大小，resize()事件
  • 激活一些伪类(:hover)

重绘

元素改变不影响其位置（颜色、字体）

减少重绘

  • DOM的操作不放在循环中
  • 将style样式改成class，改变class即可，只会重绘一次
  • 动画HTML的position尽量设成fixd或absolute
  • 不使用table
代码写的完嘛
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端性能优化之重排和重绘
01-27
有经验的大佬对这个概念一定不会陌生，“浏览器输入URL发生了什么”。估计大家已经烂熟于心了，从计算机网络到JS引擎，一路飞奔到浏览器渲染引擎。 经验越多就能理解的越深。感兴趣的同学可以看一下这篇文章，深度和广度俱佳从输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系!切回正题，我们继续探讨何为重排。浏览器下载完页面所有的资源后，就要开始构建DOM树，于此同时还会构建渲染树(Render Tree)。
网站安全隔离-RBI技术
wangtd的博客
09-28 4441
有了远程浏览器隔离（RBI）技术之后，IT管理员可以采用更开放的互联网策略，让用户工作更便捷。即使用户访问了一些危险 Web内容，也不会影响到用户设备和企业网络。举个形象的例子，远程浏览器隔离（RBI）技术就像遥控的拆弹机器人。让机器人打开可疑包裹，即使包裹爆炸，也不会伤害到远处的真人。简言之，远程浏览器隔离（RBI）技术的价值就是——不让好的内容流出去，不让坏的内容流进来。
【性能优化】频繁操作DOM所引发的重排（回流）与重绘
马云
07-02 1545
为什么不要频繁操作DOM？ 一、DOM和JS属于跨界交流 把 DOM 和 JavaScript 各自想象成一个岛屿，它们之间用收费桥梁连接。——《高性能 JavaScript》 JS 是很快的，在 JS 中修改 DOM 对象也是很快的。在JS的世界里，一切是简单的、迅速的。但 DOM 操作并非 JS 一个人的独舞，而是两个模块之间的协作。 JS 引擎和渲染引擎（浏览器内核）是独立实现的。当我们用 JS 去操作 DOM 时，本质上是 JS 引擎和渲染引擎之间进行了“跨界交流”。 “跨界交流”要收费——.
DOM的重排与重绘
UUID、
03-04 515
DOM的重排与重绘
浏览器解析html
qq_33555718的博客
10-08 295
对于前端开发来讲了解浏览器解析dom的过程是有必要的，可以帮助我们写出更搞笑稳定的代码。这是我之前总结的一些内容今天和大家分享下。 1.浏览器是如何解析dom的浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。 2. 将CSS解析成 CSS Rule Tree 。 3. 根据DOM树和CSS...
Dom节点 时间 重重绘和回流
qq_54201133的博客
06-02 187
Dom节点 时间 重重绘和回流
了解重排与重绘
01-19
前言 ... DOM树：表示页面结构 渲染树：表示DOM节点如何显示 DOM树中的每一个需要显示的节点在渲染树中至少存在一个对应的节点(隐藏的DOM元素在...当DOM的改变影响了元素几何属性（例如宽和高）——浏览器就需要重新计
css重绘与重排的方法
12-13
渲染树的每个节点都有大小和边距等属性，类似于 盒子模型 （由于隐藏元素不需要显示，渲染树中并不包含DOM树中隐藏的元素）。当渲染树构建完成后，浏览器就可以将元素放置到正确的位置了，再根据渲染树节点的样式...
浏览器的重绘repaints与重排reflows深入分析
12-13
主要原因是这些效果通常会产生一系列的浏览器重绘和重排，需要付出高昂的性能代价。那么，什么是浏览器的重绘和重排呢？二者何时发生以及如何权衡？如何在具体的开发过程中将重绘和重排引发的性能问题考虑进去？本文...
浅谈DOM的操作以及性能优化问题-重绘重排
08-31
下面小编就为大家带来一篇浅谈DOM的操作以及性能优化问题-重绘重排。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
DOM 重排与重绘
StartLine_05的博客
09-01 959
简述重排的概念 浏览器下载完页面中的所有组件（HTML、JavaScript、CSS、图片）之后会解析生成两个内部数据结构（DOM 树和渲染树），DOM 树表示页面结构，渲染树表示 DOM 节点如何显示。重排是 DOM 元素的几何属性变化，DOM 树的结构变化，渲染树需要重新计算。 简述重绘的概念 1 重绘是一个元素外观的改变所触发的浏览器行为，例如改变 visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。由于浏览器的流布局，对渲染树的计算通常只需要遍历
DOM操作影响页面的性能（重排重绘）
侯阮悦的博客
08-03 3849
1.页面的渲染过程 （1）Javascript：通过JS实现动画效果或者操作DOM实现交互 （2）Style：计算样式，如果样式有改变将重新计算，并返回给DOM （3）Layout：根据DOM的样式，重新布局（重排） （4）Paint：在多个渲染层上，对新的布局重新渲染（重绘） （5）Composite：将绘制好的多个渲染层合并，显示到页面上 在页面生成时，至少进行一次布局和渲染，...
DOM的回流和重绘
xiaocuizao的博客
08-12 326
DOM的回流：当页面中的元素的位置，大小或结构，定位发生改变，会引发浏览器对当前页面的结构进行重新的计算，非常耗性能。 DOM的重绘：当元素的背景，透明度，颜色等发生变化，那么浏览器会对元素进行重新描绘；这个过程就是浏览器的重绘。 我们前端通常会做一些首屏优化，来增强用户的体验，在首屏优化里，常常会用到懒加载，按需引入一些处理。但是这时也同时会导致DOM的回流和重绘 ...
高性能 DOM & 重排重绘
Suoz的博客
06-23 885
相信学过JavaScript的人都会知道一个道理”DOM操作会影响性能”。有些人仅仅是知道，并不深入了解其中的原理（比如我…自从第一次面试以后,告诉自己不仅要巩固基础和实践操作,同时也要慢慢深入一些知识）DOM是用来操作XML和HTML文档的应用程序接口（API），用JavaScript去操作DOM是一个昂贵的操作 把DOM和JavaScript（这里指ECMAScript）各自想象成一个岛屿，
DOM的重绘与回流
VisonYH的博客
01-20 950
原文地址： http://www.zhangxinxu.com/wordpress/2010/01/%E5%9B%9E%E6%B5%81%E4%B8%8E%E9%87%8D%E7%BB%98%EF%BC%9Acss%E6%80%A7%E8%83%BD%E8%AE%A9javascript%E5%8F%98%E6%85%A2%EF%BC%9F/
关于dom树的重绘和回流
博客
07-31 596
这三个表格文档流内的现象，要是 dom脱离文档流，然后display设置none，和visibility改变值 一样都会重新 Paint和Composite，display还会去除当前的占用空间 参考：https://www.jianshu.com/p/f03e77b0d06b ...
DOM的重排（回流）和重绘（页面渲染过程、重排、回流和重绘概念及其触发操作、浏览器对重排和重绘的优化策略、其它优化方法（基于HTML、CSS方面优化、基于JavaScript方面优化））
AIWWY的博客
09-20 597
目录 页面的渲染过程 重排（回流） 触发操作 重绘 触发操作 重排（回流）和重绘关系 浏览器本身优化策略 优化方法 HTML、CSS方面优化 Javascript方面优化 页面的渲染过程 （1）Javascript：通过JS实现动画效果或者操作DOM实现交互 （2）Style：计算样式，如果样式有改变将重新计算，并返回给DOM （3）Layout：根据DOM的样式，重新布局（重排、回流） （4）Paint：在多个渲染层上，对新的布局重新渲染（重绘） （5）Composi.
重绘和重排
Run_youngman的博客
12-24 939
上一次说到了浏览器的渲染过程中，layout的重新布局是导致性能问题的主因，那么什么情况下会导致这一后果，并且有什么好的方式可以优化呢？ Let’s go. 术语介绍： 某一个或多个dom节点的变化会影响元素的集合属性【宽&高】，这样会有一部分DOM节点受到影响，此时浏览器会使受到影响的部分失效，并重新构造渲染树，这个过程叫做重排。重排过后，浏览器要重新绘制受影响的部分到屏幕中，这个过程叫...
浅谈Web安全技术----RBI
Sunccie36615的博客
06-06 5262
RBI(Remote Browser Isolation),中文翻译过来叫远程浏览器隔离技术
css重绘和重排（回流）
最新发布
09-14
1. 使用 CSS3 动画或过渡代替 JavaScript 实现的动画效果，因为后者可能会导致频繁的重排和重绘； 2. 使用类似 flexbox 和 grid 等布局技术，可以减少页面布局的复杂性，降低重排和重绘的次数； 3. 避免频繁访问会...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值