Performance 假设ID是唯一的,CSS快速配置文件可以更快?

Performance 假设ID是唯一的,CSS快速配置文件可以更快?,performance,algorithm,browser,Performance,Algorithm,Browser,介绍了快速轮廓和完全轮廓的概念 “普通CSS解析器”(!),也就是说,解析器算法假设文档中的元素具有id属性和重复(非唯一)值。因此,在“普通CSS解析器”中,像#myID{…}这样的CSS行的解析具有与解析.myClass{…}相同的算法。将来,随着CSS4标准和快速概要文件的采用,将在“解析快速概要文件更快或“解析完整概要文件”之间进行选择 这是一个简单的问题…… 快速配置文件的CSS解析算法,解析“好文档”在假设文档具有唯一ID时可以更快? ... 如果你需要更多的上下文 当我用DOM实

介绍了快速轮廓和完全轮廓的概念

“普通CSS解析器”(!),也就是说,解析器算法假设文档中的元素具有
id
属性和重复(非唯一)值。因此,在“普通CSS解析器”中,像
#myID{…}
这样的CSS行的解析具有与解析
.myClass{…}
相同的算法。将来,随着CSS4标准和快速概要文件的采用,将在“解析快速概要文件更快或“解析完整概要文件”之间进行选择

这是一个简单的问题……
快速配置文件的CSS解析算法,解析“好文档”在假设文档具有唯一ID时可以更快?


... 如果你需要更多的上下文 当我用DOM实现CSS解析时,答案是,因为在解析“好文档”(不是带有重复ID的丑陋文档)时,我可以使用方法,这会更快(!)。。。但这个问题不是关于DOM解决方案,而是关于流行/严肃渲染引擎(如Blink、Geckoor或Webkit)中使用的算法

总结使用唯一ID进行的可能优化(使用非唯一ID时我们丢失了这些优化):

  • id
    值出现的第一个元素中停止
    (并将其缓存在散列中)。(并用“hasID”标记元素)
  • 使用简单的方法将id值转换为元素指针。(缓存在散列中)
  • 使用(更快的)方法,如
    getElementById()
    解析CSS行,如
    #myID{…}
  • 当涉及id时,关系伪类的快速解析,如
    :has(#myId)
    。。。因此,也许我们可以将
    :has(#myId)
    添加到快速概要文件定义中

。。。它们只是我的“个人假设”,对于现实生活中的渲染引擎来说可能不是真的,即使在渲染好的(不难看的)文档时也是如此。

这里有很多,我不确定从哪里开始。我猜是TL;DR只是几个简单的要点:

  • 事情并不像你想象的那样真的有效,但这相当复杂,我正在考虑写一篇关于它的文章

  • 您误解了快速/完整配置文件的意图/原因。我认为这些名字可能没有什么帮助,我最近也在帮助避免这种特殊的混淆——但是理解/真正理解为什么它重要仍然需要理解#1

  • 因此,实际上,您建议的更改将降低而不是提高性能,并且最终不会改变
    :has()
    的实际问题

  • 尝试用尽可能少的词来澄清:CSS,也就是说,应用样式的部分是针对动态树进行的,包括在下载和解析HTML时。很难非常简单地说明(如果我能完成的话,我会在我的帖子中尝试),但是一个非常简单的方法的纯粹数学会像,这是绝对必要的——至少如果你真的想以我们一贯的方式查看页面的话——我们保留CSS现有约束中固有的智能观察的某些方面。从字面上说,所有这些观察都与规则如何与动态树相关,以及如何通过消除必须检查的元素数量和必须根据突变类型检查的规则数量,快速掌握数学(在解析过程中创建元素也被认为是一种变异)已经发生。然而,当您编写JavaScript时,您正在针对树(或树的一部分)评估单个规则只是一次及时的快照,这实际上是一个完全不同的问题,对于如何优化它有不同的答案。简短的回答是:你真的不需要对它进行优化(实际上,你不能对它进行太多优化-成本通常大于收益)因此,像querySelector或find这样的东西有一种策略(树遍历),而dynamic或“live”CSS有另一种策略(同样,它很复杂,我将尝试在其他地方进行更多解释,如果可能的话进行链接)

    考虑到所有这些,在querySelector的情况下,评估像
    :has()
    这样的东西实际上是非常简单的,但是如何在一个实时应用/动态树中真正做到这一点是完全未知的。我们想做的,只是没有人能够弄清楚如何使它不那么糟糕。因此,我们目前拥有的是“概况"。JavaScript,甚至print之类的东西都可以支持完整/静态配置文件,但就目前而言,浏览器——就您可以在样式表中编写的内容和动态应用的内容而言——只能支持快速/动态配置文件。正如您所说,建议不是让浏览器选择是解析一个配置文件还是解析另一个配置文件一种模式(可以在样式表中编写的内容)支持子集,另一种模式(可以在JavaScript中对树的快照进行一次计算的内容)支持整个蜡球

    综上所述,我确实认为我们可以找出如何在合理的树上通过合理的规则数量和一些新的期望(可能的显示模式)获得足够的性能增益关于部分呈现,它不会很糟糕。我个人认为,如果你能做到这一点而不损害任何现有页面,那就足够了。观点各异,到目前为止,对最坏情况的担心是需要几分钟才能绘制一个页面,加上如此多的其他建议和有限的时间,这阻碍了在这方面取得太多进展

    特别是对于ID,改变它们的意思会破坏现有页面,而没有某种“选择加入”,这真的让事情变得复杂