JavaScriptのお勉強(3)
同期／非同期って何？
アフィリエイトのタグを取得する時に、「同期」と「非同期」というのが選べるようになっている場合がありまして
なんだか意味が分かってなかったのですが、「サイトの表示速度で順位が変わる」という話の関連で、やっと分かりました(笑)
いや、なんとなく漠然と理解した程度ですが(笑)
一言で言ってしまうと、
同期：読み込み（スクリプトの実行）が終わるまでサイトの描画がストップする
非同期：スクリプトは並行して実行される＝サイトの描画がストップしない
という感じのようです。
ならば、全部非同期にしたほうが良さそうですね
非同期でスクリプトを実行するには、「async」または「defer」をつければ良いらしい。
<script src="hogehoge.js" async> async>～</script>
<script src="hogehoge.js"defer>～</script>
<script src="hogehoge.js" async defer>～</script>
async／deferどちらも、スクリプトのダウンロード中に描画処理（レンダリング）が中断しない
asyncはダウンロード完了すると即スクリプトが実行される
deferはダウンロード完了してもレンダリングが終了するまでスクリプトが実行されない
と言う事らしいです。
この属性（async／defer）は src属性があって外部のファイルを読み込むときにだけ効果があるので、scriptタグ内にJavaScriptコードを直接書いている場合（インラインスクリプト）は何も付けないのと同じで、読み込まれた瞬間に実行されるそうです。
ならば、全部非同期にしたほうが良さそうですが、非同期にしてしまうと問題が起きるケースがあって、そういう場合は同期にせざるを得ない、と言う事のようですね。
例えば、最初に書いた、非常に多く使われる「document.write」は、高確率で非同期では問題が起きるらしいです。
「非同期で読み込まれた外部スクリプトからの document.write() の呼び出しは無視される。」
というセキュリティ上の仕様のため、だそうで。
つまり、document.writeは、外部ファイル呼び出しの形では、非同期では使えないということですね。
私ちょっと勘違いしていたのですが、インラインスクリプトなら使えるのですね。
ただ、インラインスクリプトは非同期にはならない、ということ。
つまり、描画を妨げないようにしたければ、すべて外部スクリプトにしてしまえば、非同期にできる可能性がある、と。
しかし！
外部スクリプトで非同期にするとdocument.writeが動かない・・・(笑)
（※外部スクリプトでも同期ならdocument.writeが動く。）
そこで、document.writeはなるべく使わないようにして、非同期化を目指しましょう、と言う事で、前回解説したinnerHTMLが推奨されているわけですね！
コメント