首先讓我們看看html的渲染過程：

image.png

我們發(fā)送請求后，服務器返回我們html文檔，瀏覽器的parser從上而下進行token分析，一點點生成dom樹，當碰到link之類的并發(fā)去請求css文件，然后同時加載CSSOM，掛載到dom上，js也是類似，從而當CSSOM和DOM渲染完后，就開始渲染樹，這時候就開始渲染頁面了。

HTML的渲染過程

• 順序執(zhí)行 通過nextToken一個個進行詞法分析
• 并發(fā)加載，并發(fā)加載依賴的資源比如css，js。但是一個域名下的并發(fā)加載數(shù)是有限制的，所以會造成一定的阻塞。
• 阻塞，css阻塞js的執(zhí)行，但不阻塞加載，html的加載阻塞js等等，因為js要操作dom對象，然后修改樣式?？偠灾虞d不會阻塞，執(zhí)行會阻塞
• 依賴關系，比如有時候頁面的css還沒加載出來，就會出現(xiàn)一下閃屏，這是css和dom的依賴，然后另一個就是js之間的相互依賴

這邊順便補充下 async 和 defer，這兩種js的下載都會和html解析同時進行，只是執(zhí)行的時機不一樣，async的話會在下載完后執(zhí)行，然后阻斷html的解析，而defer會在html解析完后執(zhí)行。

image.png

懶加載和預加載

懶加載（Lazyload）

• 實現(xiàn)原理： 判斷當前頁面中某個元素距離Page頂部的高度是不是小于屏幕高度，小于的話，就把當前img的data-original屬性替換到現(xiàn)在img的src上。
  原生實現(xiàn)方法：

var viewHeight = document.documentElement.clientHeight
function lazyload() {
    // 獲取元素數(shù)組
    var eles = document.querySelectorAll('img[data-original][lazyload]') 
    Array.prototype.forEach.call(eles, function(item, index) {
        var rect
        if (item.dataset.original === "") {
            return
        }
        rect = item.getBoundingClientRect() // 獲取當前元素的位置信息

        if (rect.bottom >= 0 && rect.top < viewHeight) {
            !function() {
                var img = new Image()
                img.src = item.dataset.original
                img.onload = function() {
                    item.src = img.src
                }
                item.removeAttribute('data-ogiginal')
                item.removeAttribute('lazyload')
            }()
        }
    })
}

lazyload() // 解決首屏加載的問題

document.addEventListener('scroll', lazyload)

然后各個框架一般也都有自己的實現(xiàn)方法。

預加載（Preload）

• 第一種方式，就是直接通過html標簽，然后設置display為none
• 第二種方法，就是new 一個Image對象，然后設置src
• 第三種方法，使用XHR，優(yōu)點是過程更加可控，但是會有跨域問 題
• 第三方庫，比如Preload.js