935      阿里云  技术社区[云栖]

开发那点事系列四 - 如何构建高效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构建之道~

最后更新：2017-04-02 16:47:42

  上一篇： [Android] Eclipse Warning: No grammar constraints (DTD or XML schema) detected for the document

  下一篇： 批量改变图片大小