javascript
[转]JavaScript优化方案
轉自：http://www.w3cgroup.com/article.asp?id=255
?
網站開發WEB前端高性能優化之JavaScript優化細節
作者:dh20156 日期:2009-06-05
字體大小: 小 中 大作為一名網站開發WEB前端工程師，對自己開發的網站項目應該盡可能地對其性能進行優化，現在互聯網上搜索到的網站性能優化多是翻譯轉載自Yahoo14條或34條。Yahoo的優化建議關注在大的方面，下面，W3C Group為大家呈現WEB前端開發高性能優化部分之JavaScript的優化細節！
?
一、避免出現腳本失控
不論什么腳本，在任何時間、任何瀏覽器上執行，都不應該超過100毫秒。如果實際執行的時間長于這個底限，一定要將進程分解成若干更小的代碼段。
腳本失控基本上有以下四個方面的原因：
1. 在循環中執行了太多的操作
??? 解決這個問題的訣竅就是用下面這兩個問題來評估每個循環：
??? 1. 這個循環必須要同步執行么？
??? 2. 循環里面的數據，必須要按順序執行么？
??? 如果1和2都可以否定，那么建議使用setTimeout方式將循環體切分成小塊進行異步處理
??? 將循環中的定義變量及初始化操作放到循環外。參見：http://www.w3cgroup.com/article.asp?id=111
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
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屬性緩存在一個本地變量中，這樣就能大幅度的提高循環的效率。
?
二、避免大字符串字面量對象操作，如 字符串.lenth，盡量轉換為new String(字符串)后再進行操作
?
三、在做字符查找替換等操作時善用正則表達式
快速掌握ECMAScript正則表達式。參見：http://www.w3cgroup.com/article.asp?id=202
?
四、減少語句，利用運算符優先級實現if else表達式，使用三元表達式，使用連續表達式（看情況，將損失程序可讀性）
利用運算符優先級實現if else表達式參見：http://www.w3cgroup.com/article.asp?id=131
?
五、將CSS，JS文件合并到一個文件（非BT愛好者還是不要玩了^_^）
參見：http://www.w3cgroup.com/article.asp?id=29
?
六、避免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
參見：http://www.w3cgroup.com/article.asp?id=207
?
七、使用WEB Workers技術（支持html5的瀏覽器）
Web Workers為JavaScript提供了一種能在后臺進程中運行的方法，Web Workers進程能夠在不影響用戶界面的情況下處理任務。
參見：http://www.w3cgroup.com/article.asp?id=242
?
八、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
參見：http://www.w3cgroup.com/article.asp?id=97
?
九、微軟早期的DHTML優化建議
??? * 使用數組push替代字符串累加
?
原創文章，轉載請注明出處http://www.w3cgroup.com/article.asp?id=255
轉載于:https://www.cnblogs.com/xjyggd/archive/2009/07/17/1525547.html
總結
以上是生活随笔為你收集整理的[转]JavaScript优化方案的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Oracle 数据库创建表空间、创建用户
- 下一篇： gridview中如果文字太多指点要显示