《前端JavaScript面試技巧》學習筆記(13) 頁面加載與性能優化

時間 2019-11-17

標籤前端 javascript 面試技巧學習筆記頁面加載性能優化欄目 JavaScript 简体版

原文原文鏈接

運行環境介紹:

瀏覽器能夠經過訪問連接來獲得頁面內容php

經過繪製和渲染,顯示出頁面的最終樣子,有視覺效果的樣子css

整個過程當中,咱們要考慮什麼問題 ? 以下:html

問題

1.從輸入url到獲得HTML的詳細過程後端

2.window.onload和DOMContentLoaded的區別瀏覽器

3.性能優化的幾個示例緩存

知識點

1: 頁面加載過程安全

2: 性能優化性能優化

3: 安全性bash

1: 頁面加載,渲染過程

加載資源的形式

輸入url（或跳轉頁面）加載HTML jianshu.com服務器

加載 html 中的靜態資源 <img src = 'loding.jpg'>

加載一個資源的過程 (從輸入URL 到獲得 html 的詳細過程)

瀏覽器根據 DNS 服務器解析獲得與域名相對應的 IP 地址 (輸入的域名會被解析成 IP的)

向這個 IP 的機器發送 http(s) 請求

服務器收到,處理並返回

http請求(返回的多是一個html頁面,多是一張圖片...)

瀏覽器獲得返回的內容

瀏覽器渲染頁面的過程

根據 html 結構生成 DOM Tree

根據 css 生成 CSSOM

將 DOM 和 CSSOM 整合造成 RenderTree

根據 RenderTree 開始渲染和展現

遇到<script>時,會執行script代碼並阻塞渲染 script有權限改變dom結構

補充:爲何把script標籤放到body後面呢? 1: 由於script標籤會阻塞代碼的渲染,放在下面不會阻塞上面一些代碼的渲染,能讓頁面更快的出來,能提高性能; 2: 放在下面, script 代碼能拿到上面全部的標籤

DOMContentLoaded 與window.onload區別

頁面的所有資源加載完纔會執行，包括圖片、視頻等

DOM渲染完便可執行，此時圖片、視頻尚未加載完

jQuory 和 zepto 使用的是 DOMContentLoaded;

<body>
    <p>test</p>
    <p><img src="test.png"/></p>
    <p>test</p>
</body>
複製代碼

window.addEventListener('load',function(){
    //頁面的所有資源加載完後纔會執行,包括圖片視頻等
})

document.addEventListener('DOMContentLoaded',function(){
    // DOM 渲染完即開始執行,此時的圖片,視頻可能尚未加載完
})
複製代碼

2: 性能優化

原則

多使用內存、緩存或者其餘方法

減小CPU計算

加載資源優化

靜態資源的壓縮合並

靜態資源緩存

使用 CDN 讓資源加載更快

使用 SSr 後端渲染,數據直接輸出到 html 中

渲染優化

CSS 放前面,JS 放後面

懶加載(圖片懶加載, 下拉加載更多)

減小DOM 查詢,對DOM 查詢作緩存

減小DOM 操做,多個操做盡可能合併在一塊兒

事件節流

儘早執行操做 (如 DOMContentLoaded)

示例

1 合併合併js文件，減小請求次數

2 緩存經過鏈接名稱控制緩存 <script src="abc_1.js"></script>, 只有內容改變時才更改連接名稱 <script src="abc_2.js"></script>

3 CDN bootcss

4 使用SSR後端渲染

如今Vue React提出了這樣的概念, 其實jsp php asp都屬於後端渲染

5 懶加載

<img id="img1" src="preview.png" data-realsrc="abc.png"/>
    <script>
        var img1 = document.getElementById('img1')
        img1.src = img1.setAttribute('data-bigsrc') 
    </script>
複製代碼

6 緩存 DOM 查詢

//未緩存 DOM 查詢
    var i 
    for (var i = 0; i < document.getElementByTagName('p').length; i++) {
        // todo
    }
    
    //緩存了 DOM 查詢
    var pList = document.getElementByTagName('p');
    var i 
    for (var i = 0; i < pList.length; i++) {
        // todo
    }
複製代碼

7 合併DOM插入

var listNode = document.getElementById('list')
        //插入10個li標籤
    var frag = document.createDocumentFragment();
    var x, li
    for (x = 0; x < 10; x++) {
        li = document.createElement('li')
        li.innerHTML = 'List item' + x
        frag.appendChild(li)
    }
    listNode.appendChild(frag)
複製代碼

8 事件節流

//在快速操做時不執行事件，在停頓時執行，以減小計算次數
    var textarea = document.getElementById('text')
    var timeoutId
    textarea.addEventListener('keyup', function() {
        if (timeoutId) {
            clearTimeout(timeoutId)
        }
        timeoutId = setTimeout(function() {
            //觸發change事件
        }, 100);
    })
複製代碼

*9 儘早執行操做 (如 DOMContentLoaded)

window.addEventListener('load',function(){
        //頁面的所有資源加載完後纔會執行,包括圖片視頻等
    })
    
    document.addEventListener('DOMContentLoaded',function(){
        // DOM 渲染完即開始執行,此時的圖片,視頻可能尚未加載完
    })
複製代碼