web性能优化之DOM篇

最新推荐文章于 2024-04-29 08:50:07 发布
最新推荐文章于 2024-04-29 08:50:07 发布
阅读量267 收藏
点赞数
分类专栏： 前端开发 文章标签： 性能优化 web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guobotry/article/details/76724100
版权

1. 使用createDocumentFragment,display:none,cloneNode等方法，避免浏览器多次layout
2. 使用requestAnimationFrame或者fastdom（避免连续的强制同步布局发生）
3. classList代替className
4. DOM批量读写，不要一会读一会写
5. 加载页面是尽量给图片设定宽高，避免图片加载完成后重新渲染部分页面
6. 实现元素的动画，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局。
7. display:none的节点先一次性搞完再显示(DOM离线修改)
8. clone节点改完后在显示（DOM离线修改）
9. 尽可能的修改层级比较低的 DOM
10.尽量简化dom结构
11.高级浏览器（除了IE678都可以的）使用flex布局
guobotry
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
fastdom：通过批量执行DOM测量和变异任务来消除布局混乱
02-20
禁食 通过批量执行DOM读/写操作消除了布局混乱（最小压缩后约600个字节）。 fastdom . measure ( ( ) => { console . log ( 'measure' ) ; } ) ; fastdom . mutate ( ( ) => { console . log ( 'mutate' ) ; } ) ; fastdom . measure ( ( ) => { console . log ( 'measure' ) ; } ) ; fastdom . mutate ( ( ) => { console . log ( 'mutate' ) ; } ) ; 输出： measure measure mutate mutate 例子 安装 FastDom与CommonJS和AMD兼容，您可以通过以下方式之一安装它： $ npm instal
03渲染优化-03防止布局抖动的利器-fastDOM
trust_future99的博客
02-26 1334
fastDOM fastDOM gitee地址 fastdom.read(function() { console.log('read'); }); fastdom.write(function() { console.log('write'); }); fastdom.read(function() { console.log('read'); }); fastdom.write(function() { console.log('write'); }); Outputs: rea
探索FastDom：提升前端性能的DOM操作神器
gitblog_00035的博客
03-20 392
探索FastDom：提升前端性能的DOM操作神器 项目地址:https://gitcode.com/wilsonpage/fastdom FastDom 是一个轻量级的JavaScript库，专注于优化和提升在现代浏览器中进行DOM操作的效率。它通过一种聪明的方式来管理DOM更新，以确保最小化重绘和回流，从而提高页面的响应速度和用户体验。 项目简介 FastDom的核心思想是将多个DOM操作分组，...
2021-01-08
web前端技术交流群：457188470
01-08 623
前端性能的影响（长篇大论警告❗️❗️❗️） 前端性能的一个重要指标是页面加载时间，不仅事关用户体验，也是搜索引擎排名考虑的一个因素。 来自Google的数据表明，一个有10条数据0.4秒能加载完的页面，变成30条数据0.9秒加载完之后，流量和广告收入下降90%。 Google Map 首页文件大小从100KB减小到70-80KB后，流量在第一周涨了10%，接下来的三周涨了25%。 亚马逊的数据表明：加载时间增加100毫秒，销量就下降1%。 所以：重铸性能之光，我辈义不容辞 对了，最近有不少小伙伴私信我吐槽说
前端性能优化的几个小点（1）
qq_31460469的博客
01-28 159
1. 记录几个性能优化的好东西。 1.requestAnimationFrame() 2.fastdom 3.Object.freeze() 接下来解释一下这几个小玩意 requestAnimationFrame（） 优点： 浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果。 经过浏览器优化，动画更流畅； 窗口没激活时，动画将停止，省计算资源; fastDom() dom操作 连续触发页...
web性能优化之javascript性能调优
12-10
JavaScript 作为一个解释执行的语言，以及它的单线程机制，决定了性能问题是 JavaScript 的软肋，也是 web 软件工程师们在写 JavaScript 需要高度重视的一个问题，尤其是针对 Web 2.0 的应用。绝大多数 web 软件...
Web性能优化系列 10个提升JavaScript性能的技巧
11-23
但 Javascript 性能优化绝不是一种书面的技术，Nicholas 的技术演进列出了10条建议，帮助你写出高效的 JS 代码。 1. 定义局部变量 当一个变量被引用的时候，JavaScript将在作用域链中的不同成员中查找这个变量。作用...
JS性能优化实现方法及优点进行
11-19
最近刚阅读完《高性能javascript》，想谈谈对js性能优化的看法。理解有些不同，可能还需要各位多多提醒。 话不多说，提到javascript难免会联想到文档对象模型(DOM)，它作用于XML和HTML文档的程序接口(API)，位于...
DOM性能瓶颈与Javascript性能优化
06-09
DOM性能瓶颈与Javascript性能优化
Vue.js 无限滚动列表性能优化方案
12-13
大家都知道，Web 页面修改 DOM 是开销较大的操作，相比其他操作要慢很多。这是为什么呢？因为每次 DOM 修改，浏览器往往需要重新计算元素布局，再重新渲染。也就是所谓的重排（reflow）和重绘（repaint）。尤其是在...
前端项目-fastdom.zip
09-03
前端项目-fastdom,通过批处理DOM读/写操作消除布局混乱
减少布局抖动
06-26
使用一个公共的库fastdom来减少动画中的布局抖动问题
instantiable-fastdom:允许 fastdom 可实例化，以便您可以清除作业组
06-04
可实例化的fastdom 允许 fastdom 可实例化，以便您可以清除作业组。 代码改编自 。 安装 npm install instantiable-fastdom 例子 var Fastdom = require("instantiable-fastdom"); var fd1 = new Fastdom(); var fd2 = new Fastdom(); fd1.write(fn); // Never gets called fd2.write(fn); // Gets called fd1.clear();
Thinking--FastDom消除浏览器布局抖动
李刚的学习专栏
02-14 611
对于大量操作 DOM 的场景，页面时常会出现卡顿现象，导致用户体验不佳。卡顿的原因是由于丢帧导致！FastDom 通过批处理 DOM 读/写操作 消除布局抖动。每一个 measure(读)/mutate(写) 操作任务都会被添加到对应的队列中。队列在下一帧使用 window.requestAnimationFrame() 执行。其目标是在应用程序的所有模块中像一个单例，返回相同实例，统一对 DOM 进行 读/写 操作。
前端开发中那些不可忽视的知识点
油墨香^-^的博客
07-12 242
本文结合自己前端日常开发中，经常用到的且非常重要的一些知识点，进行了汇总。 2.get/post的理解和他们之间的区别 http http方法： GET和POST的区别 3.实现条纹网格的方式 4.js求平面两点之间的距离 5.css禁止用户选择 6.数组去重 7.什么是CDN和CDN的好处 8.正则表达式匹配手机号 9.如何提高首屏加载速度 10.浏览器内核(渲染引擎
MySQL ORDER BY实例及性能优化分析
2401_83432873的博客
04-28 1349
当使用SELECT语句从表中查询数据时，结果集不会按任何顺序排序。要对结果集排序，请使用ORDER BY子句。ORDER BY按单列或多列对结果集排序。按升序或降序对不同列进行结果集排序。下面介绍了ORDER BYFROM tblASC代表升序，DESC代表降序。如果未指定排序规则，默认情况下，order by子句按升序对结果集进行排序。我们练习一些使用该ORDER BY子句的例子。ORDER BY子句允许您使用FIELD()函数为列中的值定义自己的排序顺序。请参orders见下表。
前端页面单元测试最佳策略：全面涵盖逻辑、组件、流程、UI及性能优化测试，全面保障软件应用的质量
最新发布
JINGWHALE
04-29 1297
本文详细介绍了前端页面单元测试的页面框架与逻辑测试（路由测试、页面级数据与状态管理、事件和方法测试、页面级模拟异步行为）、组件测试（组件隔离测试、集成测试）、业务流程测试（用户交互、场景测试、端到端(E2E)测试）、DOM与UI验证（DOM验证测试用例、UI验证测试用例、视觉回归示例）、性能与加载测试（测试性能、页面加载、代码复用、浏览器兼容性）等内容。请注重页面测试的关键要点，具体的测试内容可能需要依据具体情况查阅更详细的资料。
web h5页面怎么做性能优化
05-31
Web H5页面的性能优化可以从以下几个方面入手： 1. 减少HTTP请求数量：减少页面中的HTTP请求可以显著提高性能。可以通过合并CSS、JS文件、压缩图片等方式，减少HTTP请求数量。 2. 压缩文件大小：减小HTML、CSS和JS...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值