【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.文档内容懒加载

   有时候服务器带宽低，或者用户网速不好，会导致页面加载时间过长，尤其是图片这种资源。我们来列举一下解决方法。

1.给Img标签的src属性默认加上一个加载或者读取中的图片形式。
2.通过监听滚动事件，获取Img的top/left减去窗口可视区高度/宽度，看他是否和window.top/left相等，如果相等则把该有的src属性赋给Img标签。
3.通过其他方式事件加载当前窗口可视区以外的图片也将src属性赋给Img标签。