高性能 JavaScript 编程 读书笔记

1.将全部<script>标签放置在</body>上方，由于下载,运行js会阻塞浏览器解析dom
2.非阻塞脚本的秘密在于，等页面完成加载后，再加载javaScript源码，从技术角度讲，这意味着在window的load事件发出后开始下载代码。
能够经过成熟的框架，如lazyLoad，LABjs等实现。
 
3. 函数中局部变量的访问速度老是最快的，而全局变量一般是最慢的，全局变量老是处于运行期上下文做用域链的最后一个位置 
4. 用局部变量存储本地范围以外的变量值。
5. 只有绝对必要时才推荐使用动态做用域。带with ,cath , ()  //或者说避免使用
6. 在脚本中最好当心使用闭包，内存和运行速度都值得被关注。可是你能够将经常使用的域外变量存入局部变量中，而后直接访问局部变量。
7. 用局部变量缓存深度的对象成员
8. 将常用的对象成员，数组项和域外变量存入局部变量中，而后访问局部变量的速度会快于那些原始的变量。




9.  dom对象必须缓存
10.轻轻地触摸DOM，并尽可能保持在ECMAScript范围中
11.HTML集合实际是查询文档，当你更新信息时，每一次都要重复执行这种查询操做！！！使用的时候必定要缓存length
12.访问HTML集合元素时使用局部变量
function collectionNodesLocal(){
var coll = document.getElementById_r('div'),
len = coll.length,
name = '',
el = null;
for(var count = 0; count < len; count++){
el = coll[count]'
name = el.nodeName;
name = el.nodeType;
name = el.tagName;
}

}

13.使用浏览器提供的API过滤非元素节点。

14.学会使用querySelector和querySelectorAll(IE7不支持)
15.当DOM改变影响到元素的几何属性（宽和高）--例如改变了边框的高度或在段落中添加文字，将发生一系列后续动做---- 浏览器须要从新计算元素的几何属性，并且其余元素的几何属性和位置也会所以 改变受到影响。浏览器使渲染树上受到影响的部分失效，而后重构渲染树。这个过程叫作重排版。重排版完成时，浏览器在一个重绘进程中从新绘制屏幕上受影响的部分。
不是全部的DOM改变都会影响几何属性。例如，改变一个元素的背景颜色不会影响它的高度和宽度，在这种状况下，只须要重绘（不须要从新排版），由于元素的布局没有改变。

(1)在下述的状况下会发生重排版：
(2)添加或删除可见的DOM元素。
(3)元素位置改变。
(4)元素尺寸改变。
(5)内容改变。例如，文本改变或图片被另外一个不 同尺寸的所替代。
(6)最初的页面渲染。
(7)浏览器窗口改变尺寸。
(8)根据改变的性质，渲染树上或大或小的一部分重要从新计算。某些改变可致使重排版整    个页面：例如 ，当一个滚动条出现时。




16.将多个DOM和风格改变合并到一个批次上一次性执行，减小重排版和重绘。由于它们的代价昂贵。
(1)
var el = document.getElementById('');
el.style.cssText ='border-left:1px;border-rigth:2px;padding:5px';


jquery 使用：
$("p").css({
 
"color":"white",
 
  "background-color":"#98bf21",
 
"font-family":"Arial",
 
     "font-size":"20px",
 
  "padding":"5px"
 
  });


(2)改变css的类名称。
17.当你查询布局信息，如偏移量，滚动条位置，或风格属性时，浏览器刷新队列并执行全部的修改操做，以返回最新的数值。最好是尽可能减小对布局信息的查询次数，查询时将它赋给局部变量，并用局部变量参与计算。
18.将元素提出动画流
(1)使用绝对坐标定位页面动画的元素，使它位于页面布局流以外。
(2)启动元素动画。当它扩大时，它临时覆盖部分页面。这是一个重绘过程，但只影响页面的一小部分，避免重排版并重绘一大块页面。
(3)当动画结束时，从新定位，从而只一次下移文档其余元素的位置。


19.事件托管 
事件逐层冒泡总能被父元素捕获。你只须要在一个包装元素上绑定一个事件，事件处理时访问事件对象，并判断事件源(目标)，就能够处理子元素发生的全部事件。
20.


21.除非你须要对数目不详的对象属性进行操做，不然避免使用for-in循环，若是你迭代遍历一个有限的，已知其余循环类型更快。
22.减小对象成员和数组项查找的次数(缓存数组项，数组长度)
23.一般，数组元素的处理顺序与任务无关，你能够从最后一个开始，直处处理完第一个元素。
24.将最多见的条件放到首位。
25.查表法




27.javascript和UI更新共享的进程一般被称做浏览器UI线程。此UI线程围绕一个简单队列系统工做。任务被保存到队列中直到进程空闲。一旦空闲，队列中的下一个任务将被检索和运行。这些任务运行Javasc代码或执行UI更新，包括重绘和重排版。每一次用户输入都致使一个或多个任务被加入 。




28.大多数状况下，不必使用eval()或Function，若是可能的话，尽可能避免使用它们。setTimeout()和setInterval()，建议第一个参数传入一个函数而不是一个字符串。
27.使用对象/数组直接量
var object = {
name:'',
count:30
} 
var array = ['Yal,30,true];


29.延迟加载
使用以前不作任何工做。如：
function addHandler(target,eventType,handler){
if(target.addEventListener){  //DOM2 Events
addHandler = function(target,eventType,handler){ //修改了addHandler
target.addEventListener(eventType,handler,false)
}
}
else{  //IE
addHandler = function(target,eventType,handler){ //修改了addHandler
target.attachEvent("on" + eventType,handler);
}
}


}
30.条件预加载
在脚本加载以前提早时行检查，而不等等函数调用。
var addHandler = document.body.addEventListener?
function(target,eventType,handler){  //DOM2 events
target.addEventListener(eventType,handler,false);
}:
function(target,eventType,handler) {  // IE
target.attachEvent('on' + eventType,handler);
}

31.多使用原生方法，如Math中的数学方法

如下记录是我的阅读高性能 JavaScript 编程时以为有用的知识，（其中有两章，第五章：字符串和表达式，第七章：ajax和xml没有阅读），

固然这么好的书，必定会有错漏的地方。下面给出下载地址

http://download.csdn.net/detail/q1w2e3a_4s5d6z/6743101