網頁渲染優化和JS性能提高

自學前端有一段時間了，在網上學習總結了點網頁的渲染性能和JS性能提高的方法，有利於寫出更加優秀的代碼

1. 不要使用GIF圖片實現loading效果，這樣會下降CPU消耗；

2. 禁止使用iframe，會阻塞父文檔onload事件；搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO；

3. 使用CSS3代碼替代JS動畫，儘量避免重繪重排以及迴流；

4. 對於一些小圖標，可使用base64位編碼，以減小網絡請求；

5. 網頁Gzip，CDN託管，data緩存 ，圖片服務器；

6. 前端模板 JS+數據，減小因爲HTML標籤致使的帶寬浪費，前端用變量保存AJAX請求結果，每次操做本地變量，不用請求，減小請求次數

7. 用innerHTML代替DOM操做，減小DOM操做次數，優化JS性能；

8. 少用全局變量，多緩存DOM節點查找結果，減小IO讀取操做；

9. 避免使用CSS Expression；

10. 圖片要懶加載，講樣式表放在頂部，腳本放在底部；

11. 避免在頁面的主體佈局中使用table，table要等其中的內容徹底下載以後纔會顯示出來，顯示比div+css佈局慢。對普通的網站有一個統一的思路，就是儘可能向前端優化、減小數據庫操做、減小磁盤IO。向前端優化指的是，在不影響功能和體驗的狀況下，能在瀏覽器執行的不要在服務端執行，能在緩存服務器上直接返回的不要到應用服務器，程序能直接取得的結果不要到外部取得，本機內能取得的數據不要到遠程取，內存能取到的不要到磁盤取，緩存中有的不要去數據庫查詢。減小數據庫操做指減小更新次數、緩存結果減小查詢次數、將數據庫執行的操做盡量的讓你的程序完成（例如join查詢），減小磁盤IO指儘可能不使用文件系統做爲緩存、減小讀寫文件次數等。程序優化永遠要優化慢的部分，換語言是沒法「優化」的。

12. 計算機學科中有一個經典問題是經過改變數據存儲的位置來得到最佳的讀寫性能，在JavaScript中，數據存儲的位置會對代碼性能產生重大影響。 – 能使用{}建立對象就不要使用new Object，能使用[]建立數組就不要使用new Array。JS中字面量的訪問速度要高於對象。 – 變量在做用域鏈中的位置越深，訪問所需實踐越長。對於這種變量，能夠經過緩存使用局部變量保存起來，減小對做用域鏈訪問次數 – 使用點表示法（object.name）和操做符（object[name]）操做並無太多區別，只有Safari會有區別，點始終更快

 

13.  在JS中常見的循環有下面幾種：

for(var i = 0; i < 10; i++) { // do something}  

for(var prop in object) { // for loop object}    

[1,2].forEach(function(value, index, array) { // 基於函數的循環})

毋庸質疑，第一種方式是原生的，性能消耗最低的，速度也最快。第二種方式for-in每次迭代都回產生更多的開銷（局部變量），它的速度只有第一種 的1/7 第三種方式明顯提供了更便利的循環方式，可是他的速度只有普通循環的1/8。因此能夠根據本身項目狀況，選擇合適的循環方式。

 

14.   事件委託：試想一下頁面上每個A標籤添加一個事件，咱們會不會給每個標籤都添加一個onClick呢。 當頁面中存在大量元素都須要綁定同一個事件處理的時候，這種狀況可能會影響性能。每綁定一個事件都加劇了頁面或者是運行期間的負擔。對於一個富前端的應 用，交互重的頁面上，過多的綁定會佔用過多內存。 一個簡單優雅的方式就是事件委託。它是基於事件的工做流：逐層捕獲，到達目標，逐層冒泡。既然事件存在冒泡機制，那麼咱們能夠經過給外層綁定事件，來處理 全部的子元素出發的事件。

document.getElementById('content').onclick = function(e) {

    e = e || window.event;    

    var target = e.target || e.srcElement;    //若是不是 A標籤，我就退出   

    if(target.nodeNmae !=== 'A') { return }   //打印A的連接地址    

    console.log(target.href) }

 

15.  重繪和重排：瀏覽器下載完HTMl，CSS，JS後會生成兩棵樹：DOM樹和渲染樹。 當Dom的幾何屬性發生變化時，好比Dom的寬高，或者顏色，position，瀏覽器須要從新計算元素的幾何屬性，而且從新構建渲染樹，這個過程稱之爲重繪重排。

bodystyle = document.body.style;

bodystyle.color = red;

bodystyle.height = 1000px;

bodystyke.width = 100%;

上述方式修改三個屬性，瀏覽器會進行三次重排重繪，在某些狀況下，減小這種重排能夠提升瀏覽器渲染性能。 推薦方式以下，只進行一次操做，完成三個步驟：

bodystyle = document.body.style;

bodystyle.cssText 'color:red;height:1000px;width:100%';

 

16. 網站通常LOGO，使用H1標籤包住，而且設置其中文本內容爲網站名或關鍵字，利於SEO和爬蟲