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

添加评论

推广链接