資訊專欄INFORMATION COLUMN
摘要：不推薦移動(dòng)端瀏覽器前端優(yōu)化策略相對(duì)于桌面端瀏覽器，移動(dòng)端瀏覽器上有一些較為明顯的特點(diǎn)設(shè)備屏幕較小新特性兼容性較好支持一些較新的和特性需要與應(yīng)用交互等。
GitHub鏈接：https://github.com/zwwill/blo...
圍繞前端的性能多如牛毛，涉及到方方面面，以我我們將圍繞PC瀏覽器和移動(dòng)端瀏覽器的優(yōu)化策略進(jìn)行羅列
注意，是羅列不是展開(kāi)，遇到不會(huì)不懂的點(diǎn)還請(qǐng)站外擴(kuò)展
開(kāi)車速度有點(diǎn)快，坐穩(wěn)了。
PC瀏覽器前端優(yōu)化策略tips : 這么多前端優(yōu)化點(diǎn)你都記得住嗎？反正我是收藏起來(lái)備查的。
PC端優(yōu)化的策略很多，如 YSlow（YSlow 是 Yahoo 發(fā)布的一款 Firefox 插件，現(xiàn) Chrome 也可安裝，可以對(duì)網(wǎng)站的頁(yè)面性能進(jìn)行分析，提出對(duì)該頁(yè)面性能優(yōu)化的建議）原則，或者 Chrome 自帶的 Audits 等，總結(jié)起來(lái)主要包括網(wǎng)絡(luò)加載類、頁(yè)面渲染類、CSS 優(yōu)化類、JavaScript 執(zhí)行類、緩存類、圖片類、架構(gòu)協(xié)議類等幾類，下面逐一介紹。
網(wǎng)絡(luò)加載類 1．減少 HTTP 資源請(qǐng)求次數(shù)在前端頁(yè)面中，通常建議盡可能合并靜態(tài)資源圖片、JavaScript 或 CSS 代碼，減少頁(yè)面請(qǐng)求數(shù)和資源請(qǐng)求消耗，這樣可以縮短頁(yè)面首次訪問(wèn)的用戶等待時(shí)間。通過(guò)構(gòu)建工具合并雪碧圖、CSS、JavaScript 文件等都是為了減少 HTTP 資源請(qǐng)求次數(shù)。另外也要盡量避免重復(fù)的資源，防止增加多余請(qǐng)求。
2．減小 HTTP 請(qǐng)求大小除了減少 HTTP 資源請(qǐng)求次數(shù)，也要盡量減小每個(gè) HTTP 請(qǐng)求的大小。如減少?zèng)]必要的圖片、JavaScript、CSS 及 HTML 代碼，對(duì)文件進(jìn)行壓縮優(yōu)化，或者使用 gzip 壓縮傳輸內(nèi)容等都可以用來(lái)減小文件大小，縮短網(wǎng)絡(luò)傳輸?shù)却龝r(shí)延。前面我們使用構(gòu)建工具來(lái)壓縮靜態(tài)圖片資源以及移除代碼中的注釋并壓縮，目的都是為了減小 HTTP 請(qǐng)求的大小。
3．將 CSS 或 JavaScript 放到外部文件中，避免使用 頁(yè)面渲染類 1．把 CSS 資源引用放到 HTML 文件頂部一般推薦將所有 CSS 資源盡早指定在 HTML 文檔 中，這樣瀏覽器可以優(yōu)先下載 CSS 并盡早完成頁(yè)面渲染。
2．JavaScript 資源引用放到 HTML 文件底部JavaScript 資源放到 HTML 文檔底部可以防止 JavaScript 的加載和解析執(zhí)行對(duì)頁(yè)面渲染造成阻塞。由于 JavaScript 資源默認(rèn)是解析阻塞的，除非被標(biāo)記為異步或者通過(guò)其他的異步方式加載，否則會(huì)阻塞 HTML DOM 解析和 CSS 渲染的過(guò)程。
3．盡量預(yù)先設(shè)定圖片等大小在加載大量的圖片元素時(shí)，盡量預(yù)先限定圖片的尺寸大小，否則在圖片加載過(guò)程中會(huì)更新圖片的排版信息，產(chǎn)生大量的重排
4．不要在 HTML 中直接縮放圖片在 HTML 中直接縮放圖片會(huì)導(dǎo)致頁(yè)面內(nèi)容的重排重繪，此時(shí)可能會(huì)使頁(yè)面中的其他操作產(chǎn)生卡頓，因此要盡量減少在頁(yè)面中直接進(jìn)行圖片縮放。
5．減少 DOM 元素?cái)?shù)量和深度HTML 中標(biāo)簽元素越多，標(biāo)簽的層級(jí)越深，瀏覽器解析 DOM 并繪制到瀏覽器中所花的時(shí)間就越長(zhǎng)，所以應(yīng)盡可能保持 DOM 元素簡(jiǎn)潔和層級(jí)較少。
6．盡量避免在選擇器末尾添加通配符
CSS 解析匹配到 渲染樹(shù)的過(guò)程是從右到左的逆向匹配，在選擇器末尾添加通配符至少會(huì)增加一倍多計(jì)算量。
7．減少使用關(guān)系型樣式表的寫(xiě)法直接使用唯一的類名即可最大限度的提升渲染引擎繪制渲染樹(shù)等效率
8．盡量減少使用JS動(dòng)畫(huà)JS 直接操作 DOM 極容易引起頁(yè)面的重排
9．CSS 動(dòng)畫(huà)使用 translate、scale 代替 top、height盡量使用 CSS3 的 translate、scale 屬性代替 top、left 和 height、width，避免大量的重排計(jì)算
10．盡量避免使用