現(xiàn)在的互聯(lián)網(wǎng)，是一個用戶體驗至上的時代，大多數(shù)公司都會把如何提高產(chǎn)品的易用性放在首要位置。下面由學(xué)習(xí)啦小編為大家整理的前端開發(fā)性能優(yōu)化，希望大家喜歡!

　　前端開發(fā)性能優(yōu)化

　　1.規(guī)定圖片的寬高減少重繪

　　2.不要用表格布局，表格通常會導(dǎo)致頁面重繪，瀏覽器是一行一行顯示表格的，如果有一行的列寬和行高和之前的不一樣那之前繪制好的行也必須重新繪制。

　　3.定義字符集，不同的字符集有不同的渲染方式。

　　4.不要重組DOM，重新排列DOM通常都會引發(fā)瀏覽器重繪。

　　5.合并資源減少http請求，不增加額外的帶寬

　　6.使用CDN加速

　　7.避免空的src或href屬性值

　　8.增加版本控制過期時間

　　9.將css放到頭部，css文件加載完成后渲染頁面

　　10.js放到尾部，腳本會阻止并行加載，當(dāng)瀏覽器加載一個腳本時，他不會去加載其他文件，可以在script標(biāo)簽上添加defer屬性，讓瀏覽器加載腳本時也去加載其他文件，缺點有兼容性問題。腳本放在結(jié)束處可以保證腳本執(zhí)行時元素肯定是可用的。

　　11.避免使用css表達(dá)式，css表達(dá)式頁面滾動甚至鼠標(biāo)移動的時候它就會執(zhí)行。

　　12.移除不使用的css語句，因為現(xiàn)在很多瀏覽器都是通過遍歷所有的css規(guī)則來匹配所有的元素

　　13.對js和css代碼進(jìn)行壓縮，這樣做可以減少加載量，節(jié)省帶寬

　　前端開發(fā)性能優(yōu)化問題

　　a 減少http請求次數(shù)：css spirit,data uri

　　b 用hash-table來優(yōu)化查找

　　c 當(dāng)需要設(shè)置的樣式很多時設(shè)置className而不是直接操作style

　　d 少用全局變量

　　e 緩存DOM節(jié)點查找的結(jié)果

　　f 避免使用CSS Expression

　　g 圖片預(yù)載

　　h 避免在頁面的主體布局中使用table，table要等其中的內(nèi)容完全下載之后才會顯示出來，

　　i JS，CSS源碼壓縮

　　k 前端模板 JS+數(shù)據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費(fèi)，前端用變量保存AJAX請求結(jié)果，每次操作本地變量，不用請求，減少請求次數(shù)

　　t 用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能

　　r 用setTimeout來避免頁面失去響應(yīng) 顯示比div+css布局慢如何控制網(wǎng)頁在網(wǎng)絡(luò)傳輸過程中的數(shù)據(jù)量

　　(1)啟用GZIP壓縮

　　(2)保持良好的編程習(xí)慣，避免重復(fù)的CSS，JavaScript代碼，多余的HTML標(biāo)簽和屬性

　　前端開發(fā)有哪些圖片優(yōu)化

　　1. 簡約而不簡單

　　Win8和iOS7的出現(xiàn)，將互聯(lián)網(wǎng)行業(yè)中很多產(chǎn)品設(shè)計帶回到原點，或許更是另一個新的起點。Win8的Metro UI、iOS7中圖標(biāo)的扁平化設(shè)計、一直崇尚簡約的豆瓣網(wǎng)、還有頂著時代工匠稱號的老羅所設(shè)計的錘子ROM，無一不體現(xiàn)著簡約的風(fēng)格。

　　言歸正傳，回到我們圖片優(yōu)化的主題上。在產(chǎn)品設(shè)計和UI設(shè)計階段，除了內(nèi)容圖片，其他的圖片都是起修飾的作用。也就是對于傳遞信息來說并非本質(zhì)性的。所以最大的優(yōu)化就是不要圖片。在進(jìn)入到研發(fā)階段之前，就要確認(rèn)設(shè)計，設(shè)計本身是否需要用到那么多的圖片，還是說可以做到更簡潔!

　　2. 樣式代替圖片

