《JavaScript DOM 编程艺术（第2版）》读书笔记五：最佳实践

平稳退化（graceful degradation）
- 在浏览器不支持JavaScript的情况下仍能顺利地浏览你的网站。虽然某些功能无法使用，但最基本的操纵仍能顺利完成。
- window对象的open()方法：window.open(url,name,features)创建新的浏览器窗口, 有三个参数：
  - 第一个参数是新窗口打开的URL地址，如果省略，弹出空白窗口
  - 第二个参数是新窗口的名字，代码里通过这个名字与新窗口进行通信
  - 第三个参数是一个以逗号分隔的字符串，内容是新窗口的各种属性：尺寸（宽度和高度）、新窗口被启用或禁用的各种浏览功能
```
function popUp(winURL) {
    window.open(winURL,"popup","width=320,height=480")
}
```
- "javascript:" 伪协议
  - “真”协议是用来在因特网上的计算机之间传输数据包，如 HTTP协议（http://）、FTP协议（ftp://）
  - 伪协议是一种非标准化的协议
  - "javascript:" 伪协议让我们通过一个链接来调用JavaScript函数
```
<a href="javascript:popUp('https://www.baidu.com')">baidu</a>
```
  - 仅在支持"javascript:" 伪协议的浏览器中运行，较老的浏览器会去尝试打开那个链接但失败，支持这种协议但禁用了JavaScript功能的浏览器会什么也不做。
- 内嵌的事件处理函数
  - 与用"javascript:" 伪协议调用JavaScript代码的做法同样糟糕，如果用户已经禁用了浏览器的JavaScript功能，这样的链接将毫无用处。不能平稳退化
```
<a href="#" onclick="popUp('https://www.baidu.com');return false;">baidu</a>
```
- 平稳退化的一个例子
  - 把href属性设置为真实存在的URL地址，即使JavaScript被禁用（或者遇到了搜索机），这个链接也是可用的。
```
<a href="https://www.baidu.com" onclick="popUp(this.href);return false;">baidu</a>
```
  - 缺点：一些JavaScript代码嵌入标记文档中，如果把包括事件处理函数在内的所有JavaScript代码全都放在外部文件里，这个技巧将更加完善
分离JavaScript
- 在外部JavaScript文件里把一个事件添加到HTML文档中的某个元素上：element.event = action...
外部JavaScript文件里的代码必须在HTML文档全部加载到浏览器之后马上开始执行。文档被加载到一个浏览器窗口里，document对象又是window对象的一个属性。当window对象触发onload事件时，document对象已经存在。
- 把JavaScript代码打包到一个函数里，并把这个函数添加到window对象的onload事件上去。DOM就可以正常工作了
向后兼容
- 对象测试：某些古老的浏览器可能无法理解DOM提供的方法和属性。解决方法是检测浏览器对JavaScript的支持程度。
- 几乎所有的东西（包括各种方法在内）都可以被当作对象来对待，可以容易把不支持某个特定DOM方法的浏览器检测出来。if (method) {statements}
- 在使用对象检测时，一定要删掉方法名后面的圆括号，如果不删掉，测试的将是方法的结果，无法方法是否存在。
```
// 检测浏览器是否支持getElementById方法，支持就执行代码
function myFunction() {
    if (document.getElementById) {
        statements using getElementById;
    }
}
// 不足是，函数会增加一对花括号，如果需要在函数里检测多个DOM方法或属性是否存在，这个函数中最重要的语句就会深埋在一层又一层的花括号里。这样的代码往
// 往很难阅读和理解。 所以测试条件改为“不支持就离开”
function myFunction() {
    if (!document.getElementById) {
        return false;
    }
    statements using getElementById
}
```
- 给网页添加各种有关行为时始终遵循“渐进增强”的原则，可以平稳退化。
- 浏览器嗅探技术：被健壮的对象检测技术所取代了。
性能考虑
- 尽量少访问DOM，不管什么时候，只要查询DOM中的某些元素，浏览器都会搜索整个DOM树，从中查找可能匹配的元素。把搜索结果存到变量中，重复使用，尽量避免多次重复搜索。
- 尽量减少标记数量，过多不必要的元素只会增加DOM树的规模，进而增加遍历DOM树以茶渣后特定元素的时间。
- 合并和放置脚本。
  - 包含脚本的最佳方式就是使用外部文件，优点如下
    - 外部文件与标记能清晰地分离开
    - 浏览器也能对站点中的多个页面重用缓存过的相同脚本
  - 把多个脚本文件合并到一个脚本文件中，这样，就可以减少加载页面时发送的请求数量。减少请求数量通常都是在性能优化时首先考虑的。
  - 把所遇<script>标签都放到文档的末尾，</body>标记之前，可以让页面变得更快。
    - 位于<head>块中的脚本会导致浏览器无法并行加载其他文件。一般来说，根据HTTP规范，浏览器每次从同一个域名最多只能同时下载两个文件。
压缩脚本文件
- 指的是把脚本文件中不必要的字节，如空格和注释，统统删除，从而达到“压缩”文件的目的。
- 很多压缩工具可以使用，有些精简程序甚至会重写你的部分代码，使用更短的变量名，从而减少整体文件大小。
- 代码应该有两个版本，一个是工作副本：可以修改代码并添加注释；另一个是精简副本，用于放在站点上。为了与非精简版本区分开，最好在精简副本的文件名中加上min字样。

《JavaScript DOM 编程艺术（第2版）》读书笔记五： 最佳实践

推荐阅读更多精彩内容

《JavaScript DOM 编程艺术（第2版）》读书笔记五：最佳实践