最近做的一个项目需要引入一个外部的第三方js脚本。发现加载比较慢,这篇文章主要介绍了引入外部js脚本加载慢与页面白屏问题的解决,感兴趣的小伙伴们可以参考一下
问题背景
最近做的一个项目需要引入一个外部的第三方js脚本。由于这是一个关于渲染3D建筑的脚本,所以体积比较大,大概有2M,加载完成也得要个好几秒,网速慢的时候十几秒都有可能。
之前也遇到脚本加载慢的问题,但是没这么慢,所以这次就特别写个文章记录一下我的解决过程。
首先上两张项目已完成的截图。
下图是通过第三方脚本渲染出来的3D建筑页面
下图是首页,不需要用到第三方脚本
遇到的问题和需求
- 引入外部脚本太大,加载时间太长
- 首页用不到外部脚本,需要先渲染出来
- 用到外部脚本的页面,要是脚本还没加载好就点进去会报错
解决问题的过程
我一开始通过
这样页面是可以正常加载的,但是页面出来的很慢,一开始会白屏一段时间等待这个js脚本加载完成。虽然脚本体积大是事实,但这用户体验肯定是可以优化的。
后来我又把这个脚本放到了页面底部,也就是