精品秘无码一区二区三区老师-精品秘一区二三区免费雷安-精品蜜桃秘一区二区三区-精品蜜桃秘一区二区三区粉嫩-精品蜜桃一区二区三区-精品蜜臀国产aⅴ一区二区三区

[p]作為一名網站開發web前端工程師，對自己開發的網站項目應該盡可能地對其性能進行優化，現在互聯網上搜索到的網站性能優化多是翻譯轉載自 yahoo14條或34條。yahoo的優化建議關注在大的方面，下面，w3c group為大家呈現web前端開發高性能優化部分之javascript的優化細節！[/p]
[p]一、避免出現腳本失控[/p]
[p]不論什么腳本，在任何時間、任何瀏覽器上執行，都不應該超過100毫秒。如果實際執行的時間長于這個底限，一定要將進程分解成若干更小的代碼段。[/p]
[p]腳本失控基本上有以下四個方面的原因：[/p]
[p]1. 在循環中執行了太多的操作[/p]
[p]解決這個問題的訣竅就是用下面這兩個問題來評估每個循環：[br]1. 這個循環必須要同步執行么？[br]2. 循環里面的數據，必須要按順序執行么？[/p]
[p]如果1和2都可以否定，那么建議使用settimeout方式將循環體切分成小塊進行異步處理[/p]
[p]將循環中的定義變量及初始化操作放到循環外。參見：http://w3cgroup.com/article.asp?id=111[/p]
[p]2. 臃腫的函數體[/p]
[p]在javascript中，我們應該盡可能的用局部變量來代替全局變量![/p]
[p]理解javascript作用域鏈。參見：http://jslab.org.cn/?tag=scopechainandclosure[/p]
[p]理解原型鏈。參見：http://jslab.org.cn/?tag=prototypechain[/p]
[p]3. 過多的遞歸[/p]
[p]使用迭代方式替代遞歸，采用memoization技術優化遞歸[/p]
[p]斐波那契數列的遞歸算法優化，參見：http://jslab.org.cn/?tag=memoization[/p]
[p]4. 過多的dom調用[/p]
[p]在web開發中，javascript的一個很重要的作用就是對dom進行操作?？赡阒烂?？對dom的操作是非常昂貴的，因為這會導致瀏覽器執行回流（reflow）操作。而執行了過多的回流操作，你就會發現自己的網站變得越來越慢了。我們應該盡可能的減少dom操作。[/p]
[p]回流操作主要會發生在幾種情況下：[/p]
[p]* 改變窗體大小[br]* 更改字體[br]* 添加移除stylesheet塊[br]* 內容改變哪怕是輸入框輸入文字[br]* css虛類被觸發如 :hover[br]* 更改元素的classname[br]* 當對dom節點執行新增或者刪除操作或內容更改時。[br]* 動態設置一個style樣式時（比如element.style.width=”10px”）。[br]* 當獲取一個必須經過計算的尺寸值時，比如訪問offsetwidth、clientheight或者其他需要經過計算的css值（在兼容dom的瀏覽器中，可以通過getcomputedstyle函數獲??；在ie中，可以通過currentstyle屬性獲?。/p]
[p]解決問題的關鍵，就是限制通過dom操作所引發回流的次數:[/p]
[p]1.在對當前dom進行操作之前，盡可能多的做一些準備工作，保證n次創建，1次寫入。[/p]
[p]2.在對dom操作之前，把要操作的元素，先從當前dom結構中刪除：[br]1. 通過removechild()或者replacechild()實現真正意義上的刪除。[br]2. 設置該元素的display樣式為“none”。[br]修改操作完成后，將上面這個過程反轉過來，建議使用第2種方式。[/p]
[p]3.css部分[br]另外一個經常引起回流操作的情況是通過style屬性對元素的外觀進行修改，如element.style.backgroundcolor = “blue”;[br]每次修改元素的style屬性，都肯定會觸發回流操作，要解決這個問題可以：[br]1.使用更改classname的方式替換style.xxx=xxx的方式。[br]2.使用style.csstext = ”;一次寫入樣式。[br]3. 避免設置過多的行內樣式[br]4. 添加的結構外元素盡量設置它們的位置為fixed或absolute[br]5. 避免使用表格來布局[br]6. 避免在css中使用javascript expressions(ie only)[/p]
[p]4.將獲取的dom數據緩存起來。這種方法，對獲取那些會觸發回流操作的屬性（比如offsetwidth等）尤為重要。[/p]
[p]5.當對htmlcollection對象進行操作時，應該將訪問的次數盡可能的降至最低，最簡單的，你可以將length屬性緩存在一個本地變量中，這樣就能大幅度的提高循環的效率。[/p]
[p]二、避免大字符串字面量對象操作，如 字符串.lenth，盡量轉換為new string(字符串)后再進行操作[/p]
[p]三、在做字符查找替換等操作時善用正則表達式[/p]
[p]快速掌握ecmascript正則表達式。參見：http://w3cgroup.com/article.asp?id=202[/p]
[p]四、減少語句，利用運算符優先級實現if else表達式，使用三元表達式，使用連續表達式（看情況，將損失程序可讀性）[/p]
[p]利用運算符優先級實現if else表達式參見：http://w3cgroup.com/article.asp?id=131[/p]
[p]五、將css，js文件合并到一個文件（非bt愛好者還是不要玩了^_^）[/p]
[p]參見：http://w3cgroup.com/article.asp?id=29[/p]
[p]六、避免javascript事件綁定出現內存泄漏[/p]
[p]“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[/p]
[p]參見：http://w3cgroup.com/article.asp?id=207[/p]
[p]七、使用web workers技術（支持html5的瀏覽器）[/p]
[p]web workers為javascript提供了一種能在后臺進程中運行的方法，web workers進程能夠在不影響用戶界面的情況下處理任務。[/p]
[p]參見：http://w3cgroup.com/article.asp?id=242[/p]
[p]八、y!14條（14 rules for faster-loading web sites）[/p]
[p]* rule 1 – make fewer http requests[br]* rule 2 – use a content delivery network (server端)[br]* rule 3 – add an expires header (server端)[br]* rule 4 – gzip components (server端)[br]* rule 5 – put stylesheets at the top[br]* rule 6 – put scripts at the bottom[br]* rule 7 – avoid css expressions[br]* rule 8 – make javascript and css external[br]* rule 9 – reduce dns lookups (server端)[br]* rule 10 – minify javascript[br]* rule 11 – avoid redirects (server端)[br]* rule 12 – remove duplicate scripts[br]* rule 13 – configure etags (server端)[br]* rule 14 – make ajax cacheable[br]* rule 15 – use iframes wisely[/p]
[p]參見：http://w3cgroup.com/article.asp?id=97[/p]
[p]九、微軟早期的dhtml優化建議[/p]
[p]* 使用數組push替代字符串累加[/p]
[p]原文：[url=http://w3cgroup.com/article.asp?id=255]http://w3cgroup.com/article.asp?id=255[/url][/p]