• 性能优化
    • 避免不必要的 DOM 操作
    • 缓存数组长度
    • 异步加载第三方内容
    • 避免使用 jQuery 实现动画

    性能优化

    避免不必要的 DOM 操作

    浏览器遍历 DOM 元素的代价是昂贵的。最简单优化 DOM 树查询的方案是，当一个元素出现多次时，将它保存在一个变量中，就避免多次查询 DOM 树了。

    1. // Recommended
    2. var myList = "";
    3. var myListHTML = document.getElementById("myList").innerHTML;
    5. for (var i = 0; i < 100; i++) {
    6.   myList += "<span>" + i + "</span>";
    7. }
    9. myListHTML = myList;
    11. // Not recommended
    12. for (var i = 0; i < 100; i++) {
    13.   document.getElementById("myList").innerHTML += "<span>" + i + "</span>";
    14. }

    缓存数组长度

    循环无疑是和 JavaScript 性能非常相关的一部分。通过存储数组的长度，可以有效避免每次循环重新计算。

    注: 虽然现代浏览器引擎会自动优化这个过程，但是不要忘记还有旧的浏览器。

    1. var arr = new Array(1000),
    2.     len, i;
    3. // Recommended - size is calculated only 1 time and then stored
    4. for (i = 0, len = arr.length; i < len; i++) {
    6. }
    8. // Not recommended - size needs to be recalculated 1000 times
    9. for (i = 0; i < arr.length; i++) {
    11. }

    异步加载第三方内容

    当你无法保证嵌入第三方内容比如 Youtube 视频或者一个 like/tweet 按钮可以正常工作的时候，你需要考虑用异步加载这些代码，避免阻塞整个页面加载。

    1. (function() {
    3.     var script,
    4.         scripts = document.getElementsByTagName('script')[0];
    6.     function load(url) {
    7.       script = document.createElement('script');
    8.       script.async = true;
    9.       script.src = url;
    10.       scripts.parentNode.insertBefore(script, scripts);
    11.     }
    13.     load('//apis.google.com/js/plusone.js');
    14.     load('//platform.twitter.com/widgets.js');
    15.     load('//s.widgetsite.com/widget.js');
    17. }());

    避免使用 jQuery 实现动画

    1. 禁止使用 slideUp/Down() fadeIn/fadeOut() 等方法；
    2. 尽量不使用 animate() 方法；