Javascript DOM 笔记(2)—编程性能优化
平稳退化:解决浏览器不支持JavaScript的情况
技巧:基本操作不用JavaScript实现
例子:
<a href="http://www.example.com/" onclick="popUp('hrrp://www.example.com/'); return false;"> Example </a> //href属性使用真实的连接,这样即使不支持JS也可以打开链接
渐进增强:CSS,Javascript单独保存成一个文件与HTML文件分离
css分离:把样式信息存入一个外部文件,再在文档的head的部分用标签来调用,用class和id作为纽带连接html和css
例子:不分离CSS <p style="font-weight:bold; color:red;"> Be Careful!</p> 分离CSS CSS: .warning{ font-weight:bold; color:red; } HTml: <p class="warning"> Be Careful!</p>
JavaScript分离:将JavaScript代码与Html分开,单独存为文件。
主要问题:事件处理函数怎么分离?
解决方法:通过class id属性进行分离,即不使用onclick属性利用class,id将文档中的节点元素传入JS文件,再在js文件中调用onclick等事件处理属性:element.event=action…
例如:未分离之前:使用了ONCLICK属性: <a href="http://www.example.com" onclick="popUP(this.getAttribute('href');return false;"> Example</a> 分离JS,不使用Onclick属性,用class,id属性标记,然后再在js文件里调用onclick html文件中: <a href="http://www.example.com" class="popup">Example</a> js文件中: var links = document.getElementsByTagName("a"); if(links.getAttribute("class")=="popup"){ links.onclick=function(){ popUP(this.getAttribute(“href”)); reuturn false; } }
注意:上述代码中的第一句var links = document.getElementsByTagName(“a”);
由于不知道脚本和浏览器哪个先加载,哪个先结束,可能会引发问题,比如:html文件未加载完成时,a标签没有加载,而js脚本先加载上述语句会产生错误,所以需要利用window对象触发的onlaod事件确保html文档先加载完成代码修改如下:
/*因为window onload事件触发时表明document元素已经加载完成*/ window.onload = preparelinks; //window onload的时候执行preparelinks函数--我们想实现的函数 function preparelinks() { var links = document.getElementsByTagName("a"); if(links.getAttribute("class")=="popup"){ links.onclick=function(){ popUP(this.getAttribute(“href”)); reuturn false; } } }
向后兼容:不同的浏览器对js支持程度不同,这是一个需要考虑的问题
对象检测:在js中使用每个method的时候检测这个method是否存在
方法:调用每个功能前加入
if(!method) return false;window.onload = function () { if(!document.getElementsByTagName) return false; //如果没有则返回不再执行下面的method var links = document.getElementsByTagName("a"); if(links.getAttribute("class")=="popup"){ links.onclick=function(){ popUP(this.getAttribute(“href”)); reuturn false; } } }
- 浏览器嗅探:js检索浏览器版本实现向后兼容性,通常不采用
性能考虑:
- 尽量减少访问DOM和尽量减少标记:查找DOM元素树,需要相当耗费时间,因此要尽量减少DOM访问和标记元素(会增加树容量)
- 合并放置脚本:
- 尽量将多个脚本合并成一个,减少加载脚本的时间。
- 将脚本文件放置在html文档末尾body标记之前:html的head标签每次只能下载两个文件,下载脚本文件期间不能下载其他文件,因此会影响性能。
- 压缩脚本:减少脚本文件的大小
常用代码压缩工具:
JSMin;YUI compressor;Chosure Compiler;
待解决的问题:
- window元素及其属性 ?
- JS语法问题
<a href="http://www.example.com" onclick="popUP(this.getAttribute('href');return false;?"> Example</a>