javaScript扫盲之代码性能

 

平稳退化

1、何为平稳退化？

如果正确使用了JavaScript脚本，就能让访问者在其浏览器不支持JavaScript的情况下仍能顺利的浏览网站。这就是所谓的“平稳退化”，也就是说，虽然某项功能无法使用，但最基本的操作仍能顺利完成。

 

2、平稳退化的例子

“javascript:”伪协议

Eg：<a href="javascript:showPic(this);return false;" >blackPic</a>

当浏览器不支持JavaScript的时候，不会顺利打开链接页面。

 

内嵌事件处理函数

Eg：<a href="#" onclick="showPic(this);return false;">blackPic</a>

“#”符号是一个仅供文档内部使用的标记（但就这条指令而言，“#”是未指向任何目标的内部链接）

同样不能平稳退化。

 

可以平稳退化的

Eg：<a href="images/blackPic.jpg" onclick="showPic(this);return false;" >blackPic</a>    

即使不支持JavaScript，也会按照默认的href，打开链接，只是少了JavaScript的效果。

 

3 、为啥需要平稳退化？

搜索机器人是一种自动化程序，它们预览Web的目的是为了把各种网页添加到搜索引擎的数据库里。只有极少的搜索机器人能够理解JavaScript代码。所以，如果JavaScript网页不能平稳退化，其在搜索引擎上的排名就可能大受损害。

 

 

 

对象检测

 

所有的元素（包括方法）都可以作为对象，可以把不支持某个特定DOM方法的浏览器检测出来。即：

         If(method){ statements;}

在使用对象检测时，一定要删除方法名后面的圆括号，如果不删掉，测试的将是方法的结果，无论方法是否存在。

 

比较好的方法是 if(!method){return false;}，比较直观，操作也少。

如果需要测试多个属性或方法是否存在，可以用“逻辑或”操作符将其合并。

Eg：if(!method1 || !method2){ return false; }

 

 

 

键盘访问事件

专门用来处理键盘访问的事件是onkeypress，按下键盘上任何一个按键都会触发onkeypress事件。这会带来麻烦。

在几乎所有的浏览器里，用Tab键移动到某个链接然后按下回车键的动作也会触发onclick事件。所以，不用onkeypress事件，而用onclick代替，也是可以的。

 

 

DOM Core和HTML-DOM

DOM Core的方法适用于任何一种标记语言，是通用的。而HTML-DOM只能用来处理Web文档。所以，为了通用性，最好用DOM Core方法。

两者对比：

var source = myNode.getAttribute("href");  //DOM Core
var source = myNode.href;  //HTML-DOM

myNode.setAttribute("src", source);  //DOM Core
myNode.src = source;  //HTML-DOM

 

 

 

 

其他性能考虑

避免重复搜索操作，尽量少访问DOM：

在多个函数都会取得一组类似元素的情况下，考虑重构代码，把搜索结果保留在一个全局变量里，或者把一组元素直接以参数的形式传递给函数。

减少文档中的标记数量

过多的不必要的元素只会增加DOM树的规模，进而增加遍历DOM树以查找特定元素的时间。

 

合并脚本

多个js脚本合并，减少加载页面时发送的请求数量。

 

放置脚本

如前所述，放在</body>之前。