Javascript速度優化

Javascript速度優化

 

Javascript速度優化基本原則

1. 擇重避輕，有所取捨

一般來說，系統是都是龐大的，不要太完美主義，先抓住重點，理解那些是咱們的核心頁面，那些頁面對咱們來講是最重要的，那些頁面訪問量最高，核心優先。

抓住主要問題，找到瓶頸點。治病要醫本，優化前，須要進行細緻的分析，抓住主要瓶頸點，對症下藥。優化那麼多的方子，別全採用，一般幾個就能達到效果。

2. 簡單有效纔是硬道理

越是簡單的東西越容易控制，越不容易出錯，儘可能避免將系統設計的過於龐大，過於複雜，記住，這是在作產品，而不是在搞研發。不少看似很蠢的方法，每每越是有效。新技術，新方法的引用是具有必定的風險的，要評估，要慎重。

 

Js處理

1. 儘可能放到頁面尾部

Js的加載時阻塞頁面的，沒下載完畢後面的內容不會出來，因此儘可能避免把JS放到頁面頭部，按照經驗估計，整個頁面中所用的JS邏輯，90%都是能夠放到頁面尾部。

2. 延遲加載（按需加載）

不少的業務邏輯並不是每次都使用也不是要當即使用，首次加載過程當中僅僅加載那些必須的，只有當必要的條件觸發，纔去加載請求必要的JS.好比說權限驗證經過，加載管理模塊。點擊發表文章按鈕，加載與發表文章有關的驗證和處理函數。

若是寫過C++的確定會接觸過動態庫和靜態庫，這個與之相似，何時須要何時再加載，首次打開頁面確定會清淨了許多，並且業務邏輯也由此分離開來，管理和維護也會方便不少，畢竟減小了那麼多的耦合。普通頁面的全部業務邏輯中須要在首次請求中加載的不到50%，咱們的JS又由此砍掉了一半。

3. 合併JS，減小請求

請求多個小文件的效率遠小於請求一個大文件的效率，由於須要屢次DNS解析，屢次鏈接，瀏覽器和server端也須要進行屢次開啓進程、權限驗證和預處理，以及 http請求在數據包傳遞上的一些問題。因此儘可能避免在頁面中加載一堆的js 文件，須要先講須要的小的JS合併成一個大的JS文件統一輸出，頁面所以被卡住的時間確定會減小不少。

爲了提升開發效率，合併建議不要每次都手動來進行，致使以後維護成本很大，相信些個XML配置文件，肯定合併規則以及依賴關係後，用程序自動合併效率會高不少，文章結尾附有一個配置示例，僅做參考。

4. JS壓縮

此手段屬前端特有，畢竟流量意味着速度，意味着金錢。是在下降代碼的可讀性爲前提。但事物的兩面性告訴咱們，可讀性差也意味着安全，並且可讀性能夠經過保存壓縮前的源文件來解決。

所謂的壓縮，就是把長的變量名換成短的變量名，去掉沒用的空格和換行符，從而節省JS程序的長度，不過目前這種處理已經很成熟，經過搜索能夠搜出不少相關的工具。通常能壓縮50%以上，視程序與壓縮工具而論。

5. 儘可能少用第三方庫

在個人印象中，不少框架都是很龐大20K以上，雖然很強大很方便，但若是不是作企業級應用，儘可能不要用，由於咱們也許只可能用到其中不多的一部分功能卻加載了整個框架。

不過框架中的不少方法是能夠提取出來的，或者精簡成一個輕量級的框架，好比說trimPath，徹底能夠精簡到4k。

6. 合併ajax請求

Ajax請求的數據，若是涉及請求多種數據，儘可能考慮到將其合併。

7. 合理的使用緩存

緩存視乎是server端的事，可是js中也是常常用的。一種是緩存在一個全局變量中，一些很複雜的計算和查找操做能夠這樣作。若是你們在使用模板類trimPath常常是須要對模板進行預處理，這種預處理的結果是能夠被緩存的。這種緩存的缺點是頁面刷新後數據就會失效。

