亚洲欧美日韩综合系列在线_91精品人妻一区二区_欧美大肥婆一级特大AA片_九色91视频免费观看_亚洲综合国产精品_av中文字幕在线不卡_久久精品色综合网_看黄色视频的软件_无卡无码高清中文字幕码2024_亚洲欧美日韩天堂网

webpack性能優(yōu)化（emmm,我還沒學(xué)這個(gè)，啥都看不懂，勿噴）

1.不要讓loader做太多事情

2.處理第三方庫

3.構(gòu)建結(jié)果體積壓縮

  a.文件可視化，找出導(dǎo)致體積過大的原因

  b.拆分資源

  c.刪除冗余代碼

  d.按需加載

4.webpack Gzip壓縮

圖片優(yōu)化

總的來說就是根據(jù)圖片類型的特點(diǎn)去使用圖片

1.jpg圖片

特點(diǎn)是有損壓縮、高質(zhì)量壓縮、體積小、加載快、不支持透明，適用于呈現(xiàn)色彩豐富的圖片，適合用作背景圖、輪播圖或Banner圖的格式

2.png圖片

特點(diǎn)是無損壓縮、高質(zhì)量壓縮、體積大、支持透明，適用于呈現(xiàn)小的Logo，或者顏色簡單且對比強(qiáng)烈的圖片或背景圖的格式

3.SVG圖片

特點(diǎn)是體積小，不失真，兼容性好，可壓縮性強(qiáng)，可編程，渲染成本高，學(xué)習(xí)成本高，最適合帶有大型渲染區(qū)域的應(yīng)用程序（地圖應(yīng)用）

4.雪碧圖

將一個(gè)頁面涉及到的所有圖片都包含到一張大圖中去，然后利用CSS的 background-image，background- repeat，background-position 的組合進(jìn)行背景定位。利用CSS Sprites能很好地減少網(wǎng)頁的http請求，從而大大的提高頁面的性能；CSS Sprites能減少圖片的字節(jié)。

5.Base64

對圖片進(jìn)行Base64編碼，會得到一串字符串，瀏覽器會直接將這串字符串解碼為圖片，這樣就不用發(fā)送http請求了，但是這樣的缺點(diǎn)是圖片會膨脹，體積會增加，所以它的應(yīng)用條件是：圖片尺寸小、無法用雪碧圖、圖片更新頻率低（不需要我們重復(fù)編碼和修改文件內(nèi)容，維護(hù)成本較低）

6.webP

集各種格式的優(yōu)點(diǎn)于一身，缺點(diǎn)就是兼容性不好，所以應(yīng)用時(shí)需要判斷瀏覽器

合理利用瀏覽器緩存機(jī)制

1.MemoryCache，即在內(nèi)存中的緩存，從優(yōu)先級上來說，它是瀏覽器最先嘗試去命中的一種緩存。從效率上來說，它是響應(yīng)速度最快的一種緩存。

2.Services Worker Cache，Service Worker 是一種獨(dú)立于主線程之外的 Javascript 線程。它脫離于瀏覽器窗體，因此無法直接訪問 DOM。這樣獨(dú)立的個(gè)性使得 Service Worker 的“個(gè)人行為”無法干擾頁面的性能，可利用這一點(diǎn)幫我們實(shí)現(xiàn)離線緩存、消息推送和網(wǎng)絡(luò)代理等功能

3.Http緩存，分為強(qiáng)緩存和協(xié)商緩存

http緩存的是指:當(dāng)Web請求抵達(dá)緩存時(shí)， 如果本地有“已緩存的”副本，就可以從本地存儲設(shè)備而不是從原始服務(wù)器中提取這個(gè)文檔

強(qiáng)緩存（優(yōu)先于協(xié)商緩存，返回碼200）：

利用Expires（http1.0，記錄緩存過期時(shí)間）和Cache-Control（http1.1，記錄緩存過期時(shí)間）來控制，Cache-Control優(yōu)先級高于Expires，Expires 使用的是服務(wù)器端的時(shí)間，要是客戶端時(shí)間和服務(wù)端不同步，就可能造成瀏覽器本地的緩存無用或者一直無法過期，Cache-Control使用的是使用的是客戶端本地時(shí)間的計(jì)算，所以不會出現(xiàn)上述情況，Cache-Control優(yōu)先級高于Expires，

協(xié)商緩存（返回碼304）：

利用If-None-Match（請求頭）/Etag（響應(yīng)頭）和If-Modified-Since（請求頭）/Last-Modified（響應(yīng)頭），If-None-Match和Etag記錄的是服務(wù)器為每個(gè)資源生成的唯一的標(biāo)識字符串，緩存的數(shù)據(jù)要是改變了，那么這兩個(gè)數(shù)據(jù)就會變，這樣可判斷緩存到底有沒有更新，If-Modified-Since和Last-Modified記錄的是服務(wù)端的文件最后改變的時(shí)間，通過判斷這個(gè)，可以緩存有沒有被更新，Last-Modified有一個(gè)缺陷就是只能精確到1s，所以對于精確更高的可能不適用，Etag優(yōu)先級高于Last-Modified，Etag生成過程需要服務(wù)器額外付出開銷，會影響服務(wù)器性能，所以要看情況使用Etag

