목차
样式共享
规则散列(Rule Hashes)
祖先过滤器(Ancestor Filters)
快速路径(Fast Path)
哪些仍然比较慢?
웹 프론트엔드 HTML 튜토리얼 [人肉脑补机翻]CSS Selector Performance has changed! (For the better) by Nicole Sullivan_html/css_WEB-ITnose

[人肉脑补机翻]CSS Selector Performance has changed! (For the better) by Nicole Sullivan_html/css_WEB-ITnose

Jun 24, 2016 am 11:47 AM

CSS选择器的执行效率已经改变了(增强)

像Dave Hyatt的Writing Efficient CSS这样优秀的文章已经帮助开发者们掌握了基本的选择器匹配优化原理. 我们从Steve Souders等大牛那里学到, 选择器是从右到左进行匹配的. 有的选择器匹配方式比较复杂所以应尽量避免使用. 比如说,后代选择器的匹配速度就比较慢,尤其是最右侧的选择器匹配了页面中大量元素的时候. 这些知识在早些年是很有用的. 但随着时间的发展, 感谢Antti Koivisto的努力, 很多选择器的效率问题我们已经无须过于担心了.

Antti致力于Webkit内核的改进工作. 他最近对CSS选择器的匹配机制进行了重要优化. 这些工作已经完成. 他表示:"我认为网页开发者已经无须对选择器进行优化了,那是浏览器引擎开发工程师的工作."

听起来很棒. 我喜欢以对文档结构更有意义的方式来使用选择器,选择器匹配效率优化这方面交给浏览器渲染引擎就好. 那么Antti到底对渲染引擎作了哪些优化呢? 事实上他对webkit渲染引擎的选择器匹配机制进行了多方面的优化. 我们来看看其中最主要的4项:

  1. 样式共享(Style Sharing)
  2. 规则散列(Rule Hashes)
  3. 祖先过滤器(Ancestor Filters)
  4. 快速路径(Fast Path)

    样式共享

样式共享使得浏览器允许样式列表中的元素与之前的相同元素重复相同的样式而不是重复计算渲染.

例如:


foo


bar


如果浏览器内核已经计算好第一个

标签的样式,它就无须再次计算第二个

标签的样式. 这个简单但智慧的改进减少了浏览器的大量工作.

规则散列(Rule Hashes)

现在,我们都知道选择器是从右到左进行匹配的,所以最右侧的选择器十分重要. 规则散列将样式表以最右选择器为基准进行分组,例如下面的样式表将会被分成3组:
a {}
div p {}
div p.legal {}
#sidebar a {}
#sidebar p {}
|a|p|p.legal|
|-|-|-|
|a {}|div p {}|div p.legal {}|
|-|-|-|
|#sidebar a {}|#sidebar p {}|

当浏览器运用规则散列时,它无须分别解析整个样式表中的单个选择器,而是对范围小得多的可能存在匹配的分组进行解析. 规则散列也是个小巧简单却能大幅减少对单个HTML元素进行解析的改进.

祖先过滤器(Ancestor Filters)

祖先过滤器有一点复杂,它会对选择器匹配的可能性进行计算. 因此,当涉及的元素不需要与祖先相匹配时.祖先过滤器可以迅速排除相关规则. 于是,它检测后代选择器和子选择器并且基于class,ID,tag进行匹配.在以前,后代选择器是需要被特别在意的,它需要在各个祖先节点中循环以进行匹配,而布隆过滤器可以拯救这个问题.

布隆过滤器是测试特定选择器是否在某一集合中的数据结构. 看起来和选择器匹配很相似不是吗? 布隆过滤器会检测一条CSS规则是不是匹配当前正在测试的元素的CSS规则的子集. 关于布隆过滤器很棒的一点是,正误识是有可能的,负误识不是. 就是说,如果布隆过滤器指出某选择器没有匹配当前元素,浏览器会停止查询并前进至下一个选择器. 这样可以节省大量时间. 另一方面, 布隆过滤器指出当前当前选择器是匹配的, 浏览器会执行常规匹配策略直至100%确定匹配为止. 复杂的样式表会导致更多的正误识,所以建议为你的样式表保持合理的长度.

祖先过滤器加快了后代选择器和子选择器的匹配速度,它也可以用来将其他较慢的选择器划分为很小的子树,然后浏览器只有很少的几率需要处理那些低效率的选择器.

快速路径(Fast Path)

快速路径使用非递归、完全内联的循环重新实现了更多通用匹配逻辑. 它被用来匹配包含以下任意一种组合的选择器:
1.后代选择器,子选择器,向下派生选择器
2.标签选择器,id选择器,class选择器和属性构成的选择器

快速路径提升了大量关系选择器的性能. 事实上,选择器的总体效能被提升了25%,其中后代选择器和子选择的效能被提升了2倍,另外它也被用于querySelectorAll()方法的样式匹配上.

如果这么多选择器效能都被提升了,有哪些仍然是比较缓慢的呢?

哪些仍然比较慢?

Antti说,直接和间接的后代关系选择器仍然速度缓慢. 不管怎样,祖先过滤器和规则散列可以降低它们的影响因为它们很少被匹配. 他也提到Webkit还有很大空间来提升伪类和伪元素的解析效率. 但不论如何他们的解析速度比Javascript操作DOM快得多. 事实上,尽管仍有提升空间,他说:

"从样式匹配的角度说,适度使用一切选择器会表现得刚刚好."

我喜欢听他这么说. 总之如果我们把样式表控制在正常大小,并且合理使用各种选择器,就无须强迫自己迎合过去的选择器优化标准. 感谢Antti.

想知道更多? 点击Paul Irish’s presentation on CSS performance.

原作者Nicole Sullivan

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? 공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? Mar 04, 2025 pm 12:32 PM

공식 계정 웹 페이지 업데이트 캐시, 이것은 간단하고 간단하며 냄비를 마시기에 충분히 복잡합니다. 공식 계정 기사를 업데이트하기 위해 열심히 노력했지만 사용자는 여전히 기존 버전을 열었습니까? 이 기사에서는이 뒤에있는 비틀기와 회전을 살펴 보고이 문제를 우아하게 해결하는 방법을 살펴 보겠습니다. 읽은 후에는 다양한 캐싱 문제를 쉽게 처리 할 수있어 사용자가 항상 가장 신선한 콘텐츠를 경험할 수 있습니다. 기본 사항에 대해 먼저 이야기 해 봅시다. 액세스 속도를 향상시키기 위해 브라우저 또는 서버는 일부 정적 리소스 (예 : 그림, CSS, JS) 또는 페이지 컨텐츠를 저장합니다. 다음에 액세스 할 때 다시 다운로드하지 않고도 캐시에서 직접 검색 할 수 있으며 자연스럽게 빠릅니다. 그러나 이것은 또한 양날의 검입니다. 새 버전은 온라인입니다.

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? 웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? Mar 04, 2025 pm 02:39 PM

이 기사는 CSS를 사용한 웹 페이지에 효율적인 PNG 테두리 추가를 보여줍니다. CSS는 JavaScript 또는 라이브러리에 비해 우수한 성능을 제공하며, 미묘하거나 눈에 띄는 효과를 위해 테두리 너비, 스타일 및 색상 조정 방법을 자세히 설명합니다.

& lt; datalist & gt의 목적은 무엇입니까? 요소? & lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

& lt; Progress & Gt의 목적은 무엇입니까? 요소? & lt; Progress & Gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:34 PM

이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? Mar 12, 2025 pm 04:05 PM

이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.

& lt; meter & gt의 목적은 무엇입니까? 요소? & lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

See all articles