另一種是緩存在window.name或cookie裏面，常常用來緩存一些AJAX調用的結果，避免反覆請求server端，好比一些用戶的權限驗證信息，就不必老是調用server端接口，緩存了也就減小了請求，提升了性能，但cookie你們要慎用，存於一些數據比較小的還行，每次http請求他是佔用上行帶寬的。

還有一種緩存的實現是藉助於flash或其餘的第三方組件，特色是能夠緩存超大的數據，可是適應場景優先，須要特殊的平臺支持，不過FLASH目前已經很通用了。

8. 能靜態化輸出，儘可能少用JS渲染輸出

 

頁面製做

1. 素材合併

儘可能把頁面中的圖片合併在一塊兒，利用css sprite切割。這樣減小了請求的次數。一般合併成3長大的圖片，一張是有固定寬高的（好比說按鈕），另外兩張是分別橫向或縱向平鋪的1像素的小圖，用來作背景用。

2. CSS壓縮處理

道理同JS壓縮，也是有不少工具實用的可用。

3. 圖片背景切割與平鋪

切圖是頗有講究的，不少區域能切成用1像素平鋪，儘可能用1像素小圖平鋪，儘可能用一個較大的圖片設置成背景。

4. 少用iframe和frameset

首先一點frame會阻塞頁面，第二，產生額外的請求，第三，若是涉及交互，增長開發維護成本，第四對搜索引擎優化很差

5. CSS儘可能放到頁面頭部

瀏覽器只有等CSS下載完畢後，纔會真正的顯示頁面，因此爲了讓頁面儘快有所輸出，把CSS放到頭部，並且瀏覽器對CSS的處理時並行的，不會像JS那樣會阻塞頁面。

 

Server處理

1. 啓用gzip壓縮，能壓縮約70%~80%。

2. js,css,圖片添加過時頭，讓瀏覽器能緩存。能減小1/3以上的請求。

3. 靜態頁面、js、css等靜態文件單獨遷移。能夠針對靜態文件作專門優化，好比說squid反向代理，nginx代替apache作靜態server。便於管理和維護，之後遷移和拓展方便。

4. js、css、圖片等靜態文件與當前應用放到不一樣的域名下。再也不傳遞那些非必要的cookie，減小傳輸。

5. 圖片服務器分多域名。瀏覽器對同一域名的只容許使用2個併發，若是頁面圖片過多，會因爲併發排隊從而阻塞頁面。但域名也不能太多，會消耗DNS解析的時間，建議4個爲佳。

 

 

JS合併配置文件示例

　　<?xml version="1.0" encoding="gb2312" ?>

　　<root>

　　<include>

　　<list><![CDATA[qStandBottom_static]]></list>

　　</include>

　　<js>

　　<list><![CDATA[/lib/postJs.obj.js]]></list>

　　<list><![CDATA[/lib/JSON.obj.js]]></list>

　　<list><![CDATA[/qmeditor/qmeditor/qmeditor/editor.js]]></list>

　　<list><![CDATA[/control/subjectList/subjectWriteLib.js]]></list>

　　<list><![CDATA[/control/subjectList/subjectWriteVote.obj.js]]></list>

　　<list><![CDATA[/control/subjectList/naviFilter.obj.js]]></list>

　　<list><![CDATA[/control/subject/checkDomain.js]]></list>

　　<list><![CDATA[/control/subjectList/subjectWriteBottomGlobal.js]]></list>

　　<list><![CDATA[/control/subjectList/subjectWriteBottom_asyncDeclare.js]]></list>

　　<list><![CDATA[/control/subjectList/subjectWriterEditor.js]]></list>

　　<list><![CDATA[/control/subjectList/subjectWriteBottom.obj.js]]></list>

　　<list><![CDATA[/control/subjectList/subjectWritePhoto.js]]></list>

　　</js>

       </root>

 

常見分析與調試工具

　　IE Httpwatch

　　Firefox firebug