Japanese subtitles

← 02-14 The Render Tree

02-14 The Render Tree

Get Embed Code
6 Languages

Showing Revision 1 created 12/10/2014 by Udacity.

  1. DOMはそのページのすべてのコンテンツを含みます
  2. CSSOMはそのページのすべてのスタイルを含みます
  3. ではどのようにその2つを取得して
  4. 画面上のピクセルへ変換するのでしょうか?
    中間のステップがないようですが
  5. 鋭いですね DOMとCSSOMツリーを組み合わせて
  6. まさにご指摘されたことを表す
    レンダーツリーを作る必要があります
  7. レンダーツリーの最も重要なプロパティの1つは
  8. 視覚的な内容のみ表していることです
  9. 実際の処理においてこれを確認するために
  10. ご覧のシンプルな例に取り組みましょう
  11. 上にDOMツリーがあり 下にCSSOMがあります
  12. レンダーツリーを構築するために
  13. DOMツリーのルートから見ていきましょう
  14. この場合は段落ノードです
    ここにCSSのルールがあるか確かめます
  15. ありました この場合は全テキストを
  16. 16ピクセルのフォントサイズで太字にするという
  17. マッチングルールがあると分かります
  18. そこで段落ノードをレンダーツリーへ
  19. CSSプロパティとともにコピーします
  20. 段落ノードを終えました
    ツリーを下っていきましょう
  21. 次に“Hello”というテキストノードがあります
  22. これをレンダーツリーにコピーします
  23. 次にspanノードにたどり着きました
    ここにもCSSのマッチングルールがあります
  24. spanがあり 確かに段落ノードの子です
    しかしこのルールのプロパティの1つが
  25. display:noneとなっている点に注意してください
  26. これはこのspanの内容を
    レンダリングしてはいけないことを示しています
  27. またレンダーツリーは
    視覚的な内容のみ表示するので
  28. このノードとその子ノードを省略できます
  29. display:noneを引き継ぐので
    子を省略するんですね?
  30. そのとおりです 結果的に
  31. spanノードのすべての子ノードを省略できて
  32. 次のノードへ進めます
    この場合は単に他のテキストノードです
  33. これをレンダーツリーへざっとコピーします
  34. レンダーツリーは
    コンテンツとスタイルの両方を表すのですね
  35. そうです デモの“Hello World”ページを
    見てみましょう
  36. “Hello World”ページのDOMとCSSツリーです
    レンダーツリーを構築するために
  37. DOMツリーのhtmlノードから始めます
  38. htmlとheadセクションは
  39. いかなる視覚的な情報も含まないので
    レンダーツリーから
  40. すぐに取り除いて構いません
  41. 次にbodyノードです コピーしましょう
  42. ツリーの左部分は見覚えがあるはずです
  43. 構築したばかりのものなので
    同様にコピーしましょう
  44. 最後にdivとimgノードがあります
  45. いずれも視覚的な内容を含むので
  46. やはりコピーしてスタイルを
  47. レンダーツリーに変換します
  48. そうしてレンダーツリーと
    画面上のものを比べましょう
  49. レンダーツリーはとてもよい図ですね
  50. 必要のないテキストはなくなっています
  51. 画面上に画像があるはずです
  52. 右側に表示されることが分かります
    これで終わりでしょうか?
  53. まだレイアウトの必要がありますが
    まずは簡単な小テストをしましょう