读《JavaScript dom编程艺术（第2版）》笔记 5

标签：

今天看了第五章，讲了许多我一直没有考虑过的内容：平稳退化、分离JavaScript、向后兼容性、性能考虑。引出这些问题的原因是：有的浏览器并不能支持js脚本，或者有的浏览器虽然可以支持js脚本，但是用户关闭了js解释功能，或者有的浏览器只能支持部分js脚本。如果没有考虑到这些情况，人们在访问我们的网站时就有可能遇到各种各样的麻烦，并因此不再来访问我们的网站。

平稳退化：确保网页在没有JavaScript的情况下也能正常工作

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

渐进增强：用一些额外的信息层去包裹原始数据。按照“渐进增强”原则创建出来的网页几乎都符合“平稳退化”原则

分离JavaScript：把网页的结构和内容与JavaScript脚本的动作行为分开

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

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

向后兼容性：确保老版本的浏览器不会因为你的JavaScript脚本而死掉

对象检测：只要把某个方法打包在一个if语句里，就可以根据这条if语句的条件表达式的求值结果是true（这个方法存在）还是false（这个方法不存在）来决定应该采取怎样的行动。

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

function myFunction(){
  if(document.getElementById){
    statements using getElementById
  }
}

虽然只是一条简单的if语句，但是却可以确保那些“古老的”浏览器不会因为我的脚本代码而出问题，这么做是为了让脚本有良好的向后兼容性。

浏览器嗅探技术：指通过提取浏览器供应商提供的信息来解决向后兼容问题。

性能考虑：确定脚本执行的性能最优

1、尽量少访问DOM和尽量减少标记

2、合并和放置脚本

减少请求数量通常都是在性能优化是时首先要考虑的。

脚本在标记中的位置对页面的初次加载时间也有很大影响，根据HTTP规范，浏览器每次从同一个域名中最多只能同时下载两个文件。而在下载脚本期间，浏览器不会下载其他任何文件，即使是来自不同域名的文件也不会下载，所有其他资源都要等脚本加载完毕后才能下载

3、压缩脚本

请看这篇文章

不得不说，从前我写网页文件，从来没有考虑过这些提高性能的问题，看了书之后受益匪浅啊！以后我会注意这方面的问题的，使自己的网站更完善，更完美！

读《JavaScript dom编程艺术（第2版）》笔记 5

标签：

原文地址：http://www.cnblogs.com/wyy725872/p/4439567.html