src屬性與瀏覽器渲染

img標籤

只要設置了src屬性, 就會開始下載，因此可以使用這個特性，配合display:none，默默的下載一些圖片，用的時候直接用，快了那麼一丟丟~

注意：不一定要添加到文檔後纔會開始下載，是隻要一設置src屬性就會下載：觀察下面代碼：

window.addEventListener('load', funcition(){
    var img = new Image()
    img.addEventListener('load', function(){
        alart('image loaded!')
    })
    img.src = 'smilg.gif' // scr在最後設置，要不然只要一設置就會下載，可能事件還沒有加上。。。
})

script標籤

與圖像不同！ 這個<script>標籤只設置了src屬性還不夠，必須將其添加到文檔後，纔會開始下載js文件。

換句話說，添加src屬性代碼和添加事件代碼順序不重要啦~

---

現在瀏覽器拿到一個html文件後，裏面的css，img，js文件的下載已經是並行的了，不像以前，是一個一個文件獲取的。瀏覽器不會等待這些請求回來再繼續幹嘛幹嘛的~ 這個得益於https/2.0。但是js下載完後執行，仍然會暫停dom tree和cssom tree構建，因此阻塞渲染，解決這個可以使用defer關鍵字，意思是延遲執行。