循环创建元素时 ES5减少重绘重排的方法

最新推荐文章于 2024-02-29 20:57:28 发布

Zero_kuma

最新推荐文章于 2024-02-29 20:57:28 发布

阅读量128

点赞数

本文链接：https://blog.csdn.net/Zero_kuma/article/details/120981121

版权

web

代码也很简单就是循环创建N个li

但是这么循环创建会有问题，因为ul这个节点已经在html当中充当一个静态元素了，给这个静态元素不断循环放入li，就会形成10次的重绘重排，会影响性能要尽量减少重绘重排的次数

DOM提供了一个API，【document.createDocumentFragment】

从字面上就很好理解，create创建--document文档--Fragment碎片，创建文档碎片，

它就是一个碎片容器，以本案例为例，也就是说可以把循环出来的 li 交给这个碎片容器，

这个碎片容器它是不占据DOM节点的结构，它只是一个容器，所以当你创建碎片容器的时候，它也不在你DOM节点里面

所以可以通过这个API声明一个文档碎片，然后每次循环创建 li 的时候就不要把 li 直接放给正在HTML文档流充当静态元素的 ul，那给谁呢？给这个文档碎片容器

这样这个文档碎片容器里面就存着循环创建的10个li，

最后在循环走完之后，再把这个存有10个li的文档碎片，给这个ul，就只会造成一次重绘重排

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Zero_kuma

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

2023年前端面试汇总-React

越陌度阡

06-29

825

React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event

整理大厂高频核心前端面试题，五万多字，面试必考

猫老板的豆

09-13

2482

如果 Vue 组件中的 data 是个对象，那么所有复用这个组件的地方，都在使用这个组件里面唯一的一个 data，所有使用组件的地方的 data 都会指向栈内这一个 data 的地址，那么会造成。等待执行栈和微任务队列都执行完毕才会执行，并且在执行完每一个宏任务之后，会去看看微任务队列有没有新添加的任务，如果有，会先将微任务队列中的任务清空，才会继续执行下一个宏任务。异步：是指不进入主线程，而进入任务队列的任务，只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程。

参与评论您还未登录，请先登录后发表或查看评论

前端优化方案--减少重排重绘

Web_boom的博客

11-14

1329

最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。有需要的小伙伴，可以点击下方卡片领取，无偿分享。

如何减少重绘和重排

青山不改，绿水长流。

09-27

1849

浏览器会维护1个队列，把所有会引起回流、重绘的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。3、当dom元素position属性为fixed或者absolute, 可以通过css形变触发动画效果，此时是不会出发reflow的。2、尽量减少table使用，table属性变化使用会直接导致布局重排或者重绘。4、不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。

减少重绘和重排(重流)

Flora_SM的博客

12-21

701

1. 最小化重绘和重流由于重绘和重排代价可能较为昂贵，因此最好可以减少它的发生次数。可以合并多次对dom和样式的修改，然后一次处理掉。例如 const el = document.getElementById(‘test’); el.style.padding = ‘5px’; el.style.borderLeft = ‘1px’; el.style.borderRight = ‘2px’; 该例中有3个样式属性被修改了，那么可以采取合并所有的改变然后一次处理。 ※ 方案一：使用cssText（设置

了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有哪些方法

wanghe1111_的博客

03-24

1155

了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有哪些方法

如何减少重排和重绘

最新发布

Zyf14725的博客

02-29

515

重排也叫做回流,简单来说，就是当我们对 DOM 结构的修改引发DOM 几何尺寸变化的时候，会发生回流的过程。比如一下情况:1.一个DOM元素的几何属性变化，常见的几何属性有width,height,padding,margin,left,top...2.DOM节点发生增减或者移动3.读写offset族,scroll族属性的时候，浏览器为了获取这些值，需要回流操作4.调用window.getComputedStyle方法。

JavaScript最全面试题

qq_60976312的博客

06-10

1490

JavaScript最全面试题

前端八股文整理

m0_49324888的博客

08-01

2374

前端八股文整理

知识梳理——JavaScript

wytraining

03-14

1343

1. 说说前端中的事件流 HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件onclick、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。什么是事件流：事件流描述的是从页面中接收事件的顺序. DOM2级事件流包括下面几个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段 addEventListener：addEventListener 是DOM2 级事件新增的指定事件处

前端性能之减少重排和重绘

假装是个web dog

04-13

604

怎么减少重排和重绘？？首先减少获取操作 1 在for循环中，尽量不要进行样式的获取操作（因为一获取就会flush(清空)浏览器维护的队列） 2 尽量少用sytle修改样式，通过添加class进行一次性修改样式 3 使用 translate 代替 left/top等，（translate只会触发重绘，不会引起重排，可以减少一次重排的时间） 4 使用opacity代替visibi...

