减少操作DOM原因

最新推荐文章于 2024-02-25 00:15:00 发布
最新推荐文章于 2024-02-25 00:15:00 发布
阅读量310 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HWSss/article/details/103758364
版权

为什么不支持操作Dom节点原因 个人觉得:在浏览器生成网页时要经过

  1. 解析HTML 生成DOM树
  2. 解析css 生成css规则树
  3. 合并DOM树和css树生成render规则树 开始渲染页面
  4. 布局render树对各元素尺寸,位置进行计算，得到每个节点的几何信息计算网 页每个标签布局距离 颜色 属性 //触发简称重排
  5. 开始绘制 render树 // 重绘
  6. 浏览器会将各层节点的像素信息发送给GPU，GPU将各层合成、绘制展示到页面上

在我们操作DOM节点 修改元素布局就会引发页面的重排 然后在进行重绘

当然只修改dom元素中的一些 颜色 样式 不会引发重排 重绘

如果修改其中的 布局内容 增删dom 位置结构 尺寸 都会引发重排 重绘 从而消耗性能

编程奥特曼
关注
减少访问DOM的次数提升javascript性能
10-26
为了进一步减少DOM操作，以下是一些实用策略： 1. **缓存引用**：如果需要多次访问同一元素，先将其保存到变量中，避免反复查找。例如，`var element = document.getElementById('id');`之后就可以直接使用`element...
jQuery原理系列-常用Dom操作详解
11-25
在JavaScript的世界里，jQuery是一个广泛使用的库，它简化了DOM操作和事件处理。在这个"jQuery原理系列-常用Dom操作详解"中，我们将深入探讨几个关键的jQuery功能。 首先，我们来看事件绑定。jQuery的`$(el).bind()...
为什么要尽量减少DOM操作？
weixin_34324081的博客
09-09 985
2019独角兽企业重金招聘Python工程师标准>>> ...
JS中为什么要减少DOM操作？
The_upside_of_down的博客
11-04 758
曾经比较流行的jquery框架主要优点之一：出色的DOM操作的封装。但是，目前流行的框架中基本上都摒弃了DOM操作的方法。 主要原因大致上都是在说要减少dom层的操作，原因是因为dom操作慢。 那么dom操作为什么慢？ 这就要提及浏览器渲染页面，浏览器分为：渲染引擎和js引擎。 渲染引擎工作： 1、解析HTML代码，生产DOM tree。 2、解析CSS...
为什么要减少操作DOM
power8988的博客
08-17 1094
为什么要减少操作DOM？ 下面将按照以下布局同时操作div1和div2；然后在控制台打印出所需的时间，对时间尽心对比； 以下是布局：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="div1"></div> <div
文档碎片对象的角度看 减少对 dom 的操作
weixin_45259457的博客
03-03 256
文档碎片对象的角度看 减少对 dom 的操作 减少dom操作 通常我们总是在使用各种 前端框架时， 会说减少dom操作；尽可能多的使用前端框架所带的方法去操作元素， 为什么要减少dom操作？ 我们平时每次对dom的操作都会触发"重排"（重新渲染界面，发生重绘或回流），这严重影响到能耗，一般通常采取的做法是尽可能的减少 dom操作来减少"重排"， 怎样减少dom操作？ 文档碎片 可以帮我们； ** 什么是文档碎片？** 文档碎片： document.createDocumentFragment
为什么要减少DOM操作
silentCoder的博客
03-05 3708
今天，在这学习vue，突然想到一个问题，我jQuery用的这么爽，看到什么元素，想操作dom就直接选中进行变化，好像没什么不方便的啊？那为啥我用的jQuery操作dom的构建页面的方法就这么被淘汰了呢？那就问百度吧。结果基本一面倒的都在说需要减少dom层的操作，原因，就是因为操作dom慢。至于为啥慢，就涉及到浏览器渲染页面。浏览器分为：渲染引擎和js引擎。渲染引擎工作：解析HTML代码，生产DOM...
vue操作dom元素的3种方法示例
10-14
Vue提倡通过数据驱动视图，因此在设计组件时，应尽量减少直接操作DOM，而是更新数据并让Vue自动处理视图的更新。只有在无法避免的情况下，才考虑使用上述方法。同时，对于复杂交互，Vue的自定义指令和组件系统通常能...
jQuery DOM操作小结与实例
12-07
jQuery的这些DOM操作极大地简化了JavaScript中的DOM操作，提高了开发效率，并且减少了出错的可能性。理解并熟练运用jQuery的DOM操作是提升Web开发能力的关键步骤。通过实例实践，你可以更深入地理解这些概念，并将...
js表格操作，DOM实现数据动态增删查改
12-01
在JavaScript编程中，DOM（Document Object Model）是用于表示HTML或XML文档的一种树形...这不仅锻炼了JavaScript操作DOM的能力，也加深了对数据管理的理解。记住，实践是最好的老师，动手尝试是掌握这些技巧的关键。
【JavaScript】减少 DOM 操作
最新发布
好久不见的流星
02-25 1729
减少DOM操作是提高Web应用性能的有效途径之一。通过使用文档片段、事件委托、缓存选择器、缓存计算值等技巧，可以有效降低浏览器的重排和重绘次数，提高页面性能。在编写JavaScript代码时，要时刻关注DOM操作的影响，并选择最优的方案。希望通过本篇博客，你对如何减少DOM操作有了更清晰的认识，并能够在实际项目中应用这些技巧。
JS性能优化——减少DOM操作次数
weixin_39307273的博客
02-20 2157
DOM操作会导致浏览器重解析，引起重排（回流）和重绘，直接影响页面性能 对DOM的操作一般有两种：修改已存在页面上的DOM元素（更改样式），创建插入新的DOM元素 这里提出几个方案来减少DOM操作次数，减少重排和重绘的频率 修改DOM元素的样式 1、给DOM元素直接添加一个新的css类名 给一个元素一次性添加多个样式属性，只触发一次重绘 需求：需要写一个函数来修改一个DOM元素的...
编写js时减少DOM操作的详解
weixin_42477164的博客
04-04 320
闲话不再多说了，上代码： <body> <div id='container'></div> </body> <script src='jQuery-3.0.0.js'></script> <script> var arr = ['QWERTY','ASDFGH','ZXCVBN']; ...
说一下减少dom的办法？一次性给你大量的dom怎么优化？
一夜枫林
07-27 4827
一、减少dom数量的方法 可以使用伪元素，阴影实现的内容尽量不使用DOM实现，如清除浮动、样式实现等； 按需加载，减少不必要的渲染； 结构合理，语义化标签 二、大量DOM时的优化 当对Dom元素进行一系列操作时，对Dom进行访问和修改Dom引起的重绘和重排都比较消耗性能，所以关于操作Dom，应该从以下几点出发： 1. 缓存Dom对象 首先不管在什么场景下。操作Dom一般首先会去访问Dom，尤其是像循环遍历这种事件复杂度可能会比较高的操作/那么可以在循环之前就将主节点，不必循环的Dom节点先获取到，那么在
性能优化——雅虎军规/减少DOM操作
chanda_yang的博客
08-03 608
雅虎14军规： 1) 减少HTTP请求  图片地图 Image Map——组合多个图片到一个图片当中  CSS Sprites——组合页面中的图片到单个文件中，使用background-image和background-position定位  内联图片和脚本——使用data: URL scheme在页面中内嵌图片  样式表合并 2) 使用CDN 内容分发网络 常用的CDN（百
为什么要减少dom操作
qq_38549597的博客
03-31 553
本文摘自：  [https://my.oschina.net/u/1580821/blog/744684] ，在这里做一下笔记 DOM其实就是一个javascript对象，每个DOM节点就是这个对象里面的属性。所以，操作DOM其实就是修改js对象的属性值（就好比：js.a = “b”），这个js对象改变后，会触发一些浏览器的行为，这个行为（比如layout和paint）就是代价大、耗性能...
【vue设计与实现】简单Diff算法 1-减少DOM操作的性能开销
loyd3的博客
09-05 501
这种做法问题也很明显，这里假定的是新的一组子节点的数量和旧的相同，但是新旧两组子节点的数量未必相同。类似地，新的一组子节点的数量也可以比旧的多，这时候应该挂在新增节点。之前针对两组子节点的更新，采用了一种简单直接的手段，即卸载全部旧子节点，再挂在全部新子节点。关于Diff算法，简单来说，当新旧vnode的子节点都是一组节点的时候后，为了以最小的性能开销完成更新操作，需要比较两组子节点，用于比较的算法就叫Diff算法。因此，在更新时，不应该是遍历旧的一组子节点，而是遍历其中长度较短的那一组。
vue---减少操作dom，一步步养成好习惯
maidu_xbd的博客
07-23 1084
最近在做人脸识别会议签到的项目，签到过程描述如下： 签到前人脸图像上方增加了一层“遮罩”，为暗色；签到后点亮头像，为外层div添加样式class="signend"即可去掉“遮罩”层。 <div class="people" id="peopleList" @scroll="scroll" ref="peopleList"> <div v-for=...
现代前端为什么要使用虚拟DOM
Asion的博客
06-05 956
一、虚拟DOM与DOM的区别 仅仅修改虚拟DOM中内容，不会带来页面的排版与重绘操作。在完成虚拟DOM修改后，进行真实DOM的修改，才会使页面重绘。 虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分，最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗 真实的DOM中，过多的内容修改，会带来多次的页面重绘，极大的损耗页面的性能。而在使用虚拟DOM时，不管一次修改了多少内容，最后只会发生一次页面的重绘，大大的提高了页面的性能。 二、虚拟DOM的优势 Vi...
如何减少对dom节点的操作
06-10
减少对DOM节点的操作可以提高网页性能和用户体验。以下是一些减少DOM操作的方法： 1. 缓存DOM查询结果：避免重复查询相同的DOM节点，可以将它们缓存在变量中，这样可以避免不必要的查询和操作。 2. 批量修改DOM：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值