通過操作DOM w來更改內容。 Javascript與創建新的HTML/CSS頁面：哪個更高效？

Question

我正在構建一個非常簡單的網站，其中包含「關於我們」，「圖片」和「聯繫人」等幾個不同的部分。

我想知道這是更有效的（更好的性能和更低的響應時間）：

1.使用Javascript功能來操作DOM和改變主要部分的內容，只要客戶點擊其中的一個項目（「關於我們」，「聯繫人」等）或...

2.爲這四個或五個部分的每一個創建一個新頁面（不同的HTML和CSS文件）我希望該網站有？

在此先感謝！

Answer 1

對於這樣的決定，爲什麼前端框架如Google Polymer,AngularJs，React等被創建。

顯然具有頁改變（如在2建議的）將是大於1慢得多，因爲：

• 整個頁面具有重新加載（DOM被清除，然後重新構造）
• 所有共享樣式/綁定必須重新應用
• 架空使得重複的請求（其引入的網絡延遲到頁面加載）

然而，儘管1似乎是一個有吸引力的設計選擇，執行未優化的DOM操作（通過jQuery）實際上可能會降低性能甚至更多，因爲你介紹一噸的顛簸，以及不必要的中間步驟。

• 所有操作都在存儲器中然後
• 變化被優化
計算：

---

框架等陣營，通過使用這種通過模擬虛擬DOM其中處理該

• 只有變更的差異適用於實際DOM

---

現代網絡的組件框架（像聚合物，的x標籤）通過使用聲明HTML語法將數據綁定到HTML/JS行爲處理這個問題。該優化的工作：

• 槓桿影子DOM的，只有該元素的範圍進行操作和風格
• 靜態綁定的所有事件創建的元素（無需反覆甚至回調）
• 靜態引用的所有ID」中的構成要素
  • 這導致O(1)選擇速度VS jQuery的O(n)方法
• 一次編寫，使用/定製到處接近

Answer 2

響應時間和性能是你的首要任務。通過允許您在沒有整頁加載的情況下實現平滑過渡，DOM操作將更好地滿足您的需求。

如上所述，您可能會從使用虛擬DOM的框架中受益。在這種情況下，由於您的需求很簡單，像riotjs這樣的基於組件的小型UI庫就足夠了。

也許值得看看單個頁面的網站，其中可以手動滾動或使用頂級導航欄的部分。這肯定會滿足你的兩個主要優先事項。