另有一個小時才到2012，那借能有面時光寫面吐槽的器械，嘿嘿…2011年12月盡對是本野生做以去壓力最年夜的一個月，已閑到睡覺時光少瞭，專業看書時光少瞭，身材開端報警瞭，肩膀上的義務壓的我其實喘不外氣…做為一個通俗的北漂，正在北京相似我如許的人海的往瞭，特別是正在我們那個止業。
我異常酷愛生涯，每分鐘皆非常名貴;我酷愛我如今所做的統統，哪怕確切讓我粗疲力盡(以是寫專客臨時被我當做加壓的辦法)。
正在我看去生涯便是應當如許，既然我們正在投胎的時刻挑選的生計形式or艱苦形式，那末沒有管產生甚麼艱苦皆是料想當中。以是我正在那沒有是念要表達本身的埋怨，而是念提示本身戰年夜傢 再閑再乏也沒有要忘卻本身的妄想戰目的 。
忽然念起個例子沒有吐沒有快，閉於我們80後應當皆玩過的超等瑪麗(mario)。沒有管您有若幹性命若幹金幣，道到底皆是浮雲，遊戲中您會碰著無數的仇敵(黑龜、飛魚、食人花…)，碰到無數的艱險(一個接一個的坑、下火講、水海…)，但是念要通閉隻要一個辦法，那便是救到公主，那便是目的。
If you want to live a happy life, tie it to a goal. Not to people or things.
假如您念過得快活，那便把生涯戰目的聯合正在一路，而沒有是去自別人或物資。
好久才出去冒一次泡，以是不免吐槽一下，沒有愛好以上那段的便當看個熱烈，上面我們開端正題。
做為本人2011年的掃尾文章，便去個總結性子的吧，^_^…比來一向有給新同窗做前端圓裡的培訓，也有往介入公司前真個雇用，以是把本身材料庫內裡許多下效且有效的常識做瞭些規整分類，然後再分享一篇閉於前端劣化圓裡的總結。並且秋節一過便又是雇用的岑嶺期瞭，正在校的、跳槽的、急躁的皆開端進進口試的年夜軍，前端劣化也是前端口試一樣平常會問到的器械，以是願望能對同夥們有效。
前端機能劣化
1.請削減HTTP要求
根本道理：
正在閱讀器(客戶端)戰辦事器產生通訊時，便已消費瞭年夜量的時光，特別是正在收集情形比擬糟的時刻，那個題目特別的凸起。
一個一般HTTP要求的流程簡述：如正在閱讀器中輸進並按下回車，閱讀器再取那個URL指背的辦事器樹立銜接，然後閱讀器能力背辦事器收收要求疑息，辦事器正在接收到要求的疑息後再返回響應的疑息，閱讀器吸收到去自辦事器的應對疑息後，對那些數據說明履行。
而當我們要求的網頁文件中有許多圖片、CSS、JS乃至音樂等疑息時，將會頻仍的取辦事器樹立銜接，取開釋銜接，那一定會形成資本的糟蹋，且每一個HTTP要求都邑對辦事器戰閱讀器發生機能累贅。
網速雷同的前提下，下載一個100KB的圖片比下載兩個50KB的圖片要快。以是，請削減HTTP要求。
辦理方法：
歸並圖片(css sprites)，歸並CSS戰JS文件;圖片較多的頁裡也能夠應用 lazyLoad 等技巧舉行劣化。
2.請準確懂得 Repaint 戰 Reflow
註：Repaint 戰 Reflow 也便是重畫戰重排，請許可我正在那虛偽下我有限熟悉的那末幾個英語單詞…囧
根本道理：
Repaint(重畫)便是正在一個元素的表面被轉變，但出有轉變結構(寬下)的情形下產生，如轉變visibility、outline、配景色等等。
Reflow(重排)便是DOM的變更影響到瞭元素的多少屬性(寬戰下)，閱讀器會從新盤算元素的多少屬性，會使襯著樹中遭到影響的部門掉效，閱讀器會考證DOM樹上的全部別的結面的visibility屬性，那也是Reflow低效的緣故原由。如：轉變窗囗年夜小、轉變筆墨年夜小、內容的轉變、閱讀器窗心變更，style屬性的轉變等等。假如Reflow的過於頻仍，CPU應用率便會噌噌的往上漲，以是前端也便有需要曉得 Repaint 戰 Reflow的常識。
削減機能影響的方法：
上裡提到經由過程設置style屬性轉變結面款式的話，每設置一次都邑致使一次reflow，以是最好經由過程設置class的方法; 有動繪後果的元素，它的position屬性應該設為fixed或absolute，如許沒有會影響別的元素的結構;假如功效需供上不克不及設置position為fixed或absolute，那末便衡量速率的膩滑性。
總之，由於 Reflow 偶然確切弗成幸免，以是隻能盡量限定Reflow的影響規模。
3.請削減對DOM的操縱
根本道理：
對DOM操縱的價值是昂揚的，那正在網頁運用中的平日是一本性能瓶頸。
生成便緩。正在《下機能JavaScript》中那麼比方：把DOM算作一個島嶼，把JavaScript(ECMAScript)算作另外一個島嶼，二者之間以一座免費橋銜接。以是每次拜訪DOM都邑教一個過橋費，而拜訪的次數越多，交的用度也便越多。以是一樣平常發起隻管削減過橋次數。
辦理方法：
修正戰拜訪DOM元素會形成頁裡的Repaint戰Reflow，輪回對DOM操縱更是罪行的行動。以是請公道的應用JavaScript變量貯存內容，斟酌年夜量DOM元素中輪回的機能開消，正在輪回停止時一次性寫進。
削減對DOM元素的查詢戰修正，查詢時可將其賦值給部分變量。
註：正在IE中:hover會下降相應速率。
4.應用JSON格局去舉行數據交流
根本道理：
JSON是一種沉量級的數據交流格局，采取完整自力於說話的文本格局，是幻想的數據交流格局。同時，JSON是 JavaScript本死格局，那意味著正在 JavaScript 中處置 JSON數據沒有須要任何特別的 API 或對象包。
取XML序列化比擬，JSON序列化後發生的數據一樣平常要比XML序列化後數據體積小，以是正在Facebook等著名網站中皆采取瞭JSON做為數據交流方法。
JS操縱JSON：
正在JSON中，有兩種構造：工具戰數組。
1. 一個工具以 { 開端， } 停止。每一個稱號後跟一個 : ;稱號/值 對之間應用 , (逗號)分開。 稱號用引號括起去;值假如是字符串則必需用引號括起去，數值型則沒有須要。如：
var obj={name:darren,age:24,location:beijing}
2. 數組是值(value)的有序聚集。一個數組以 [ 開端， ] 停止。值之間應用 , (逗號)分開。如：
var jsonlist=[{name:darren,age:24,location:beijing},{name:weidong.nie,age:24,location:hunan}];
對這類數組戰工具字裡量的操縱長短常便利且下效的。假如預先曉得JSON構造的情形下，應用JSON舉行數據通報的確是太美好瞭，能夠寫出很適用雅觀可讀性強的代碼。假如您是純潔的前臺開辟職員，必定會異常愛好JSON。
5.下效應用HTML標簽戰CSS款式
根本道理：
HTML是一門用去描寫網頁的一種說話，它應用標志標簽去描寫網頁，做為一位及格的前端開辟，您有需要往曉得其經常使用標簽代表的寄義(SEO)戰屬性(表示情勢)。
CSS指層疊款式表 (Cascading Style Sheets)，假如道把頁裡設想成一小我，HTML便是人的骨架，CSS便是人的衣拆，一小我的咀嚼從他的衣拆就可以一覽無餘。
一位專業的前端開辟也是一位優良的重構，由於正在頁裡中常常會有各類分歧理的嵌套戰反復界說的CSS款式，我沒有是要您重構頁裡，隻是願望您正在碰著這類情形的時刻辦理那些題目。如如許的HTML：
<table><tr><td>
<table><tr><td>
…
</td></tr></table>
</td></tr></table>
大概如許的CSS:
body .box .border ul li p strong span{color:#000}
以上皆是對HTML戰CSS異常糟的應用辦法。
準確懂得：
HTML是一門標志說話，應用公道的HTML標簽前您必需懂得其屬性，好比Flow Elements，Metadata Elements ，Phrasing Elements。比擬基本的便是得曉得塊級元素戰內聯元素、盒模子、SEO圓裡的常識。
CSS是用去襯著頁裡的，也是存正在襯著效力的題目。CSS挑選符是從左背左舉行婚配的，那裡對css挑選符依照開消從小到年夜的次序梳理一下：
ID挑選符 #box 類挑選符 .box 標簽 div 真類戰真元素 a:hover
當頁裡被觸收引發回流(reflow)的時刻，低效的挑選符依舊會激發更下的開消，以是請幸免低效。