簡單的html vs Javascript生成的html？

在我的web應用程序中，我想避免使用html，只使用javascript來創建網頁的dom樹。簡單的html vs Javascript生成的html？

什麼是在傳統的方式在html <div>Some text</div>或使用javascript dom渲染，如下這樣的傳統方式寫網頁內容：div.appendChild(document.createTextNode("Some text"));？

來源

2010-06-03 Rizo

「在我的web應用程序中，我想避免使用html，只使用javascript來創建網頁的dom樹。」我很好奇;你爲什麼想這樣做？ – 2010-06-03 19:09:56

JavaScript方法也依賴於您的客戶端啓用JavaScript。他們存在，此刻有一個人坐在我旁邊。此外，它需要大量的客戶端操作，傳統上它比服務器慢。堅持傳統。 – 2010-06-03 19:17:52

@Ed Daniel：原因很簡單 - 我正在用C + Javascript組合編寫我的服務器應用程序，所以我想讓事情變得統一，只使用這兩種語言。 – Rizo 2010-06-04 08:23:08

堅持傳統的HTML。它不僅比用JavaScript做所有事情都快，而且更易於維護。

除非有其他令人信服的理由，否則請堅持直線上的HTML，並使用JavaScript來處理更多交互式應用程序。

來源

2010-06-03 19:05:08 Nathan

另請參見[Unobtrusive JavaScript]（http://en.wikipedia.org/wiki/Unobtrusive_JavaScript） – Matt 2010-06-03 19:09:21

此外，偉大的全能GOOGLE，「不索引」JavaScript生成的頁面。由於其網絡爬蟲忽略了JavaScript代碼！所以除非你的門戶網站將被私人/內部使用。不在谷歌上幾乎類似於不在互聯網上。（對於網站的情況下99％的JS） – PicoCreator 2012-10-31 12:27:37

你應該解釋爲什麼傳統的HTML比JavaScript快。 – Dmitry 2017-12-15 23:55:12

HTML由瀏覽器解析並生成，然後輸入到DOM中。使用JavaScript來逐塊操縱dom是更多的開銷。

想象一下，如果您不得不重新輸入雜誌上的文章。現在想象一下，如果每個句子都在一個新的頁面上。雖然最終的結果是複製的文章，但您必須花費所有時間來翻頁。

來源

2010-06-03 19:08:06

到目前爲止，傳統的方式更快，用戶下載文件，它在那裏，解析和完成。

如果你使用JS方式，頁面必須建立在客戶端，每次他們加載頁面。

這僅僅是建立一個頁面恕我直言和噩夢來管理/更新/創建

來源

2010-06-03 19:08:08

速度一個可怕的方式是正確次要的問題 - 那就是，先發球的功能需求，然後使它快速哪裏必要的（有些地方，它可能已經足夠快）。

在這種情況下，決定使用靜態標記還是使用JavaScript是一個誰在使用文檔的問題 - 是否只有啓用了JavaScript的用戶？如果是這樣，那並不重要。你需要考慮搜索引擎嗎？禁用用戶？瘦客戶端沒有完整的JS支持，或偏執的JS用戶禁用？在所有這些後面的情況下，具有語義標記，而不是多餘的元素混雜在一起，用JavaScript進行增強是唯一正確的方法。

來源

2010-06-03 19:08:41

如果你打算通過JavaScript對html做很多修改，我建議使用一個模板庫，如trimpath。

來源

2010-06-03 19:11:52 Stuart

我覺得有趣的是，你會考慮純粹通過Javascript來創建一個文檔。使用DOM創建元素的實際速度比.innerHTML的屬性更快。此方法直接創建文檔對象，而使用innerHTML則需要解析器遍歷HTML並創建元素。

另一方面，使用Javascript而不是直接編寫HTML會需要解析和執行Javascript，從而在HTML解析器上創建額外的開銷。

來源

2010-06-03 19:11:53

我想你可能會忘記HTML解析器是本機的，而且速度非常快。我所見過的所有研究都顯示innerHTML是最快的（http://andrew.hedges.name/experiments/innerhtml/），儘管JavaScript引擎一直在變得更快。我明白這個問題不關心innerHTML，關心的是開發速度，而不是執行速度。也許不會。 – 2010-06-03 19:55:08

@李Kowalkowski：確實，因此，我的答案的最後一段。我可能會把'innerHTML'與[這裏]寫的內容混淆起來（http://msdn.microsoft.com/en-us/library/ms533019（VS.85）.aspx＃Use_the_DOM_to_Add_Individual_Elements），儘管第一行表明這適用到所有基於HTML字符串的方法。對於非常大的DOM操作任務，我認爲'innerHTML'會更快。 – 2010-06-03 21:10:02

HTML（模板）通常被認爲是一種更直觀，模塊化和可維護的DOM操作方法。

幾個地方，讓你開始：

jQuery的模板引擎： jQuery templating engines

谷歌Closure模板 http://code.google.com/closure/templates/

來源

2010-06-03 19:14:34