強(qiáng)緩存與協(xié)商緩存更細(xì)致的了解，請參考：

徹底弄懂HTTP緩存機(jī)制及原理

HTTP緩存是如何實(shí)現(xiàn)

4.Push Cache

http2階段的緩存，應(yīng)用尚處于萌芽階段，是緩存的最后一道防線。

瀏覽器只有在 Memory Cache、HTTP Cache 和 Service Worker Cache 均未命中的情況下才會去詢問 Push Cache。Push Cache 是一種存在于會話階段的緩存，當(dāng) session 終止時(shí)，緩存也隨之釋放。不同的頁面只要共享了同一個(gè) HTTP2 連接，那么它們就可以共享同一個(gè) Push Cache。

合理利用本地存儲

1.利用WebStorage

WebStorage提供了一種方式讓網(wǎng)站能夠把信息存儲到本地的計(jì)算機(jī)上，并在以后需要的時(shí)候進(jìn)行獲取。這樣一來，當(dāng)需要用到什么資源時(shí)，可以直接在本地存儲里獲取，而不用發(fā)起網(wǎng)絡(luò)請求等待響應(yīng)。WebStorage分為localStorage（只支持string類型的存儲）與Session Storage（只支持string類型的存儲），Session Storage在會話結(jié)束消失， localStorage永久有效，手動刪除才會消失，Session Storage 和localStorage都遵循同源策略，但是對Session Storage特殊的一定在于，即便是相同域名下的兩個(gè)頁面，只要它們不在同一個(gè)瀏覽器窗口中打開，那么它們的 Session Storage 內(nèi)容便無法共享。

2.利用IndexDB

IndexDB運(yùn)行在瀏覽器上的非關(guān)系型數(shù)據(jù)庫，突破了WebStorage的存儲大小限制，支持存儲字符串和二進(jìn)制數(shù)據(jù)，IndexDB可創(chuàng)建數(shù)據(jù)庫和表，可以被當(dāng)成一個(gè)真正的數(shù)據(jù)庫使用。

使用CDN

CDN全稱是內(nèi)容分發(fā)網(wǎng)絡(luò)，簡單的來說，CDN做的事，就是把資源存在離自己最近的服務(wù)器里，從而實(shí)現(xiàn)就近訪問數(shù)據(jù)，快速獲取到需要的數(shù)據(jù)

CDN 往往被用來存放靜態(tài)資源(像 JS、CSS、圖片等不需要業(yè)務(wù)服務(wù)器進(jìn)行計(jì)算即得的資源),可以將靜態(tài)資源和主頁面置于不同的域名下，避免cookie的攜帶，這樣可以做到優(yōu)化CDN

CDN的原理請看: 一張圖說明CDN網(wǎng)絡(luò)的原理

使用服務(wù)端渲染

服務(wù)端渲染，就是當(dāng)用戶第一次請求頁面時(shí)，由服務(wù)器把需要的組件或頁面渲染成 HTML 字符串，然后把它返回給客戶端?？蛻舳四玫绞值模强梢灾苯愉秩救缓蟪尸F(xiàn)給用戶的 HTML 內(nèi)容。

沒有服務(wù)器渲染，當(dāng)瀏覽器解析html文檔解析到<script>標(biāo)簽時(shí)，就需要停下html渲染，去解析其中的腳本并執(zhí)行，這整個(gè)過程都會阻塞文檔解析，直到腳本執(zhí)行完才會繼續(xù)解析文檔進(jìn)行渲染。如果js文件的數(shù)量和內(nèi)容都比較大，那么就會造成頁面空白，這樣是非常不利于用戶體驗(yàn)的，服務(wù)器渲染就能很好的解決這一問題。

服務(wù)端渲染也不是隨便就能用的，它加重了服務(wù)器的壓力，也需要合理使用

CSS優(yōu)化

1.css選擇器：

css是從右往左進(jìn)行解析的，這也就是說 (ul>li)這種寫法，瀏覽器是先去找到li，再去看每個(gè)li的父元素是不是ul,當(dāng)使用層級較多的選擇器時(shí)（如：body>div>p>span），會加大瀏覽器的尋找時(shí)間，而我們的原則因當(dāng)是使瀏覽器能夠盡快的找到相應(yīng)的元素。所以css選擇器方面的優(yōu)化方案為：

a.避免后代選擇符(后代選擇器的開銷很高)

b.避免鏈?zhǔn)竭x擇符，避免使用復(fù)雜的選擇器，層級越少越好

c.避免使用通配符（使用通配符會使瀏覽器找遍所有的元素）

d.少用標(biāo)簽選擇器，盡量用類選擇器代替

e.避免不必要的重復(fù)

2.盡量減少頁面重排、重繪：

a.什么是重繪和回流？

