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

    1.JavaScript代码的潜在错误和代码风格检查。通过集成JSLint可以找到代码中潜在的问题。      2.JavaScript文件的合并、缩减和混淆。通过合并可以把多个JavaScript文件合成一个，减少页面加载时的HTTP请求个数；通过缩减可以去掉JavaScript代码中多

   如何提高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构建之道~

AJAX应用【股票案例、验证码校验】 股票案例 我们要做的是股票的案例，它能够无刷新地更新股票的数据。当鼠标移动到具体的股票中，它会显示具体的信息。 我们首先来看一下要做出来的效果： 服务器端分析 首先，从效果图我们可以看见很多股票基本信息：昨天收盘价、今天开盘价、最高价、最低价、当前价格、涨幅。