yesvods

极致 PCWeb 性能 —— 图说舌尖上的脚本

  •  
  •   yesvods ·
    yesvods · Jun 18, 2017 · 1947 views
    This topic created in 3276 days ago, the information mentioned may be changed or developed.

    作者:Jogis

    原文链接: https://github.com/yesvods/Blog/issues/11

    转载请注明原文链接以及作者信息

    我们通过分析主流浏览器 Chrome,来了解一个脚本从无到有再到运行作用,到底经历了什么。以下将会用lodash为作为例子,浏览器的脚本生命周期。

    HTML 解析

    在浏览器中,在 HTML 解析过程中,当解析到带有srcscript标签,便会即刻调度网络模块队列,网络模块在有空余请求线程时,会即刻执行队列的请求。

    举个栗子:

    <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并行加载为例,整个时序是酱紫的:

    No Comments Yet
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   3781 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 40ms · UTC 05:06 · PVG 13:06 · LAX 22:06 · JFK 01:06
    ♥ Do have faith in what you're doing.