浏览器如何读取和解释CSS？
Mos*_*ses 23 css browser rendering
两部分问题:
- 浏览器是否有类似于JavaScript的内置CSS解释器？
- 当浏览器确实读取CSS时,它何时应用CSS？
具体来说,我想澄清JavaScript和CSS与JavaScript的不同之处或原因,您需要专门等到window.onload,以便解释器可以正确地获取getElementById.但是,在CSS中,您可以选择样式并将样式应用于类和ID.
(如果它甚至重要,假设我指的是一个带有外部样式表的基本HTML页面)
Nir*_*rus 23
CSS渲染是一个有趣的话题,所有竞争对手都在努力加速视图层(HTML和CSS)渲染,以便在眨眼间为最终用户提供最佳结果.
首先,是的,不同的浏览器有自己的CSS解析器/渲染引擎
- Chrome,Opera(来自第15版) - 使用名为Blink Rendering引擎的Webkit fork
- Safari - 使用Webkit(现在转移到Webkit2)
- Internet Explorer - 使用Trident渲染引擎
- Mozilla firefox - 使用Gecko
所有这些渲染引擎都包含CSS解释器和HTML DOM解析器.
所有这些引擎都遵循下面列出的模型,这些是W3C标准的集合
注意:所有这些模型都是相互关联和相互依赖的.它们不是定义用于呈现CSS的标准的单独模型.这些模型阐明了如何根据内联样式,特异性等优先级处理CSS.
说明:
阶段1:
所有浏览器都从服务器下载HTML和CSS脚本,首先将HTML标记解析为名为内容树的树中的DOM节点.
正在解析的HTML文档浏览器渲染引擎构造另一个称为渲染树的树.该树按其显示顺序具有视觉元素.
Firefox将其称为框架,Webkit将其称为Renderer或Renderer对象.
见下图:(来源:HTML5 Rocks)
第二阶段:
在上述过程之后,这两个树都经历了布局过程,这意味着浏览器告诉视口每个节点必须放在屏幕上.
这被定义为W3C的定位方案(请点击此链接获取详细信息),该方案指示浏览器如何以及在何处放置元素.以下是3种类型.
- 正常流量
- 花车
- 绝对的位置
第3阶段:
现在最后阶段叫做绘画.这是一个渐进的过程,渲染引擎遍历每个渲染树节点并使用UI后端层可视地绘制它们.此时,所有视觉Fx都应用为字体大小,背景颜色,表绘画等.
注意:如果您尝试在慢速连接上打开任何网页,则可以清楚地观察到此阶段.大多数现代浏览器都能提供更好的用户体验,并尝试尽快显示元素.这会给用户留下页面正在加载并且必须等待完成的印象.
工作流程的框图,以便更好地理解
- WebKit的:
- Mozilla的壁虎:
参考文献:(请阅读以下链接.它们是Web上与本主题相关的最佳资源)
- http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ (最佳解释)
- http://www.slideshare.net/ariyahidayat/understanding-webkit-rendering
- https://html.spec.whatwg.org/multipage/syntax.html#parsing
- http://dbaron.org/talks/2008-11-12-faster-html-and-css/slide-3.xhtml
- https://css-tricks.com/almanac/properties/t/text-rendering/
- https://www.webkit.org/blog/114/webcore-rendering-i-the-basics/
- http://www.w3.org/TR/CSS21/intro.html#addressing
如果你最近在任何时候都使用了慢速连接,你会发现CSS会在(慢慢地)出现时应用于元素,实际上在DOM结构加载时会反映页面内容.由于CSS不是一种编程语言,它不依赖于在给定时间可用的对象被正确解析(JavaScript),并且浏览器能够简单地重新评估页面的结构,因为它通过以下方式检索更多的HTML将样式应用于新元素.
也许这就是为什么即使在今天,Mobile Safari的瓶颈始终不是3G连接,但它是页面渲染.
是的,浏览器内置了一个CSS解释器.你不"等到window.onload"的原因是因为虽然Javascript是图灵完整的命令式编程语言,但CSS只是一组浏览器应用于匹配的样式规则遇到的元素.
小智 6
浏览器从右到左读取CSS行.这就像谷歌和Mozilla所说的那样.Google在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
我最近在google页面速度上碰到了这篇文章:
当浏览器解析HTML时,它构造一个内部文档树,表示要显示的所有元素.然后根据标准的CSS级联,继承和排序规则,将元素与各种样式表中指定的样式进行匹配.在Mozilla的实现中(也可能是其他元素),对于每个元素,CSS引擎都会搜索样式规则以查找匹配项.引擎从右到左评估每个规则,从最右边的选择器(称为"密钥")开始并移动每个选择器直到找到匹配或丢弃规则.("selector"是规则应适用的文档元素.)
http://code.google.com/speed/page-speed/docs/rendering.html