單頁Web應用程序涉及

我原型了多頁的Web應用程序，其中一些帶有嚴重的JavaScript load。我有一個（不是非常原始的）想法使頁面佈局加載一次，只改變與Ajax請求的內容。這可以做到，而且效果很好，但我有一些擔憂。

該網站檢查它獲取的每一個請求，如果它是一個AJAX請求，它只返回內容（作爲MVC 4部分視圖，但這不完全是重點，這可以在任何地方完成）。否則，它會加載整個頁面，佈局和所有內容。這個想法是爲我正在下載的每個javascript包提供一個狀態標誌。該佈局將有一個初始化js文件，包含頁面的基本顯示邏輯，如何獲取內容等。

所有內容頁面將檢查是否加載了相關腳本，如果沒有，則啓動下載，並在成功事件中，設置正確的標誌。一些額外的錯誤處理是必需的，例如，當ajax調用由於某種原因失敗時。

的問題（一個或多個）

現在我擔心的是，有一些「子頁面」頗多JS。由於我必須能夠在移動瀏覽器上工作（儘管最重js的東西只有桌面，但我們暫時忘記了這一點），它會對性能產生怎樣的影響，如果我想要加載幾個MB腳本內存和「永不」卸載它們（因爲頁面沒有重新加載）。另外，如果我通過jQuery.getScript（...）函數獲取它們，腳本是否會被緩存？或者我應該以另一種方式加載腳本？

同樣的問題的內容。如果我從主體中刪除DOM元素，請將其替換爲其他元素，然後在長時間使用期間重新加載原始子頁面，對內存使用情況和性能有何影響？

我真的很想讓這個領域的經驗豐富的人給我一些關於我的擔憂的見解，然後再讓我自己看起來完全愚蠢於一個無用的概念驗證原型。

在此先感謝！

編輯：更改標題正確表達

編輯2：分居問題是什麼，什麼是上下文

來源

2013-08-23 Robert

我們已經開發了類似的應用程序前一陣子，我們決定該應用程序，以使每個AJAX重頁面創建一個單獨的頁面。有約。 6-8頁，他們每個人都有不同的責任，所以你可以認爲這是6-8獨立的單頁面應用程序。

有跡象表明，我能想到的兩種方法，爲您的情況：

如果您的網頁是真正的JavaScript的沉重，他們每個人的要求非常不同的腳本組，則可以通過將不會獲得性能重新加載頁面佈局可能會因爲您一直加載的內容而丟失。
特別是對於垃圾開始吃掉你的記憶的寫得不好的JavaScript，不時重新加載整個頁面，然後去掉垃圾。
如果頁面使用的JavaScript幾乎相同（或者只有很小的差異），我建議將所有頁面的每個腳本合併爲一個並加載捆綁的腳本。
但是，在這種情況下，當整個頁面不會被重新加載時，您可能會遇到這種情況，因此請儘量寫出不泄漏內存的js。

如果您的服務器端可以正確處理緩存控制HTTP標頭，那麼是的，無論您如何加載特定資源，緩存都可以工作。 不過，我建議將腳本捆綁到一個腳本中，而不是一個接一個地加載腳本。
通過這樣做，您將保存一堆HTTP請求，並且由於瀏覽器將緩存捆綁的腳本，您以後也可以節省帶寬。

關於安裝/從DOM刪除元素：
jQuery將自動擺脫所有事件處理程序和data()當您使用remove()或empty()。如果您使用detach()，它只會保留它們。

更多關於JavaScript和內存消耗

這裏是是值得一讀的話題的文章。

來源

2013-08-23 13:09:24 Venemo

這個答案（更像是消除）我的問題的一半。如何刪除讀取DOM元素，特別是與事件處理程序掛鉤他們？他們對性能有多大的影響（即使我傾向於使用（...）函數上的jquery來避免這個問題，我會感興趣會發生什麼） – Robert

@Robert - 這取決於你想要什麼樣的DOM元素追加/刪除以及多久執行一次。 – Venemo

@Robert更新了我的答案 – Venemo

聽起來你試圖建立一個SPA！

有幾個框架/庫出有其目的是爲了幫助構建和這樣的應用程序的設計中，通過-沒有辦法窮盡的列表，其中是：

經常利用這些框架的應用也將使用一些像requirejs這樣的東西可以幫助模塊化並只在需要時加載資源。

這裏有很多選項，但我建議你通過幾個教程，看看是否有一個適合你的需求 - 祝你好運！ :)

還有一些關於pluralsight的相關教程視頻，涉及它們與.NET MVC 4和Web API的使用有關。你需要一個成員，但我認爲你可以註冊一個免費試用 -

Single Page Apps with HTML5, Web API, Knockout and jQuery

Building a Site with Bootstrap, AngularJS, ASP.NET, EF and Azure

更新時間：

爲了解決您的性能問題 - 有關於一些有趣的信息分析內存性能 - Taming The Unicorn: Easing JavaScript Memory Profiling In Chrome DevTools只適用於第一張圖片，值得一讀。

此外，Writing Fast, Memory-Efficient JavaScript，有一些很好的意見，以瞭解內存使用：

爲了讓垃圾收集器有機會盡早收集儘可能多的對象可能，不要抱到對象你不再需要。

最後，雖然骨幹具體，Backbone.js And JavaScript Garbage Collection給出

基本思想好好總結[是]應該證明給誰想做的事在JavaScript管理內存使用更好的工作有用的人。

這反過來又引用這個答案：What does backbone.js do with models that are not used anymore

來源

2013-08-23 09:32:29 RYFN

這些庫很高興知道的（我已經知道knockoutjs和requirejs），但是這並沒有回答我的問題關於可能的性能問題:) – Robert

啊夠公平，在你的問題的大部分中，要分辨出你要找的是什麼有點困難：） – RYFN

對不起，我會盡量在稍後清除它。 – Robert

單頁Web應用程序涉及

回答

相關問題