DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> WEB前端開發高性能優化:JavaScript的優化細節
WEB前端開發高性能優化:JavaScript的優化細節
編輯:關於JavaScript     

網頁制作poluoluo文章簡介:WEB前端開發高性能優化:JavaScript的優化細節.

作為一名網站開發WEB前端工程師,對自己開發的網站項目應該盡可能地對其性能進行優化,現在互聯網上搜索到的網站性能優化多是翻譯轉載自Yahoo14條或34條。Yahoo的優化建議關注在大的方面,下面,破洛洛為大家呈現WEB前端開發高性能優化部分之JavaScript的優化細節!

一、避免出現腳本失控

不論什麼腳本,在任何時間、任何浏覽器上執行,都不應該超過100毫秒。如果實際執行的時間長於這個底限,一定要將進程分解成若干更小的代碼段。

腳本失控基本上有以下四個方面的原因:

1. 在循環中執行了太多的操作

解決這個問題的訣竅就是用下面這兩個問題來評估每個循環:

  1. 這個循環必須要同步執行麼?
  2. 循環裡面的數據,必須要按順序執行麼?

如果1和2都可以否定,那麼建議使用setTimeout方式將循環體切分成小塊進行異步處理

將循環中的定義變量及初始化操作放到循環外。

2. 臃腫的函數體

在JavaScript中,我們應該盡可能的用局部變量來代替全局變量!

理解JavaScript作用域鏈。參見:http://www.jslab.org.cn/?tag=ScopeChainAndClosure

理解原型鏈。參見:http://www.jslab.org.cn/?tag=prototypeChain

3. 過多的遞歸

使用迭代方式替代遞歸,采用memoization技術優化遞歸

斐波那契數列的遞歸算法優化,參見:http://www.jslab.org.cn/?tag=Memoization

網頁制作poluoluo文章簡介:WEB前端開發高性能優化:JavaScript的優化細節.

4. 過多的DOM調用

在Web開發中,JavaScript的一個很重要的作用就是對DOM進行操作。可你知道麼?對DOM的操作是非常昂貴的,因為這會導致浏覽器執行回流(reflow)操作。而執行了過多的回流操作,你就會發現自己的網站變得越來越慢了。我們應該盡可能的減少DOM操作。

回流操作主要會發生在幾種情況下:

  • 改變窗體大小
  • 更改字體
  • 添加移除stylesheet塊
  • 內容改變哪怕是輸入框輸入文字
  • CSS虛類被觸發如 :hover
  • 更改元素的className
  • 當對DOM節點執行新增或者刪除操作或內容更改時。
  • 動態設置一個style樣式時(比如element.style.width="10px")。
  • 當獲取一個必須經過計算的尺寸值時,比如訪問offsetWidth、clientHeight或者其他需要經過計算的CSS值(在兼容DOM的浏覽器中,可以通過getComputedStyle函數獲取;在IE中,可以通過currentStyle屬性獲取)。

解決問題的關鍵,就是限制通過DOM操作所引發回流的次數:

1.在對當前DOM進行操作之前,盡可能多的做一些准備工作,保證N次創建,1次寫入。

2.在對DOM操作之前,把要操作的元素,先從當前DOM結構中刪除:

  1. 通過removeChild()或者replaceChild()實現真正意義上的刪除。
  2. 設置該元素的display樣式為“none”。
                修改操作完成後,將上面這個過程反轉過來,建議使用第2種方式。

3.CSS部分

另外一個經常引起回流操作的情況是通過style屬性對元素的外觀進行修改,如element.style.backgroundColor = "blue";

每次修改元素的style屬性,都肯定會觸發回流操作,要解決這個問題可以:

  1. 使用更改className的方式替換style.xxx=xxx的方式。
  2. 使用style.cssText = '';一次寫入樣式。
  3. 避免設置過多的行內樣式
  4. 添加的結構外元素盡量設置它們的位置為fixed或absolute
  5. 避免使用表格來布局
  6. 避免在CSS中使用JavaScript expressions(IE only)

4.將獲取的DOM數據緩存起來。這種方法,對獲取那些會觸發回流操作的屬性(比如offsetWidth等)尤為重要。

5.當對HTMLCollection對象進行操作時,應該將訪問的次數盡可能的降至最低,最簡單的,你可以將length屬性緩存在一個本地變量中,這樣就能大幅度的提高循環的效率。

網頁制作poluoluo文章簡介:WEB前端開發高性能優化:JavaScript的優化細節.

二、避免大字符串字面量對象操作,如 字符串.lenth,盡量轉換為new String(字符串)後再進行操作

三、在做字符查找替換等操作時善用正則表達式

四、減少語句,利用運算符優先級實現if else表達式,使用三元表達式,使用連續表達式(看情況,將損失程序可讀性)

五、將CSS,JS文件合並到一個文件(非BT愛好者還是不要玩了^_^)

六、避免Javascript事件綁定出現內存洩漏
"These memory leaks often occur as a result of circular references between JavaScript objects and objects within IE’s DOM (document object model)." Microsoft GPDE Team Blog

七、使用WEB Workers技術(支持html5的浏覽器)
Web Workers為JavaScript提供了一種能在後台進程中運行的方法,Web Workers進程能夠在不影響用戶界面的情況下處理任務。

八、Y!14條(14 Rules for Faster-Loading Web Sites)

  • Rule 1 - Make Fewer HTTP Requests
  • Rule 2 - Use a Content Delivery Network (Server端)
  • Rule 3 - Add an Expires Header (Server端)
  • Rule 4 - Gzip Components (Server端)
  • Rule 5 - Put Stylesheets at the Top
  • Rule 6 - Put Scripts at the Bottom
  • Rule 7 - Avoid CSS Expressions
  • Rule 8 - Make JavaScript and CSS External
  • Rule 9 - Reduce DNS Lookups (Server端)
  • Rule 10 - Minify JavaScript
  • Rule 11 - Avoid Redirects (Server端)
  •  Rule 12 - Remove Duplicate Scripts
  • Rule 13 - Configure ETags (Server端)
  • Rule 14 - Make AJAX Cacheable
  • Rule 15 - Use Iframes Wisely

九、微軟早期的DHTML優化建議

  • 使用數組push替代字符串累加

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved