超级表格是一款多人协作的在线表格。程序相当复杂,用到十几个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对象不存在”。

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

这样的处理方式太LOW了。

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

代码解释:

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

最多载入5次。

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

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

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

1、打开beta.chaojibiaoge.com

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

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

为了提高性能,怎样动态载入JS文件的更多相关文章

  1. Extjs学习----------动态载入js文件(减轻浏览器的压力)

    动态载入js文件能够减轻浏览器的压力,本例使用了Ext.window.Window组件,该组件的学习地址:http://blog.csdn.net/z1137730824/article/detail ...

  2. asp.net后台代码动态添加JS文件和css文件的引用

    首先添加命名空间 using System.Web.UI.HtmlControls; 代码动态添加css文件的引用 HtmlGenericControl myCss = new HtmlGeneric ...

  3. 自己编写jQuery动态引入js文件插件 (jquery.import.dynamic.script)

    这个插件主要是结合jquery或者xhr异步请求来使用的,它可以把已经引入过的js文件记录在浏览器内存中,当下次再引入相同的文件就忽略该文件的引入. 此插件不支持浏览器刷新保存数据,那需要利用cook ...

  4. 动态添加js文件.

    方法一: $.getScript(url,callback); 这个方法是对$.ajax({ })的封装.默认是异步的而且是带有缓存的. 缓存对于用户来说,是个好东西,但是对于开发者来说可就是日了狗的 ...

  5. 动态添加JS文件到页面

    /*** ** 功能: 加载外部JS文件,加载完成后执行回调函数callback ***/ var utools = { config: { id: "", url: " ...

  6. 动态引入Js文件

    var src = "/Scripts/Test.js"; $("<script type = 'text/javascript' src='" + sr ...

  7. 使用Jquery promise 动态引入js文件

    动态加载一个js得方式很多,如下方式: /** *一般方式加载 */ function normalLoadScript(url) { var node = document.createElemen ...

  8. Ajax动态载入xml文件内容

    <%@page import="javax.swing.JOptionPane"%> <%@page import="com.ctl.util.*&qu ...

  9. 动态导入Js文件

    var ScriptLoader = { worker: , isWait: false, readyQueue: [], callback: [], timer: null, wait: funct ...

随机推荐

  1. HTML学习笔记 css定位(静态,相对,固定,绝对布局)偏移案例 第十二节 (原创) 参考使用表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Python 解决面试题47 不用加减乘除做加法

    在看<剑指Offer>过程中,面试题47不用加减乘除做加法,给出的思路是使用二进制的异或以及与运算,总之就是使用二进制.但是在使用Python实现的过程中,对于正整数是没有问题的,但是对于 ...

  3. Windows常用shell命令大全

    Windows常用shell命令大全 基于鼠标操作的后果就是OS界面外观发生改变, 就得多花学习成本.更主要的是基于界面引导Path与命令行直达速度是难以比拟的.另外Geek很大一部分是键盘控,而非鼠 ...

  4. android wear开发之:建立可穿戴设备的应用 - Building Apps for Wearables

    注:本文内容来自:https://developer.android.com/training/building-wearables.html 翻译水平有限,如有疏漏,欢迎批评指教. 译:山人 建立可 ...

  5. c#鼠标点击TextBox控件后清空默认字体

    方案(一) 脚本: <script type="text/javascript" language="javascript">        //得 ...

  6. [转]开源框架完美组合之Spring.NET + NHibernate + ASP.NET MVC + jQuery + easyUI 中英文双语言小型企业网站Demo

    热衷于开源框架探索的我发现ASP.NET MVC与jQuery easyUI的组合很给力.由于原先一直受Ext JS框架的licence所苦恼,于是痛下决心寻找一个完全免费的js框架——easyUI. ...

  7. Shiro SpringMVC 非maven HelloWorld

    项目用到Shiro就从网上找一些案例看看吧,结果看了很多都是maven的,没有办法就自己弄了一个.废话不多说,原理自己找开始上菜. 配置web.xml <?xml version="1 ...

  8. Java提高十六:TreeMap深入分析

    上一篇容器元素比较Comparable&Comparator分析的时候,我们提到了TreeMap,但没有去细致分析它,只是说明其在添加元素的时候可以进行比较,从而使得集合有序,但是怎么做的呢? ...

  9. 【Win 10 应用开发】UI Composition 札记(八):用 XamlLight 制作灯光效果

    前面老周已介绍过灯光的使用,如果你忘了,请用九牛二虎之力猛点击这里去复习一下.本篇老周再介绍另一种添加灯光的方法,这种方法是专为 XAML 元素而设计的,可以很方便地为可视化元素添加灯光效果. 不知道 ...

  10. lumen 中间件详解

    我来给大家,讲解一下lumen中的中间件,高手勿喷. 首先,我们看下lumen中文档中的写法,我这里看的是5.3中文文档.https://lumen.laravel-china.org/docs/5. ...