web前端性能優(yōu)化總結(jié)

本篇內(nèi)容介紹了“web前端性能優(yōu)化總結(jié)”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

1.原則

多使用內(nèi)存，緩存或者其他方法

減少CPU計(jì)算，減少網(wǎng)絡(luò)請求

減少IO操作（硬盤讀寫）

2.加載資源優(yōu)化

靜態(tài)資源的合并和壓縮。

靜態(tài)資源緩存（瀏覽器緩存策略）。

使用CDN讓靜態(tài)資源加載更快。

3.渲染優(yōu)化

CSS放head中，JS放body后

圖片懶加載

減少DOM操作，對DOM操作做緩存

減少DOM操作，多個(gè)操作盡量合并在一起執(zhí)行

事件節(jié)流

盡早執(zhí)行操作 DOMContentLoaded

4.示例

4.1 資源合并

a.js b.js c.js --- abc.js

4.2 緩存

通過連接名稱控制緩存

<script src="abc_1.js" ></script>

只有改變內(nèi)容的時(shí)候，鏈接名稱才會(huì)改變。

4.3 懶加載

<img src="preview.png" realsrc="abc.png" id="img1" />
    <script>
        var i = document.getElementById('img1');
        i.src = i.getAttribute('realsrc');
    </script>

4.4 緩存dom查詢

 //沒有緩存dom
        for (let i = 0; i < document.getElementsByTagName('p').length; i++) {
        }
        //緩存dom
        var p = document.getElementsByTagName('p');
        for (let i = 0; i < p.length; i++) {
        }

4.5 合并dom插入

 var listNode = document.getElementById('list');
        var flag = document.createDocumentFragment();
        var li;
        for (let i = 0; i < 10; i++) {
            li = document.createElement('li');
            li.innerHTML = i;
            flag.appendChild(li);
        }
        listNode.appendChild(flag);

4.6 事件節(jié)流

監(jiān)聽文字改變事件，無操作100毫秒后執(zhí)行操作，不用每次觸發(fā)。

var textarea = document.getElementById('ta');
        var timeoutId;
        textarea.addEventListener('keyup',function(){
            if(i){
                clearTimeout(i);
            }
            timeoutId = setTimeout(() => {
                //操作
            }, 100);
        });

事件節(jié)流主要用于觸發(fā)頻率較高的事件，設(shè)定一個(gè)緩沖觸發(fā)事件。

補(bǔ)充

異步加載

非核心代碼異步加載 – 異步加載的方式 – 區(qū)別

1.動(dòng)態(tài)腳本加載

用js創(chuàng)建

2.defer

3.async

<script src="script.js"></script>
沒有 defer 或 async，瀏覽器會(huì)立即加載并執(zhí)行指定的腳本，“立即”指的是在渲染該 script 標(biāo)簽之下的文檔元素之前，也就是說不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行。
<script async src="script.js"></script>
有 async，加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步）。
<script defer src="myscript.js"></script>
有 defer，加載后續(xù)文檔元素的過程將和 script.js 的加載并行進(jìn)行（異步），但是 script.js 的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成。

關(guān)于 defer，我們還要記住的是它是按照加載順序執(zhí)行腳本的

標(biāo)記為async的腳本并不保證按照指定它們的先后順序執(zhí)行。對它來說腳本的加載和執(zhí)行是緊緊挨著的，所以不管你聲明的順序如何，只要它加載完了就會(huì)立刻執(zhí)行。

瀏覽器緩存

瀏覽器緩存 – 緩存的分類 – 緩存的原理

緩存就是html文件在本地存在的副本，

強(qiáng)緩存

發(fā)現(xiàn)有緩存直接用。

Expires: 絕對時(shí)間，判斷客戶端日期是否超過這個(gè)時(shí)間
Cache-Control：相對時(shí)間，判斷訪問間隔是否大于3600秒
//在設(shè)定時(shí)間之前不會(huì)和服務(wù)端進(jìn)行通信了
//如果兩個(gè)都下發(fā)以后者為準(zhǔn)

協(xié)商緩存

詢問服務(wù)器緩存是否可以用，在進(jìn)行判斷是否用。

Last-Modified/If-Modified-Since

第一次請求，respone的header加上Last-Modified（最后修改時(shí)間）
再次請求，在request的header上加上If-Modified-Since 
和服務(wù)端的最后修改時(shí)間對比，如果沒有變化則返回304 Not Modified，但是不會(huì)返回資源內(nèi)容；如果有變化，就正常返回資源內(nèi)容。
瀏覽器收到304的響應(yīng)后，就會(huì)從緩存中加載資源
如果協(xié)商緩存沒有命中，瀏覽器直接從服務(wù)器加載資源時(shí)，Last-Modified的Header在重新加載的時(shí)候會(huì)被更新

Etag/If-None-Match

這兩個(gè)值是由服務(wù)器生成的每個(gè)資源的唯一標(biāo)識字符串，只要資源有變化就這個(gè)值就會(huì)改變；其判斷過程與Last-Modified/If-Modified-Since類似，他可以精確到秒的更高級別。

“web前端性能優(yōu)化總結(jié)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！