將獨立的Javascript轉換爲小部件

我們有一個8,300行的Javascript應用程序，它實現了一個橋的交互式圖。它目前編寫了大約250個頂級變量，250個函數，大約130行驅動程序代碼以外的函數，以及30個硬編碼的元素ID在各個地方引用;它完全獨立，不使用庫。它從URL查詢字符串中獲取參數。所以我們在網頁上使用它的方式是將它加載到iframe中。將獨立的Javascript轉換爲小部件

這是作爲3個文件：

handviewer.html - 這是我們點iframe中的頁面。它包含所有需要的DIV約70行HTML中，並加載（在下面的測試稱爲handviewer-old.html）的CSS和JS
hvstyles.css - 上面

描述的Javascript代碼 - 爲頁

handviewer.js的CSS

在handviewer.html中，活動元素具有內聯onclick屬性，該屬性調用handviewer.js中的函數。

問題是，當我們在頁面中嵌入大量這些內容時，性能會受到影響。開始時iframe是一種痛苦，並且它們中的很多都指向同一臺服務器，並且會遇到連接限制。即使它們全都指向相同的腳本，查詢字符串中的參數仍可作爲緩存攔截器。使用這些圖表中的12個加載頁面需要3-5秒，而且瀏覽器速度相當快。看時間線，你可以看到負載是交錯的。所以我想將它轉換爲一個可以應用於DIV的小部件，其參數爲內聯參數。

這些12個iFrame的測試頁是：

http://dev.bridgebase.com/barmar_test/many-hv-old.html

我準備用手工來做到這一點 - 我將環繞整個事情的功能，請用類的ID ，因此document.getElementById(x)變爲theDiv.getElementsByClass(x)[0]，並重寫提取查詢字符串參數以從options參數獲取它們的函數。但我想知道是否有任何工具可以幫助這個過程。如果有人做過這樣的轉換，你有沒有技巧可以幫到你？

來源

2013-05-02 Barmar

你說性能是問題......你說的是從服務器下載很多文件的性能，還是在瀏覽器中處理大量JS的性能？ – 2013-05-02 19:04:58

從我在開發人員工具中的測試中，它看起來像有一些。我試着對它進行分析，但代碼中似乎沒有任何瓶頸，CPU時間遍佈整個地方。 – Barmar 2013-05-02 19:09:08

你能提供一些鏈接嗎？ – 2013-05-02 19:09:44

我看看你的代碼...

如果（cardDivs [座位] [訴訟] [I] .innerHTML == 「」）......

不要那樣做。製作經典的布爾值JS數組來標記「空項目」。

一般來說，不要太多地訪問DOM。看起來，您的整個「模型」（來自MVC術語）和應用程序狀態都存儲在DOM中。

來源

2013-05-02 19:02:35

其實，它有兩個文件，我會用這個細節更新這個問題 – Barmar 2013-05-02 19:14:24

謝謝，我會試試看看我獲得了多少收益 – Barmar 2013-05-02 22:42:04

我已經刪除了部分DOM訪問內部循環，並在JS變量中緩存了一些信息，這些變化中的一小部分將加載時間縮短了大約40％，所以看起來這是正確的方法，resizeCards仍然是瓶頸，我認爲問題在於它爲208個DIV設置聯機CSS - 每隻手都有一個DIV，可以容納4次手牌，通常它們都是相同的fontSize，我們可以從一個包含DIV繼承，但是如果一個玩家持有很長時間西裝，它必須縮小那套西裝中的卡片，以適應他們的包裝。 – Barmar 2013-05-03 01:45:43

將獨立的Javascript轉換爲小部件

回答

相關問題