1. 程式人生 > >為了提高效能,如何動態載入JS檔案

為了提高效能,如何動態載入JS檔案

超級表格是一款多人協作的線上表格,程式相當複雜,用到十幾個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。

如果想看真實程式碼,按下面步驟可以找到:

2、單擊“新建》專案甘特圖”

3、用Chrome或火狐瀏覽器的除錯頁面,找到main.js檔案的951行程式碼開始。


相關推薦

為了提高效能如何動態載入JS檔案

超級表格是一款多人協作的線上表格,程式相當複雜,用到十幾個JS檔案。但是有些檔案是在開啟某些型別的表格時才需要載入。例如,只有當開啟甘特圖表格時,才需要載入gantetu.js檔案。那麼問題來了,為了減少js檔案數量和請求,如何在需要時自動載入js檔案呢?辦法如下。//動態載

在html頁面動態載入js檔案

在頁面載入完成後再載入js檔案<script type="text/javascript"> window.onload = function(){ var head = docum

網頁中的動態載入(js檔案和css檔案即換膚)

導語: 最近經常遇到一些人問起網頁中按需載入的需求,例如網頁load時不載入js檔案,只有當使用者觸發某個事件時才按其所需載入其所需的js檔案,又比如使用者可以隨意地切換網頁的顏色等。縱觀這些需求分析,不外乎就是js裡面的一個動態載入,因此有必要做幾個demo以供大家參考。

網頁效能優化之非同步載入js檔案

一個網頁的有很多地方可以進行效能優化,比較常見的一種方式就是非同步載入js指令碼檔案。在談非同步載入之前,先來看看瀏覽器載入js檔案的原理。 瀏覽器載入 JavaScript 指令碼,主要通過<script>元素完成。正常的網頁載入流程是這樣的。 瀏覽器一邊下載 HTML 網頁,一邊開始解析。

Kotlin通過Id操作ViewAdapter和動態載入Xml檔案也可以類似操作

如果使用kotlin,什麼butterknife繫結,Xutil註解都不需要,只需要通過id就可以操作view,非常方便,但是在使用的過程中還是遇到兩個值得記錄的問題如下: 針對adapter中通過id來操作 針對動態載入佈局通過id來操作 其實兩者本質

Nginx 作為代理伺服器載入JS檔案報錯net::ERR_CONTENT_LENGTH_MISMATCH

檢視nginx 日誌發現報錯 [[email protected] logs]# tail error.log 2016/11/11 15:04:20 [crit] 8655#0: *21 open() "/usr/local/nginx/

為了提高效能和高可用性看看大公司如何開發和部署前端程式碼

這是一個非常有趣的 非主流前端領域,這個領域要探索的是如何用工程手段解決前端開發和部署優化的綜合問題,入行到現在一直在學習和實踐中。在我的印象中,facebook是這個領域的鼻祖,有興趣、有梯子的同學可以去看看facebook的頁面原始碼,體會一下什麼叫工程化。接下來,我想

Java中動態載入properties檔案而不需要重啟應用的解決辦法

java中動態載入properties檔案,而不需要重啟應用的解決方法在Java專案中,如果需要使用.properties型別的檔案作為某些配置資訊存放介質的時候,一般都是將.properties檔案放在src目錄下,程式碼大部分都是這樣寫的: Properties pro

android Activity.this.getLayoutInflater()::動態載入佈局檔案實現彈窗效

activity類的拓展方法1:getLayoutInflater():將layout的xml佈局檔案例項化為View類物件,實現動態載入佈局 MainActivity.java package com.example.dynamiclayout; import and

Web動態載入JS外部檔案(script標籤)

( 摘自高效能Javascript ) 文件物件模型(DOM)允許你使用JavaScript 動態建立HTML的幾乎全部文件內容。其根本在於,<script>元素與頁面其他元素沒有什麼不同:引用變數可以通過DOM進行檢索,可以從文件中移動、刪除,也

關於apk加殼之動態載入dex檔案

由於自己之前做了一個關於手機令牌的APK軟體,在實現的過程中儘管使用了native so進行一定的邏輯演算法保護,但是在自己逆向破解的過程中發現我的手機令牌關鍵資料能夠“輕易地”暴露出來,所以我就想進一步的對其進行加固。於是,我使用的網上常用的梆梆加固、愛加密和阿里的聚安全應用來對我的apk進行一個

highcharts click事件獲取資料傳給datagrid 動態載入資料

點選highcharts的柱子 會觸發click事件,並將資料傳給後臺獲取到相應部門下的所有員工資訊顯示在datagrid 如下:新增在charts的初始化裡 [java]  view plain  copy

Untiy動態載入.dll檔案

這裡先說一下反射     System.Reflection名稱空間      (1) AppDomain:應用程式域,可以將其理解為一組程式集的邏輯容器        

關於原始檔標頭檔案,靜態連結庫檔案動態連結庫檔案的的理解

先從原始檔和標頭檔案的關係說起,由於是還是初學階段,只接觸了C++語言和windows平臺下的程式設計,所以只講這兩方面的東東, 標頭檔案的作用:對函式,變數,和類的宣告,其實在標頭檔案也可對一些特殊函式和變數定義,比如可以在標頭檔案中對行內函數和const型別變數定義,由於對類的宣告

nginx啟動重啟重新載入配置檔案和平滑升級

Nginx有一個主程序和幾個工作程序,主程序的主要作用就是讀取,評估配置檔案和管理工作程序,工作程序對請求做實際處理。 工作程序的數量在配置檔案中配置的,一般設定為cpu的核心數*執行緒數。 nginx可以通過訊號控制,預設情況下,主程序的程序ID記錄在/usr/local/nginx/

三種動態載入js的jquery例項程式碼另附去除js方法

!-- 這裡為你提供了三種動態載入js的jquery例項程式碼哦,由於jquery是為使用者提供方便的,所以利用jquery動態載入檔案只要一句話$.getscript("test.js");就ok了。  <!doctype html public "-//w3c//d

動態引入js檔案

<template> <section class="idx-main"> <div v-show="templateIndex==1" class="search-box"> <div class="row-

關於反射動態載入靜態載入

.什麼叫做反射:反射是一種機制,基於一個類的.class位元組碼檔案,建立這個類的物件的技術。 關於.class檔案: 一、java有編譯、執行兩個階段。在編譯的後,被編譯.java檔案可以編譯出一個.class檔案。 class HelloJava{     pub

原始檔標頭檔案,靜態連結庫檔案動態連結庫檔案的的理解

如果你把一個.exe檔案只接放到沒有操作系充的“裸機”上去執行,顯然是執行不了的,可是你把這個程式放在一個裝有windows系統的電腦上就能運行了,顯然,程式的執行還是得依靠windows作業系統,這裡就要說到.dll檔案,上面說到的連結這一步時的程式碼複製只講到對程式作者自已寫的檔案和.lib檔案中用到的程

log4j和log4j2怎麼動態載入配置檔案

應用場景與問題 當專案在執行時,我們如果需要修改log4j 1.X或者log4j2的配置檔案,一般來說我們是不能直接將專案停止執行再來修改檔案重新部署的。於是就有這樣一個問題:如何在不停止當前專案的執行的情況下,讓系統能夠自動地監控配置檔案的修改狀況,從而實現動態載入配置檔案的功能?