JavaScript 提高性能

针对 js 文件的加载位置

在 HTML 文件中, <script>标签是可以加载<head>或<body>区域的, 由于 JavaScript 执行和 UI 渲染的是单线程的, 如果加载不顺畅可能导致堵塞, 造成页面空白或卡顿.
1. 如果 js 文件没有特殊要求致命需要在页面渲染之前加载, 那么应当将 <script>放在</body>之前
2. 如果这些 js 文件有明确需求先于 body 执行, 那么就在第一个 js 或者页面上先放一个载入动画

针对 js 文件的合并

更快速的数据访问

对于浏览器而言, 一个标识符所处的位置约深, 去读写他的速度也越慢.

如果我们需要在当前函数内多次用到某一个值, 应当用一个局部变量将其保存

DOM 操作的优化

DOM 操作远比 JavaScript 的执行更耗性能, 应当尽量减少该操作对性能的消耗.

function innerLi_s(){
  var i = 0;
  for(;i&lt;20;i++){
    document.getElementById('Num').innerHTML += 'A'; //进行20此循环, 每次循环都进行2次DOM 元素的访问, 一次读取 innerHTML, 一次写入 innerHTML
  }
}

// 改写为

function innerLi_s(){
  var content = '';
  var i = 0;
  for(;i&lt;20;i++){
    content += 'A' //这里只对 js 的变量循环20次
  };
  document.getElementById('Num').innerHTML += content; //这里只进行2次 DOM 操作
}