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

Question

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

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

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

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

Answer 1

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后的节点内容(含已下载图片)分别呈现到屏幕上。

Answer 2

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

Answer 3

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

Answer 4

Answer 5

关于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的完整建立.

这个是现代浏览器的玩法

Answer 6

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