JavaScript平稳退化，兼容和性能问题(tips)。

JS平稳退化

Javascript作为一种前端脚本语言，主要功能是用于改善前端的用户体验。我们看见一些网页的显示效果，比方说菜单显示隐藏，图标移动和文字滚动大多是基于JS来实现的。作为改善用户体验的存在，通俗的讲就是起个锦上添花的表现效果，而不能影响正常的后台逻辑和最基本功能的实现。

通俗地讲，javascript平稳退化就是如果一个浏览器完全不支持js或者禁用js的时候，它的正常功能不会受到任何影响。

打开新窗口

window.open(url,name,features)

第一个参数是想在新窗口里打开的网页的URL地址。如果省略这个参数，屏幕上将弹出一个空白的浏览器窗口。
第二个参数是新窗口的名字。可以在代码里通过这个名字和新窗口进行通信。
最后一个参数是一个以都好分隔的字符串，其内容是新窗口的各种属性。这些属性包括新窗口的尺寸（宽度和高度）以及新窗口被启用或禁用的各种浏览功能（工具条，菜单条，初始先是位置等)。对于这个桉树应该掌握以下原则：新窗口的浏览功能要少而精。

1
2
3

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

Javascript 伪协议

javascript:伪协议让我们通过一个链接来调用JavaScript函数。

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

这条语句在支持"javascript:"伪协议的浏览器中运行正常，较老的浏览器则会取尝试打开那个链接但失败，支持这种协议单禁用了javascript功能的浏览器会什么也不做。

内嵌事件处理函数

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

所有操作由onclick属性负责完成，无法平稳退化。

需要平稳退化的原因

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

所以我们最好修改成如下

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

分离JavaScript

HTML Document:

1	<a href="http://www.example.com/" class="popup">Example</a>

我们可以在外部把一个事件添加到html文档中的某个元素上：

1	element.event = action...

比如：

1	getElementById(id).event = action;

如果事件涉及多个元素，我们可以用getElementsByTagName和getAttribute把事件添加到有着特定属性的一组元素上。
具体步骤：

把文档里所有的链接全放入一个数组里
遍历数组
如果某个链接的class属性等于popup，就表示这个链接在被点击时应该调用popUp()函数。

还有一个问题是必须让这种连接的代码在html文档全部加载到浏览器后再开始执行。文档将被加载到一个浏览器窗口里，document对象又是window对象的一个属性。当window对象触发onload事件时，document对象已经存在。
所以我们在外部的js文件里这样写

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

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

向后兼容

对象检测

检测浏览器对js的支持程度
比如

1	if (!document.getElementsByTagName) return false;

性能考虑

介绍不必要的DOM访问
合并多个js文件到一个文件里
压缩脚本，去掉不必要的字节如空格和注释
多数情况下，你应该有两个版本，一个是工作副本，可以修改代码并添加注释；另一个时精简副本，用于放在站点上。通常，为了与非精简版本区分开，最好在精简副本的文件名中加上min字样：
<script src="scripts/scriptName.min.js"></script>

可以通过以下几个有代表性的代码压缩工具完成：

Garden of Sinners

《JavaScript DOM编程艺术》第五章读书笔记