Shadow DOMとCSSの現状2024-02-27 DOMDOMトークス #1
レンダリングの仕組みを知り、パフォーマンス向上に活かす
この記事について 勉強会で作成したスライドの内容を簡単にまとめる。 メモレベルですが、どうかあしからず。 主な内容 ・ブラウザのレンダリングの仕組みを把握する ・パフォーマンス向上に使えそうな小ネタの紹介 レンダリングの仕組み 大きく４つのプロセスに分けられる。 Loading Scripting Rendering Painting Loading HTMLやレンダリングに必要なリソースを読み込む。 主な仕事はDownloadとParsing。 Download HTMLを取得し、その中で参照されているリソースがあればそれらを読み込んでいく。 Parsing リソースをレンダリングエンジンの内部リソースに変換する(HTML→DOM Tree、CSS→CSSOM Tree) 構造が複雑になる程、解析に要する時間が増える。 ボトルネックになりがちなところ HTMLのパース中にscriptタグ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
