爲何document.write被視爲「不良作法」？

我知道document.write被認爲是不良作法； 而且，我但願整理出一份爲何要向第三方供應商提交的理由清單，說明他們爲何不該該在其分析代碼的實現中使用document.write 。

請在下面document.write您主張document.write的不良作法。

---

#1樓

能夠將document.write（）（和.innerHTML）視爲評估源代碼字符串。 對於許多應用程序來講，這可能很是方便。 例如，若是您從某個來源得到HTML代碼做爲字符串，則只需「評估」它就很方便。

在Lisp的上下文中，DOM操做就像操做列表結構，例如，經過執行如下操做建立列表（橙色）：

(cons 'orange '())

而document.write（）就像評估字符串同樣，例如，經過評估以下的源代碼字符串來建立列表：

(eval-string "(cons 'orange '())")

Lisp還具備使用列表操做建立代碼的很是有用的功能（例如使用「 DOM樣式」建立JS解析樹）。 這意味着您可使用「 DOM樣式」而不是「字符串樣式」創建列表結構，而後運行該代碼，例如：

(eval '(cons 'orange '()))

若是您實現像簡單的實時編輯器這樣的編碼工具，則具備快速評估字符串的能力很是方便，例如使用document.write（）或.innerHTML。 從這個意義上講，Lisp是理想的選擇，可是您也能夠在JS中完成很是酷的工做，並且不少人都在這樣作，例如http://jsbin.com/

---

#2樓

這是個人兩便士，通常來講，您不該該使用document.write進行繁重的工做，可是在某些狀況下，它絕對有用：

http://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html

我最近發現這個嘗試建立AJAX滑塊庫。 我建立了兩個嵌套的div，並應用了width / height和overflow: hidden使用JS overflow: hidden到外部的<div> 。 這樣一來，若是瀏覽器禁用了JS，則div會浮動以容納圖庫中的圖像-一些不錯的優雅降級。

就像上面的文章同樣，這種CSS的JS劫持直到頁面加載完成後纔開始，致使div加載時出現瞬時閃爍。 所以，我須要在加載頁面時編寫CSS規則或包含一張工做表。

顯然，這在XHTML中是行不通的，可是因爲XHTML看起來像是死雞了（而且在IE中顯示爲標籤湯），所以可能值得從新評估您對DOCTYPE的選擇...

---

#3樓

• 爲何document.write很差的一個簡單緣由是，您沒法提出沒法找到更好替代方案的方案。
• 另外一個緣由是您正在處理字符串而不是對象（這是很是原始的）。
• 它僅附加到文檔。
• 它沒有MVC（模型-視圖-控制器）模式的任何優勢。
• 使用ajax + jQuery或angularJS呈現動態內容的功能要強大得多 。

---

#4樓

document.write的缺點主要取決於如下三個因素：

a）實施

document.write（）一般用於在須要內容時將內容寫入屏幕。 這意味着它發生在任何地方，不管是在JavaScript文件中仍是在HTML文件中的腳本標籤內。 將script標記放置在此類HTML文件中的任何位置，在文檔塊中將document.write（）語句與網頁中的HTML交織在一塊兒是一個很差的主意。

b）渲染

一般，設計良好的代碼將採用任何動態生成的內容，將其存儲在內存中，並在其最終經過屏幕顯示出來以前，對其進行操做。 所以，爲了重申上一節中的最後一點，就地渲染內容可能比可能依賴的其餘內容渲染速度更快，可是其餘代碼可能沒法使用它反過來又須要渲染內容進行處理。 爲了解決這個難題，咱們須要擺脫document.write（）並以正確的方式實現它。

c）不可能的操縱

一旦寫完，就結束了。 若是不使用DOM，咱們將沒法回過頭來對其進行操做。

---

#5樓

Chrome可能會阻止在某些狀況下插入腳本的document.write 。 發生這種狀況時，它將在控制檯中顯示如下警告：

經過document.write調用Parser阻止，跨域腳本...。 若是設備的網絡鏈接較差，瀏覽器可能會阻止此操做。

參考文獻：

• 有關developers.google.com的這篇文章會更詳細。
• https://www.chromestatus.com/feature/5718547946799104