回答編集履歴

2

追記した内容の意図が解りにくかったので説明を変更・コメントで指摘いただいた内容を反映

2015/08/18 07:05

投稿

KiKiKi_KiKi
KiKiKi_KiKi

スコア596

test CHANGED
@@ -64,11 +64,15 @@
64
64
 
65
65
  [追記]
66
66
 
67
+ > 逆にBodyタグ最後でJSファイルを読み込むことによるデメリットってあるんでしょうか?
68
+
67
69
  HTMLのレンダリングが完了する前に何かjsを動かしておきたいというような事があれば、bodyの閉じタグ前より先にスクリプトタグを書いておかなければ意図したとおり動作しないかと思います。
68
70
 
69
71
 
70
72
 
71
73
  下の例では`writeImage.js`のある位置にもともとあったかのようにimgタグが追加されます。
74
+
75
+ HTMLがレンダリングされてから画像1の前にjavascriptで画像を追加すると一瞬表示がガタッとなってしまうかもしれません。これが嫌だ!というような場合はHTMLのレンダリングをブロックさせてでもスクリプトを実行させるメリットは有るかもしれません。
72
76
 
73
77
  ```html
74
78
 
@@ -78,7 +82,7 @@
78
82
 
79
83
  <div>
80
84
 
81
- <img src="http://dic.nicovideo.jp/oekaki/663056.png">
85
+ <img alt="画像1" src="http://dic.nicovideo.jp/oekaki/663056.png">
82
86
 
83
87
  </div>
84
88
 
@@ -102,6 +106,24 @@
102
106
 
103
107
  ```
104
108
 
105
- に`<script src="writeImage.js" async></script>`としてみてください
109
+ メリットとは別の先書いていた`async`との違いも試してみるとこが出来ます
106
110
 
111
+ `<script src="writeImage.js" async></script>`としてみてください。
112
+
107
- 必ずしも追加される画像がの表示されるわけではなくなると思います。
113
+ `async`はHTMLのレンダリングをブロックしませんので、必ずしも追加される画像が画像1上に表示されるではなくなる事が確かめられると思います。
114
+
115
+
116
+
117
+
118
+
119
+ 最近のTwitterとかはてなとかの埋め込みscriptタグはasync付きのものが多いですが、
120
+
121
+ コメントでご指摘頂いております通り、`async`の方法は下記に注意する必要があります。
122
+
123
+ > “async”(非同期)はIE 8/9, Android 2.2/2.3.といった、いくつかの前の型のブラウザに対応していません。
124
+
125
+
126
+
127
+ [参考]
128
+
129
+ [JavaScriptの読み込みにおける非同期スクリプト注入の悪影響](http://postd.cc/script-injected-async-scripts-considered-harmful/)

1

サンプル追加

2015/08/18 07:05

投稿

KiKiKi_KiKi
KiKiKi_KiKi

スコア596

test CHANGED
@@ -55,3 +55,53 @@
55
55
  [参考]
56
56
 
57
57
  [async属性で簡単!非同期でjsを読み込みレンダリングを速くしよう](http://www.aiship.jp/knowhow/archives/20559)
58
+
59
+
60
+
61
+ ---
62
+
63
+
64
+
65
+ [追記]
66
+
67
+ HTMLのレンダリングが完了する前に何かjsを動かしておきたいというような事があれば、bodyの閉じタグ前より先にスクリプトタグを書いておかなければ意図したとおり動作しないかと思います。
68
+
69
+
70
+
71
+ 下の例では`writeImage.js`のある位置にもともとあったかのようにimgタグが追加されます。
72
+
73
+ ```html
74
+
75
+ <body>
76
+
77
+ <script src="writeImage.js"></script>
78
+
79
+ <div>
80
+
81
+ <img src="http://dic.nicovideo.jp/oekaki/663056.png">
82
+
83
+ </div>
84
+
85
+ </body>
86
+
87
+ ```
88
+
89
+ ```javascript
90
+
91
+ // writeImage.js
92
+
93
+ var d = document;
94
+
95
+ var url = 'http://cdn-ak.b.st-hatena.com/entryimage/236933222-origin-1419307828.jpg';
96
+
97
+ var img = d.createElement('img');
98
+
99
+ img.src = url;
100
+
101
+ d.getElementsByTagName('body').item(0).appendChild(img);
102
+
103
+ ```
104
+
105
+ 逆に`<script src="writeImage.js" async></script>`としてみてください。
106
+
107
+ 必ずしも追加される画像が先の表示されるわけではなくなるとお思います。