V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
yesvods
V2EX  ›  前端开发

极致 PCWeb 性能 —— 同步加载 vs 异步加载

  •  
  •   yesvods ·
    yesvods · 2017-06-22 01:14:18 +08:00 · 1770 次点击
    这是一个创建于 2472 天前的主题,其中的信息可能已经有所发展或是发生改变。

    作者:Jogis

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

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

    同步与异步加载,往往是指网络资源,像图片、样式、脚本等。本文探索在 PCWeb 下,同步&异步性能差距到底有多少?为何移动端的优秀方案到 PCWeb,会造成性能问题?

    同步加载

    我们只声明单一的静态脚本资源。

    <script src="./react.js"><script>
    

    异步加载

    使用简单脚本发起资源请求。

    <script>
    	var s = document.createElement('script')
    	s.src="./react.js"
    	document.body.appendChild(s)
    </script>
    

    结果分析

    看到结果很惊诧,仅仅是一个不一样的加载方式,导致的是 40ms 与 400ms 的差异。那么,这段时间里面,浏览器到底去干啥了。

    通过图示,说明了几个问题

    • HTML 脚本执行优先于次于大多数插件脚本
    • 异步发起的请求,属于低优先级任务
    • 低优先级任务,容易被其他脚本执行而阻塞
    • 在 PCWeb,异步加载本身在浏览器过程缓慢,而且非常容易受插件影响

    同步加载,是否会受插件影响?

    分析:

    • HTML 解析伊始即时发起请求
    • HTML 解析结束后即时接受数据包
    • 在接收数据包过程中已经开始解析
    • 在解析过程中,浏览器利用空余时间给插件执行空间
    • 一旦解析完成,下一个任务调度就是脚本的编译执行

    可以看到高优先级的资源,比部分插件脚本有更高执行优先级,浏览器会“尽可能快”地加载执行。

    无插件环境(类无线环境)

    在插件环境下,加载会被各种插件干预,那么纯粹的异步(low)同步(high)在 Webkit 浏览器加载的差距是怎样的呢?我们通过切换至隐身模式,消除所有插件影响,注意需要将所有插件的”隐身可用“取消勾选。

    在 OSX 环境下,Shift+CMD+N 启用隐身模式,在某些情况有特别的妙用..

    结论是:同步的高优先级获得优先系统调度,与异步加载有略微优势

    结语

    PCWeb 下,同步加载的特性,比起异步加载有非常大的优势。在某些场景下,还有一些"绝妙"的用法。

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5390 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 07:02 · PVG 15:02 · LAX 00:02 · JFK 03:02
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.