部分渲染樹（或者整個(gè)渲染樹）需要重新分析并且節(jié)點(diǎn)尺寸需要重新計(jì)算。這被稱為重排。注意這里至少會有一次重排-初始化頁面布局。

由于節(jié)點(diǎn)的幾何屬性發(fā)生改變或者由于樣式發(fā)生改變，例如改變元素背景色時(shí)，屏幕上的部分內(nèi)容需要更新。這樣的更新被稱為重繪。

重繪的代價(jià)要比回流小，重繪只涉及樣式的改變，不涉及到布局。重繪就好像給人染了一個(gè)頭發(fā)，而回流相當(dāng)于給人做了一次抽脂手術(shù)，回流一定伴隨著重繪，而重繪卻可以單獨(dú)出現(xiàn)

b.回流發(fā)生的情況：

    1.添加、刪除、更新 DOM 節(jié)點(diǎn)

    2. 通過 display: none 隱藏一個(gè) DOM 節(jié)點(diǎn)-觸發(fā)重排和重繪

    3.元素位置改變。

    4.元素的尺寸改變（包括：內(nèi)外邊距、邊框厚度、寬度、高度等屬性的改變）。

    5. 內(nèi)容改變。

    6.頁面渲染器初始化。

    7.瀏覽器窗口尺寸改變。

    8.添加一個(gè)樣式表，調(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é)點(diǎn)內(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ā)生在元素的可見的外觀被改變，但并沒有影響到布局的時(shí)候。比如，僅修改DOM元素的字體顏色（只有Repaint，因?yàn)椴恍枰{(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.減少頁面重排、重繪的方法：

避免逐條改變樣式，使用類名去合并樣式，盡量將樣式寫在單獨(dú)的css文件里面

通過 visibility:hidden 隱藏一個(gè) DOM 節(jié)點(diǎn)

參考文檔：

回流(reflow)與重繪(repaint)

重繪和重排

3.減少css阻塞：

當(dāng)我們在html時(shí)，總是在解析到link標(biāo)簽或style標(biāo)簽時(shí)，CSSDOM才會開始構(gòu)建，這個(gè)構(gòu)建過程會導(dǎo)致DOM解析的阻塞，所以為了減少阻塞時(shí)間，我們需要盡快完成加載（啟用CDN），盡早完成加載（在head元素中引用css相關(guān)標(biāo)簽）

JS優(yōu)化

1.減少JS阻塞

頁面構(gòu)建dom樹的過程，即從上到下解析HTML文檔生成DOM節(jié)點(diǎn)樹，當(dāng)解析到<script>標(biāo)簽時(shí)，會解析其中的腳本（對于外鏈的JavaScript文件，需要先加載該文件內(nèi)容），然后立即執(zhí)行，這整個(gè)過程都會阻塞文檔解析，直到腳本執(zhí)行完才會繼續(xù)解析文檔。如果js文件的數(shù)量和內(nèi)容都比較大，那么就會造成頁面空白，所以為了避免這一狀況，應(yīng)該把 <script>標(biāo)簽放在</body>標(biāo)簽前面，而不是放在<head>標(biāo)簽里,要使用async(異步加載，腳本加載完立刻執(zhí)行)和defer(異步加載，文檔解析完執(zhí)行)

2.在異步任務(wù)中實(shí)現(xiàn) DOM 修改時(shí)，把它包裝成 micro 任務(wù)(微任務(wù)）

事件循環(huán)一般是這樣，先處理Macro-task（宏任務(wù)）,再處理micro 任務(wù)，micro 任務(wù)處理完后面緊跟著就是渲染的步驟，然后更新界面，處理Web work任務(wù)。包裝成 micro 任務(wù)，這樣不用等新的一輪事件循環(huán)，直接渲染呈現(xiàn)

3.Dom方面（從減少頁面回流方面來考慮）

減少Dom操作，緩存dom變量（比如var a=document.querySelector("#demo");）

避免循環(huán)更改dom，在更改時(shí)創(chuàng)建一個(gè)documentFragment或div，在它上面應(yīng)用所有DOM操作，最后再把它添加到相應(yīng)dom中

4.使用異步更新策略（我也沒看懂。。。）

使用圖片懶加載

圖片懶加載，就是當(dāng)圖片出現(xiàn)在瀏覽器的可視區(qū)域內(nèi)時(shí)，設(shè)置圖片真正的路徑，讓圖片顯示出來。當(dāng)一個(gè)頁面中由許多圖片時(shí)，使用懶加載，可大大提高頁面性能。

具體完成過程為，先給圖片一個(gè)假的src,不讓圖片加載，通過監(jiān)聽滾動時(shí)間+函數(shù)節(jié)流，來完成判斷元素距離可視區(qū)域頂部的高度，要是高度差>=0，那么就將正確的src賦給圖片，圖片完成加載。

--------------------- 

作者：小幽艾 

來源：CSDN 

原文：https://blog.csdn.net/loisandyu/article/details/83348763 

版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請附上博文鏈接！