引入外部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 相关文章推荐
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
Apr 27 Javascript
利用谷歌地图API获取点与点的距离的js代码
Oct 11 Javascript
Js 正则表达式知识汇总
Dec 02 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
javascript去掉代码里面的注释
Jul 24 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
Apr 13 Javascript
jQuery操作iframe中js函数的方法小结
Jul 06 Javascript
js验证真实姓名与身份证号,手机号的简单实例
Jul 18 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
详解tween.js的使用教程
Sep 14 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 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截取中文字符串的问题
2006/07/12 PHP
基于PHP CURL用法的深入分析
2013/06/09 PHP
浅析PHP 按位与或 (^ 、&amp;)
2013/06/21 PHP
php socket客户端及服务器端应用实例
2014/07/04 PHP
THINKPHP截取中文字符串函数实例代码
2017/03/20 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
javascript中的括号()用法小结
2014/04/14 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
不使用 JS 匿名函数理由
2017/11/17 Javascript
webpack之devtool详解
2018/02/10 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
JS实现页面侧边栏效果探究
2021/01/08 Javascript
详解Python中的__new__()方法的使用
2015/04/09 Python
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
django解决跨域请求的问题详解
2019/01/20 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
英国领先的办公用品供应商:Viking
2016/08/01 全球购物
欧克利英国官网:Oakley英国
2019/08/24 全球购物
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
高分子材料与工程专业推荐信
2013/12/01 职场文书
中专毕业生的自我鉴定
2013/12/01 职场文书
设计专业自荐信
2014/06/19 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
2015年监理工作总结范文
2015/04/07 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python
Python 可迭代对象 iterable的具体使用
2021/08/07 Python
Python音乐爬虫完美绕过反爬
2021/08/30 Python