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

document.writeを非同期コードに置き換える

JavaScript — タグ: — さくら @ 2010/07/07 14:07

ここんとこ JavaScript 関係のネタばっかアップしてきましたが、そろそろ本題に突入です。document.write は色々と便利なのですが、実行が同期されるのがたまに使いにくいところ。

実行が同期されるとはどういうことかと言うと、下のコードで言うと script タグの実行が終わらないと b が絶対に出力されないということです。(script の実行とブラウザのレンダリングが同期してる。)

<script type="text/javascript">
document.write('a');
</script>
b

同期している以上 script の実行が遅いと、その間ブラウザのレンダリングが待たされることになります。例えばポックンのブログとかはサイドバーのブログパーツの実行が遅くて背景の描画が待たされることとかがたまにあります。こういうのは見てる方からするとあまり嬉しくないのでできるだけ無い方がいいす。ただ単純に document.write を使っちゃうと回避できないので、その辺ゴニョゴニョしようってのが今日のお題です。

とりあえず単純に上のコードを非同期にしてみます。

<script type="text/javascript">
document.write('<span id="replacement"></span>');
setTimeout(function() {
    var o = document.getElementById('replacement');
    var p = p.parentNode;
    p.replaceChild(document.createTextNode('a'), o);
}, 0);
</script>
b

document.write 残っとるやないけ!と突っ込まれそうですが、完全に消すことはできません。ほぼ非同期って感じす。なんで上のように明らかに実行の速いコードをほぼ非同期にするのはほぼ意味がありませんが、例として簡単なのでっつー感じで。

とりあえず document.write で入れ替え用のオブジェクトを埋め込んでから setTimeout を実行し、非同期で入れ替え用オブジェクトを置き換えるあたりがキモです。setTimeout の中身が充分重ければ、非同期にすることでブラウザ上での動きがかなり速く感じられるようになります。この辺と組み合わせて、最初に(同期部分で)読み込むコード量を減らしたりとかも効果があると思います。Google Ajax Libraries の google.load とかそういう効果を狙ってだと思います。

ちなみに jQuery とかで ajax した場合の挙動は上のコードと一緒です。

<script type="text/javascript">
document.write('<span id="replacement"></span>');
$.ajax({
    url: "...",
    success: function(data) {
        var o = document.getElementById('replacement');
        o.innerHTML = data;
    }
});
</script>
b

$.ajax が非同期で実行されるので setTimeout するのと変わりません。


本題とか言いつつ、今日は内容が中途半端だったような気がする。

たぶんもう一回続く…

