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关键字，意思是延迟执行。