タグ

DOMに関するsasaplus1のブックマーク (5)

  • リアルな DOM はなぜ遅いのか - steps to phantasien

    これは VirtualDOM Advent Calendar 2014 に勝手に参加する記事です。 あたたかい春の昼下がりのこと、あるブラウザベンダの社内を不穏な噂が駆け巡った。 「React.js なるライブラリ、どうも仮想 DOM というやつのせいで速いらしいぞ」 もうリアルな DOM はお役御免、ブラウザも商売上がったりか・・・。雇用に不安を覚える人(私)がいる一方、 そのアイデアをとりこんでブラウザの DOM を速く出来ないかと考える人たちもいた。 仮想 DOM はなぜ速いのか。誰かのつてを辿って React.js チームにおいでいただき、速さの秘密をテックトークしてもらう。 イミュータブルなデータ構造による単純化、非同期適用による処理のバッチ化、差分アルゴリズムによる副作用の最小化… いくつかのアイデアはブラウザからはどうにもならないが、たとえば非同期化なんかは形は違えどブラウザ

  • 仮想DOMテンプレーティング概念

    ͭ·ΓͲ͏͍͏͜ͱ͔ //Ͳ͔͜Ͱݺ͹ΕΔϋϯυϥ var count = 0; function onClick(){count++; update()}; //ΫϦοΫͷ౓ʹຖճݺͼ͍ͨʂʂʂ function update(){ document.body.innerHTML = ''; var html = renderHTML({count: count}); document.body.innerHTML = html; }

    仮想DOMテンプレーティング概念
  • Virtual DOMのアルゴリズムが知りたくてvirtual-domのコードを読んだ話 - saneyuki_s log

    Reactの登場以来気になっていた、Virtual DOMアプローチの具体的な差分抽出手法について、virtual-domを読んで確認してみた。 Reactをいきなり読むのは面倒くさかった・ミニマムな実装から読みたかったというのが、こっちを選択した理由。Reactのアルゴリズムが参考にされているものの、Reactには存在する特定の最適化が入ってないかもしれないので、あくまでもReact系のVirtual DOMを実装するには最低限何が必要かを知る程度のものと判断してほしい。 virtual-domについて ReactのVirtual DOM部分だけを切り出して再利用可能な形で再実装したライブラリ。elm-htmlとかMercuryといった箇所でvDOMインフラとして既に使われているので、まったくの趣味プロダクトという訳でもなくなっている。 README.md中での触れられている通り、Vir

    Virtual DOMのアルゴリズムが知りたくてvirtual-domのコードを読んだ話 - saneyuki_s log
  • メモログ

    💡 Personal notes about somthing I'm interested in Page objects - watir-webdriver - GitHub Page Objects is a design pattern to model the application under test as objects in your code. Page Objects eliminate duplication by building an abstraction that allows you to write browsers tests for maximum maintainability and robustness. ウェブアプリケーションなどの自動テストを作成する場合に、どのようにテスト(スイート)を構成していくかは結構悩みどころであります。ブラウザの

  • 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の使いどころ
  • 1