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