如何處理大的html/js文件？

我正在研究基於HTML/JS的報告，應該由一個文件組成。因此目前的報告是500 kB，但是這個效果很好。但是，當您想在Chrome中查看源代碼時，它可能會凍結。我正在處理的一份新報告包含更多數據，目前大約爲1.5 MB。在Chrome中看到源代碼幾乎是不可能的，我擔心它會在慢速設備上造成麻煩。如何處理大的html/js文件？

有沒有建議嗎？最佳實踐？我已通過Google搜索並搜索了Stackoverflow，但找不到大小限制或關於html/js代碼佈局建議的任何內容，以便於瀏覽器消化。（我從其他語言，例如C++知道，存在提示，如何使編譯器更好地消化大文件，從而使編譯速度更快。）

編輯：當前報告的代碼大小是99％的HTML。（表格）表格隨後被Datatables美化。刪除所有的JS代碼不幸的是沒有區別。順便說一下，我已經嘗試去除空格（1.5 MB - > 1.1 MB），並從陣列中加載數據，而不是將它們存儲在硬編碼的html table,tr,td元素（1.5 MB - > 1.6 MB）中，但性能特徵沒有改變。

它是靜態文件，問題也發生在本地。

第二次編輯：我現在將硬編碼表格內容的其餘部分轉換爲JS數組，並刪除了空格，進一步縮小了大小。現在文件大小爲900 kB，加載速度明顯提高，凍結時間僅爲3-5秒。

來源

2012-10-10 Philip

使用'http'壓縮 –

試着做少的一塌糊塗。你應該從代碼中分離內容。嘗試使用XML以結構化的方式存儲內容，使用JavaScript來檢索和操作它，使用HTML和CSS來顯示它，並將其保存在單獨的較小文件中，因此，當您要求源代碼時，它是代碼觀看，並以緊湊合理的方式呈現。 – NotGaeL

是的，但我不喜歡這個解決方案。當前解決方案的優點是：像PDF，Word或Excel報告一樣，您可以將電子郵件，存儲和備份爲一個自包含文件。與PDF相比，它絕對是平臺獨立的，實際上甚至可以與文本瀏覽器一起使用。 – Philip

在Chrome中查看源代碼不應導致它凍結。頁面渲染速度快還是慢？如果它是後者，它可能是流氓JavaScript運行的標誌。你可以發佈任何代碼給我們看嗎？另外，你使用的是什麼Web服務器？您可以嘗試使用GZip Compression或JSCompress之類的內容來縮小頁面大小。

http://jscompress.com/

來源

2012-10-10 09:25:30

JS和CSS通常都不是HTML頁面源的一部分，因此壓縮它們不會影響源查看器。 – ThiefMaster

@ThiefMaster - 這將取決於JavaScript/css是否嵌入在頁面上。 OP沒有提供代碼，所以我假設他們已經把它全部放在一個文件中，因爲他聲明'應該包含一個文件' –

全部，謝謝你的建議。該頁面渲染速度非常快。可能會更快，但沒關係。這個問題也出現在沒有任何JS代碼的地方，請參閱編輯的問題。 – Philip

如何處理大的html/js文件？

回答

相關問題