高性能Javascript读书笔记

第一章 加载和执行

• 推荐将所有的script标签尽可能的放到body标签的底部

• 合并所有外链的JS

• 无阻塞脚本的方法

  • script标签的defer属性，可以让它先下载，到全部dom加载完毕后再执行
    • 许多浏览器不支持
  • 动态创建script dom节点
    • 可跨域方案，利用动态插入script元素来让脚本读取、生效。

  var scriptElement = document.createElement("script");
  scriptElement.src = "http://anydomain.com/A.js";
  document.getElementByTagName("head")[0].appendChild(scriptElement);
  

  • XMLHttpRequest脚本注入
    • 先创建一个XHR对象，然后用它get下载js文件，最后通过创建动态

第二章 数据存取

• 访问字面量和局部变量的速度最快，访问数组元素和对象成员相对较慢
• 访问局部变量比访问访问跨作用域变量更快，将常用的对象成员，数组元素，全局变量存储到局部变量，加快读写速度。

第三章 DOM编程

• dom操作天生就慢，尽量减少dom操作，减少访问dom的次数。
• 使用document.querySelect来做选择器，比其他方式快。
• 需要多次访问某个dom节点，使用局部变量存储。
• 尽量不要在布局信息改变时做查询。
• 最小化重绘和重排：

  • 合并修改操作

  • 使文档脱离文档流，操作，再带回文档；三种方法使dom脱离文档

    • 隐藏元素（display: none;），操作元素，重新显示

    var ul = document.getElementById('mylist');
    ul.style.display = 'none';
    appendDataToElement(ul, data);
    ul.style.display = 'block';
    

    • 文档片段(推荐，产生的DOM遍历和重排次数最少)

    var fragment = document.createDocumentFragment();
    appendDataToElement(fragment, data);
    document.getElementById('mylist').appendChild(fragment);
    

    • 为修改的节点创建一个备份

     var old = document.getElementById('mylist');
     var clone = old.cloneNode(true);
     appendDataToElement(clone, data);
     old.parentNode.replaceChild(clone, old);
    

• 使用事件委托来减少事件处理器的数量

第四章 算法和流程控制

• 倒序循环
• 减少对象成员和数组项的查找次数

for(var i=0,len = items.length;i<len;i++){}

• 递归中容易出现栈溢出的情况，需要了解一下尾递归

第五章 正则表达式和字符串

• 字符串合并的时候简单的"+"和“+=”操作符
  • str+=‘abc’+'efg;//2个以上的字符串拼接，会产生临时字符串
  • str=str+‘abc’+‘efg’;//推荐，提速10%~40%
    *关于正则还有一堆东西，以后在叙。

后记，这本书之后的东西比如快速响应的用户界面，AJAX,编程实践等等感觉说的不够实在，在这里不想在叙述。