忍者ブログ

World of granshe.

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。
[156] [155] [154] [153] [152] [151] [150] [149] [148] [147] [146

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

ブラウザのCSSの読み方

会社で聞いた豆知識をメモ。

その人によると、
ブラウザというものは、CSSを子セレクタから順番に読んでレンダリングしていくというのです。

たとえば、

ul#list li a{
sss:xxx;
}

という記述があったとします。

通常の、JS系の解釈から考えると、
  1. まず、#listのulを探し、
  2. その中のliを探し、
  3. aを探し、
  4. aに対してプロパティを指定する
という流れだと思います。


でも、ブラウザのレンダリングはそうではなくて、
  1. まずaを探し、
  2. 親にliを持つaに絞り、
  3. さらに親にul#listを持つものに絞り
  4. 絞ったものにプロパティを指定する
流れだそうなのです。


だから、ブラウザのレンダリング速度を向上したければ、
子要素にID(やクラス)を指定するのが効果的なのだそうです。
(もちろん、ソースがきれいか汚いかという問題は除いて。)


どうも、コーダーの視点からすると、マークアップをキレイにする方法ばかりに目がいってしまいがちなのですが、
『お客さんの更新しやすさ』
『ユーザーの訪れやすさ、快適さ』

もきちんと考えてマークアップしていかないとなと思ったのでした。
PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
この記事にトラックバックする:
プロフィール
名前: ゆーり
職業: コーダー(模索中
趣味: Web制作
自己紹介: 某Web製作会社の入社5年目のマークアップエンジニア。専門はHTMLとCSSとMT(自称)。
カレンダー
04« 2017/05 »06
S M T W T F S
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
ブログ内検索
忍者ブログ [PR]