document.write記述を止める

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

個人事業主でウェブと iOS, Android アプリの開発者で一児の父親。JavaScript, ActionScript, AppleScript, PHP, SQL, ObjC, Swift, Java の読書実行試験運用管理を生業とし、Bind, Postfix, Apache を MacOS で使い、エディタは Vi, mi, Kod, Smultron, TextWrangler を経て Coda, Xcode, Android Studio といった IDE と CotEditor を重用しています。