Japanese subtitles

← 03-07 JavaScript and the CRP

03-07 JavaScript and the CRP

Get Embed Code
6 Languages

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

  1. HTMLとCSSを最適化する手段を得たように思います
  2. 次はレンダーツリーですね?
  3. まだJavaScriptを説明していません
  4. 重要なステップなので見てみましょう
  5. 分かりました
  6. 縮小して圧縮してキャッシュするのですか?
  7. はい いずれもよい戦略ですが
  8. JavaScriptにおいて
    パーサをブロックするスクリプトについても
  9. 洞察があるかもしれません
  10. その意味と最適化法について見てみましょう
  11. “Hello World”ページの下端に
  12. 単純なインラインスクリプトを追加しました
  13. 見ていきましょう
  14. まずDOMに達して最初のspan要素を探します
  15. ご覧のように
    “web performance”というテキストを含みます
  16. 次にinnerTextを変え
    CSSプロパティも変えることで
  17. そのDOM要素を修正します
  18. まったく単純ですね
  19. そうですね
  20. つまりJavaScriptがDOMと
    CSSOMの両方を操作できるのです
  21. とても強力なツールです
  22. また少し興味深い点もあります
  23. 次に新たなdiv要素を作成して
  24. テキストの内容とCSSで
    色のプロパティを設定してページに追加します
  25. スマートフォンで
    このページを読み込んでみましょう
  26. “Hello performance students!”の代わりに
  27. “Hello interactive students!”となっています
  28. 新たな要素が下にあることも分かります
  29. 予想どおりです
  30. パフォーマンスを最適化するために
    できることがあるのでしょうか?
  31. もちろんです
    JavaScriptの最適化が講義のすべてかもしれません
  32. この特殊な例ではコードというほどでは
    ありませんがページに含まれています
  33. ブラウザがこのページをどう構築するか
    ステップを戻って考えましょう