减少重排提高性能的方式

ll13352976097的博客

05-25

724

尽管网页达到了2MB，但是性能却成了一个热点话题。你的应用越舒畅，用户体验就越好，转换率就越高。也就是说，添加粗浅的CSS3动画或者不考虑后果的控制多个DOM元素会让我感到很惭愧。当在应用视觉效果时，浏览器中用到了两个术语：重绘重绘放生在元素的改变影响显示但不影响布局的时候。例如，opacity, background-color, visibility, 和outline。重绘是很昂贵的，因为浏览器必须检查DOM中所有的节点——在发生改变的元素下，一个或多个元素变的可见！重排重排会有更大的影响。

重绘与重排

freya_Du的博客

02-27

149

重绘 -是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。 -触发重绘的条件：改变元素外观属性。如：color，background-color等。重排（重构/回流/reflow） -当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时...

前端性能优化之减少重排和重绘

CC_Together的博客

04-13

2189

首先需要了解一下浏览器渲染HTML的大致过程：（1）HTML被HTML解析器解析成DOM Tree, css则被css解析器解析成CSSOM Tree（并行解析）。（2）DOM Tree和CSSOM Tree解析完成后，被合并到一起，形成渲染树（render Tree）。（3）重排：节点信息计算，即根据渲染树计算每个节点的几何信息（大小及位置）。（4）重绘：渲染绘制，即根据计算好的信息绘制...

什么是浏览器的重排（reflow）和重绘 (repaint)？如何减少重排和重绘？

热门推荐

sinat_37328421的博客

01-16

1万+

重绘重绘是一个元素外观的改变所触发的浏览器行为，例如改变visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘不会带来重新布局，并不一定伴随重排。重排当DOM变化影响了元素的几何属性（宽、高改变等等）浏览器此时需要重新计算元素几何属性并且页面中其他元素的几何属性可能会受影响这样渲染树就发生了改变，也就是重新构造RenderTree渲染树这个过程叫做重排（reflow）

怎么减少重排和重绘

HWSss的博客

06-04

2163

当页面布局和几何属性改变时就需要重排。下述情况会发生浏览器重排： 1、添加或者删除可见的DOM元素； 2、元素位置改变——display、float、position、overflow等等； 3、元素尺寸改变——边距、填充、边框、宽度和高度 4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变； 5、页面渲染初始化； 6、浏览器窗口尺寸改变——resize事件发生时； ** 减少重排重绘 ** Reflow 的成本比 Repaint 的成本高得多的多。一个节点的 Reflow 很有可能导

前端性能优化之减少重排，对比重排与重绘

cjFrontEnd的博客

03-03

1240

在前端开发的过程中，性能优化是一个最常见的问题，重绘与重排也是提到优化时不可忽视的一块。那么什么是重绘与重排呢，在解释重绘与重排之前，我们首先需要先了解清楚浏览器的渲染过程，下面先上一张比较常见的渲染过程图：根据上图我们可以看到和总结出浏览器的渲染大致分为以下五个步骤： DOM Tree：浏览器根据HTML解析出DOM Tree Style Rules：根据C...

前端性能解决方案

weixin_50504721的博客

11-18

214

前端性能解决方案 1、服务器端采用CDN加速，缩短客户端访问物理路径 2、尽量减少DOM元素的重排和重绘 **重排的概念** 浏览器下载完页面中的所有组件(HTML、Javascript、css、图片)之后会解析生成两个内部数据结构（DOM树和渲染树），DOM树表示页面结构，渲染树表示DOM节点如何显示，重排是DOM元素的几何属性变化，DOM树的结构变化，渲染树需要重新渲染重绘的概念重绘是一个元素外观的改变所触发的浏览器行为，例如改变visibility，outline，背景色等属性，浏览器会根据元素的

减少重绘和回流的方法_最小化回流并提高性能的10种方法

culi4814的博客

08-14

1689

减少重绘和回流的方法Despite web pages reaching 2MB performance remains a hot topic. The slicker your application, the better the user experience and the higher the conversion rate! 尽管网页达到2MB的性能仍然是一个热门话题。应用程序的...

es5 js代码里拼接html元素时方法动态传值

05-11

在 ES5 中，我们通常使用字符串拼接来动态生成 HTML 元素。可以通过字符串拼接的方式来动态传递值。例如，如果我们需要动态生成一个 `<div>` 元素，可以通过以下方式： ```javascript var divId = 'myDiv'; var divContent = 'Hello World'; var divElement = '<div id="' + divId + '">' + divContent + '</div>'; // 将 divElement 插入到文档中 document.body.innerHTML = divElement; ``` 在上面的例子中，我们通过使用字符串拼接的方式，将 `divId` 和 `divContent` 的值动态传递到了 `<div>` 元素中。