JavaScript笔记（3）---编程性能优化

Javascript DOM 笔记（2）—编程性能优化

1. 平稳退化：解决浏览器不支持JavaScript的情况

   技巧：基本操作不用JavaScript实现

   例子：

       <a href="http://www.example.com/" onclick="popUp('hrrp://www.example.com/'); return false;"> Example </a>    //href属性使用真实的连接，这样即使不支持JS也可以打开链接

2. 渐进增强：CSS,Javascript单独保存成一个文件与HTML文件分离

   • css分离：把样式信息存入一个外部文件，再在文档的head的部分用标签来调用，用class和id作为纽带连接html和css
     例子：

     不分离CSS<p style="font-weight:bold; color:red;"> Be Careful!</p>分离CSSCSS: .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文件里调用onclickhtml文件中：<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;        }    }}

3. 向后兼容：不同的浏览器对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检索浏览器版本实现向后兼容性，通常不采用

4. 性能考虑：

   • 尽量减少访问DOM和尽量减少标记：查找DOM元素树，需要相当耗费时间，因此要尽量减少DOM访问和标记元素（会增加树容量）
   • 合并放置脚本：
     
     • 尽量将多个脚本合并成一个，减少加载脚本的时间。
     • 将脚本文件放置在html文档末尾body标记之前：html的head标签每次只能下载两个文件，下载脚本文件期间不能下载其他文件，因此会影响性能。
   • 压缩脚本：减少脚本文件的大小
     常用代码压缩工具：
     JSMin;YUI compressor;Chosure Compiler;

5. 待解决的问题：

   • window元素及其属性 ？
   • JS语法问题
     

     <a href="http://www.example.com" onclick="popUP(this.getAttribute('href');return false;？"> Example</a>