さんまがおいしい季節だねー(´・ω・`)

<script>タグのasync属性を使わずに非同期でJavaScriptを読み込む方法

JavaScript — タグ: — さくら @ 2010/07/03 18:16

HTML5 では <script> タグに async という属性が加わってまして、これを指定しておくと src で指定された JavaScript ファイルの実行が非同期で行われます。(src 属性を指定しないと async は意味を持ちません。)

<script type="text/javascript" src="http://..." async="async">
</script>

ググってると async の値として async=”true” を指定しているページが多いようですが、W3C の HTML5 の定義(4.3.1 The script element2.4.2 Boolean attributes 参照)だと空の文字列か属性名そのものを指定しろってことになってますので、こっちが正しいです。(たぶんw)

If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute’s canonical name, with no leading or trailing whitespace.
2.4.2 Boolean attributes

まあ仕様書は読みにくいかもしれませんので、細かいことは w3schools.com の HTML 5 script Tag をご覧ください。こっちにはガッツリ値は “async” と書いてます。(HTML5 は XHTML じゃないので、面倒な話に関わりたくなかったら async 属性には値を指定しない方がいいと思いまつw)

いきなり話がだいぶずれちゃいましたが、とりあえず HTML5 では <script> タグに async 属性が追加され、これを使うと非同期で JavaScript を読み込むことができます。

※ただし IE6 は除く

Google Code Blog の Google Analytics Launches Asynchronous Tracking によると、Firefox 3.6 が始めて公式に async 属性をサポートしたブラウザらしいす。async 属性だけだと古いブラウザでは非同期になりませんので DOM を使って非同期になるようにコーディングしないといけません。幸い Google Code Blog に以下のような記述がありますので、古いブラウザでも同じ効果が得られます。

While it creates the same effect as adding a <script> element to the DOM, it officially tells browsers that this script can be loaded asynchronously.
Google Analytics Launches Asynchronous Tracking

ちょっと言い訳

誤解の無いよう先に書いときますと、時系列的には

 AZlink/widget (embed) でほぼ完全な非同期コードが必要になった
  ↓
 色々試す
  ↓
 でけた\(^o^)/
  ↓
 ブログに書こうそうしよう!
  ↓
 ついでにちゃんと調べとくか←今ここ

という順になってまして、調べたついでに Google Analytics のこと書いちゃいましたが基本的に書きたかったことは Google Analytics の非同期コードとはあんま関係ないす。なら GA のこと書くなって感じすが、せっかく調べたんだからいーじゃんいーじゃんすげーじゃん(古w)。

とりまついでなんで GA のコード(ga.js)を見てみたらだいたい似たようなことしてましたが、要求事項が違うようでコードも微妙に違います。ということで GA とはあんま関係ないんだからねっ!

ということでやっと本題す。前置き長くなってどーもすいません。

setTimeout(function() {
    var head = document.getElementsByTagName("head")[0] ||
               document.documentElement;
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://...';
    head.appendChild(script);
}, 0);

<script>タグのasync属性を使わずに非同期でJavaScriptを読み込むには、setTimeout(, 0) の中で DOM オブジェクトを head 要素にひっつけるだけでいいす。(ちなみに ga.js では setTimeout してないのですが、これ入れないと JavaScript の読み込みでブロッキングが発生します。コードの実行はたぶん非同期なんでしょう。Firefox 3.5.7 で確認。)

head エレメントの取得は、document.getElementsByTagName(“head”)[0] || document.getElementsByTagName(“body”)[0] の方が手堅いかもしれません。(ga.js はこうなっとりました。でも GA は関係な(ry。)ただ、たしか head 要素が取れない時があるのは Opera だったと思うので、サポートするブラウザを IE5.5 以降とするなら上のコードで問題ないす。

ちなみに jQuery も head の取得に上と同じコードを使ってるので(っつーか上のコードの head を取得する部分は jQuery からパクったを参考にしたものです)、これが動かないブラウザだと jQuery も動かないので昨今の状況を鑑みると充分と思います。

なお、非同期で読み込んだ JavaScript で定義されてる関数を呼び出す場合、スクリプトの読み込みが終わるのを待ってから実行する必要があります。

例えばこういう JavaScript ファイルがあって、

// myfunc.js
function myfunc() {
    alert('myfunc was loaded!');
}

それを非同期で読み込んですぐ myfunc を実行しようとしても、

setTimeout(function() {
    var head = document.getElementsByTagName("head")[0] ||
               document.documentElement;
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'myfunc.js';
    head.appendChild(script);
}, 0);

myfunc();

このタイミングでは myfunc は未定義です。JavaScript の実行キューは一本なので、setTimeout(, 0) が myfunc よりも先に実行されることはありません。未定義の関数を呼び出すとエラーになりますので、myfunc が定義されてから関数を実行するようにコードを書き換える必要があります。

リトライ&ゴーはarguments.calleeとsetTimeoutを使ってJavaScriptのリトライ処理を簡単に書く方法で説明した方法が簡単だと思います。で、完成形はこんな感じす。

setTimeout(function() {
    var head = document.getElementsByTagName("head")[0] ||
               document.documentElement;
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'myfunc.js';
    head.appendChild(script);
}, 0);

(function() {
    if (typeof(myfunc) == 'undefined') {
        setTimeout(arguments.callee, 15);
        return;
    }
    myfunc();
})();


てな感じで前の記事から続いていたのでつ。

続く

22件のコメント »

  1. It’s nearly impossible to find well-informed people in this particular subject, however, you seem like you know what you’re talking about!
    Thanks

    コメント by http://www.seoindiaconsultants.com — 2013 年 4 月 28 日 @ 22:45
  2. I got this web page from my pal who informed me concerning
    this web site and at the moment this time I am visiting this web page and reading very
    informative articles at this time.

    コメント by Rolex Replica Watches UK — 2013 年 7 月 24 日 @ 07:50
  3. 未定義の関数を呼び出すとエラーになりますので、myfunc が定義されてから関数を実行するようにコードを書き換える必要があります。

    コメント by data visualization tools — 2013 年 12 月 9 日 @ 19:38
  4. これは偉大なポストです!それは非常に有益だった。私はあなたの仕事の多くを読むことを楽しみにしています。

    コメント by college personal statement format — 2013 年 12 月 17 日 @ 08:40
  5. Great site you have got here.. It’s difficult
    to find good quality writing like yours these days. I seriously
    appreciate individuals like you! Take care!!

    コメント by url — 2013 年 12 月 18 日 @ 05:22
  6. First of all I want to say fantastic blog! I had a quick
    question that I’d like to ask if you do not mind.

    I was interested to find out how you center yourself and clear your mind before writing.

    I have had a tough time clearing my mind in getting my thoughts out.

    I truly do take pleasure in writing but it just seems
    like the first 10 to 15 minutes are wasted simply just trying to figure out how
    to begin. Any suggestions or tips? Thank you!

    コメント by homepage — 2013 年 12 月 18 日 @ 05:54
  7. This paragraph will assist the internet people for setting up new weblog or even a blog from start to
    end.

    コメント by free blog — 2013 年 12 月 18 日 @ 07:30
  8. Hello to all, how is everything, I think every one is getting more from this site,
    and your views are nice for new users.

    コメント by Gabrielle — 2014 年 6 月 29 日 @ 15:47
  9. bookmarked!!, I really like your blog!

    Visit my web site nike air jordan 12 retro

    コメント by nike air jordan 12 retro — 2014 年 7 月 1 日 @ 12:53
  10. I got this site from my buddy who informed me about this
    website and at the moment this time I am browsing this site and reading very informative articles at
    this place.

    コメント by hacking credit card numbers 2014 — 2014 年 7 月 21 日 @ 02:22
  11. What’s up it’s me, I am also visiting this site daily, this web page is really pleasant and the users are really sharing fastidious thoughts.

    コメント by Brazzers free premium accounts update 2014 — 2014 年 9 月 23 日 @ 11:55
  12. バッグ

    タグのasync属性を使わずに非同期でJavaScriptを読み込む方法 | さくらたんどっとびーず

    トラックバック by バッグ — 2014 年 9 月 25 日 @ 02:19
  13. I read this post fully about the resemblance of
    latest and preceding technologies, it’s amazing article.

    コメント by www.telefonsex.zone — 2014 年 10 月 7 日 @ 00:08
  14. When I originally commented I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added I get several emails with the same comment.
    Is there any way you can remove people from that service?
    Many thanks!

    コメント by protein supplements seniors — 2014 年 10 月 7 日 @ 22:59
  15. The backend part of your company supports these profit centers.
    As the culture of internet slang grew, it took on new origins from
    pop culture or video games and television. A internet
    marketing business, in a nutshell, a business that’s designed to run on the internet via a website.

    コメント by mdnewsatlanta.com — 2014 年 10 月 12 日 @ 12:57
  16. VirMax Maximum Male Enhancer

    A scientifically developed and patented once a day formulation intended
    for guys of all ages who prefer to relish healthy sexual performance lasting up
    to eight hours from a natural nutritional supplement,
    and a spontaneous, dependable, extreme.
    http://www.virmaxinfo.com/VirMax-T-Testosterone-Booster.aspx
    The below is breakdown of the components of VirMax Maximum Man Enhancer’s features:

    Epimedium (Horny Goat bud)
    This place herb got its name, horny goat bud, from the legend
    that the herder noticed his goats becoming more sexually active after
    eating the place.

    L-Arginine HCL
    L Arginine is the only recognized reactant for (NO).
    The body has to construct NO away of Arginine
    in the blood, when the intercourse wood is reached by the signal from the
    mind for an erection. This neurotransmitter then enters the blood,
    relaxing muscles and blood vessels, empowering an erection to occur.

    L-Glutamic Acid
    L-glutamic acid functions as a neurotransmitter in the human body and helps you to boost sense during
    a sexual encounter. The nerve cells must be stimulated successfully in a
    row to transport messages in the body. Following this excitement, the
    neurotransmitter must be carried right back to the sooner cell
    which previously discharged it in order to pass-along the
    message. When right back in the old cell, it
    is turned into l glutamine in order that the next cell will not unexpectedly excite and deliver a bogus information. This way,
    a second and unwelcome pleasure of the nerve cells can be
    avoided, last but not least L-Gln is turned back back to glutamic acid for the cycle to start again when required.

    L- the effectiveness of L-Arginine increases because it decreases the transition of
    L-Arginine from the vascular program back to the muscle
    fibers, enabling the man to keep up an erection for
    a longer period of time.

    L-Alanine
    Studies have shown that pro-state liquid has a high-concentration of L-alanine.
    Adding added LAlanine may shield the prostate gland via a
    growth that is unusual. A prostate gland that
    is wholesome is key to sexual function in men.

    Ginseng is a root that is proven to play with a role in both improvement and increase in sexual purpose.

    Ginkgo Biloba
    Gingko biloba has been found improve sexual function and to boost blood flow

    Angelica Pubescens
    Angelica Pubescens provides numerous benefits that are key as it helps improve sex drive
    increase blood circulation and avoid premature ejaculation.

    Cnidum Monnieri
    It is a Chinese plant that is put to use for centuries to boost a healthy reproductive system.
    Now, it is mostly used for guys to to aid urogenital health and a
    naturally healthy libido. It also provides assistance for
    endurance levels and normally wholesome vitality.

    Saw Palmetto
    Saw Palmetto can be used to treat the symptoms. A prostate gland that is healthy is
    key to sexual function in men.

    コメント by virmaxinfo info best product Travis Pendergast — 2014 年 10 月 24 日 @ 14:51
  17. サイトです。 brin 体質改善のための断食を紹介するサイト。静養院断食療養所での一ヶ月に及ぶ断食体験記。自宅でできる週末プチ断食。これから断食してみたい方美しくダイエットしたい方必見! りょっこ シングルマザーの貯める家計作りを紹介しています umekk
    美容や健康など日々忙しいママの為のポータルサイトです。 りん 安激安便利なオンラインショップ情報お悩み解消商品お得で役に立つサービスをご紹介しています。 でこでてぞう 暮らしに役立つお得情報話題商品満載のオンラインショップe-Selectです。 Gusei ダイエット健康茶青汁コエンザイムQ10ヒアルロン酸などおすすめの商品だけを厳選紹介しています。
    aki 通販でお取り寄せできる北海道の新鮮な魚介類や特産物などをご紹介し
    ています。 ミック このサイトで見つかるあなたにピッタリのキャッシング。損しないために金利や限度額を徹底比較。 haru* 33歳で3000万貯蓄した管理人haru*がワクワクする収入情報や貯金のコ ツゆとりの暮らしへの提案をしてます。3000万貯蓄の道のりも公開中♪ とも お金で苦労しないための知識を紹介中!クレジットカードの知識や アフィリエイト節約情報などのお金に関わる全般の知識を公開中♪ fukui フォトフレームボトルグラス等ガラス彫刻によるオーダーメイドギフトの制作販売。インテリア用ガ ラスへのエッチング装飾も。 なおちー FPママが節約ワザと暮らしのアイデア住宅ローン返済家計簿出産育児に関するお金などを紹介しています。また重曹や酢を使ったナチュラルクリーニングについてもレポートしています。 happy 自身に起こった出来事友人からの情報などから日々の生活に役立つ話題をブログサイトに公開しています。 incme キャッシングが初めてという方のための入門サイトです。
    ひろぽん インターネットの便利な使い方と本当に便利な使えるサイト」を紹介するサイトです。厳選されたサイト情報のみを紹介しております。 デイビッド マイレージプログラム案内サイトです。よくある質問集提携航空会社一覧細かい 加算率チャート賢いマイルの貯め方と使い方裏技などを紹介しています。 me 日常の節約術を中心に家計管理方法やお小遣いサイトの利用方法などを紹介しています。
    圭介 探偵 カジノ イカサマ マカオ それは彼の勝利の後彼を祝福する喜びに変わったと語っていました。

    コメント by マニラ カジノ — 2015 年 1 月 29 日 @ 23:29
  18. I’m impressed, I have to admit. Rarely do I encounter a blog that’s both equally educative and engaging, and without a doubt, you’ve
    hit the nail on the head. The problem is something too few men and women are speaking intelligently about.
    I’m very happy I came across this during my search for
    something regarding this.

    コメント by ประตูรั้ว — 2015 年 4 月 2 日 @ 21:30
  19. This story is complete garbage. What I get from reading this is a company is trying to start up and a quack reporter is trying to derail the company. The company is internationaly registered (new), a holding company in Delaware (new), the nysohedge site clearly says (Website Under Construction) and it is up, the Folayan financial site IS A TEMPLATE! Dude; There is no Fraud, no illegal activities, nothing, just some guy (Clearly an African of sort) starting a new investment firm.
    This cries out RACISM. Shame on you Roddy Boyd of Southern Investigative Reporting Foundation. What a RODDY BOYD a RACIST PIG!

    コメント by liendo — 2016 年 7 月 28 日 @ 17:06
  20. |ドルチェ&ガッバーナ偽物

    コメント by シャネル財布スーパーコピー — 2016 年 9 月 21 日 @ 20:00
  21. 脱毛サロンのシースリーで際立っている特徴は、誰もが「脱毛品質保証書」が発行されることと答えるでしょう。サロンで受けられる脱毛は永久脱毛とは言えません。それを受けて、シースリーでは回数や期間を無制限で、規定の契約期間中はもちろん、その期間が終わった後も新たに料金を払うことなく確実に脱毛を最後まで続けられます。

    コメント by シースリー 天神 — 2016 年 10 月 2 日 @ 06:37
  22. This is a fantastic site. Full of great and helpful info here. I’m sending it to a few pals ans also sharing in delicious. And of course, thanks in your effort!

    コメント by Live — 2016 年 10 月 8 日 @ 22:13

この投稿へのコメントの RSS フィード。 TrackBack URI

コメントする

Copyright © 2017 さくらたんどっとびーず | powered by WordPress with Barecity