JavaScript 机能优化

2024年1月6日 167次阅读来源: woai3c

加载与实行

将<script>标签放在</body>前面，不要放在<head>中，防备形成梗塞
只管削减请求，单个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
运用事宜托付

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>凤梨</li>
</ul>

// 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

    原文作者：woai3c
    原文地址: https://segmentfault.com/a/1190000017842562
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

算法网