前端開發(fā)恃锉，又稱web前端開發(fā)搀菩，是從網頁制作演變而來的。隨著互聯網進入web2.0時代破托，各種類似桌面軟件的web應用的大量涌現肪跋，使得網站的前端發(fā)生了翻天覆地的變化。
在許多外行人眼里總是覺得前端開發(fā)工程師是個特別高深的職業(yè)炼团，其實前端開發(fā)工程師并沒有那么高深澎嚣，一般四個月左右就能學會。
前端優(yōu)化的目的是什么 ?
1. 從用戶角度而言瘟芝，優(yōu)化能夠讓頁面加載得更快易桃、對用戶的操作響應得更及時，能夠給用戶提供更為友好的體驗锌俱。
2. 從服務商角度而言晤郑，優(yōu)化能夠減少頁面請求數、或者減小請求所占帶寬贸宏，能夠節(jié)省可觀的資源造寝。
在這里我還是要推薦下我自己建的web前端開發(fā)學習群：731669587，群里都是學web前端開發(fā)的吭练，如果你正在學習前端 诫龙，小編歡迎你加入，今天分享的這個案例已經上傳到群文件鲫咽，大家都是軟件開發(fā)黨签赃，不定期分享干貨（只有前端軟件開發(fā)相關的），包括我自己整理的一份2018最新的前端進階資料和高級開發(fā)教程分尸，歡迎進階中和進想深入前端的小伙伴锦聊。
前端優(yōu)化的途徑
大致可以分為兩類，第一類是頁面級別的優(yōu)化箩绍，例如 HTTP請求數孔庭、腳本的無阻塞加載、內聯腳本的位置優(yōu)化等 ;第二類則是代碼級別的優(yōu)化材蛛，例如 Javascript中的DOM 操作優(yōu)化圆到、CSS選擇符優(yōu)化、圖片優(yōu)化以及 HTML結構優(yōu)化等等卑吭。
本著提高投入產出比的目的构资，下面提到的各種優(yōu)化策略大致按照投入產出比從大到小的順序排列。
1. 減少 HTTP請求數
這條策略基本上所有前端人都知道陨簇，而且也是最重要最有效的吐绵。一個完整的請求都需要經過 DNS尋址迹淌、與服務器建立連接、發(fā)送數據己单、等待服務器響應唉窃、接收數據這樣一個 “漫長” 而復雜的過程。
2. 將外部腳本置底
前文有談到纹笼，瀏覽器是可以并發(fā)請求的纹份，這一特點使得其能夠更快的加載資源，然而外鏈腳本在加載時卻會阻塞其他資源廷痘，例如在腳本加載完成之前蔓涧，它后面的圖片、樣式以及其他腳本都處于阻塞狀態(tài)笋额，直到腳本加載完成后才會開始加載元暴。如果將腳本放在比較靠前的位置，則會影響整個頁面的加載速度從而影響用戶體驗兄猩。解決這一問題的方法有很多茉盏。
3. 異步執(zhí)行 inline腳本
inline腳本對性能的影響與外部腳本相比，是有過之而無不及枢冤。首頁鸠姨，與外部腳本一樣， inline腳本在執(zhí)行的時候一樣會阻塞并發(fā)請求淹真，除此之外讶迁，由于瀏覽器在頁面處理方面是單線程的，當 inline腳本在頁面渲染之前執(zhí)行時核蘸，頁面的渲染工作則會被推遲巍糯。簡而言之， inline腳本在執(zhí)行的時候值纱，頁面處于空白狀態(tài)。此外坯汤，在HTML5中引入了 Web Workers的機制虐唠，恰恰可以解決此類問題。
4. Lazy Load Javascript
隨著 Javascript框架的流行惰聂，越來越多的站點也使用起了框架疆偿。不過，一個框架往往包括了很多的功能實現搓幌，這些功能并不是每一個頁面都需要的杆故，如果下載了不需要的腳本則算得上是一種資源浪費既浪費了帶寬又浪費了執(zhí)行花費的時間。
5. 異步請求
Callback在某些頁面中可能存在這樣一種需求溉愁，需要使用 script標簽來異步的請求數據
6. 減少不必要的 HTTP跳轉
