タグ

ブックマーク / 0-9.tumblr.com (5)

  • ブラウザ上で軽いDOMを使いたい

    documentFragmentを使ってもDOMが重い場合、Server side DOMをブラウザ上で使うと早くなる。 今回はdominoを使った。 試してないけど、jsdomはたぶんブラウザ上では動かない(node向けの依存ライブラリがかなりあるので。dominoはpure jsでdependenciesが無い) ただ、dominoもそのままglifyJSにかけると壊れる。 正規表現用の文字列(\uxxxx)が壊れるのと、function nameが消えてinstanceofが失敗するのが原因っぽい glifyJSのコマンドラインオプションに --beautify beautify=false,ascii-only=true --keep-fnames を足して解決。 Special characters in Regular Expressions · Issue #171 · mi

    ブラウザ上で軽いDOMを使いたい
  • Webの高速化によって失われるもの

    このエントリはFrontrend Advent Calendar 2013 - Adventar 25日目の記事です。最近asm.jsやPNaClやSPDYやHTTP2.0が話題になっていますが、その影で個人的に気になっていることがあります。 それはHackabilityHackabilityとはこの記事に詳しく書かれていますが、簡単に言うと「外部からの手の加えやすさ」(私の理解では) 最初に挙げた技術asm.jsやPNaClやSPDYやHTTP2.0)は「Webの高速化」という点で大きな効果が期待されています。 しかし、同時に「これまでの技術に比べてHackabilityが低い」という点も持ち合わせています。 (asm.jsは素のJSとはいえ「元コードへアクセス出来ない」という点で既存の技術に比べると低いと考えています) これらの技術が使われている場合、以下の様なことはこれまでより困難

    Webの高速化によって失われるもの
    n2s
    n2s 2013/12/26
  • HTMLElementのdata attributeの使いどころ

    Twitterでアプリの状態をdata-*属性で管理するかJavaScriptの変数で管理するかの使い分けに関して質問を受けたので、まとめてみました。 個人的には以下の様な理由から、data属性はJSから参照する変数の初期値としてのみ使用し、JSから直接状態を保持するための変数としては使用しないほうがいいと思っています。 Objectを保持できない JSのObjectは.toStringされた結果が保持されるため、JSの内部状態をそのまま保持できません DOMアクセスが有るため遅い これに関してはベンチマークをとったわけではないですが、JS内で完結する変数アクセスに比べると速度的なペナルティはあると思います (data-*もCSSから参照できるからそのへんの解決もいるし) jQuery.fn.dataの実装はこれらの問題をある程度解決しているので、「HTMLElement毎の独自変数を保持

    HTMLElementのdata attributeの使いどころ
    n2s
    n2s 2013/08/08
    「data属性はJSから参照する変数の初期値としてのみ使用し、JSから直接状態を保持するための変数としては使用しないほうがいいと思っています」
  • JavaScript書くのに入れとくといいもの

    Chrome CanaryDevToolsも進化してるのでStableではなくCanaryを Local ProxyPCのみならDevToolsだけでもいいけど、スマホのWebView内解析とか考えるとLocal Proxyは必須 Windowsなら Fiddler (無料) Macなら Charles (有料) Macお金払うのが嫌な場合 CocProxy for nginx (無料。CUIRuby版使うくらいならこちらを) JS製が良くてソース読みたいなら Klepto (無料。GUI。不安定) ソースの文字コード変更ChromeでJS、CSS開くと日語が化けるので、初期文字コードをUTF-8に変更 (フォント設定( chrome://settings/fonts )の一番下を「Unicode (UTF-8)」に) “This Frame” Context Menuiframeの

    JavaScript書くのに入れとくといいもの
  • jQueryのliveやdelegateは実際何をやってるのか

    jQueryにはイベント制御のAPIとして、clickやmouseoverの元になるbindの他に、同じような呼び出し方のliveやdelegateが提供されている。 bindはDOM APIで提供されているaddEventListenerのwrapperだが、liveは以下のような実装になっている。 1. 第一引数のイベント名でdocument objectにlive用のイベントハンドラーをbindする 2. 1で設定したイベントハンドラー内でdocument object内に存在する要素上で発生したイベントを全てキャッチする ・イベントの発生元要素がbind時に設定されたセレクタに一致する場合、第二引数に指定されたユーザーのイベントハンドラーを呼び出す これはもともと「多量の要素に対してbindするとUIをロックしてしまう」という問題の対策として知られていた手法だが、liveはそれをj

    jQueryのliveやdelegateは実際何をやってるのか
    n2s
    n2s 2013/01/06
    via id:entry:40965226 / on()は内部でやってることは変わらないのかな?
  • 1