タグ

TipsとJavaScriptに関するan-ironic-manのブックマーク (6)

  • JavaScriptでHTMLをダイナミックに書き換える 後編

    まとめて更新を行う(DocumentFragment) これまで、HTMLの要素をDOMを使って自由に操る方法を学んできました。基はすでに身についていますので、あとは応用で、いろいろなWebアプリケーションを作ることができるはずです。しかし、Webアプリケーションを作り込むうえで、パフォーマンスという問題から逃れることはできません。 サーバー上で動作するアプリケーションの場合は、サーバーの負荷を軽減するためにさまざまな工夫をしますが、JavaScriptといえども例外ではありません。近年のWebアプリケーションにおいては、ブラウザ側で実行されるJavaScriptの役割が重要になり、複雑な処理が求められるようになってきました。JavaScriptの書き方によって、表示速度が大きく変わってしまうことがあります。この処理時間とは、ブラウザのレンダリング時間のことです。この点を考慮に入れてJa

    JavaScriptでHTMLをダイナミックに書き換える 後編
    an-ironic-man
    an-ironic-man 2013/10/15
    「追加したいすべてのノードを事前に入れておいたDocumentFragmentで作った器をまるごとHTML上に追加する。レンダリング処理が1回で済むので、パフォーマンスの改善になる」
  • GitHub - gnarf/jquery-ajaxQueue: A simple queue for your ajax requests in jQuery.

    You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

    GitHub - gnarf/jquery-ajaxQueue: A simple queue for your ajax requests in jQuery.
    an-ironic-man
    an-ironic-man 2013/02/20
    jQuery.ajaxと同じ感覚でjQuery.ajaxQueueとやると、他のAjaxリクエストが終わるのを待ってから自分のAjaxリクエストを送る、ということが可能。さよならsetInterval(´;ω;`)ブワッ
  • [PhpStorm/WebStorm]jQueryの非効率な使い方をすると警告してくれるようになった | バシャログ。

    iOS6 のマップって不便って騒がれたけど、それほどでもないよね?…って思ってましたが、最近お店探しで使って全然見つからなかったので、さすがにこれは…と思いMapion インストールしました。使いやすいですね… 今日は、だらしない明らかに非効率なjQueryなコードを書くとやんわりと指摘してくれるPhpStorm/WebStormの機能「Inspection: jQuery usage efficiency 」を紹介します。(バージョン5.0以降) New JavaScript inspections and intentions | WebStorm & PhpStorm Blog 非効率なjQueryのコード っていったいどんなコードなのか。具体的には以下のようなコードです。 $("p").addClass('hover'); $("p").toggle(); 実際にはこんなコードを書

    [PhpStorm/WebStorm]jQueryの非効率な使い方をすると警告してくれるようになった | バシャログ。
    an-ironic-man
    an-ironic-man 2012/12/13
    Vimのプラグインで欲しい(・∀・)
  • JavaScriptで全角英数と半角英数の相互変換 - Rewish@hatena

    全角英数の文字コードから65248個前が半角英数の文字コード。 半角英数の文字コードから65248個後が全角英数の文字コード。 // 半角にしたい str.replace(/[A-Za-z0-9]/g, function(s) { return String.fromCharCode(s.charCodeAt(0) - 65248); }); // 全角にしたい str.replace(/[A-Za-z0-9]/g, function(s) { return String.fromCharCode(s.charCodeAt(0) + 65248); }); 65248の部分は16進数で表される事が多い。 // 半角にしたい str.replace(/[A-Za-z0-9]/g, function(s) { return String.fromCharCode(s.charCodeAt(0)

    JavaScriptで全角英数と半角英数の相互変換 - Rewish@hatena
    an-ironic-man
    an-ironic-man 2012/12/11
    この発想はなかった。英数字の全角半角変換で「全角英数の文字コードから65248個前が半角英数の文字コード」。なるほど。
  • jQueryをロードする際のナイス!と思った書き方

    概要 ▶ 出典:Initializr - Start an HTML5 Boilerplate project in 15 seconds!先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。このブログも実はPC版は形式上HTML5のページになっているんです。見た目はほとんど変わって 出典:Initializr - Start an HTML5 Boilerplate project in 15 seconds! 先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。 このブログも実はPC版は形式上HTML5のページになっているんです。 見た目

    jQueryをロードする際のナイス!と思った書き方
    an-ironic-man
    an-ironic-man 2012/05/21
    "CDN(Contents Delivery Network)"、"プロトコルを省略して「src="//」" "<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>"。なるほど。
  • jQueryのCSSセレクタAPIを高速に扱う方法 - KAYAC engineers' blog

    最近Androidとの抗争が激化しているago(@kyo_ago)です。 jQueryはCSSセレクタを多用する特徴がありますが、jQuery内では実行ブラウザやCSSセレクタの記述によって呼び出されるブラウザAPIが変わり、それによって実行速度にも影響が出ます。 この記事では「セレクタAPIとはなにか」、「CSSセレクタの記述によって呼び出されるセレクタAPIの種類」、「高速なセレクタAPIを使用するための方法」、「高速なセレクタAPIが使われるかどうか確認する方法」などを紹介したいと思います。 (※この記事はJavaScript Advent Calendar 2011 (フレームワークコース) : ATNDの1日目の記事です) セレクタAPIとはなにか セレクタAPIとは「#hoge .huga」のようなCSSセレクタから、DOM上に存在する要素を取得するためのAPIです。 jQue

    jQueryのCSSセレクタAPIを高速に扱う方法 - KAYAC engineers' blog
    an-ironic-man
    an-ironic-man 2011/12/04
    セレクタの指定の仕方で速度が変わる。#hogeなどは高速。一気にセレクタを書かずfindやfilterで絞り込むと低速なAPI使用を少なくできる
  • 1