代码优化介绍

一、代码优化介绍
本质上就是采集大量的执行样本进行数学统计和分析
使用基于Benchmark.js的https://jsperf.com/(已经不再维护了，现在使用jsbench.me)完成
二、慎用全局变量
全局变量定义在全局执行上下文，是所有作用域链的顶端
全局执行上下文一直存在于上下文执行栈，直到程序退出
如果某个局部作用域出现了同名变量则会遮蔽或污染全局

三、缓存全局变量

 

 

四、通过原型对象附加方法

五、避免属性方法使用

 

六、 for循环优化
for(var i=0,len = arr.length;i < len; i++) {
}

七、选择最优的循环方法

 

 

 

八、避免闭包陷阱

闭包是一种强大的 语法
闭包使用不当很容易出现内存泄漏
不要为了闭包而闭包
function foo() {
    var el = document.getElementById('btn')
    el.onclick = function() {
    console.log(el.id)
 }
 el = null // 令el = null
}
foo()
九、采用文档碎片的方式执行效率更高

十、使用克隆的方法 比创建节点执行效率更高
var oldP = document.cerateElement(‘p’)

十一、直接量替换new Object

十二、jsbench使用
https://jsbench.me/

 

十三、减少判断层级

十四、减少读取数据次数

 

十五、用字面量少用构造式

十六、采用事件绑定
  var oUl = document.getElementById('ul')
  oUl.addEventListener('click', showTxt, true)
  function showTxt(ev) {
      var obj = ev.target
      if (obj.nodeName.toLocaleLowerCase() === 'li') {
          console.log(obj.innerHTML)
      }
  }

十七、import异步加载
有些资源没必要一开始就加载

const handleExportExcel = async () => {
  if (!selectionItems.value.length) {
    return ElMessage.warning('请选择商品')
  }
  exportExcelLoading.value = true
  try {
    const { jsonToExcel } = await import('@/utils/export-to-excel')
    jsonToExcel({
      data: selectionItems.value,
      header: {
        id: '编号',
        store_name: '商品名称',
        price: '价格'
      },
      fileName: '测试.xlsx',
      bookType: 'xlsx'
    })
  } catch (err) {
    console.error(err)
  }
  exportExcelLoading.value = false
}

原文链接：https://blog.csdn.net/woyebuzhidao321/article/details/109530186