# document.write() ## 結論 1. 頁面載入完成前使用 document.write 會新增 html。 2. document.write 如果在網頁載入完畢後才執行，會覆寫整個 html，將原本辛苦載入的資料全部清空。 **盡量少用document.write()，已經是一個被淘汰的方法，現在找到的資料年代也都蠻久遠的XD** ## Javascript Output javascript output 主要有4種方法: 1. 寫入 HTML 元素，使用innerHTML. 2. 使用document.write(). 3. 寫入警示框，使用window.alert(). 4. 寫入瀏覽器控制台，使用console.log(). ## 簡介document.write() document.write() 是將一個字串寫入一個由 document.open() 打開的文檔流（document stream）的方法。 若在關閉（加載後）的文檔上使用 document.write() 會自動調用 document.open()，這將導致文檔內容被清除。在使用 document.write()方法後面，必須確保含有document.close() 告訴瀏覽器完成頁面加載。 當我們在使用 Web 應用程序時，覆蓋整個頁面的狀況並不常見，會導致性能問題，這也是為什麼使用 document.write() 是不好的做法。 ```+ //完整的寫法: 打開一個輸出流，添加一些文本，然後關閉輸出流 => 畫面上顯示Write something <!DOCTYPE html> <html> <head> <title>Write example</title> <script> function newContent() { document.open(); document.write("<h1>Write something</h1>"); document.close(); } </script> </head> <body onload="newContent();"> </body> </html> ``` ```+ //自動調用 document.open()，將原先的文檔內容清除 <!DOCTYPE html> <html> <body> <h2>My First Web Page</h2> <p>My first paragraph.</p> <button type="button" onclick="document.write('My second paragraph')">Try it</button> </body> </html> ``` https://codepen.io/natalia0604/pen/poPNBMd ## 甚麼時候會用到document.write() 1. 自己做測試的時候使用。 2. **第三方有時會用document.write()加載腳本。** 由於第三方公司無法預期用戶的瀏覽器，藉由 document.write() 在任何瀏覽器中可用的特性，會將 document.write() 會作為fallback or default method。 大多數第三方有提供異步加載的替代方案，允許第三方腳本加載而不會阻止頁面上其餘內容的顯示。 ## 為什麼要避免使用document.write 1. document.write() 和 document.writeln 在 XHTML 文檔中不起作用 (不太影響，現今大多都使用HTML) 2. 在延遲或非同步操作中使用 document.write() 將被忽略不執行。 3. 為確保用戶體驗良好，從版本 55 開始，當Chrome檢測到用戶滿足他所列定的條件時，Chrome將不執行document.write() ![](https://i.imgur.com/y4osUl9.png) 對於在2G，3G 或者是慢 wifi 環境，使用document.write()會引起嚴重的網站加載耗時問題。 在瀏覽器呈現頁面之前，它必須通過解析 HTML 標記來構建 DOM tree。每當解析器遇到腳本時，它必須停止並執行它，然後才能繼續解析HTML。 如果使用多個腳本，解析器將被迫等待更長時間才能下載資源，這可能會導致一次或多次網絡往返並延遲首次呈現頁面的時間，對於連接速度較慢的用戶來說體驗不佳。 console會跳出警示: ```+ (index):34 A Parser-blocking, cross-origin script, https://paul.kinlan.me/ad-inject.js, is invoked via document.write(). This may be blocked by the browser if the device has poor network connectivity. ``` GOOGLE有做的數據研究: [Intervening against document.write()](https://developers.google.com/web/updates/2016/08/removing-document-write) ## 替代方案: 使用DOM操作將內容加入節點元素。 * `.innerHTML()` * `.createTextNode()` * `.createElement` * `.appendChild()` * `.getByElementById()` * `.querySelector()` * .....根據需求 ## 補充: write()和writeln()的差別 writeln()會換行，write()不會 ```+ <!DOCTYPE html> <html> <body> <p>Note that write() does NOT add a new line after each statement:</p> <pre> <script> document.write("Hello World!"); document.write("Have a nice day!"); </script> </pre> <p>Note that writeln() add a new line after each statement:</p> <pre> <script> document.writeln("Hello World!"); document.writeln("Have a nice day!"); </script> </pre> </body> </html> ``` ![](https://i.imgur.com/YYi5z4E.png) ## 參考資料 1. [JS Interview Question: When would you use document.write()?](https://rlynjb.medium.com/js-interview-question-when-would-you-use-document-write-ccc199137715) 2. [Document.write() MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/write) 3. [Uses document.write()](https://web.dev/no-document-write/) 4. [深入淺出JavaScript （五） 詳解Document.write()方法](https://www.itread01.com/content/1548164345.html) 5. [HTML DOM write() Method](https://www.w3schools.com/jsref/met_doc_write.asp)