タグ

domに関するbleu-bleutのブックマーク (3)

  • サイトのパフォーマンス改善で重要なクリティカル レンダリング パスについて | コリス

    ブラウザがページを表示する際にサーバーからHTMLのレスポンスを受け取ると、スクリーンにピクセルが描画されるまでに多くのステップが必要になります。ブラウザがページの最初のペイントを実行するために必要とするこのシーケンスは「クリティカル レンダリング パス(Critical Rendering Path)」と呼ばれます。 クリティカル レンダリング パスを理解することで、サイトのパフォーマンスを改善するのに役立ちます。 Understanding the Critical Rendering Path 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 クリティカル レンダリング パス(Critical Rendering Path)には、6つの段階があります。 クリティカル レンダリング パスの6つの段階 01. DOMツリーの構築

    サイトのパフォーマンス改善で重要なクリティカル レンダリング パスについて | コリス
    bleu-bleut
    bleu-bleut 2017/02/28
    DOMツリー、CSSOMツリー、JavaScriptの実行、レンダリングツリー(display:noneは含めない)、レイアウトの生成(幅とかの計算?)、ペインティング。
  • リアルな DOM はなぜ遅いのか - steps to phantasien

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

  • What Is The DOM? | CSS-Tricks

    DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! A reader recently wrote in asking me what the DOM was. They said they’ve heard it mentioned and alluded to, but aren’t sure they really understand it. We can fix that. But the HTML you write is parsed by the browser and turned into the DOM. View Source just shows you the HTML that makes up t

    What Is The DOM? | CSS-Tricks
    bleu-bleut
    bleu-bleut 2014/10/14
    DOMって、「HTMLでコードされたものを、JavaScriptやAJAXを通して出力されたもの」みたいな理解でいいんだっけ?
  • 1