つい先日、
スポンサーリンク
javaの非同期化について記事として投稿しました。
この時点で、
Chromeでは、
Syntaxhighlighter（シンタックスハイライト）が表示されず、
IEでは、
これまで通り表示さてました。
ChromeでもIEでも、
async属性には対応しているはずですが…。
また、
いろいろ調べると、
defer属性というのもありました。
asyncとdefer属性に違いは、
async：利用可能な時点で実行（async）値は省略可能、
文書の読み込み中にそのスクリプトが利用可能になった時点で実行するdefer：読み込み完了後に実行（defer）値は省略可能、
文書の読み込みが完了した時点でそのスクリプトを実行する
引用元）：http://www.tagindex.com/html5/page/script_method.html
のようです。
そこで、
asyncとdeferの両方が指定可能との記載もちらほらとあったので、
以下のように記載すると…。
<script async defer='async defer' src='外部ファイルjavaのURL' type='text/javascript'/>
Bloggerブログよりエラーですよぉ。
とお叱りを受けます。
なので、
以下のように記載すると…。
<script asyncdefer='async defer' src='外部ファイルjavaのURL' type='text/javascript'/>
なぜかお叱りを受けません。
そして、
Chromeでもこれまで通りに表示されました。
ですが、
非同期化にはなっていない模様…。
やはり、
IEユーザが一番多いので非同期化にはしたいのが本音です。
その他にも、
いろいろな解説されたサイトがありました。
≫スクリプトの非同期実行 (Windows)
≫HTML5のscript要素でasync, deferを使ってパフォーマンスアップ - IT-Walker on hatena
≫HTML5/ページ全般/script要素 スクリプトの実行方法を指定する - TAG index Webサイト
≫[JavaScript/CSS] 遅延読込をする方法 | 零弐壱蜂
≫scriptのdefer/asyncを理解し、ページの高速化方法を探る | ゆっくりと…
.aspx)
個人的見解ですが、
上記中でも、
一番下のサイトが一番?有要なのかなぁと…。
いくつかの方法があるようなので、
忘れないようにコードのみいくつか残しておきたいと思います。
（上記サイトの引用です）
asyncとdefer両方
<script>
(function(d){
var e = d.createElement('script');
e.type = 'text/javascript';
e.async = true;
e.defer = true;
e.src = '外部ファイルjavaのURL';
var s = d.getElementsByTagName('script')[0];
s.parentNode.insertBefore(e, s);
})(document);
</script>
asyncのみ
<script type="text/javascript">
function loadScript(src, callback) {
var e = document.createElement('script');
if (e.readyState) { // IE
e.onreadystatechange = function() {
if (e.readyState == 'loaded' || e.readyState == 'complete') {
e.onreadystatechange = null;
callback();
}
};
} else { // Others
e.onload = function() {
callback();
};
}
e.type = 'text/javascript';
e.async = true;
e.src = src;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(e, s);
}
// スクリプトの非同期読み込みと起動
loadScript('外部ファイルjavaのURL', function() {
kickoff();
});
</script>
上記にasyncとdeferの両方かなぁとdeferを追加したもの
<script type="text/javascript">
function loadScript(src, callback) {
var e = document.createElement('script');
if (e.readyState) { // IE
e.onreadystatechange = function() {
if (e.readyState == 'loaded' || e.readyState == 'complete') {
e.onreadystatechange = null;
callback();
}
};
} else { // Others
e.onload = function() {
callback();
};
}
e.type = 'text/javascript';
e.async = true;
e.defer = true;
e.src = src;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(e, s);
}
// スクリプトの非同期読み込みと起動
loadScript('外部javaファイルのURL', function() {
kickoff();
});
</script>
まとめ
やはり、
ページの表示速度は早い方がユーザビリティもあるし、
何より訪問使用としてくれる方が待たなくて良いです。
あまりに遅いとページが表示される前に離脱or諦める。
ということに繋がりかねません。
なので、
ここ数日、
サイト表示速度の検証・見直しをしまくっていました。
が、
結局Chromeにおいての表示は解決できず…。
ですが、
Chromeを使用しているユーザは、
ある程度パソコンに詳しい方と思われるのと、
私自身、
プログラマーではないので、
Syntaxhighlighterを使用してのページがあまりないです。
とりあえず結論
上記のことを鑑みて、
解決方法が見つかる
or
Chromeがうまく対応してれるまで、
しばらく、
一番シンプルな方法（1行のみ）にしておこうと思います。
コメント