图片资源到底会不会阻塞浏览器渲染呢

我在搜索两个问题时得到了相悖的答案:
1.src与href的区别
2.浏览器渲染过程

第一个问题一般说,src是引用外部资源,在请求src资源时会暂停其他资源的下载和处理,直到该资源加载完毕

第二个问题一般说,除了js脚本,其他外部资源不阻塞渲染
据我所知,js脚本阻塞渲染并不是因为他是src引入的,而是因为他有可能改变DOM树或CSSOM树

那么,到底src引用的外部资源会不会阻塞渲染呢

阅读 6.9k
评论
    6 个回答

    src引用的外部资源不会阻塞渲染。
    是否阻塞跟href和src没有关系,跟浏览器实现最佳体检的设计有关,例如我们打开淘宝网,可以明显看到图片是最后渲染出来的,因为图片通常比较多比较大,如果阻塞的话会导致长时间白屏,体验很不好。JS被设计成阻塞,原因如你所述。
    浏览器渲染过程参考:
    1、输入url发送请求
    2、加载html文件
    3、加载完后解析html,并在解析的过程中构建DOM树
    解析遇到link、script、img标签时,浏览器会向服务器发送请求资源。
    script的加载或者执行都会阻塞html解析、其他下载线程以及渲染线程。
    link加载完css后会解析为CSSOM(层叠样式表对象模型,一棵仅含有样式信息的树)。css的加载和解析不会阻塞html的解析,但会阻塞渲染。
    img的加载不会阻塞html的解析,但img加载后并不渲染,它需要等待Render Tree生成完后才和Render Tree一起渲染出来。未下载完的图片需等下载完后才渲染。
    4、当css解析为CSSOM后,html解析为DOM后,两者将会结合在一起生成Render Tree(渲染树)。
    5、Layout: 计算出Render Tree每个节点的具体位置。
    6、Painting:通过显卡,将Layout后的节点内容(含已下载图片)分别呈现到屏幕上。

      不会。js的代码下载或执行都会阻塞浏览器的渲染(没有defer或async属性), 浏览器的阻塞渲染和src或者href并没关系,即使是script标签中的代码也会阻塞渲染的。

        不会,所以你会看到图片是一行一行刷出来了,网络不好的时候只有上半节

          clipboard.png

            关于parse约束
            When the parser gets to a script tag, DOM construction cannot proceed until the JavaScript finishes executing, and the JavaScript cannot be executed until the CSS is downloaded, parsed, and the CSSOM is available.

            DOM构建受限, 直到JS完全执行完毕;而JS执行需要依赖CSSOM的完整建立.

            这个是现代浏览器的玩法

              会,如果你先请求img资源,后面还有js,就会卡在img那里,直到img加载完之后,后面的js加载完,才会渲染 ,参考https://www.cnblogs.com/zhoul...

                撰写回答

                登录后参与交流、获取后续更新提醒