JavaScript 实用技巧：兼容、分离与性能优化指南

JavaScript 禁用时的平稳退化策略

1 若浏览器不支持JavaScript该如何处理？

a.浏览器禁用脚本的原因：多数浏览器（如Chrome）具备禁用脚本的功能。

b.在JavaScript被禁用的场景下，需确保网页核心功能（关键用户需求）正常运行。

示例：利用BOM的open()方法在新窗口中打开链接。

 function popUp(winURL) {
   window.open(winURL, "popup", "width=,height=");
 }

JavaScript的具体实现包含以下方案：

方案一：采用javascript伪协议。

<a href="javascript:popUp('http://www.example.com');return false;">Example</a>

方案二：采用内嵌事件处理函数。

<a href="#" onclick="popUp('http://www.example.com');return false;"></a>

上述两种方案在JS禁用时无法满足“新窗口打开链接”的需求，故不应为单纯使用JS而滥用JS。下文方案为JS预留退路，即实现平稳退化（JS禁用后的备用路径）。

方案三：平稳退化<a href="http://www.example.com" onclick="popUp(this.href;return false;)">

HTML、CSS 与 JavaScript 的职责分离

2 如何实现网页结构、内容与JavaScript脚本动作的分离？分离的原因是什么？

a.明确分工，各司其职后协作：

网页结构与内容由HTML负责，网页样式由CSS负责，网页行为由JavaScript负责。

b.分离JS代码并不复杂，JS无需在HTML中处理事件，可在外部JS文件中将事件绑定至HTML文档的特定元素。例如：

 window.onload = paperLinks
   function paperLinks() {
   var links = document.getElementsByTagName("a");
     for (var i=; i<links.length;i++){
     if (links[i].getAttribute == "popup") {
       linnks[i].onclick = function() {
         popUp(this.getAttribute("href"));
         return false;
       }
     }
    }
  }

浏览器兼容性问题处理

3 浏览器兼容性问题

需兼顾新老浏览器，重点注意向后兼容。不同浏览器对JS的支持程度存在差异，例如

IE6不支持document.getElementsByClassName(classname)，可通过添加检查语句解决兼容性问题：if(!document.getElementsByClassName) return false;

JavaScript 性能优化技巧

4 性能考量

为何需关注脚本执行性能？性能是永恒议题，直接影响网页加载的顺畅度。

如何确保脚本执行性能达到最优？

a.尽量减少DOM访问及标记使用，例如避免大量循环遍历。

 var links = document.getElementsByTagName("a");
   if (links.length > ) {
     for (var i=; i<links.length; i++) {
     //......
   }
 }

其性能优于下述代码。

 if (document.getElementsByTagName("a").length > ) {
   var links = document.getElementsByTagName("a");
   for (var i=; i<links.length; i++) {
   //......
   }
 }

b.合并脚本（JS代码）以减少页面加载时的请求数量；将<script>标签置于文档末尾（</body>之前），以加速页面加载且不阻碍JS加载。

c.压缩脚本，移除JS代码中多余空格与注释，甚至简化变量名。建议准备两个版本的JS：工作版（用于代码修改与注释）与精简版（用于发布）。

javascript对象

以上内容为本文介绍的javascript学习总结之js使用技巧，希望读者喜欢。