前端性能优化(DOM篇)

简介: 原文链接:https://segmentfault.com/a/1190000000490322 缓存DOM对象 JavaScript的DOM操作可以说是JavaScript最重要的功能,我们经常要根据用户的操作来动态的增加和删除元素,或是通过AJAX返回的数据动态生成元素。

原文链接:https://segmentfault.com/a/1190000000490322

缓存DOM对象

JavaScript的DOM操作可以说是JavaScript最重要的功能,我们经常要根据用户的操作来动态的增加和删除元素,或是通过AJAX返回的数据动态生成元素。比如我们获得了一个很多元素的数组data[],需要将其每个值生成一个li元素插入到一个id为container的ul元素中,最简单(最慢)的方式是:

var liNode, i, m;
for (i = 0, m = data.length; i < m; i++) {
    liNode = document.createElement("li"); liNode.innerText = data[i]; document.getElementById("container").appendChild(liNode); } 

这里每一次循环都会去查找id为container的元素,效率自然非常低,所以我们需要将元素在循环前查询完毕,在循环中仅仅是引用就行了,修改代码为:

var ulNode = document.getElementById("container");
var liNode, i, m;
for (i = 0, m = data.length; i < m; i++) { liNode = document.createElement("li"); liNode.innerText = data[i]; ulNode.appendChild(liNode); } 

缓存DOM对象的方式也经常被用在元素的查找中,查找元素应该是DOM操作中最频繁的操作了,其效率优化也是大头。在一般情况下,我们会根据需要,将一些频繁被查找的元素缓存起来,在查找它或查找它的子孙元素时,以它为起点进行查找,就能提高查找效率了。

在内存中操作元素

由于DOM操作会导致浏览器的回流,回流需要花费大量的时间进行样式计算和节点重绘与渲染,所以应当尽量减少回流次数。一种可靠的方法就是加入元素时不要修改页面上已经存在的元素,而是在内存中的节点进行大量的操作,最后再一并将修改运用到页面上。DOM操作本身提供一个创建内存节点片段的功能:document.createDocumentFragment(),我们可以将其运用于上述代码中:

var ulNode = document.getElementById("container");
var liNode, i, m;
var fragment = document.createDocumentFragment(); for (i = 0, m = data.length; i < m; i++) { liNode = document.createElement("li"); liNode.innerText = data[i]; fragment.appendChild(liNode); } ulNode.appendChild(fragment); 

这样就只会触发一次回流,效率会得到很大的提升。如果需要对一个元素进行复杂的操作(删减、添加子节点),那么我们应当先将元素从页面中移除,然后再对其进行操作,或者将其复制一个(cloneNode()),在内存中进行操作后再替换原来的节点

一次性DOM节点生成

在这里我们每次都需要生成节点(document.createElement("li")),然后将其加入到内存片段中,我们可以通过innerHTML属性来一次性生成节点,具体的思路就是使用字符串拼接的方式,先生成相应的HTML字符串,最后一次性写入到ul的innerHTML中。修改代码为:

var ulNode = document.getElementById("container");
var fragmentHtml = "", i, m; for (i = 0, m = data.length; i < m; i++) { fragmentHtml += "<li>" + data[i] + "</li>"; } ulNode.innerHTML = fragmentHtml; 

这样效率也会有提升,不过手动拼写字符串是相当麻烦的一件事

通过类修改样式

有时候我们需要通过JavaScript给元素增加样式,比如如下代码:

element.style.fontWeight = 'bold';
element.style.backgroundImage = 'url(back.gif)';
element.style.backgroundColor = 'white';
element.style.color = 'white';
//... 

这样效率很低,每次修改style属性后都会触发元素的重绘,如果修改了的属性涉及大小和位置,将会导致回流。所以我们应当尽量避免多次为一个元素设置style属性,应当通过给其添加新的CSS类,来修改其CSS

