作者:Jogis
原文链接:https://github.com/yesvods/Bl...
转载请注明原文链接以及作者信息
我们通过分析主流浏览器Chrome,来了解一个脚本从无到有再到运行作用,到底经历了什么。以下将会用lodash
为作为例子,浏览器的脚本生命周期。
HTML解析
在浏览器中,在HTML解析过程中,当解析到带有src
的script
标签,便会即刻调度网络模块队列,网络模块在有空余请求线程时,会即刻执行队列的请求。
举个栗子:
<script>
console.log("Hello Tmall")
</script>
<script src="lodash.js"></script>
浏览器会优先发起lodash.js
的请求,而后执行console.log
脚本。
接收脚本数据
了解TCP/IP协议的童鞋都知道,网络服务器存在慢启动
机制,数据包会以递增方式发送至客户端(浏览器),一个500KB左右的lodash.js
会被以十多个包送达:
也许有童鞋已经发现,为了极致的性能,Chrome在接收到首个数据包时,已经开始脚本的解析工作。
解析&编译&执行
随后,脚本的一系列连贯的生命周期,最后会发出一个load事件
,表明脚本已就绪。
小结
总体看起来,脚本的确会阻塞后续HTML解析,一个完整生命周期大概是酱紫的。
MultiScript
那么,当多个脚本并行加载,时间序列是怎样的呢:脚本下载会并行发起,接收数据交替进行。而解析、编译、执行,会根据HTML声明顺序,串行进行
以react
react-dom
lodash
并行加载为例,整个时序是酱紫的:
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。