document.write記述を止める – hkitago software dev

CANVASをフルスクリーンで扱う際に document.write() を使っていたのですが、

const x_canvas = window.innerWidth
    , y_canvas = window.innerHeight
document.write('<canvas width="' + x_canvas + '" height="' + y_canvas + '"></canvas>')

Google Chrome のバージョン 80辺りから [Violation] Avoid using document.write(). https://developers.google.com/web/updates/2016/08/removing-document-write とログを出力するようになったので使用を止めることにしました。

const canvasE  = document.createElement('canvas')
canvasE.width  = window.innerWidth
canvasE.height = window.innerHeight
canvasE.id     = 'canvas'
document.body.appendChild(canvasE)

一つのキャンバスタグをリニアで実行するのでこの場合はあまり気にする必要はありませんが、コンソールのログに記述されているリンクの内容はパフォーマンスによるもので、非同期や並列処理の制御を考慮して可能な限り使用は控えるのが正しいかと思います。

同期的に見えるコードを記述している場合でも、並列で実行するチャンスを見逃さないようにしてください。
https://developers.google.com/web/fundamentals/primers/async-functions

10年ほど前に納品したCMS製作の現場でAJAXの利用を提案したところ、担当者が「あ〜、document.write() を使うんですね」と返してきたので、仰せの通り実装したということがありました。

投稿者: hkitago