どうしてdocument.writeは「Bad practice（悪い習慣）」って考えられてるの？ [Javascript]

Tweet

質問：

document.writeがbad practice(悪い習慣)とみなされてるのは知ってる。で、僕が望んでいるのはその理由を集めて、なぜ解析コードの実装に document.writeを使用すべきじゃないのか第三者のベンダーに提出したいんだ。

document.writeを悪い習慣として主張するあなたの理由を教えて？

回答1:

深刻な問題をまず初めにいくつか：

• document.write(以後DW)はXHTMLでは動作しない
• ページの読み込みが終了した後に実行されるDWは、ページを上書きしたり、新しいページを書き出したり、また動作しないこともある
• DWはエンカウンターした場所で実行されます：つまり、あるノードポイントにインジェクトしたりはできない
• DWは実質的にシリアル化されたテキストを書き出すので、コンセプト的にDOMが動作する方法じゃない。そしてバグを作成するのも簡単だ(.innerHTMLにも同じ問題がある)

安全でDOMフレンドリーな操作は、DOM操作メソッドを参照。

回答2:

実際に document.write自体は何も問題は無いよ。問題はそれを誤用するのは本当に簡単だって事。

Googleアナリティクスとかの分析コードを提供するベンダーに関して言えば、彼らは実際にそんな誤用を招くスニペット（コードの断片）を配布する元になってる。なぜなら：

1.スクリプトを小さく保てる
2.彼らは、すでに確立されているオンロードイベントをオーバーライドすることや、オンロードイベントを安全に追加するために必要な抽象化を心配する必要がない
3.(document.writeは)非常に互換性があります

ドキュメントがロードされた後でそれを使用しようとしない限り、僕は個人的にはdocument.writeは本質的に悪だとは思わないなあ。

回答3:

document.writeのもう一つの正当な使用は、HTML5 Boilerplate
index.html
例。

<!-- GoogleのCDNのjQueryをプロトコル相対URLで取得。オフラインの場合はローカルにフォールバックする -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.3.min.js"><\/script>')</script>

僕は、json2.jsJSON parse/stringify
polyfill(IE7以下で必要)でも同じようなテクニックを使ってるのを見たよ。

<script>window.JSON || document.write('<script src="json2.js"><\/script>')</script>

回答4:

利点：

• 外部(ホスト/ドメイン)のスクリプトからインラインコンテンツを埋め込む最も簡単な方法。
• frameまたはiframe内のコンテンツ全体を上書きすることができる。最近のAjax技術が広く普及する前に(1998年〜2002年)、僕はこの技術をメニュー/ナビゲーション用に多用してたよ。

欠点：

• これは、外部スクリプトがロードされるまでレンダリングエンジンをシリアライズするようにシリアル化します。内部スクリプトよりもはるかに時間がかかる。
• 通常、スクリプトがコンテンツ内に配置されるように使用されるけど、これはあんまり良い使い方じゃない。

Source: Why is document.write considered a “bad practice”?