2

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

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

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

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

2017-10-06 提问
6 个回答
4

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

1

第4点要注意,不是等HTML和CSS解析完之后生成渲染树的。 他们是边解析边渲染。

城南 · 2018年04月01日

添加评论
0

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

0

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

0

clipboard.png

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

这个是现代浏览器的玩法

0

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

撰写答案

推广链接