28件のコメント »

  1. He is always prepared to prepare away from menu items on request.

    In my book, it might signify the presentation is of no interest on
    the person or the person is pressed for time. Your
    guests love the improved service and definately will surely be time for your hotel some time and again.

    コメント by doubletree hotel albuquerque — 2013 年 10 月 5 日 @ 10:28
  2. I savor, lead to I discovered just what I used to
    be looking for. You’ve ended my 4 day lengthy hunt!

    God Bless you man. Have a great day. Bye

    コメント by the internet archive wayback machine — 2014 年 10 月 8 日 @ 13:49
  3. Spot on with this write-up, I actually believe this website needs much more attention. I’ll probably be returning to read through more, thanks for the
    advice!

    コメント by LAN — 2014 年 10 月 9 日 @ 09:17
  4. In order for one to input the codes each note needs to be
    strummed. 5) Maintain i – Device hooked up (or maybe fb
    consideration signed throughout). This calls for cracking
    open your own Wii, which in turn voids the warranty.

    コメント by clash of clans gratis spelen — 2014 年 10 月 11 日 @ 03:58
  5. Thanks for finally writing about > document.writeを非同期コードに置き換える
    | さくらたんどっとびーず < Loved it!

    コメント by japanese second hand car sales — 2014 年 10 月 13 日 @ 06:03
  6. Many people living in South America eat the tubers as a fruit,
    together with honey and lemon juice, to add it to the fruit
    salad. Oz said FBCx is especially helpful for those times when you overindulge.

    Mehmet Oz revealed the metabolism-boosting powers of yacon syrup for weight
    loss on the May 26 episode of the Dr.

    コメント by Shayna — 2014 年 10 月 17 日 @ 10:33
  7. This blog was… how do I say it? Relevant!! Finally I have found something that helped me.
    Thank you!

    コメント by handyman definition — 2014 年 10 月 17 日 @ 16:05
  8. Simply wish to say your article is as astounding. The clarity in your post is simply excellent and i can assume
    you’re an expert on this subject. Fine with your permission let me
    to grab your RSS feed to keep updated with forthcoming post.

    Thanks a million and please keep up the gratifying work.

    コメント by imodels holdings agency — 2014 年 10 月 23 日 @ 11:43
  9. Thanks , I’ve recently been searching for information about this topic for
    ages and yours is the greatest I have came upon so far.
    But, what concerning the bottom line? Are you positive
    about the source?

    コメント by nissan — 2014 年 11 月 5 日 @ 13:40
  10. A twin PC icon will appear on the lower right portion of
    the taskbar in the tray area and will flash while sending and
    receiving packets. VPN Internet consists of two features,
    encryption and tunneling. This minimizes operation price of MPLS VPN options and ensures accuracy and reliability of the support.

    コメント by vpn que es — 2014 年 11 月 10 日 @ 05:15
  11. Another example is when you use public Wi – Fi, knowing
    your wireless data can be sniffed out by criminals.
    A green arrow indicates the services for RRS is enabled.
    One of the major problems caused due to internet is security factor.

    コメント by vpn leak test — 2014 年 12 月 10 日 @ 22:13
  12. Hello, after reading this remarkable post i
    am also glad to share my experience here with friends.

    コメント by العاب تلبيس بنات جديد — 2015 年 1 月 12 日 @ 00:35
  13. An impressive share! I have just forwarded this onto a
    friend who was doing a little research on this. And he actually ordered
    me dinner due to the fact that I found it for him… lol. So allow me to reword this….
    Thanks for the meal!! But yeah, thanx for spending the time to talk about
    this issue here on your web page.

    コメント by game — 2015 年 1 月 26 日 @ 17:36
  14. Hi colleagues, its fantastic article about tutoringand fully explained, keep it up all the time.

    コメント by sprowadzanie używanych samochodów z niemiec — 2015 年 2 月 2 日 @ 23:27
  15. I tɦink tҺе admin of this web site is truly ѡorking
    ɦard in favor of ɦis web site, for the reason that here every material іs quality based infօrmation.

    コメント by book font size line spacing — 2015 年 2 月 16 日 @ 15:55
  16. With this, it is safe to conclude that a particular trainer may be effective to some but not to you.

    (Ultimate fighting championship) today where two guys
    are put in octagon shaped ring and duke it out with minimal rules until someone is submitted, knocked out, or the time has run out.
    s main disciples are Barzilan Jiu Jitsu (BJJ), Gracia Jiu Jitsu, karate, judo, kickboxing, and wrestling.

    コメント by martial arts — 2015 年 3 月 10 日 @ 19:56
  17. It’s nearly impossible to find experienced people in this particular subject,
    however, you sound like you know what you’re talking about!
    Thanks

    コメント by 000 views — 2015 年 4 月 19 日 @ 01:46
  18. ” The study found that simply 20 minutes of playing the violent video game “can cause individuals to
    become less physiologically aroused simply by real violence” People desensitized in order to violence are more likely to commit a chaotic act.

    コメント by online no download — 2016 年 2 月 7 日 @ 03:12
  19. Excellent way of describing, and pleasant article to obtain facts regarding my
    presentation focus, which i am going to convey in school.

    コメント by adwords cena — 2016 年 3 月 10 日 @ 18:10
  20. 黒猫のウィズ、パワプロ、etc. どれも中途半端にはまって月々50万円も課金中。

    コメント by パズドラ 課金額 — 2016 年 8 月 16 日 @ 09:19
  21. 眼圧の高めだと、緑内障の原因になるわけですが、緑内障というものは、眼圧の増加が原因で視神経が押し付けされて壊死し、その結果として視野が欠損する症状です。
    治療せずに高眼圧を放りっぱなしにしても、年単位で目に見えるエリアの欠落が重症化し、10年単位の時間をかけて失明に至るような悪化のちょっとずつとしたものです。ほんの一時的な眼圧の急増を不安になる必要はありません。その他には注意することが望ましい点としては、薬の副作用が考えられます。眼圧が増加するといった薬を継続的に摂り入れる状態なんかは、その作用は黙殺禁物です。仮に、個人差は生じますが、ステロイドは眼圧を増加させることがあり、ステロイドの長時間かけて目薬を指すことが原因でもたらされるするステロイド緑内障という病気もあります。なので、高眼圧症など眼圧が不安な状況としたら、眼圧が増加する副作用があるような緑内障禁忌薬は用いないように用心する必要があります。

    コメント by 眼圧を下げる方法 — 2016 年 9 月 10 日 @ 19:13
  22. はじめまして!行きずりの者でいきなりのメッセージですいません。婚活って簡単じゃないですよね、やっぱりほんとに。恋人探しはまあまあ気楽ですが、結婚相手となると気楽ではいられないですよね。わたしも正直だいぶたいへんでしたが、婚活イベントに集中するのをやめてからなんとなくいいかんじになりましたよ。

    コメント by 婚活がうまくいかない — 2016 年 9 月 15 日 @ 14:27
  23. ハロー。
    ネット通販ってかなり便利になりましたね。
    何でも買えて、次の日には届けてくれるし。
    今ではマンションまでもインターネットで契約できる時代になりました。
    そんなネットでの買い物ですが、TVのショッピング番組と連動して電話で検索する人もいるようですね。特にフリーダイヤルを音楽に合わせて宣伝していたりすると、知らずしらずのうちにその音楽を口ずさんでいたり。
    でも、利用しようとしたときにその電話番号がわからなかったり、どのサービスだったか忘れていたりなんてこともあったり。
    そんなときに便利なのが電話番号とホームページのマッチングサイト。こういう便利なサイトがあると全くネットショッピングに困ることもないですね。

  24. アトピーで肌に合う化粧品が見つからないという女性に評判のウィラード・ウォーターについて詳しく調べました。
    敏感肌で辛い思いをしているのでしたら、ぜひ、参考になさってください。

    コメント by ウィラードウォーター — 2016 年 9 月 26 日 @ 21:03
  25. ハロー。
    ショッピングは楽しいですね。
    何も考えず、予算も考えずに買い物ができたらどんなに楽しいだろうかと思います。けれど、実際にはそんなことは難しいから、とにかく価格を比べたり、品質を調べたりするんじゃないでしょうか。
    こんなことをするのはネットが無ければとてもめんどくさいことだったのですが、スマホさえあればとても簡単です。
    ネットで比較と入力して検索したらすぐにさまざまなサービスを比べているホームページに巡りあうことができます。本当に良い物をラクに安く手に入れることができる時代になりましたね。

  26. 長く使っていたり切れ味が劣悪なカミソリでムダ毛の処理を行うと、肌に負担が掛かるのは勿論、衛生的にも良くないことがあり、細菌などが毛穴に入り込んでしまうことも少なくありません。

    コメント by 全身脱毛 天神 — 2016 年 10 月 16 日 @ 09:08
  27. When I initially left a comment I appear to have clicked the -Notify
    me when new comments are added- checkbox and from now on every time a comment is added I recieve
    four emails with the exact same comment. There has to be a means you can remove
    me from that service? Cheers!

    コメント by phone monitoring — 2016 年 12 月 14 日 @ 01:24
  28. Amazonギフト券は大学の生協でも代金が払える手軽なギフトカード。
    最近ではあちこちのネットのプロモーションでもAmazonギフト券がもらえるようになってますね。そんなAmazonですが、日本での拡大もかなりイケてるようです。
    日本のテナント型通販といえば楽天市場でした。楽天はショッピングモールの黎明期から日本のECサイトを独走してきましたがこの最近はAmazonの脅威がすごい勢いで迫る状態となっていますね。
    どうやらついに楽天はAmazonに流通額で逆転されたようですが、逆転を認めたくない経営陣は数字をごちゃまぜにして事実をヤブに隠すというバカみたいな戦略を取ってきています。
    数字上がどうこうって関係ないよね。いまさらそれで株価がどうこうじゃないと思うし。新しいフィンテック領域が芽を出さなければ株価急落ということでしょう。
    それでも楽天は十分に利益はでてるんですけど、上場会社はつらいですね。

    コメント by アマゾンギフト券 買取 — 2017 年 1 月 14 日 @ 11:28

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

コメントする

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