读《高性能JavaScript》笔记

第一章
加载与执行：
1，js脚本会阻塞页面渲染，<script>尽可能放到<body>标签的底部
2, 合并脚本，页面中的<script>标签越少；HTTP请求带来的额外开销方面，减少页面外链脚本文件的数量将会改善性能
3，css文件是并行下载，不会阻塞页面的其他进程高性能JavaScript编程（高清PDF原版）及中英文对照版 PDF 下载：http://www.linuxidc.com/Linux/2015-08/121418.htm无阻塞脚本：
1，延迟脚本：使用<script>的defer属性（仅适用于IE4+和Firefox3.5以上版本）
2，动态创建<script>来下载并执行代码
3，适用XHR对象下载js代码并注入页面无阻塞脚本工具：YUI3，LazyLoad , LABjs%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%第三章：DOM编程
浏览器把DOM和javascript 独立实现，两个相互独立的功能只要通过接口彼此连接，就会产生消耗。
性能优化：（1），最小化DOM访问次数，尽可能在javascript端处理
E.g：function innerHTMLLoop（）{
for（var count=0;count<15000;count++）{
document.getElementById（"here"）.innerHTML += "a";
}
}优化后：function innerHTMLLoop（）{
var content = "";
for（var count=0;count<15000;count++）{
content += "a";
}
document.getElementById（"here"）.innerHTML = countent;
}（2） , HMTL集合优化
HTML集合包含了DOM节点引用的类数组对象，处于一种“实时状态”实时存在，
当底层文档对象更新时，它也会自动更新
HTML集合有：document.getElementsByName（） , document.images , document.links等//一个意外的死循环
//alldivs.length每次迭代都会增加，反映出的是底层文档的当前状态var alldivs = document.getElementsByTagName（"div"）;
for（var i=0;i<alldivs.length;i++）{
document.body.appendChild（document.createElement（"div"））;
}优化方法： 1,2运行速度差不多
1，把集合长度缓存到一个变量中,，并在迭代中使用var alldivs = document.getElementsByTagName（"div"）;
var len = alldivs.length
for（var i=0;i<len;i++）{
/* 处理代码 */
}
2，如果需要经常操作集合，建议把集合拷贝到一个数组中var alldivs = document.getElementsByTagName（"div"）;
var arr = toArray（alldivs）; //toArray 自定义的集合到数组的函数
for（var i=0;i<arr.length;i++）{
/* 处理代码 */
}3，对于任何类型的DOM访问，当同一个DOM属性或方法需要多次访问时，最好使用一个局部变量缓存此变量function collentionNodesLocal（）{
var coll = document.getElementsByTagName（"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;
}
return name;
}本文永久更新链接地址：http://www.linuxidc.com/Linux/2016-03/129611.htm