近幾年，移動端站點和app、手游井噴式的發展，大大出乎了當初從業者的預料，2010年前后中國還處於3G網時代，各種3G宣傳鋪天蓋地，如果你稍稍回憶一下，那個時候中國幾乎沒有像樣的移動站點；大約在12年左右，也就是iphone4s誕生的時代，在中國高級智能設備開始被普遍使用，4G的覆蓋范圍也越來越大，各種app、移動站點、Html5活動頁面也逐漸火爆起來；隨着行業的發展，對從業者及技術支持的要求也越來越高；對於前端，前端資源和頁面優化是常見要求，對比移動端，移動端對前端優化的要求更高，可以說要達到極致，雖然現在基本都有使用WIFI了，但一些地方還是要靠4G甚至3G、2G，極致的優化能爭取更多的pv和更多的可能，如果你去觀察一些大廠的項目和一些比較有名的站點，也會發現他們的優化是做的非常專業非常好的；而我今天跟大家聊的就是關於前端優化的內容；
話不多說，來看看有哪些選項；
1.引用資源部分優化：
·合並引用的css、javascript，並使用壓縮模式，這個很好理解吧；
·合並頁面引用的小圖標，也就是合成一張圖片，引用背景圖片定位，俗稱雪碧圖；
·使用按需加載，scroll加載的處理方式；
·服務器GZIP處理資源，這一般是指WWW服務器中安裝的一個功能，當有人來訪問這個服務器中的網站時，服務器中的這個功能就將網頁內容壓縮后傳輸到來訪的電腦瀏覽器中顯示出來，一般對純文本內容可壓縮到原大小的40%，好吧，后面這一句是科普
；
·異步加載資源，和document構建不相沖突，defer、async的設置；
·減少http請求，全局使用，緩存一切可緩存的資源文件；
·外聯式引用資源，主要是為了頁面緩存考慮；
·資源文件放在同一個服務器，避免調用第三方資源，萬一掛了那(常見的是各種不靠譜的CDN，淚目中
)；
·dns-prefetch，把這個放這里不知道合適不合適，這個應該算是http請求方面的優化，不知道什么是dns-prefetch是什么的自行谷歌之，俗名叫dns預獲取，主要作用是減少請求次數和提前對dns預獲取(廢話)，什么意思那，簡單的說你的站點域名是x.com，而你網站上一些的圖片等資源是放在img.x.com上，每次請求會涉及到dns解析問題，對於性能要求極致的站點這個處理就必不可少，在head中加入<link rel="dns-prefetch" href="//img.x.com">就能達到上述的效果，需要注意，雖然dns-prefetch能夠加快網頁解析速度，但是也不能隨便濫用，因為多頁面重復DNS預解析會增加重復DNS查詢的次數；
2.css&javascript內容優化：
·css引用寫在頭部，javascript引用寫在底部、使用異步加載，避免渲染等待；
·避免在頁面標簽中寫樣式；
·不過度引用字體，字體大小的問題；
·值為0的時候不用單位；
·使用標准的瀏覽器前綴，或者使用類似scss中的@include的寫法，定義詳細再引用；
·不濫用頁面浮動；
·避免復雜dom 循環操作；
·id的工作效率比class高，但我個人不喜歡寫很多id(dom多了不爽)，看情況操作；
·使用事件代理代替綁定事件；
3.Dom渲染優化：
·使用簡潔的html標簽結構，避免復雜嵌套；
·使用css3書寫動畫，減少jsdom操作；
·適當使用svg、canvas；
·避免最下級元素書寫頁面class
4.圖片優化：
插一句，web圖片優化應該是優化中的重頭戲，內容型、展示型的站點圖片規模很大，也許1%的優化作用就可以和其他的優化方式相媲美；
·使用css、svg、fonticon代替圖片；
·壓縮圖片，重中之重，就圖片本身格式而言，png8大於gif，常用png和jpg，而壓縮方面有各種工具，比如gulp(個人多次實測壓縮比率達20%左右，這個也可能和圖片多少、格式有關系)、TinyPNG(熊貓站，性能比較高的，不便的是國外的，上傳下載太麻煩了，使用它們給的開發者接口，個人實測跟gulp差不多，比不上網站上的壓縮，所以意義不大，而且限制次數，土豪沖會員也許給的接口性能會優越也說不定哈
)還有其他各種網絡壓縮工具不一一說了，這些是針對前端使用的圖片的，其實一般站點的圖片處理會有服務器上專門的配置服務做這些事情的，比如用戶上傳一張1MB的用戶頭像，服務器會處理成兩張，一張小圖供頭像圖標引用，一張原尺寸的，但體積都會小很多，供站點引用。
·使用webp圖片，不知道webp是啥的自行google之，是未來天網前身的美帝google公司(
放我出去，我要裝13，每次提天網，都嘆息百毒一點都不爭氣......)開創的一種圖片格式，性能我只能說我服，不便的是不是所有瀏覽器都支持這種高科技...(IE：好像聽到背后有人說我帥
)，要做兩種可能性的預設准備，實際操作起來也是增加很多工作量的，所以是個可參考項，其實主要還是看公司團隊的人力資源分配和leader的推行決心(說的好像其他不是這樣似得)；
·避免使用DataUrl，也即俗稱的base64引用，這種方式沒有使用圖片的壓縮算法文件會變大，並且要解碼后再渲染，加載慢耗時長，恩，要是沒有直觀印象，看下圖，這貨就長這樣：
還是別看了，會瞎眼的，並且這里圖片內容是沒完全顯示的；關於這部分內容，也可以參考我另一篇博文，傳送門：DataURL簡介及DataURL的利弊
以上描述序列部分排名先后，相輔而成；
注意移動端和pc端的優化是沒有界限的，移動端適用的優化規則在pc端同樣適用；
差不多寫到這里了，如果還有其他吊炸天的優化方式我沒列出來或者描述解釋錯誤的小伙伴們可以留言給我，相信很多人看完這個會有疑問，我的工作也就是寫點html、css，甚至不寫js和用框架了，我要考慮這么多頁面優化的東西？明明提交個html給程序開發就好了？其實主要是兩點，第一個如上所述，行業發展日新月異，跟不上就會掉隊，另一個是做完技術人員對自己的一個精益求精的要求，性能做到極致，其實一些大廠也是這么要求的，簡單的事情，做到極致，就是藝術；這也會大神和普通開發分道揚鑣的地方，好吧扯遠了，THKS FOR WATCHING。
原文地址：漫談前端優化，薛陳磊 | Share the world