（給達達前端加星標，提升前端技能）
想要成為一名合格的Web前端工程師，Web前端性能優化是一個必須要掌握的知識，那么應該怎么進行Web前端性能優化呢？--達達前端
Web前端性能優化原理問題
前端性能優化，資源的合並與壓縮，圖片編碼的原理，以及類型的選擇，瀏覽器的渲染機制，懶加載，預加載，瀏覽器存儲，緩存機制，PWA和Vue-SSR等。
技術棧，Vue.js和Chrome，調試工具performance和layers。那么什么是前端性能優化原理的點，涉及作用以及原理，如何與真實的項目場景結合，理論結合實戰經驗，進行量化分析。
前端優化，一般是先基礎優化（圖片編碼原理等問題），高一點 即為 進階優化（瀏覽器的渲染機制，瀏覽器的存儲，優化），結合服務端進行優化（首屏渲染等問題）等。
前端性能優化方案，最小化HTTP的請求，使用內容交付網絡，避免空src或是href，添加過期或者是緩存控制標頭，gzip組件，將styleSheets放在頂部，將腳本放在最下面，避免css表達式，減少dns的查找，將js和css設置為外部，避免重定向，配置etag，使用ajax緩存，減少dom元素的數量，沒有404，減少cookie的大小，不縮放HTML中的圖像，避免使用過濾器，使用favicon.icon小型且可緩存。
面試官拷問
面試官：為什么要進行前端優化？圖片在前端是如何解碼的？瀏覽器渲染加載的過程是如何進行的？懶加載和預加載的原理是什么樣的？懶加載和預加載的應用場景是什么樣的？PWA和VUE-SSR等原理的是怎么樣的？
面試官深度拷問每個優化性能后的原理是怎么樣的？結合你自己做過的項目性能優化的原理是怎么樣的？說說你在項目中使用過性能優化后的感悟心得？說說每個性能優化原理最適合的場景過程。
面試人員想要了解你掌握多少性能優化的原理，了解你做過項目上是否使用過性能優化，分析自身做過的項目，找到需要性能優化的點，選擇合適的性能優化等。
影響前端性能的有圖像，樣式表，腳本，flash等，減少組件的數量，減少所需的HTTP請求的數量，即可加快頁面的速度。
前端性能優化，資源的合並與壓縮
合並文件是一種通過將所有腳本合並為一個腳本，類似將所有css合並為一個樣式表來減少HTTP請求數量的方法。
實現性能優化，第一，減少我們的HTTP請求的數量，以及減少請求的資源大小，第二，資源的壓縮與合並的原理是什么。壓縮與合並前是什么樣的效果，壓縮與合並后又有什么區別。
拷問：瀏覽器的一個請求從發送到返回是一個怎樣的過程？
url分解，協議名稱，層級url的標記符號，固定不變，訪問資源需要的憑證信息，從哪個服務器獲取數據，需要連接的端口號，指向資源的層級文件路徑，查詢字符串，片段id。
客戶端，走HTTP應用層，tcp傳輸層，ip網絡層，數據鏈路層網絡
分層由高到低分別為：應用層、傳輸層、網絡層、數據鏈路層。發送端從應用層往下走，接收端從數據鏈路層往上走。
應用層客戶端發送HTTP請求，報文首部，空行，報文主體，報文首部含請求行，請求首部字段，實體首部字段，其他。
SYN （Synchronize Sequence Numbers）同步序列編號
ACK (Acknowledgement）確認字符
過程，用戶先在瀏覽器中輸入一個url，瀏覽器內部中的核心代碼會將這個輸入的url拆分解析，然后將domain傳給dns服務器，dns服務會根據domain查詢相關的post對應的ip地址，然后將ip地址傳遞給瀏覽器，瀏覽器有ip地址，就知道瀏覽器要到哪里去，持有ip地址知道這個請求發送到哪里去。就跟隨協議，請求的參數都會在協議中攜帶，發送到網絡中去，然后通過局域網，交換機，路由器，主干網絡，到達服務端。
服務端是有一個MVC的架構的，請求首先會進入Controller中，在Controller中進行相關的邏輯處理，以及請求的分發，調用Model層，負責和數據進行交互，model層會讀取Redis和db里面的數據。然后通過view層給到網絡，由服務端到瀏覽器端，瀏覽器主要是做render的過程，render的過程就是通過瀏覽器請求回來的HTML，css，JavaScript等渲染的過程，會形成相關的dom樹，以及對應的css樹，在頁面上進行相應的樣式渲染。
拷問，從瀏覽器到服務器的過程中，那幾個點，哪些過程可以進行我們的前端優化呢？
client瀏覽器與server通過http協議通訊，http協議屬於應用層協議，http屬於tcp協議，所以client與server主要通過socket進行通訊。
tcp屬於傳輸層協議，走https需要會話層tls,ssl等協議。
瀏覽器，dns服務器，服務器等，dns上我們可以進行緩存，來優化前端性能，路由器層面，url層面進行數據緩存，這樣訪問的時間就會被縮短了很多。
網絡請求的過程，帶寬，網絡的選擇，涉及到緩存，可以使用cdn，cdn是請求靜態資源用的，請求靜態資源，那么cookie是沒有用的，所以希望在請求靜態資源中，把這個cookie給去掉，這里注意cdn的域名不要和主站的域名一致，防止攜帶cookie。
如何減少我們HTTP請求的大小，每一個HTTP請求都要走網絡環境才能達到我們的服務器，每一次請求都有網絡環境的損耗，把多次HTTP請求減少到一次，減少網絡環境中的損耗。也可以從服務器端出發，先把反映到頁面中效果進行渲染，然后直出到網頁上。
每一次請求都有網絡環境的損耗，我們可以把多次HTTP請求合並成一次，從而減少相同的環境損耗。
帶寬，一個HTTP的請求大小能夠較小的話，訪問就比較快一些，瀏覽器端的渲染過程，使用框架，就要從瀏覽器中進行渲染，框架中的模板是要在瀏覽器中進行渲染的，這個在框架中進行渲染，不利於首屏，對首屏有很大的損耗，不利於前端的性能。
服務器的渲染，將HTML渲染后直出到我們瀏覽器頁面，不是在瀏覽器中進行渲染了。
前端性能優化點，通過HTTP請求的過程，可以了解到，我們可以通過dns進行緩存從而減少dns查詢的時間，網絡請求的過程走最近的網絡環境，相同的靜態資源進行緩存，減少HTTP請求的大小，減少HTTP請求，服務器端渲染，從業務中進行前端優化點。
重點，深入了解一下HTTP的請求過程，就可以知道前端性能優化的核心要點
資源的合並與壓縮
減少資源體積，gzip壓縮，js混淆，css壓縮，圖片壓縮。
減少HTTP請求的數量即為合並，減少HTTP請求的大小即為壓縮。可以對HTML進行壓縮，css進行壓縮，js進行壓縮和混亂，文件合並，開啟gzip等。
進行HTML壓縮
第一使用在線網站壓縮，使用html-minifier工具進行壓縮，后端模板引擎渲染壓縮。
進行css壓縮
css sprite是減少圖像請求數量的首選方法，將背景圖像合並為單個圖像。
CSS Sprites在國內很多人叫CSS精靈，是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網絡流行的速度而言，不高於200KB的單張圖片的所需載入時間基本是差不多的，所以無需顧忌這個問題。
第一進行無效代碼的刪除，第二是css語義合並，使用在線網站壓縮，使用html-minifier對HTML中的css進行壓縮，使用clean-css對css進行壓縮。
用CSSbackground-image和background-position屬性顯示所需的圖像段
進行js的壓縮和混亂
第一刪除無效字符，剔除注解，代碼語義的縮減和優化，代碼的保護，可以使用在線網站進行壓縮，html-minifier對html中的js進行壓縮，使用uglifyjs2對js進行壓縮
（1）將table改為div布局
（2）縮減精簡div、span、ul、li等系列標簽
（3）刪除多余空格
（4）表格類型布局時候適當使用table替代div布局
（5）網頁GZIP壓縮
文件的合並
文件與文件之間有插入的上行請求，增加了N-1個網絡延遲，受丟包問題影響更加嚴重，經過代理服務器時可能會被斷開。合並文件存在首屏渲染問題，緩存失敗問題，js文件比較大，請求比較慢，得請求回來后才會首屏HTML渲染，js是由緩存的，文件合並如果其中某個js文件有變化，就會導致緩存失敗的問題，如果文件不合並，修改其中的某一個js文件，只會導致該文件緩存失效，其他的不會受影響。文件合並，存在很嚴重的緩存失效問題。
那么是否進行文件的合並，建議可以將公共庫單獨打包成一個文件，業務單獨打包成一個文件，不同頁面的合並，將不同頁面的js不同打包，
如何進行文件合並，在線網站進行文件合並，使用nodejs實現文件合並
實戰資源和與壓縮
實戰頁面開發，網站進行壓縮與合並，fis進行自動化的壓縮與合並。
壓縮前
壓縮后
前端自動化的構造實現壓縮與合並
fis3是一款百度內的構建工具，start->getSource()->所有文件是否編譯完成，（單文件的編譯，另個走向為打包的過程）。
fis3的配置文件，fis-conf.js
壓縮后，優化前后性能對比，還是要性能優化得好，大的資源效果很明顯
加載優化，合並CSS，JavaScript，合並小圖片，緩存一切可以緩存的資源，使用外聯樣式引用CSS和JavaScript，壓縮HTML，css，JavaScript，啟用GZIP，使用首屏加載，按需加載，滾屏加載，增加加載進度條，減少cookie，避免重定向，異步加載第三方資源。
css優化，css寫在頭部，JavaScript寫在尾部，避免圖片和Frame等的空Src，盡量避免重設置圖片大小，圖片盡量避免使用DataURL，盡量避免寫在HTML標簽中寫style屬性，避免css的表達式，移除空的css規則，正確使用display的屬性，不濫用float，不濫用web字體，不濫用過多的Font-size，值為0時不需要任何單位，標准化各種瀏覽器前綴，避免讓選擇符看起來像正則表達式。
渲染優化，HTML使用viewport，減少dom節點，盡量使用css3動畫，合理使用requestAnimationFrame動畫代替setTimeout，適當使用Canvas動畫，Touchmove，Scroll事件會導致多次渲染，使用CSS3 transitions，CSS3 3d，transforms，Opacity，Canvas等來觸發GPU渲染。
腳本優化，減少重繪和回流，緩存dom選擇與計算，緩存列表length，盡量使用事件代理，避免批量綁定事件，盡量使用id選擇器，使用touchstart，touchend代替click。
圖片優化，使用css3，svg，iconfont代替圖片，使用srcset，web優與jpg，png8優於gif，首次加載不大於1014kb，圖片不寬於640。
注意，在我們修改后端響應時間縮短一半時，整體響應事件只能減少5-10%，而優化前端性能，縮短一半時，整體響應可以減少40-45%。
前端優化的意義 HTTP請求的過程是進行優化的核心 壓縮和合並的原理
圖片優化的過程
圖片加載處理，圖片預加載，圖片懶加載，首屏加載時進度條的顯示。異步請求的優化，使用正常的json數據格式進行交互，部分常用數據的緩存。
圖像映射將多個圖像合並為一個圖像，整體大小大致相同，但是減少HTTP請求的數量可以加快頁面的速度。
png8、png24、png32區別
png8為256顏色，支持透明，png24為2的24次冪，不支持透明，png32為2的24次冪，支持透明。
jpg有損壓縮，壓縮率高，不支持透明，png支持透明，瀏覽器兼容好，webp壓縮程度更好，在ios webview有兼容性問題，svg矢量圖，代碼內嵌，相對較小。
jpg使用場景，用在不需要透明圖片，png使用場景，用在需要透明圖片的場景，webp用在安卓，svg矢量圖用在圖片樣式相對簡單的業務。
css雪碧圖，把一些圖片整合到一張單獨的圖片中，用來減少請求數量，問題出在圖片大，如果沒有加載成功的話，慢，也是有問題的。image inline，把圖片的內容內嵌到HTML上，與HTML存在，作為base64的格式，可以減少你的網站的HTTP請求數量。使用矢量圖svg，繪制功能，使用iconfont解決icon問題。
webp使用在安卓下，它具更好的圖像數據壓縮算法，和無損和有損的壓縮模式，alpha透明，動畫的特性。
HTML渲染過程：順序執行（詞法分析），並發加載，是否阻塞，依賴關系，引入方式。
css阻塞，css head中阻塞頁面的渲染，css阻塞js的執行，css不阻塞外部腳本的加載。
js阻塞，引入js阻塞頁面的渲染，js不阻塞資源的加載，js順序執行，阻塞后續js邏輯的執行。
圖片壓縮與拼接
PNG、PNG-8、PNG-24以及JPEG格式圖片區別
PNG格式適合對透明度有要求的情形，PNG-8處理不了復雜色域下的漸變，PNG-24可以幾乎不失真地保留漸變
圖片壓縮方法
使用Photoshop自帶圖片壓縮，文件—存儲為Web所用格式，一般情況下，JPEG選擇輸出質量為70~80%可以保證視覺上幾乎沒有差異。
頁面體積
優化前后文件體積壓縮率 = 優化后的體積÷優化前的體積
懶加載原理
什么是懶加載的定義是對於圖片而言，圖片資源，對於商城項目圖片是很多的，頁面很長的業務場景適用，減少無效資源的加載，並發加載的資源過多會阻塞js的加載。
當圖片進入到我們可視區域，去請求加載資源
懶加載的效果延遲加載
預加載原理
圖片等靜態資源使用前提前請求，資源在使用時從緩存中加載，提高用戶體驗。
什么是重繪與回流的機制？
頻繁重繪與回流會導致ui頻繁渲染，導致JavaScript變慢。回流，當render tree中的一部分因為元素的規模尺寸，布局等改變需要重新構建，會觸發回流，重繪，當render tree中的一些元素需要修改屬性，這些屬性不影響元素的外觀，風格，布局，就叫做重繪，如修改顏色等。
所以回流一定會引起重繪，但是重繪不一定會引起回流。
掌握一些css屬性
將頻繁重繪回流的元素單獨出來，作為一個獨立的圖層，那么這個元素的重繪回流就只能影響這個圖層中。
把一個元素獨立成獨立的圖層，用css屬性
避免使用觸發重繪，回流的css屬性，重繪和回流很頻繁可以獨立出來。
瀏覽器存儲
了解什么是localstorage，cookie，sessionstorage，indexdb
了解pwa和service worker的應用
多種瀏覽器存儲方式共存
什么是cookie
用cookie給服務端傳遞相關信息，讓服務端來分別當前請求的是哪個客戶端，cookie是1993年有的，它的目的就是為了區分HTTP的請求情況，本來HTTP請求就是無狀態的，就是請求之后的連接就關閉了，cookie就是去維護客戶端的狀態。
用於瀏覽器端和服務端的交互，客戶端自身數據的存儲。
cookie有限制，作為瀏覽器存儲大小有4kb左右，需要設置過期時間。
cookie的生成方式，http response header的set-cookie，通過document.cookie可以讀寫cookie，cookie中的相關域名下面-cdn的流量損耗，httponly。
LocalStorage
專門用於瀏覽器存儲，大小5M左右，接口封裝好，本地緩存的方案，可提高首屏的加載速度。
SessionStorage
會話級別的瀏覽器存儲，大小5M左右，在客戶端使用，不和服務端進行通信，接口封裝較好。
pwa是什么
它是一種web app 新模型，並不是指某一種前沿的技術，是一種漸進式的web app，是通過一系列新的web特性。pwa在沒有網咯的環境中也能提供基本的頁面訪問，web app沒有網是接收不到基本頁面的展示，但是pwa不會出現未連接到網絡就導致顯示不了頁面。它很快速，對網頁渲染以及網絡數據訪問很快速，融入特性，可以被添加到手機桌面等。
service worker是什么
它是一個腳本，瀏覽器獨立於當前網頁，將其在后台運行，實現一些不依賴的頁面。具有攔截和處理網絡請求的特性。
緩存策略
緩存，DNS緩存，CDN部署與緩存，http緩存
了解cache-control，last-modified，etag。httpheader的屬性，Cache-control屬性，max-age，s-maxage，private，public，no-cache，no-store。
瀏覽器在DNS解析中會消耗一定的時間，對一些訪問量高的來說，需要做好DNS的緩存工作，CDN緩存，CDN作為靜態資源文件的分發，做好靜態資源的緩存工作，就能加快網站的加載速度，
移動到優化，使用cache，減少重定向，首屏優化，保證首屏加載數據小於14kb，不濫用web字體。
服務端性能優化
服務器是node.js，所以也能進行優化。
谷歌PageSpeed團隊的測試表明，30~50KB（壓縮后）是每個JavaScript文件大小的合適范圍：既大道了能夠減少小文件帶來的網絡延遲，還能確保遞增及分層式的執行。--web性能權威指南
減少HTTP請求，合並js文件，合並css文件，使用css sprite，使用base64表示簡單的圖片。
移動端優化，長列表滾動優化，函數防抖和函數節流，使用touchstart，touchend代替click，html的viewport設置，開啟gpu渲染加速。
淺談Web前端優化的本質與方法
一、減少過多的HTTP外部請求
二、在恰當的位置使用CSS
三、優化代碼
參考鏈接
推薦閱讀 點擊標題可跳轉
【面試Vue全家桶】vue前端交互模式-es7的語法結構？async/await
【面試需要】掌握JavaScript中的this，call，apply的原理
2019年的每一天日更只為等待她的出現，好好過余生，慶余年 | 掘金年度征文
覺得本文對你有幫助？請分享給更多人
關注「達達前端」加星標，提升前端技能
在博客平台里，未來的路還很長，也希望自己以后的文章大家能多多支持，多多批評指正，我們一起進步，一起走花路。
非常感謝讀者能看到這里，如果這個文章寫得還不錯，覺得「達達」我有點東西的話，覺得我能夠堅持的學習，覺得此人可以交朋友的話， 求點贊，求關注，求分享，對暖男我來說真的
非常有用！！！
感謝閱讀，原創不易，喜歡就點個[在看] or [轉發朋友圈]，這是我寫作最大的動力。
意見反饋
若本號內容有做得不到位的地方（比如：涉及版權或其他問題），請及時聯系我們進行整改即可，會在第一時間進行處理。
這是一個有質量，有態度的公眾號
點關注，有好運
好文章，我在看❤️