　　Chrome，F(xiàn)F等瀏覽器廠商為互聯(lián)網(wǎng)的發(fā)展做了這么多貢獻(xiàn)，為什么我們還要讓那些不兼容CSS3的瀏覽器阻礙互聯(lián)網(wǎng)的發(fā)展呢。因此，讓我們直接使用CSS樣式代替圖片來實現(xiàn)修飾效果!例如：半透明、圓角、陰影、高光、漸變等。這些效果主流的瀏覽器都能夠完美支持，而對于那些低端瀏覽器，我們并不會完全拋棄他們，“漸進(jìn)增強(qiáng)”則是一個很好的解決方案。至于什么是漸進(jìn)增強(qiáng)，這里不再用過多篇幅去解釋，如果感興趣可以參考CSS“漸進(jìn)增強(qiáng)”在web制作中常見應(yīng)用舉例。

　　3. 選擇最合適的圖片

　　我們常見的圖片格式有JPEG、GIF、PNG。

　　基本上，內(nèi)容圖片多為照片之類或圖片構(gòu)成較復(fù)雜的情況，適用于JPEG。如網(wǎng)站中的Banner圖、輪播圖、大尺寸背景圖等。

　　修飾圖片通常更適合用無損壓縮的PNG。而我們主要用到的PNG圖片又分為PNG-8和PNG-24兩種，PNG-8格式不支持半透明，也是IE6兼容的圖片存儲方式。如果對圖片質(zhì)量要求較高的半透明或全透明背景，保存成PNG-24更合適。有時候會遇到在IE6下應(yīng)用PNG-24圖片的情況，關(guān)于IE6下PNG Alpha透明的解決方案可以參考IE6中PNG Alpha透明。我在項目中常用的方法是AlphaImageLoader篩選器。

　　GIF基本上除了GIF動畫外不要使用。

　　除了這些格式之外，Chrome、新版Opera、Android 4+支持WebP格式，IE 9+、IE mobile 10+支持JPEG XR。這兩個新格式都支持無損和有損壓縮，都具有更良好的壓縮比。當(dāng)然這需要為不同的瀏覽器返回不同的圖片，增加了開發(fā)成本，也增加存儲成本。不過你省了流量或者相同流量下改善了圖片質(zhì)量，提升了用戶體驗。這就需要根據(jù)項目需求進(jìn)行取舍了。

　　4. 常用的圖片優(yōu)化技巧

　　CSS Sprites，將同類型的圖標(biāo)或按鈕等背景圖合到一張大圖中，減少頁面請求。

　　Icon Font，將圖標(biāo)做成字體文件。優(yōu)點是圖標(biāo)支持多個尺寸，兼容所有瀏覽器，減少頁面請求等。美中不足的是只支持純色的icon。

　　SVG，對于絕大多數(shù)圖案、圖標(biāo)等，矢量圖更小，且可縮放而無需生成多套圖?，F(xiàn)在主流瀏覽器都支持SVG了，所以可放心使用!

　　圖片壓縮工具，可以在圖片上線前使用壓縮工具進(jìn)行壓縮，獲得更高的壓縮比。我常用的壓縮工具為Yahoo的Smush.it。

　　5. 適用各種資源而不限于圖片的優(yōu)化

　　data url

　　Base64是網(wǎng)絡(luò)上最常見的用于傳輸8Bit字節(jié)的編碼方式之一，可用于在HTTP環(huán)境下傳遞較長的標(biāo)示信息。將圖片轉(zhuǎn)化為base64編碼格式，資源內(nèi)嵌于CSS或HTML中，不必單獨請求。

　　該方式的優(yōu)點是：

　　1. 減少了HTTP請求

　　2. 避免了圖片重新上傳，還要清理緩存的問題

　　不足之處是：

　　1. IE6, IE7不支持該類型編碼的圖片作為背景圖

　　2. 增加了CSS文件的尺寸

　　3. 維護(hù)成本較高

　　按照HTTP協(xié)議設(shè)置合理的緩存

　　具體的緩存策略(如永久緩存 + 重命名)、部署策略(如反向代理、CDN等)這里就不展開了。

　　Responsive設(shè)計

　　為了適應(yīng)現(xiàn)在眾多分辨率和設(shè)備像素比的移動設(shè)備，要產(chǎn)生多套不同大小和分辨率的圖片，然后配合Media Query進(jìn)行開發(fā)。這里推薦在進(jìn)行移動端頁面開發(fā)時使用SVG或Icon Font等技術(shù)。這些技術(shù)可以完美支持Retina設(shè)備。關(guān)于更多響應(yīng)式方案，可以參考《響應(yīng)式Web設(shè)計: HTML5和CSS3實踐》這本書或網(wǎng)上相關(guān)資料，這里不再展開。