今天看了第五章,讲了许多我一直没有考虑过的内容:平稳退化、分离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、压缩脚本
请看这篇文章
nodeName属性总是返回一个大写字母的值,即使元素在HTML文档里是小写字母
最好不要用onkeypress事件处理函数,onclick事件处理函数已经能满足需要。虽然它的名字为“onclick”,但它对键盘访问的支持相当完美
DOM由3部分组成:
1.Core DOM:核心DOM,定义了一套标准的针对任何结构化文档的对象,包括HTML、XHTML、XML
2.XML DOM:定义了一套标准的针对XML文档的对象
3.HTML DOM:定义了一套标准的针对HTML文档的对象
不得不说,从前我写网页文件,从来没有考虑过这些提高性能的问题,看了书之后受益匪浅啊!以后我会注意这方面的问题的,使自己的网站更完善,更完美!