基于嵌入式浏览器CSS引擎并行化研究.pdfVIP

基于嵌入式浏览器CSS引擎并行化的研究 刘秀秀1’2，潘梁2，郭志川2，胡琳琳2 国家网络新媒体工程技术研究中心 摘要：针对嵌入式浏览器CSS解析效率低下的问题，本文提出了～1种CSS引擎并行化 处理方法，通过对CSS引擎资源预取、样式解析和选择器匹配功能的描述，分别介绍了 如何将资源预取、样式解析与网页解析并行执行，以及CSS选择器并行匹配。该并行处 理方法可以克服嵌入式浏览器边解析边加载带来的网络延时以及串行处理带来的用户等 待时问长的问题。通过对多种网页加载时间的仿真测试，页面的加载速度提高了很多， 一 实验结果验证了该方法的可行性。 关键词：层叠样式表引擎；并行化；资源预取；样式解析；选择器匹配 1 CSS引擎结构 从整体上看，CSS引擎的输入是文档对象模型(DOM树)和一个CSS样式集， 经过CSS引擎的处理，输出标注了CSS样式的一棵渲染树【1】如图1(a)所示。本文 将CSS引擎分为CSS样式解析器、内部样式结构、样式分类和样式匹配4个模块， 内部结构如图l(b)所示。 p{msigirrtop 跫+旦iDiv ．一……垦…～～ CSS引擎 念 图1(a)CSS引擎 (b)CSS引擎内部结构 2并行化CSS引擎处理方法 CSS引擎所做的主要工作包括CSS资源预取、CSS解析、CSS选择器匹配【2|。 通过CSS引擎处理后，各个样式才能映射到DOM节点，确定每个节点的位置颜 色大小等信息。下面通过CSS引擎的工作分别描述并行化算法具体的实施方式。 2．1CSS资源预取 本文的方法是在HTML文档解析开始先进行文档的预扫描，如果发现有外部 资源，就利用并行算法将其预取下来，即资源预取和页面解析是并行执行的，此 时并不影响页面解析。如图3中所示，(a)图是未采用并行算法时页面解析过程中 发现DOM节点中用到外部资源，页面解析阻塞，开始加载资源；图(b)中所示是 ．516． 信号与信息处理 采用并行算法后，页面解析不受影响。 本文通过HTML预扫描器确定外部资源中选择符的id或类属性是否都被预扫 描器发现了，如果外部资源CSS选择符中所有的属性值都被HTML预扫描部分发 现了，就开始加载此资源。这样经过判定后加载的资源在页面解析过程中会被使 用，增大了加载资源的可用性。 资源加载 妒——————峰 眷竺竺要：≥4 ∑!12竺苎璧竺堑· 图3(a)CSS解析中资源加载 (b)CSS资源预取 2．2CSS解析 在本文的并行方法中，如果HTML解析过程中遇到样式描述符就将其分发给 CSS解析器，每个样式解析分属不同的线程，这就意味着一旦有新的CSS样式， CSS解析会立即执行。然而为保证所有CSS样式规则的顺序与串行CSS引擎产生 的规则顺序一致，本文中的方法是为每个解析任务分配一个独一无二的串行ID号， 用来重排最初文档中的CSS样式表。图4(a)所示是串行CSS资源解析的流程，遇 新的CSS样式时页面解析会被中断，Co)q，所示当采用并行算法后，HTML页面解 析不受影响。 图4(a)串行CSS解析 (b)并行CSS解析 2．3CSS选择器匹配 CSS匹配算法的功能就是将各个样式映射到DOM节点上。对于每个节点，CSS 引擎必须找到所有匹配此节点的选择器或者规则。一个具体的CSS选择器匹配的 例子如图5：ul 找到em的先辈节点，必须从底向上遍历DOM树，直到找到ul节点，此次匹配完 成。 、·一………‘‘ul