开发那点事系列四 - 如何构建高效Ajax应用

   如何提高Ajax应用的质量和性能,概括来讲,该过程主要包含以下几个步骤: 


    1.JavaScript代码的潜在错误和代码风格检查。通过集成JSLint可以找到代码中潜在的问题。 


    2.JavaScript文件的合并、缩减和混淆。通过合并可以把多个JavaScript文件合成一个,减少页面加载时的HTTP请求个数;通过缩减可以去掉JavaScript代码中多余的空白字符和注释等,从而减少文件大小,降低下载时间;通过混淆则是可以替换有意义的变量名称,从而进一步减少文件大小,同时在一定程度上保护代码免被反向工程。可以执行这些操作的工具有很多,Apache Ant就可以完成合并,JSMin和YUI Compressor可以完成文件的缩减,Dojo Shrinksafe可以进行混淆。 


    3.CSS文件的合并和缩减。与JavaScript类似,CSS文件也可以执行同样的合并和缩减操作,从而减少HTTP请求数目和文件大小。YUI Compressor,CSS Sprite等工具可以完成CSS的缩减。 


    4.图片文件的压缩。通过对图片文件进行格式转换和压缩,可以在不损失质量的前提下,减少图片文件的大小。

 

    而JS的内存泄露问题,一般来说需要注意下面几点: 


    1.熟悉常见的内存泄露模式。最典型的是由于错误使用闭包造成的包含DOM节点的循环引用。打断循环引用就可以解决此问题。 


    2.很大一部分内存泄露与DOM节点相关。尽量不要为DOM节点对象添加额外的属性,尤其是JavaScript方法。 


    3.当内存泄露发生的时候,使用Drip等工具来找到发生泄露的节点并修正。 


  最后,希望那些有志于构建高效Ajax应用的朋友,多研究研究Page Speed,YSlow的底层工作机制,也欢迎大家留言,共同探讨高效Ajax构建之道~

上一篇:Asp.net MVC 示例项目"Suteki.Shop"分析之---结束篇


下一篇:Design Pattern Explained 读书笔记二——设计模式序言