为了提高性能，怎样动态载入JS文件

红太狼 2021-05-02 15:03 453阅读 0赞

[超级表格][Link 1]是一款多人协作的在线表格。程序相当复杂，用到十几个JS文件。

可是有些文件是在打开某些类型的表格时才须要载入。

比如，仅仅有当打开甘特图表格时，才须要载入gantetu.js文件。

那么问题来了，为了降低js文件数量和请求，怎样在须要时自己主动载入js文件呢？

办法例如以下。

//动态载入js文件  
function mcss\_importJS(js)  
\{  
var oHead = document.getElementsByTagName('HEAD').item(0);  
var oScript= document.createElement("script");  
oScript.type = "text/javascript";  
oScript.id=filename;  
oScript.src=js;  
oHead.appendChild( oScript);  
\}

假设就这样了，还不完美。由于这是动态异步载入的。超级表格程序中。在运行这种方法后立即会运行js文件里的类。

代码例如以下：

mcss\_importJS(“allFile/js/gantetu.js");

var gantetu=new Gantetu();

有时候由于网络或性能原因，会报错“Gantetu对象不存在”。

我原来的处理方法是提示用户手动又一次载入。例如以下图：

![20160204105444445][]

这样的处理方式太LOW了。

近期我找到了解决的方法。就是自己主动又一次载入。代码例如以下：

![20160204105726199][]

代码解释：

假设对象为空。就在1秒后又一次载入。

最多载入5次。

效果是，基本都在自己主动载入1次后就能正常打开，并且用户基本感觉不到。

整个过程给我启示是：原来的粗暴办法持续了一年。我似乎也没办法。可是就是刚才。我花了半小时，攻克了支持了一年的bug。

假设想看真实代码，按以下步骤能够找到：

1、打开[beta.chaojibiaoge.com][]

2、单击“新建》项目甘特图”

3、用Chrome或火狐浏览器的调试页面，找到main.js文件的951行代码開始。

![20160204110334926][]

[Link 1]: http://www.chaojibiaoge.com
[20160204105444445]: /images/20210501/695932318766412ca801ab9b5bc3f8f7.png
[20160204105726199]: /images/20210501/83ab35e6fdc8497ea491c4163b4987fc.png
[beta.chaojibiaoge.com]: http://beta.chaojibiaoge.com
[20160204110334926]: /images/20210501/114ce4d960d048c3a45965573b6caea7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，453人围观）

还没有评论，来说两句吧...

相关阅读

相关怎样提高WebService性能大数据量网络传输处理(转)

*1. 直接返回DataSet对象** 特点：通常组件化的处理机制，不加任何修饰及处理；优点：代码精减、易于处理，小数据量处理较快；缺点：大数据量的传递处理...

喜欢ヅ旅行/ 2024年04月20日 11:15/ 0 赞/ 57 阅读

相关如何动态载入CSS

动态载入CSS的两种方法 1.通过文档对象创建 link节点,指定 href,然后 appendChild到页面. 这种方案大家都用过, 不过,会存在一些问题.什么问

我就是我/ 2024年04月03日 14:13/ 0 赞/ 82 阅读

相关动态载入bean的工具类

/ 动态载入bean的类调用例子 PlayerService playerService = (PlayerService)Bea

秒速五厘米/ 2022年12月22日 12:28/ 0 赞/ 129 阅读

相关提高JS原生方法性能的JS库 -- loadash

文章目录 [https://www.jianshu.com/p/d46abfa4ddc9][https_www.jianshu.com_p_d46abfa4ddc9

叁歲伎倆/ 2022年12月15日 12:52/ 0 赞/ 139 阅读

相关 OpenCasCade – 载入IGES文件

本例是仿照官方示例 ImportExport，如图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

ゞ浴缸里的玫瑰/ 2022年03月15日 01:44/ 0 赞/ 475 阅读

相关看网易云公开课代码性能开发有感，怎样提高代码的性能

看到网易云讲到写一个缓存机制，什么时候用缓存机制，当有大量重复计算的时候，计算的难度不是很简单，如果是很简单的计算不要用缓存机制，不然会浪费大量的性能在取`HTMLColl

﹏ヽ暗。殇╰゛Y/ 2021年12月11日 12:11/ 0 赞/ 203 阅读

相关前端性能优化怎样提高页面加载速度 nginx怎样压缩文件

页面加载很多时候都是加载一些文件只要通过nginx压缩这些文件就可以提高响应速度如图，原来的文件大小 ![watermark_type_ZmFuZ3poZW5naGV

忘是亡心i/ 2021年11月10日 17:56/ 0 赞/ 399 阅读

相关 js动态加载js文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

た入场券/ 2021年10月24日 03:22/ 0 赞/ 453 阅读

相关程序员应该怎样提高自己？

点击上方设为星标优质文章，及时送达 ![640?wx\_fmt=jpeg][640_wx_fmt_jpeg] 作者 | 云风出处 | blog.codingno

男娘i/ 2021年08月01日 00:47/ 0 赞/ 484 阅读

相关为了提高性能，怎样动态载入JS文件

超级表格是一款多人协作的在线表格。程序相当复杂，用到十几个JS文件。可是有些文件是在打开某些类型的表格时才须要载入。比如，仅仅有当打开甘特图表格时，才须要载入ga...

红太狼/ 2021年05月02日 15:03/ 0 赞/ 454 阅读