來源：小幽艾 發(fā)布時間：2018-11-01 14:39:02 閱讀量：1313
webpack性能優(yōu)化（emmm,我還沒學這個，啥都看不懂，勿噴）
1.不要讓loader做太多事情
2.處理第三方庫
3.構(gòu)建結(jié)果體積壓縮
a.文件可視化，找出導致體積過大的原因
b.拆分資源
c.刪除冗余代碼
d.按需加載
4.webpack Gzip壓縮
圖片優(yōu)化
總的來說就是根據(jù)圖片類型的特點去使用圖片
1.jpg圖片
特點是有損壓縮、高質(zhì)量壓縮、體積小、加載快、不支持透明，適用于呈現(xiàn)色彩豐富的圖片，適合用作背景圖、輪播圖或Banner圖的格式
2.png圖片
特點是無損壓縮、高質(zhì)量壓縮、體積大、支持透明，適用于呈現(xiàn)小的Logo，或者顏色簡單且對比強烈的圖片或背景圖的格式
3.SVG圖片
特點是體積小，不失真，兼容性好，可壓縮性強，可編程，渲染成本高，學習成本高，最適合帶有大型渲染區(qū)域的應用程序（地圖應用）
4.雪碧圖
將一個頁面涉及到的所有圖片都包含到一張大圖中去，然后利用CSS的 background-image，background- repeat，background-position 的組合進行背景定位。利用CSS Sprites能很好地減少網(wǎng)頁的http請求，從而大大的提高頁面的性能；CSS Sprites能減少圖片的字節(jié)。
5.Base64
對圖片進行Base64編碼，會得到一串字符串，瀏覽器會直接將這串字符串解碼為圖片，這樣就不用發(fā)送http請求了，但是這樣的缺點是圖片會膨脹，體積會增加，所以它的應用條件是：圖片尺寸小、無法用雪碧圖、圖片更新頻率低（不需要我們重復編碼和修改文件內(nèi)容，維護成本較低）
6.webP
集各種格式的優(yōu)點于一身，缺點就是兼容性不好，所以應用時需要判斷瀏覽器
合理利用瀏覽器緩存機制
1.MemoryCache，即在內(nèi)存中的緩存，從優(yōu)先級上來說，它是瀏覽器最先嘗試去命中的一種緩存。從效率上來說，它是響應速度最快的一種緩存。
2.Services Worker Cache，Service Worker 是一種獨立于主線程之外的 Javascript 線程。它脫離于瀏覽器窗體，因此無法直接訪問 DOM。這樣獨立的個性使得 Service Worker 的“個人行為”無法干擾頁面的性能，可利用這一點幫我們實現(xiàn)離線緩存、消息推送和網(wǎng)絡代理等功能
3.Http緩存，分為強緩存和協(xié)商緩存
http緩存的是指:當Web請求抵達緩存時， 如果本地有“已緩存的”副本，就可以從本地存儲設備而不是從原始服務器中提取這個文檔
強緩存（優(yōu)先于協(xié)商緩存，返回碼200）：
利用Expires（http1.0，記錄緩存過期時間）和Cache-Control（http1.1，記錄緩存過期時間）來控制，Cache-Control優(yōu)先級高于Expires，Expires 使用的是服務器端的時間，要是客戶端時間和服務端不同步，就可能造成瀏覽器本地的緩存無用或者一直無法過期，Cache-Control使用的是使用的是客戶端本地時間的計算，所以不會出現(xiàn)上述情況，Cache-Control優(yōu)先級高于Expires，
協(xié)商緩存（返回碼304）：
利用If-None-Match（請求頭）/Etag（響應頭）和If-Modified-Since（請求頭）/Last-Modified（響應頭），If-None-Match和Etag記錄的是服務器為每個資源生成的唯一的標識字符串，緩存的數(shù)據(jù)要是改變了，那么這兩個數(shù)據(jù)就會變，這樣可判斷緩存到底有沒有更新，If-Modified-Since和Last-Modified記錄的是服務端的文件最后改變的時間，通過判斷這個，可以緩存有沒有被更新，Last-Modified有一個缺陷就是只能精確到1s，所以對于精確更高的可能不適用，Etag優(yōu)先級高于Last-Modified，Etag生成過程需要服務器額外付出開銷，會影響服務器性能，所以要看情況使用Etag
強緩存與協(xié)商緩存更細致的了解，請參考：
徹底弄懂HTTP緩存機制及原理
HTTP緩存是如何實現(xiàn)
4.Push Cache
http2階段的緩存，應用尚處于萌芽階段，是緩存的最后一道防線。
瀏覽器只有在 Memory Cache、HTTP Cache 和 Service Worker Cache 均未命中的情況下才會去詢問 Push Cache。Push Cache 是一種存在于會話階段的緩存，當 session 終止時，緩存也隨之釋放。不同的頁面只要共享了同一個 HTTP2 連接，那么它們就可以共享同一個 Push Cache。
合理利用本地存儲
1.利用WebStorage
WebStorage提供了一種方式讓網(wǎng)站能夠把信息存儲到本地的計算機上，并在以后需要的時候進行獲取。這樣一來，當需要用到什么資源時，可以直接在本地存儲里獲取，而不用發(fā)起網(wǎng)絡請求等待響應。WebStorage分為localStorage（只支持string類型的存儲）與Session Storage（只支持string類型的存儲），Session Storage在會話結(jié)束消失， localStorage永久有效，手動刪除才會消失，Session Storage 和localStorage都遵循同源策略，但是對Session Storage特殊的一定在于，即便是相同域名下的兩個頁面，只要它們不在同一個瀏覽器窗口中打開，那么它們的 Session Storage 內(nèi)容便無法共享。
2.利用IndexDB
IndexDB運行在瀏覽器上的非關(guān)系型數(shù)據(jù)庫，突破了WebStorage的存儲大小限制，支持存儲字符串和二進制數(shù)據(jù)，IndexDB可創(chuàng)建數(shù)據(jù)庫和表，可以被當成一個真正的數(shù)據(jù)庫使用。
使用CDN
CDN全稱是內(nèi)容分發(fā)網(wǎng)絡，簡單的來說，CDN做的事，就是把資源存在離自己最近的服務器里，從而實現(xiàn)就近訪問數(shù)據(jù)，快速獲取到需要的數(shù)據(jù)
CDN 往往被用來存放靜態(tài)資源(像 JS、CSS、圖片等不需要業(yè)務服務器進行計算即得的資源),可以將靜態(tài)資源和主頁面置于不同的域名下，避免cookie的攜帶，這樣可以做到優(yōu)化CDN
CDN的原理請看: 一張圖說明CDN網(wǎng)絡的原理
使用服務端渲染
服務端渲染，就是當用戶第一次請求頁面時，由服務器把需要的組件或頁面渲染成 HTML 字符串，然后把它返回給客戶端?？蛻舳四玫绞值?，是可以直接渲染然后呈現(xiàn)給用戶的 HTML 內(nèi)容。
沒有服務器渲染，當瀏覽器解析html文檔解析到<script>標簽時，就需要停下html渲染，去解析其中的腳本并執(zhí)行，這整個過程都會阻塞文檔解析，直到腳本執(zhí)行完才會繼續(xù)解析文檔進行渲染。如果js文件的數(shù)量和內(nèi)容都比較大，那么就會造成頁面空白，這樣是非常不利于用戶體驗的，服務器渲染就能很好的解決這一問題。
服務端渲染也不是隨便就能用的，它加重了服務器的壓力，也需要合理使用
CSS優(yōu)化
1.css選擇器：
css是從右往左進行解析的，這也就是說 (ul>li)這種寫法，瀏覽器是先去找到li，再去看每個li的父元素是不是ul,當使用層級較多的選擇器時（如：body>div>p>span），會加大瀏覽器的尋找時間，而我們的原則因當是使瀏覽器能夠盡快的找到相應的元素。所以css選擇器方面的優(yōu)化方案為：
a.避免后代選擇符(后代選擇器的開銷很高)
b.避免鏈式選擇符，避免使用復雜的選擇器，層級越少越好
c.避免使用通配符（使用通配符會使瀏覽器找遍所有的元素）
d.少用標簽選擇器，盡量用類選擇器代替
e.避免不必要的重復
2.盡量減少頁面重排、重繪：
a.什么是重繪和回流？
部分渲染樹（或者整個渲染樹）需要重新分析并且節(jié)點尺寸需要重新計算。這被稱為重排。注意這里至少會有一次重排-初始化頁面布局。
由于節(jié)點的幾何屬性發(fā)生改變或者由于樣式發(fā)生改變，例如改變元素背景色時，屏幕上的部分內(nèi)容需要更新。這樣的更新被稱為重繪。
重繪的代價要比回流小，重繪只涉及樣式的改變，不涉及到布局。重繪就好像給人染了一個頭發(fā)，而回流相當于給人做了一次抽脂手術(shù)，回流一定伴隨著重繪，而重繪卻可以單獨出現(xiàn)
b.回流發(fā)生的情況：
1.添加、刪除、更新 DOM 節(jié)點
2. 通過 display: none 隱藏一個 DOM 節(jié)點-觸發(fā)重排和重繪
3.元素位置改變。
4.元素的尺寸改變（包括：內(nèi)外邊距、邊框厚度、寬度、高度等屬性的改變）。
5. 內(nèi)容改變。
6.頁面渲染器初始化。
7.瀏覽器窗口尺寸改變。
8.添加一個樣式表，調(diào)整樣式屬性
9.用戶行為，例如調(diào)整窗口大小，改變字號，或者滾動。
c.觸發(fā)回流的屬性：
1.盒子模型相關(guān)屬性： width ,height ,padding ,margin ,display ,border-width ,border
2.定位屬性及浮動： top ,bottom ,left ,right ,position ,float ,clear
3.改變節(jié)點內(nèi)部文字結(jié)構(gòu)：
text-align, overflow-y ,font-weight ,overflow, font-family, line-height, vertival-align ,white-space,font-size
d.重繪發(fā)生的情況：
重繪發(fā)生在元素的可見的外觀被改變，但并沒有影響到布局的時候。比如，僅修改DOM元素的字體顏色（只有Repaint，因為不需要調(diào)整布局）
e.觸發(fā)重繪的屬性有：
color,border-style,border-radius ,visibility,text-decoration ,background ,background-image ,background-position ,background-repeat,background-size ,outline-color ,outline ,outline-style ,outline-width ,box-shadow
f.減少頁面重排、重繪的方法：
避免逐條改變樣式，使用類名去合并樣式，盡量將樣式寫在單獨的css文件里面
通過 visibility:hidden 隱藏一個 DOM 節(jié)點
參考文檔：
回流(reflow)與重繪(repaint)
重繪和重排
3.減少css阻塞：
當我們在html時，總是在解析到link標簽或style標簽時，CSSDOM才會開始構(gòu)建，這個構(gòu)建過程會導致DOM解析的阻塞，所以為了減少阻塞時間，我們需要盡快完成加載（啟用CDN），盡早完成加載（在head元素中引用css相關(guān)標簽）
JS優(yōu)化
1.減少JS阻塞
頁面構(gòu)建dom樹的過程，即從上到下解析HTML文檔生成DOM節(jié)點樹，當解析到<script>標簽時，會解析其中的腳本（對于外鏈的JavaScript文件，需要先加載該文件內(nèi)容），然后立即執(zhí)行，這整個過程都會阻塞文檔解析，直到腳本執(zhí)行完才會繼續(xù)解析文檔。如果js文件的數(shù)量和內(nèi)容都比較大，那么就會造成頁面空白，所以為了避免這一狀況，應該把 <script>標簽放在</body>標簽前面，而不是放在<head>標簽里,要使用async(異步加載，腳本加載完立刻執(zhí)行)和defer(異步加載，文檔解析完執(zhí)行)
2.在異步任務中實現(xiàn) DOM 修改時，把它包裝成 micro 任務(微任務）
事件循環(huán)一般是這樣，先處理Macro-task（宏任務）,再處理micro 任務，micro 任務處理完后面緊跟著就是渲染的步驟，然后更新界面，處理Web work任務。包裝成 micro 任務，這樣不用等新的一輪事件循環(huán)，直接渲染呈現(xiàn)
3.Dom方面（從減少頁面回流方面來考慮）
減少Dom操作，緩存dom變量（比如var a=document.querySelector("#demo");）
避免循環(huán)更改dom，在更改時創(chuàng)建一個documentFragment或div，在它上面應用所有DOM操作，最后再把它添加到相應dom中
4.使用異步更新策略（我也沒看懂。。。）
使用圖片懶加載
圖片懶加載，就是當圖片出現(xiàn)在瀏覽器的可視區(qū)域內(nèi)時，設置圖片真正的路徑，讓圖片顯示出來。當一個頁面中由許多圖片時，使用懶加載，可大大提高頁面性能。
具體完成過程為，先給圖片一個假的src,不讓圖片加載，通過監(jiān)聽滾動時間+函數(shù)節(jié)流，來完成判斷元素距離可視區(qū)域頂部的高度，要是高度差>=0，那么就將正確的src賦給圖片，圖片完成加載。
---------------------
作者：小幽艾
來源：CSDN
原文：https://blog.csdn.net/loisandyu/article/details/83348763
版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請附上博文鏈接！
13450931319
微信登錄
QQ登錄
微博登錄
售前咨詢
