【JavaScript】性能优化篇

前言

   不知道各位读者有没有碰到这样一些常见的情况，在不考虑带宽的前提下，一些网站打开的很快，一些网站打开的很慢。
   那么原因是什么呢？因为一些代码的重复、冗余、访问频繁度等等造成引起的，我们在敲代码的过程中可能会很少注意到这方面的问题，光是浏览器兼容就已经够做了，很少会有多余的时间会顾及这方面的情况。
   博主也是偶然在学习的途中意识到性能优化这方面，而且也知道它的重要性，一个好的网站，这方面也是必须要达标的。那么今天博主要在学习的途中记录一下常见的性能优化方案，并以此记录更新下来！

---

**1.数组长度优化**

<script>    var arr = [];     //定义一个空数组    for(var i=0; i<10000; i++){     //定义一个循环5000次的循环        arr.push(i);     //将每次循环的值添加到数组    }    for(var i=0; i<arr.length; i++){     //定义一个数组循环        alert(arr[i]);     ////弹出每个数组的值    }</script>

   可能部分读者不知道我到底想表达什么意思，我们主要看到for循环的条件部分。
   第一个条件：说明数据量庞大。   第二个条件：说明每次都要获取数组的长度。
   那么问题来了，执行一次获取一次长度，执行10000次获取长度，是不是感觉有些太浪费效率了，虽然影响不是很大，而且在数据交互过程中会显得太死板。

解决方法：

<script>    var arr = [];     //定义一个空数组    for(var i=0; i<10000; i++){     //定义一个循环5000次的循环        arr.push(i);     //将每次循环的值添加到数组    }    var arrlength = arr.length;    for(var i=0; i<arrlength; i++){     //定义一个数组循环        alert(arr[i]);     ////弹出每个数组的值    }</script>

---

2.内容添加优化

<script>    for(var i=0; i<2000; i++){     //定义一个循环2000次的循环        document.body.innerHTML +=        "<input type='button' value='按钮'>";        //每次循环出一个的按钮    }</script>

   可能大家会发现，这个打开的话需要加载一段时间，如果我们需要这个业务需求的话不可能说不使用，所以有以下的改良方法。

解决方法：

<script>    var str = "";     //定义一个空的变量    for(var i=0; i<2000; i++){     //定义一个循环2000次的循环        str += "<input type='button' value='按钮'>";        //将每次的内容存入变量    }    document.body.innerHTML = str;     //统一赋值给页面</script>

   当我们这次打开页面会发现加载的速度跟上面的不是一个级别的，这是为什么呢？
   因为我们在用innerHTML做操作时文档一直在获取、赋值，而变量不同，跟文档无关在后台运作，统一赋给文档会获得很显著的成果。

---

3.文档内容预加载