Surfin’ Safari - Blog Archive » How WebKit Loads a Web Pageにおいて、WebKitにおいて具体的にどういった手順を踏んでページコンテンツのダウンロードとレンダリングが実施されているかが簡単に紹介されている。実際にどういった仕組みになっているのか短くまとまっていて参考になる。
WebKitではWebCoreが主なレンダリングコンポーネントになるという。WebCoreにはドキュメントをフレームへ読み込むパイプラインと、画像やスクリプトなどのサブリソースを読み込むパイプラインの2つのパイプラインが用意されている。つまり、HTMLのダウンロードとレンダリング、画像やスクリプトのダウンロードとレンダリングという2つの処理が別々に走っていることになる。紹介されている画像と、オブジェクトの役割をそれぞれまとめると次のようになる。
オブジェクト | フレームローディングにおける役割 |
---|---|
FrameLoader | フレームローディングの処理を担当。たとえばリンクがクリックされるごとに新しくDocumentLoaderオブジェクトを生成する。生成されたDocumentLoaderはポリシー状態にある。ナビゲーション目的の場合、FrameLoaderは生成したDocumentLoaderオブジェクトをプロビジョナル状態へ移行させる。レンダリングするために十分な情報が揃ったらDocumentLoaderオブジェクトをコミット状態へ移行。結果、フレームに新しいドキュメントが表示される。 |
DocumentLoader | プロビジョナル状態になるとネットワークリクエストを出してドキュメントのダウンロードを実施する。ドキュメントのダウンロードにはMainResourceLoaderオブジェクトを生成して、そちらに処理させる。 |
MainResourceLoader | ResourceHandlerインタフェースを経由して提供されているプラットフォームのネットワークライブラリとやりとりをしてリソースをダウンロードする。サブリソースローディングにおけるSubresourceLoaderとよく似ている。MainResourceLoaderが別途用意されているのは、ResourceHandlerからのコールバック処理といった細かい処理を隠蔽して分離するためと、DocumentLoaderと別のライフタイムを実現するため。 |
オブジェクト | サブリソースローディングにおける役割 |
---|---|
DocLoader | サブリソースのローディングはDouLoaderが担当。Cacheオブジェクトにリソースを要求。 |
Cache | 要求されたリソースがメモリ上にオブジェクトとして確保されていれば、そのオブジェクトを返す。ない場合にはLoaderオブジェクトへリソースをダウンロードするように要求をだし、データを取得してオブジェクトを作成したらDocLoaderへデータを渡す。 |
Loader | SubresourceLoaderオブジェクトを生成してネットワーク通信処理を実施させる。 |
SubresourceLoader | ResourceHandlerインタフェースを経由して提供されているプラットフォームのネットワークライブラリとやりとりをしてリソースをダウンロードする。フレームローディングにおけるMainResourceLoaderとよく似ている。 |
改善すべき問題点 |
---|
FrameLoaderは新しいウィンドウを作成するといったように、フレームローディングという本来すべき仕事をこえてより多くの機能が実装され複雑になっている。 |
FrameLoaderにはloadという名前で違った処理をするメソッドが多数用意されており混乱を招いている。 |
ローディングパイプラインの各ステージは必要以上に強く結びついている。 |
ローディングパイプラインのオブジェクトでは、MainResourceが直接FrameLoaderへデータを渡すといったように低レベルオブジェクトが高レベルオブジェクトへ直接アクセスするというレイヤバイオレーションが発生している。 |
Cacheがサブリソースローディングでしか使われていない。フレームローディングにおいても活用できればよりパフォーマンスの改善が期待できる。 |
How WebKit Loads a Web Pageには、現在の実装が抱えている問題点も短くまとまっており、こうした点を改善する余地があることにも触れている。特にキャッシュについては仕組み上、ドキュメントはキャッシュされない仕組みになっていることがわかり、ここを改善することでパフォーマンスの改善が期待できることがわかる。WebKitはSafariのレンダリングエンジンになっているほか、Chromeでもベースのレンダリングエンジンとして活用されている。