代码之家  ›  专栏  ›  技术社区  ›  Moses

浏览器如何读取和解释CSS?

rendering browser css
  •  22
  • Moses  · 技术社区  · 15 年前

    两部分问题:

    1. 浏览器是否有一个内置的CSS解释器,就像JavaScript一样?
    2. 浏览器究竟什么时候读取CSS,什么时候应用CSS?

    具体地说,我想澄清一下,JavaScript和CSS与JavaScript的区别是什么,或者为什么不同,您需要特别等待window.onload,这样解释器才能正确地获取elementbyid。但是,在CSS中,您可以选择样式并将其应用于类和ID,这一切都是老生常谈。

    (如果这很重要,假设我指的是一个基本的HTML页面,头部有一个外部样式表)

    7 回复  |  直到 9 年前
        1
  •  8
  •   Aaron    11 年前

    如果您最近一直在处理一个缓慢的连接,您会发现当元素(缓慢)出现时,CSS将被应用到元素上,而当DOM结构加载时,实际上会回流页面内容。由于CSS不是一种编程语言,它不依赖于在给定时间可用的对象来正确解析(javascript),并且浏览器能够简单地重新评估页面的结构,因为它通过将样式应用于新元素来检索更多的HTML。

    也许这就是为什么,即使在今天,移动Safari的瓶颈并非一直是3G连接,而是页面呈现。

        2
  •  21
  •   Cœur Gustavo Armenta    9 年前

    CSS呈现是一个有趣的主题,所有竞争对手都在努力加快视图层(HTML和CSS)呈现速度,以便在眨眼间为最终用户提供最佳效果。

    首先,是的,不同的浏览器都有自己的CSS解析器/渲染引擎

    所有这些呈现引擎都包含css解释器和 html dom parser.>

    所有这些引擎都遵循以下列出的模型,这些是W3C标准的一组

    < Buff行情>

    注意:所有这些模型都是相互关联和相互依赖的。他们是 不是单独的模型定义呈现CSS的标准。这些模型 阐明如何基于优先级(如内联样式)处理CSS, 特异性等

    < /块引用>

    说明:

    第1阶段:

    所有浏览器都会从服务器下载HTML和CSS脚本,并从名为 内容树的树中将HTML标记解析为DOM节点开始。

    当HTML文档被解析为浏览器呈现引擎时,会构造另一个名为“呈现树”的树。此树是可视元素,按它们的显示顺序排列。

    firefox称之为帧,webkit的人称之为渲染器或渲染器对象。

    见下图:(来源: html5 rocks )

    第2阶段:

    在上述过程之后,这两棵树都会经历布局过程,这意味着浏览器会告诉视区每个节点必须放置在屏幕上的位置。

    这是由 w3c定义的定位方案。 (follow this link for detailed info) which instructs the browser on how and where elements are to be placed.以下是3种类型。

    第3阶段:

    现在,最后一个阶段叫做“绘画”。这是一个渐进的过程,在这个过程中,渲染引擎遍历每个渲染树节点,并使用UI后端层对它们进行可视化绘制。此时,所有的视觉效果都会像字体大小、背景色、表格绘制等一样应用。

    < Buff行情>

    注意:如果您试图打开任何 网页连接缓慢。为更好的用户提供最现代的浏览器 体验尽可能快地显示元素。这给了 用户认为页面正在加载,必须等待完成。

    < /块引用>

    更好地理解工作流的框图

    source html5 rocks

    • 网络工具包:

    • Mozilla壁虎:

    参考:(请阅读以下链接。它们是与此主题相关的网络上可用的最佳资源)。

    一眨眼就能给最终用户带来最佳效果。

    首先,是的,不同的浏览器都有自己的CSS解析器/渲染引擎

    • 铬,歌剧院(15版)-使用 Webkit 拨叉 Blink 渲染引擎
    • Safari-使用WebKit(现在转到WebKit2)
    • Internet Explorer-使用 Trident 渲染引擎
    • Mozilla Firefox-使用Gecko

    所有这些呈现引擎都包含CSS解释器和 HTML DOM parser .

    所有这些发动机都遵循以下列出的型号,这些是 W3C standard

    注意:所有这些模型都是相互关联和相互依赖的。他们是 不是单独的模型定义呈现CSS的标准。这些模型 阐明如何基于优先级(如内联样式)处理CSS, 特异性等。

    说明:

    第1阶段:

    所有的浏览器都从服务器下载HTML和CSS脚本,然后在一个名为 内容树 .

    当HTML文档被解析为浏览器呈现引擎时,构建另一个名为 渲染树 . 此树是可视元素,按它们的显示顺序排列。

    firefox称之为帧,webkit的人称之为渲染器或渲染器对象。

    见下图:(来源: HTML5 Rocks )

    enter image description here

    第2阶段:

    在上述过程之后,这两棵树都会经历 布局过程 这意味着浏览器告诉视区每个节点必须放置在屏幕上的位置。

    这被定义为定位方案 W3C (有关详细信息,请访问此链接) 它指示浏览器如何和在何处放置元素。以下是3种类型。

    • 正常流量
    • 漂浮物
    • 绝对位置

    第3阶段:

    最后一个阶段是 绘画 . 这是一个渐进的过程,在这个过程中,渲染引擎遍历每个渲染树节点,并使用UI后端层对它们进行可视化绘制。在这一点上 visual Fx 适用于字体大小、背景色、桌面绘制等。

    注意:如果您试图打开任何 网页连接缓慢。为更好的用户提供最现代的浏览器 体验尽可能快地显示元素。这给了 用户认为页面正在加载,必须等待完成。

    更好地理解工作流的框图

    来源 HTML5 Rocks

    • Webkit:

    enter image description here

    • Mozilla壁虎: enter image description here

    参考:(请阅读以下链接。它们是与此主题相关的网络上可用的最佳资源)

        3
  •  6
  •   Chuck    15 年前

    是的,浏览器内置了一个CSS解释器。之所以不“wait until window.onload”,是因为虽然javascript是一种图灵完整的命令式编程语言,但css只是一组样式规则,浏览器将其应用于遇到的匹配元素。

        4
  •  6
  •   stefannh    14 年前

    浏览器从右向左读取CSS行。正如Mozilla所说,这就是谷歌所说的。谷歌说“引擎从右到左评估每个规则” http://code.google.com/speed/page-speed/docs/rendering.html . Mozilla说,“样式系统通过从键选择器开始,然后向左移动”打开 https://developer.mozilla.org/en/Writing_Efficient_CSS

    以这个css行为例:“.item h4”。浏览器首先搜索页面上的所有“h4”标记,然后查看h4标记是否具有类名为“item”的父级。如果找到了一个,它将应用CSS规则。

        5
  •  5
  •   joggink    15 年前

    我最近在google page speed上偶然看到了这篇文章:

    当浏览器解析HTML时,它构造一个内部文档树,表示要显示的所有元素。然后,它根据标准的CSS级联、继承和排序规则,将元素与各种样式表中指定的样式匹配。在Mozilla的实现中(可能还有其他实现),对于每个元素,CSS引擎搜索样式规则以找到匹配项。引擎从右到左评估每个规则,从最右边的选择器(称为“键”)开始,并在每个选择器中移动,直到找到匹配项或丢弃该规则。(选择器是应用规则的文档元素。)

    http://code.google.com/speed/page-speed/docs/rendering.html

        6
  •  2
  •   maioman    11 年前

    这是我找到的关于浏览器如何处理HTML和CSS的最佳描述:

    呈现引擎将开始解析HTML文档,并将标记转换为一个名为“内容树”的树中的DOM节点。它将解析样式数据,包括外部CSS文件和样式元素。样式信息以及HTML中的视觉指令将用于创建另一个树-渲染树。

    一般来说,渲染引擎的工作是:

    • 标记化规则(将输入拆分为标记,即lexer)
    • 根据语言语法规则分析文档结构构建解析树

    CSS解析器

    与HTML不同,CSS是 context free grammar (具有确定性语法)。
    所以我们会 CSS specification 定义CSS词汇语法和语法语法, 解析器通过样式表应用。

    词汇语法(词汇)由每个标记的正则表达式定义: 

    comment     \/\*[^*]*\*+([^/*][^*]*\*+)*\/
num     [0-9]+|[0-9]*"."[0-9]+
nonascii    [\200-\377]
nmstart     [_a-z]|{nonascii}|{escape}
nmchar      [_a-z0-9-]|{nonascii}|{escape}
name        {nmchar}+
ident       {nmstart}{nmchar}*

    “ident”是标识符的缩写,类似于类名。“name”是元素ID(由“”引用)

    语法语法描述见 BNF . 

    ruleset
  : selector [ ',' S* selector ]*
    '{' S* declaration [ ';' S* declaration ]* '}' S*
  ;
selector
  : simple_selector [ combinator selector | S+ [ combinator selector ] ]
  ;
simple_selector
  : element_name [ HASH | class | attrib | pseudo ]*
  | [ HASH | class | attrib | pseudo ]+
  ;
class
  : '.' IDENT
  ;
element_name
  : IDENT | '*'
  ;
attrib
  : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
    [ IDENT | STRING ] S* ] ']'
  ;
pseudo
  : ':' [ IDENT | FUNCTION S* [IDENT S*] ')' ]
  ;

    有关浏览器工作流的详细说明,请查看此 article .

        7
  •  1
  •   Rhys    15 年前

    我相信浏览器会根据自己的发现来解释CSS,其效果是,在主体(内联)中的CSS优先于在头部中的CSS(外部也是如此)。

    推荐文章
    DiscreteTom  ·  JavaScript structuredClone在Chrome/Edge中获得了“非法调用”,但在NodeJS中没有
    2 年前
    Ish Mahajan  ·  WebTransport的浏览器兼容性
    2 年前
    Lixin Wei  ·  为什么WebRTC可以在未经我许可的情况下获取我的本地IPv6地址?
    2 年前
    Václav Procházka  ·  动态创建获取和解析脚本的顺序
    2 年前
    jani  ·  检查安装了哪些浏览器,然后在其桌面上创建快捷方式
    2 年前
    Italy Zia  ·  我收到一个“拒绝执行来自的脚本”http://localhost:3000/js/dashboard/dashboard.js',因为其MIME类型('text/plain')不可执行
    2 年前
    kakakali  ·  为什么appendChild()会丢失一些子项?
    2 年前
    Djaro  ·  人们在我的标签上按下shift,但在另一个标签上释放它。如何防止Ctrl+Shift+Tab破坏我的“Shift_pressed”变量?
    2 年前
    StuartN  ·  使用默认搜索引擎的HTML搜索链接
    2 年前
    Vindicated  ·  如何访问当前未连接到的URL的本地存储?
    2 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号