前面,不要放在中,防止造成堵塞
尽量减少请求,单个100KB的文件比4个25KB的文件更快,也就是说减少页面中外链的文件会改善性能
尽量使用压缩过的JS文件,体积更小,加载更快
数据存取使用局部变量和字面量比使用数组和对象有更少的读写消耗
尽可能使用局部变量代替全局变量
如无必要,不要使用闭包;闭包引用着其他作用域的变量,会造成更大的内存开销
原型链不要过深、对象嵌套不要太多
对于多次访问的嵌套对象,应该用变量缓存起来
DOM编程不要频繁修改DOM,因为修改DOM样式会导致重绘(repaint)和重排(reflow)
如果要修改DOM的多个样式可以用cssText一次性将要改的样式写入,或将样式写到class里,再修改DOM的class名称
const el = document.querySelector(".myDiv") el.style.borderLeft = "1px" el.style.borderRight = "2px" el.style.padding = "5px"
可以使用如下语句代替
const el = document.querySelector(".myDiv") el.style.cssText = "border-left: 1px; border-right: 2px; padding: 5px;"
cssText会覆盖已存在的样式,如果不想覆盖已有样式,可以这样
el.style.cssText += ";border-left: 1px; border-right: 2px; padding: 5px;"
避免大量使用:hover
使用事件委托
// good document.querySelector("ul").onclick = (event) => { let target = event.target if (target.nodeName === "LI") { console.log(target.innerHTML) } } // bad document.querySelectorAll("li").forEach((e) => { e.onclick = function() { console.log(this.innerHTML) } }) 批量修改DOM
当你需要批量修改DOM时,可以通过以下步骤减少重绘和重排次数:
使元素脱离文档流
对其应用多重改变
把元素带回文档中
该过程会触发两次重排——第一步和第三步。如果你忽略这两个步骤,那么在第二步所产生的任何修改都会触发一次重排。
有三种方法可以使DOM脱离文档:
隐藏元素,应用修改,重新显示
使用文档片断(document.fragment)在当前DOM之外构建一个子树,再把它拷回文档
将原始元素拷贝到一个脱离文档的节点中,修改副本,完成后再替换原始元素
算法和流程控制改善性能最佳的方式是减少每次迭代的运算量和减少循环迭代次数
JavaScript四种循环中for while do-while for-in,只有for-in循环比其他其中明显要慢,因为for-in循环要搜索原型属性
限制循环中耗时操作的数量
基于函数的迭代forEach比一般的循环要慢,如果对运行速度要求很严格,不要使用
if-else switch,条件数量越大,越倾向于使用switch
在判断条件多时,可以使用查找表来代替if-else switch,速度更快
switch(value) { case 0: return result0 break case 1: return result1 break case 2: return result2 break case 3: return result3 break } // 可以使用查找表代替 const results = [result0, result1, result2, result3]
如果遇到栈溢出错误,可以使用迭代来代替递归
字符串str += "one" + "two"
此代码运行时,会经历四个步骤:
在内存中创建一个临时字符串
连接后的字符串 onetwo 被赋值给该临时字符串
临时字符串与str当前的值连接
结果赋值给str
str += "one" str += "two"
第二种方式比第一种方式要更快,因为它避免了临时字符串的产生
你也可以用一个语句就能达到同样的性能提升
str = str + "one" + "two"快速响应用户界面
对于执行时间过长的大段代码,可以使用setTimeout和setInterval来对代码进行分割,避免对页面造成堵塞
对于数据处理工作可以交由Web Workers来处理,因为Web Workers不占用浏览器UI线程的时间
编程实践使用Object/Array字面量
const obj = new Object() const newObj = {} const arry = new Array() const newArry = []
使用字面量会运行得更快,并且节省代码量
位操作在JavaScript中性能非常快,可以使用位运算来代替纯数学操作
x =* x // 用位运算代替 x <<= 1
如无必要,不要重写原生方法,因为原生方法底层是用C/C++实现的,速度更快
参考资料高性能JavaScript
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/100916.html
摘要:本文是图说系列文章的第五篇。这样的话,使用的开发者也不需要做任何适配,但是它们却能获得更高性能。该图并不是用来准确的衡量其性能的。运行编写出高性能的代码是可能的。这种清理工作由引擎自动进行,称为垃圾回收。 本文是图说 WebAssembly 系列文章的第五篇。如果您还未阅读之前的文章,建议您从第一篇入手。 在上一篇文章中,我们说到了使用 WebAssembly 和 JavaScript...
摘要:下面我们撇开网络方面的优化,只分析静态资源方面的优化。不过,也会阻止的构建和延缓网页渲染。未优化正常加载优化后异步加载根据上面的分析,我们可以清楚的认识到,非必要优先加载的,选择异步加载是最优选择。 为什么做优化 经典问题:白屏时间过长,用户体验差产生的原因:网络问题、关键渲染路径(CRP)问题 怎么做优化 如何做好优化呢,网上随便一搜,就有很多优化总结,无非就是网络优化、静态资源(h...
摘要:下面我们撇开网络方面的优化,只分析静态资源方面的优化。不过,也会阻止的构建和延缓网页渲染。未优化正常加载优化后异步加载根据上面的分析,我们可以清楚的认识到,非必要优先加载的,选择异步加载是最优选择。 为什么做优化 经典问题:白屏时间过长,用户体验差产生的原因:网络问题、关键渲染路径(CRP)问题 怎么做优化 如何做好优化呢,网上随便一搜,就有很多优化总结,无非就是网络优化、静态资源(h...
摘要:下面我们撇开网络方面的优化,只分析静态资源方面的优化。不过,也会阻止的构建和延缓网页渲染。未优化正常加载优化后异步加载根据上面的分析,我们可以清楚的认识到,非必要优先加载的,选择异步加载是最优选择。 为什么做优化 经典问题:白屏时间过长,用户体验差产生的原因:网络问题、关键渲染路径(CRP)问题 怎么做优化 如何做好优化呢,网上随便一搜,就有很多优化总结,无非就是网络优化、静态资源(h...
摘要:插件性能优化及个人常用优化方法经常会触发视觉变化。作用域链指的是当前作用于下可用变量的集合,它在各种主流浏览器中至少包含两个部分局部变量的集合和全局变量的集合。在考虑优化时,数值和变量的性能差不多,并且速度显著优于对象属性和数组元素。 JavaScript 插件性能优化及个人react常用优化方法 JavaScript 经常会触发视觉变化。有时是直接通过样式操作,有时是会产生视觉变化...
阅读 1302·2021-09-24 10:26
阅读 3637·2021-09-06 15:02
阅读 574·2019-08-30 14:18
阅读 559·2019-08-30 12:44
阅读 3103·2019-08-30 10:48
阅读 1917·2019-08-29 13:09
阅读 1978·2019-08-29 11:30
阅读 2261·2019-08-26 13:36