とっととhoge書こう

ああだこうだ言わずテスト書いてhoge出す

ブラウザ

Webフロントエンド ハイパフォーマンス チューニング(2章)のメモ

投稿日:2019年2月24日 更新日:

内容そのままだと流石に著作権法的にも違いますし、個人的にもどうかな、と思うので、自分の言葉でのメモです。
情報正確でない可能性があるので、注意してください。

2.1.2

HTML/CSS/JSの仕様
W3C
https://www.w3.org/

World Wide Webで使用される各種技術の標準化を推進する為に設立された標準化団体、非営利団体

https://ja.wikipedia.org/wiki/World_Wide_Web_Consortium

WHATWG
https://whatwg.org/

XHTMLの規格に不満を持った企業等はW3Cに対抗するWHATWGという対抗団体を立ち上げているが、両団体はHTML5の策定にあたって協力関係にあり、WHATWGによって2004年に定められたWeb Applications 1.0にWeb Forms 2.0を取り入れたものがW3Cの専門委員会に採用され、W3Cより2008年1月22日にドラフト(草案)が発表された。

https://ja.wikipedia.org/wiki/World_Wide_Web_Consortium

W3Cが策定したXHTMLや、W3Cがウェブ開発者の要望を軽視していることなどを不満に思ったApple、Mozilla、Operaの開発者たちによって2004年に結成された。

https://ja.wikipedia.org/wiki/Web_Hypertext_Application_Technology_Working_Group

ECMA International
https://www.ecma-international.org/

Ecmaインターナショナルとは、情報通信技術(ICT)とコンシューマー・エレクトロニクス(CE)の国際的な標準化団体。本部はスイスのジュネーブ。1961年に欧州のコンピューター・メーカーにより設立された欧州電子計算機工業会(European Computer Manufacturers Association、ECMA)が前身。

https://ja.wikipedia.org/wiki/Ecma%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%8A%E3%82%B7%E3%83%A7%E3%83%8A%E3%83%AB

Netscape Communications社とMicrosoft社で異なっていたJavaScriptの仕様を統一し、ECMAScriptとして標準化した団体としても知られる。

https://www.kddi.com/yogo/%E6%83%85%E5%A0%B1%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0/Ecma%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%8A%E3%82%B7%E3%83%A7%E3%83%8A%E3%83%AB.html

2.2.1

ブラウザ内のコンポーネント

  • レンダリングエンジン (Blink, Webkit)
  • JSエンジン (V8, Nitro, SpiderMonkey)

2.5.2

JSエンジンの コンパイル仮想マシン タイプと JITコンパイル 方式があった。
前者はNitro(Safari)、後者は V8。
JITコンパイルはマシンのCPUが直接解釈できて早い。

2.6.1

Calculate Style はCSSセレクタとプロパティ、詳細度、それらの計算のフェーズ。

2.6.2

Layout フェーズは要素の

  • 大きさ
  • マージン
  • パッディング
  • 位置
  • z軸の位置

*Hint.
このフェーズでスケルトンが関係してくる?

2.7.1 ~ 2.7.2

Painting では Display listを作り
Rasterize でピクセル(ビットマップ)へ描画する。このときレイヤーという単位で一枚一枚出す。

*Hint.
描画終わったレイヤーで再レンダリングされる場合がある。
つまり再レンダリングされるおそれがある場合は、スコープを話すために、レイヤー分けるのがよい?

2.7.3

CPUとGPUによるレイヤー合成が行われる。

-ブラウザ

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


関連記事

no image

Core Web VitalsでCLSがなかなか改善できない場合に見るべきこと

Core Web Vitalsの中でもCLS(Cummulative Layout Shift)がなかなか改善しない、と悩んでいる方向けです。 例えばPageSpeed Insightsで分析かけて指 …