引入外部js脚本加载慢与页面白屏问题的解决


Posted in Javascript onDecember 10, 2018

问题背景

最近做的一个项目需要引入一个外部的第三方js脚本。由于这是一个关于渲染3D建筑的脚本,所以体积比较大,大概有2M,加载完成也得要个好几秒,网速慢的时候十几秒都有可能。

之前也遇到脚本加载慢的问题,但是没这么慢,所以这次就特别写个文章记录一下我的解决过程。

首先上两张项目已完成的截图。

下图是通过第三方脚本渲染出来的3D建筑页面

引入外部js脚本加载慢与页面白屏问题的解决

下图是首页,不需要用到第三方脚本

引入外部js脚本加载慢与页面白屏问题的解决

遇到的问题和需求

  • 引入外部脚本太大,加载时间太长
  • 首页用不到外部脚本,需要先渲染出来
  • 用到外部脚本的页面,要是脚本还没加载好就点进去会报错

解决问题的过程

我一开始通过<script>标签直接引入到入口文件的头部,如下

<head>
<script src="./DDEarth.js"></script>
</head>

这样页面是可以正常加载的,但是页面出来的很慢,一开始会白屏一段时间等待这个js脚本加载完成。虽然脚本体积大是事实,但这用户体验肯定是可以优化的。

后来我又把这个脚本放到了页面底部,也就是</body>标签下面。这样可以先让页面渲染出来,再慢慢加载这个庞大的脚本,于是首页是出来的很快,但是从首页跳转到需要用到这个脚本的页面就会报错,如下

引入外部js脚本加载慢与页面白屏问题的解决

这个错误原因是这个页面需要用到window.DDEarth这个对象,但是由于此时这个脚本还没有加载完成,所以window下并没有这个对象,所以就报错了。

于是我又想到等脚本加载完成再执行相关方法,这时就需要用到onload这个方法了,onload这个方法在脚本加载完成的时候会执行。我引入脚本的时候给它加了个id,方便以后通过dom找到,代码如下:

// 入口文件
 </body>
 <script id="ddEarthScript" src="./DDEarth.js"></script>

// PageTwo.js
componentDidMount() {
   const scriptEle = document.getElementById('ddEarthScript'); // 找到脚本节点
   if (scriptEle) {
    scriptEle.onload = () => {
      // 脚本加载完成执行加载地图的操作
     this.loadEarthMap();
    };
   }
 }

有了以上代码我跳转到PageTwo这个页面的时候,会等到DDEarth.js这个脚本加载完成,再执行加载建筑地图的操作,这样就不会报错了。

但是这又有一个问题,就是如果我跳转到PageTwo的之前,DDEarth.js已经加载完成了,onload这个事件在PageTwo这个页面中就不生效了,loadEarthMap这个方法自然也就不会执行了。

这个时候需要加一个判断,完整代码如下:

// PageTwo.js
componentDidMount() {
  if (window.DDEarth) { // 如果跳转到此页面之前,脚本已加载完成
   this.loadEarthMap();
  } else {
  const scriptEle = document.getElementById('ddEarthScript');
  if (scriptEle) {
   scriptEle.onload = () => {
    this.loadEarthMap();
   };
  }
  }
 }

总结一下我以上解决问题的步骤

在入口文件的底部引入第三方脚本,并给它加个id。当然也可以放在<head>里,但是需要额外加上html5新增的 async 这个属性,这样脚本才能异步加载。

在需要用到这个脚本的页面,先判断脚本有没有加载完成(我这里是直接判断window.DDEarth对象是否为空)。如果已经加载完成,就直接执行相关操作;如果没有,先通过document.getElementById找到那个脚本,然后监听脚本的onload事件,再做相关操作。

什么情况可以用我以上思路?

  • 引入的第三方脚本较大,加载所需时间较长
  • 页面按需加载,整个项目只有其中某几个页面需要用到引入的第三方脚本
  • 第三方脚本没加载完就渲染页面导致的页面报错

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JSON.stringify 语法实例讲解
Mar 14 Javascript
当鼠标移动时出现特效的JQuery代码
Nov 08 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
JS和JQ的event对象区别分析
Nov 24 Javascript
js脚本实现数据去重
Nov 27 Javascript
js实现拖拽效果
Feb 12 Javascript
javascript常用经典算法实例详解
Nov 25 Javascript
jQuery弹出窗口简单实现代码
Mar 09 Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
Jan 24 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 Javascript
vue实现弹幕功能
Oct 25 Javascript
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 #jQuery
发布Angular应用至生产环境的方法
Dec 10 #Javascript
webpack优化的深入理解
Dec 10 #Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 #Javascript
详解为生产环境编译Angular2应用的方法
Dec 10 #Javascript
深入理解Vue.js轻量高效的前端组件化方案
Dec 10 #Javascript
es6基础学习之解构赋值
Dec 10 #Javascript
You might like
php实现多维数组中每个单元值(数字)翻倍的方法
2015/02/16 PHP
CI框架入门之MVC简单示例
2016/11/21 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
2016/01/28 Javascript
基于javascript数组实现图片轮播
2016/05/02 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
2019/02/21 Javascript
jQuery 查找元素操作实例小结
2019/10/02 jQuery
介绍Python中的一些高级编程技巧
2015/04/02 Python
Python中的模块和包概念介绍
2015/04/13 Python
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
Python图算法实例分析
2016/08/13 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
django如何通过类视图使用装饰器
2019/07/24 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
2019/08/26 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
网站客服岗位职责
2014/04/05 职场文书
森林防火标语
2014/06/23 职场文书
工作失职检讨书500字
2014/10/17 职场文书
企业财务总监岗位职责
2015/04/03 职场文书
什么是求职信?求职信应包含哪些内容?
2019/08/14 职场文书
golang slice元素去重操作
2021/04/30 Golang
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python
MySQL8.0的WITH查询详情
2021/08/30 MySQL