.element {
    background-image: url(back.gif); background-color: #fff; color: #fff; font-weight: 'bold'; /*...*/ } 
element.className += " element";

通过事件代理批量操作事件

还是之前那个ul和添加li,如果我们需要给每个li都绑定一个click事件,就可能写出类似如下代码:

var ulNode = document.getElementById("container");
var fragment = document.createDocumentFragment(); var liNode, i, m; var liFnCb = function(evt){ //do something }; for (i = 0, m = data.length; i < m; i++) { liNode = document.createElement("li"); liNode.innerText = data[i]; liNode.addEventListener("click", liFnCb, false); fragment.appendChild(liNode); } ulNode.appendChild(fragment); 

这里每个li元素都需要执行一次addEventListener()方法,如果li元素数量一多,就会降低效率。所以我们可以通过事件代理的方式,将事件绑定在ul上,然后通过event.target来确定被点击的元素是否是li元素,同时我们也可以使用innerHTML属性一次性创建节点了,修改代码为:

var ulNode = document.getElementById("container");
var fragmentHtml = "", i, m; var liFnCb = function(evt){ //do something }; for (i = 0, m = data.length; i < m; i++) { fragmentHtml += "<li>" + data[i] + "</li>"; } ulNode.innerHTML = fragmentHtml; ulNode.addEventListener("click", function(evt){ if(evt.target.tagName.toLowerCase() === 'li') { liFnCb.call(evt.target, evt); } }, false); 

这样事件绑定的代码就只要执行一次,可以监听所有li元素的事件了。当然如果需要移除事件回调函数,我们也不需要循环遍历所有的li元素,只需要移除ul元素上的事件处理就行了

目录
相关文章
|
8天前
|
存储 前端开发 安全
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
85 5
|
4月前
|
前端开发 JavaScript 索引
前端性能优化:虚拟滚动技术原理与实战
前端性能优化:虚拟滚动技术原理与实战
514 80
|
4月前
|
缓存 监控 前端开发
前端性能优化:现代框架的关键策略
前端性能优化:现代框架的关键策略
223 74
|
4月前
|
缓存 前端开发 JavaScript
前端性能优化:打造流畅的用户体验
前端性能优化:打造流畅的用户体验
|
8月前
|
缓存 前端开发 UED
如何优化前端性能以提高加载速度
前端性能优化对提升网站加载速度至关重要,直接影响用户体验、SEO排名和转化率。本文介绍了优化前端加载速度的关键技巧,包括最小化HTTP请求、使用CDN、优化图片、利用浏览器缓存、压缩文件和实现懒加载。通过这些方法,可以显著减少页面加载时间,提高网站的整体性能和用户满意度。
|
9月前
|
前端开发 JavaScript 开发者
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
11月前
|
缓存 前端开发 JavaScript
利用代码分割优化前端性能:策略与实践
在现代Web开发中,代码分割是提升页面加载性能的有效手段。本文介绍代码分割的概念、重要性及其实现策略,包括动态导入、路由分割等方法,并探讨在React、Vue、Angular等前端框架中的具体应用。
|
7月前
|
人工智能 JavaScript 前端开发
Vue 性能革命:揭秘前端优化的终极技巧;Vue优化技巧,解决Vue项目卡顿问题
Vue在处理少量数据和有限dom的情况下技术已经非常成熟了,但现在随着AI时代的到来,海量数据场景会越来越多,Vue优化技巧也是必备技能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
10月前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣,提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心,通过用户行为数据分析和机器学习提高匹配准确性。
674 5
|
11月前
|
前端开发 安全 UED
2024年前端性能优化新策略
2024年前端性能优化策略涵盖代码分割与环境变量管理。代码分割通过动态导入和按需加载CSS减少初始加载时间;环境变量管理则确保敏感信息安全,简化多环境配置。结合最新工具和技术,可大幅提升Web应用性能与用户体验。

热门文章

最新文章