HTMLでdocument.write() はダメで使用しない！javascript で非推奨！使い方は？innerhtmlなど

PageSpeed Insightsでdocument.writeは使用しないとのメッセージが表示されました。非推奨の理由はなぜでしょうか。

HTML ページのスクロールせずに見える範囲に、レンダリングをブロックする外部 JavaScript ファイルへの参照が含まれていることを PageSpeed Insights が検出した場合にトリガーされます。

画面にテキストを表示する document.write です。これはブラウザーのレンダリングに悪影響が出たり、DOMへの影響などを考慮して「強く非推奨」とされています。

JavaScriptの勉強を始めて最初に書いたコードがの方は多いのではないのでしょうか。

HTMLでdocument.write() はダメで使用しない！非推奨！

document.writeが非推奨の理由は？

W3Cはdocument.writeのHTML5での使用を非推奨としていて、HTMLパーサーに影響を与えるようです。

実行しても無視されるか例外が投げられることがあるよーとか、ネットワークの待ち時間に依存などなどもあります。やっぱり使うのはダメそうです。

ブラウザーのレンダリングに悪影響が出たり、DOMへの影響などを考慮して「強く非推奨」とされています。

非同期スクリプトについて詳しくは、パーサー ブロックと非同期 JavaScript をご覧ください。 非同期スクリプトは、指定された順序での実行は保証されません。また、document.write は使用しないでください。

引用元：javascriptを非同期にする

次にMDN document.write()説明ページを読んでみましょう

①非同期の使い勝手が悪いです。deferred または asynchronous のスクリプト内では無視されます。

deferred または asynchronous のスクリプト内では無視

②期待通りに処理が動かない可能性があります。

Chrome55からキャッシュされていないHTTP の場合、document.write()を通じて挿入された<script>要素は実行されない

innerhtmlでの使い方！対処・解決方法は？

対処法①：Element.insertAdjacentHTML

利用して対処します。

innerHTMLを高機能にしたようなものと感じました。innerHTMLとは、html要素の中身を変更できるJavaScriptの便利な機能です。

Element.innerHTML = '<p>hello!</p>';

というイコールを使ってコンテンツの挿入を行いますが、これは

Element.insertAdjacentHTML('beforebegin', '<p>hello!</p>');

のように第1引数にElementからの相対位置、第2引数に挿入するコンテンツを指定します。innerHTMLではElement内のコンテンツをまるっと書き換えるだけでしたが、insertAdjacentHTMLでは細かな挿入位置の指定ができるのが魅力です。

対処法②：appendChild & insertBefore

appendChild はノードの一番下にノードを追加できます。

// Elementの子ノードリストの一番下に追加する
const inserted_child = Element.appendChild(child);

insertBeforeは指定した要素の前に、ノードを追加できます。

// Elementの子ノード<h2>の直前に追加する
const inserted_child = Element.insertBefore(child, Element.querySelector('h2'));

nextSiblingを使って直後に追加もできます。

// Elementの子ノード<h2>の直後に追加する
const inserted_child = Element.insertBefore(child, Element.querySelector('h2').nextSibling);

あわせて読みたい

Google Lighthouseとは？パフォーマンス改善やスコア向上方法！ローカル？拡張機能 【Google】Lighthouse測定ツールとは？パフォーマンスやスコア改善・向上方法！ローカル？【拡張機能】 Google Chromeの拡張機能「Lighthouse」は、ウェブページのさま…

関連記事:

『過大なDOMサイズの回避』とは？document write 非推奨！Wordpresの原因とDom減らす解決・改善の方法！javascript 高速化 テクニック JETPACKとは？意味！必要か？重いWEBサイトやブログ！メリットやデメリット！ HTTP/2の確認方法？対応ブラウザ！Chrome SPDY indicatorを有効化チェック ネイティブ Lazy-loadとは？対応状況は！ファーストビューは？確認方法は？ 「静的なアセットと効率的なキャッシュポリシーの配信」とは？TTLを見直す？SEO効果？WordPress ヘッダービディングとは？導入メリットや仕組み！デメリットを紹介