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

  下一篇： 批量改變圖片大小