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


作者:迪迪的博客,发布于:2019/05/16
原文:https://www.cnblogs.com/yadiblogs/p/10872488.html