【綜合篇】Web前端性能優化原理問題

（給達達前端加星標，提高前端技能）

​

想要成爲一名合格的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請求的數量能夠加快頁面的速度。

png八、png2四、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-八、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前端優化的本質與方法​

1、減小過多的HTTP外部請求

2、在恰當的位置使用CSS

3、優化代碼

參考連接

推薦閱讀  點擊標題可跳轉

【面試Vue全家桶】vue前端交互模式-es7的語法結構？async/await

【面試須要-Vue全家桶】一文帶你看透Vue前端路由

【面試須要】掌握JavaScript中的this，call，apply的原理

2019年的每一天日更只爲等待她的出現，好好過餘生，慶餘年 | 掘金年度徵文

進來就是一家人【達達前端技術社羣⑥】

以爲本文對你有幫助？請分享給更多人

關注「達達前端」加星標，提高前端技能

在博客平臺裏，將來的路還很長，也但願本身之後的文章你們能多多支持，多多批評指正，咱們一塊兒進步，一塊兒走花路。

很是感謝讀者能看到這裏，若是這個文章寫得還不錯，以爲「達達」我有點東西的話，以爲我可以堅持的學習，以爲此人能夠交朋友的話， 求點贊，求關注，求分享，對暖男我來講真的

很是有用！！！

感謝閱讀，原創不易，喜歡就點個[在看] or [轉發朋友圈]，這是我寫做最大的動力。

意見反饋

若本號內容有作得不到位的地方（好比：涉及版權或其餘問題），請及時聯繫咱們進行整改便可，會在第一時間進行處理。

這是一個有質量，有態度的公衆號

點關注，有好運

​

好文章，我在看❤️