JavaScript页面优化

总结下写页面时需要优化的部分，限新手哈

1.问题：如果JavaScript功能被禁用怎么办--预留退路

<span style="font-size:18px;"><a href="javascript:showPic("cooffe.jpg");return false;">coffee</a>

</span>

<span style="font-size:18px;"><a href="#" οnclick="showPic("cooffe.jpg");return false;">coffee</a>
</span>

不要使用JavaScript：伪协议，也不要使用”#“记号，这样会在不支持JavaScript的浏览器中使链接无效。

<span style="font-size:18px;"><a href="cooffe.jpg" οnclick="showPic("cooffe.jpg");return false;">coffee</a></span>

把href设置为一个真实值不但是举手之劳，而且也使页面有了退路。虽然没有激活JavaScript的用户需要点击后退才能重新看到前一个页面，但总比看不到图片要好的多。

2.网页的行为（JavaScript）和结构分离

把onclick时间函数直接插入html中，如上面，不符合分离原则，应该放在外部文件中，这样更容易理解也更容易管理，不要为类似的原素添加一样的操作。

3.向后兼容性。

浏览器对JavaScript的支持程度不同，有些古老的浏览器可能无法理解DOM提供的方法和属性。

解决方案是，在脚本里对浏览器对JavaScript的支持程度进行查询。

(1)对象检测：

<span style="font-size:18px;">if(!getElementById||!getElementsByTagName) return false;

</span>

（2）浏览器嗅探：

通过提取浏览器供应商提供的信息（品牌，版本等）来判断是否兼容JavaScript方法，但是有些浏览器可能会撒谎，另一方面，版本随时在更新，测试的组合会越来越多，带你会越来越复杂。

3.把多个JavaScript函数绑定到onload事件处理函数上

有些涉及到dom的函数要在文档加载之后才能执行，因为在HTML文档完成加载前，dom是不完整的；

网页加载完毕时会触发一个onload事件，这个事件与window向关联：

window.onload = showPic

但是假如有俩个函数：firstFunction()和secondFunction()；如果采用

<span style="font-size:18px;">window.onload = firstFunction;
window.onload = secondFunction;
</span>

这样的话只有最后一个被实际执行，第一个被覆盖。
如果只有少量函数，可以采用匿名函数如下：

<span style="font-size:18px;">window.onload = function(){
firstFunction();
secondFunction();
}
</span>

<span style="font-size:18px;">这个技巧简明又实用但是适合绑定函数不多的场合。
还有一个更通用的方案--addLoadEvent.onload，由Simon Willison编写的。它只有一个参数：打算在页面加载完毕时执行的函数的名字。</span>

下面是addLoadEvent()函数将要完成的操作：

（1）把现有的window.onload事件处理函数的值存入变量oldonload；

（2）如果在做个饭处理函数上没有绑定任何函数，就像平时一样将心函数添加给他

（3）如果在这个处理函数上已经绑定了一些函数，就把新函数追加到现有指令末尾。

代码如下：

<span style="font-size:18px;">function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = func(){
oldonload();
func();
}
}
}

</span>

这相当于在页面加载完毕时执行的函数创建一个队列，如果想加入函数只要写：

addLoadEvent(firstFunction);

addLoadEvent(secondFunction);

4.尽量少访问DOM和尽量少用标记

<span style="font-size:18px;">if (document.getElementsByTagName("a").length>0){
var links = document.getElementsByTagName("a");
for(var i=0;i<links.length;i++){
//对每个链接的处理
}
}
</span>

这段代码能运行却不是最优的，不管什么时候，只要是查询DOM中的元素，浏览器都会搜索整个DOM树，从中差找可能匹配的原始，这个代码竟然使用了两次getElementByTagName方法执行相同的操作，浪费一次搜索。最好的方法是把第一次搜索的结果保存在一个变量中，然后在循环中重用该结果，比如：

<span style="font-size:18px;"><pre name="code" class="javascript">var links = document.getElementsByTagName("a");</span>

if (links.length>0){for(var i=0;i<links.length;i++){//对每个链接的处理}} 这样一来，代码功能没变，但是搜索DOM次数由两次降低为一次。使用JavaScript框架（如jQuery）提供的CSS选择器来实现查找功能，如var element = $(“.shoppingcart”)同样也要遍历整个DOM树来达到目的，建议将第一次查找的结果保存到变量中，在以后需要的时候重用即可，不必再重复进行查找。

另外，要尽量减少文档中的标记数量，过多不必要的元素知会增加DOM树的规模，进而增加遍历DOM树以查找特定元素的时间.

DOM规模对页面性能影响很大，具体表现在：

• 占用的内存
• 从根节点到子节点的style变化所花费的开销
• IE中CSS查找的性能问题
• DOM遍历操作的性能问题

所以，警惕你的DOM树！

1. 前端必读：浏览器内部工作原理（详细，全面，入理）：http://kb.cnblogs.com/page/129756/#chapter5 

2. 通过浏览器渲染过程来进行前端优化：http://www.cnblogs.com/baochuan/archive/2012/05/29/2524694.html

3. 回流与重绘：CSS性能让JavaScript变慢？（讲的非常细，非常精彩）：http://www.cnblogs.com/rhinemetal/archive/2012/06/29/2569517.html

4. 让网络更快一些——最小化浏览器中的回流(reflow)：http://www.zhangxinxu.com/wordpress/?p=311

5. 高性能WEB开发(8) - 页面呈现、重绘、回流：http://www.blogjava.net/BearRui/archive/2010/05/10/web_performance_repaint_relow.html

6.web页面高性能http://www.blogjava.net/BearRui/category/44602.html