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

joywek 发布于2019-08-23 13:58 / 2016人阅读

摘要：问题背景最近做的一个项目需要引入一个外部的第三方脚本。什么情况可以用我以上思路引入的第三方脚本较大，加载所需时间较长页面按需加载，整个项目只有其中某几个页面需要用到引入的第三方脚本第三方脚本没加载完就渲染页面导致的页面报错

问题背景

最近做的一个项目需要引入一个外部的第三方js脚本。由于这是一个关于渲染3D建筑的脚本，所以体积比较大，大概有2M，加载完成也得要个好几秒，网速慢的时候十几秒都有可能。
之前也遇到脚本加载慢的问题，但是没这么慢，所以这次就特别写个文章记录一下我的解决过程。

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

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

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

遇到的问题和需求

引入外部脚本太大，加载时间太长

首页用不到外部脚本，需要先渲染出来

用到外部脚本的页面，要是脚本还没加载好就点进去会报错

解决问题的过程

我一开始通过

`
这样页面是可以正常加载的，但是页面出来的很慢，一开始会白屏一段时间等待这个js脚本加载完成。虽然脚本体积大是事实，但这用户体验肯定是可以优化的。
后来我又把这个脚本放到了页面底部，也就是标签下面。这样可以先让页面渲染出来，再慢慢加载这个庞大的脚本，于是首页是出来的很快，但是从首页跳转到需要用到这个脚本的页面就会报错，如下

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

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

// 入口文件
 
 

// 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。当然也可以放在里，但是需要额外加上html5新增的 async 这个属性，这样脚本才能异步加载。

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

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

引入的第三方脚本较大，加载所需时间较长

页面按需加载，整个项目只有其中某几个页面需要用到引入的第三方脚本

第三方脚本没加载完就渲染页面导致的页面报错

云服务器服务器托管加载外部页面 js中引入外部js 加载外部js js+加载外部数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99862.html

javascript高级程序设计（第3版）之《script元素》

摘要：表示要执行外部文件的路径或链接。由于规范要求脚本按照他们出现的先后顺序执行，因此第一个延迟脚本会优先于第二个执行，二这两个脚本会优先于事件执行。无论使用任何方式，只要不存在和属性，浏览器都会按照元素在页面中出现的先后顺序依次解析。元素属性属性定义 async 【可选】。可以异步加载，表示可以立即下载此脚本，但不影响页面其他操作。只对外部脚本有效。 charset ...

miqt 2019-08-22 14:04 评论0 收藏0
提高前端性能的黄金法则

摘要：虽然如此，但是网站前端性能优化的思路基本没变。为什么前端性能如此重要数据显示只有的最终用户响应时间花在了下载文档上。前端性能优化一味奉行最佳实践有时候反而过而不及，所以针对项目的实际情况来优化才是明智的选择。前端近几年变化很大，各种工具，库，框架并发。虽然如此，但是网站前端性能优化的思路基本没变。为什么前端性能如此重要？数据显示: 只有 10%~20% 的最终用户响应时间花在了下载...

keithyau 2019-08-19 17:54 评论0 收藏0
【Node】前后端模块规范与模块加载原理

摘要：例如指定一些依赖到模块中实现规范的模块化，感兴趣的可以查看的文档。 CommonJS 定义了 module、exports 和 require 模块规范，Node.js 为了实现这个简单的标准，从底层 C/C++ 内建模块到 JavaScript 核心模块，从路径分析、文件定位到编译执行，经历了一系列复杂的过程。简单的了解 Node 模块的原理，有利于我们重新认识基于 Node 搭建的...

jsyzchen 2019-08-23 15:43 评论0 收藏0
重新认识script标签

摘要：尽管脚本的下载过程中不会相互影响，但页面仍然要等到所有代码下载并完成执行才能继续。 defer和asnyc（只对外部文件有效） defer 在页面完成解析时执行代码，这个属性表明脚本在执行时不会影响页面的构造，在元素中设置这个属性相当于告诉浏览器立即下载但延迟执行 async 相对于页面其他部分异步执行脚本，一般的script标签都是会阻塞页面执行的，没有加上async属性的标签...

Magicer 2019-08-20 11:24 评论0 收藏0