答复: 中文兴趣小组5月5日电话会议

Hi all,

我是百度的闵月。近期百度准备向web performance 工作组提交首屏渲染优化规范的提案。该规范用于加快移动端用户实际感知到首屏内容展现的速度，避免搜索项目中观察到的简单搜索结果页由于等待内核绘制的触发条件，反而比复杂结果页实际展现慢的问题。

目前W3C/北航团队和百度、腾讯、UC等浏览器厂商正在探讨如何有效的将这份提案推到W3C Web Performance工作组里去。W3C HTML中文兴趣小组的各位成员一直都是推动标准方面的积极分子，努力推动中国互联网企业在W3C标准中的贡献，因此我们也真诚期望得到各位关于添加该属性的宝贵意见和支持。

今晚的电话会议我和这个提案的技术负责人吴萍（wuping02@baidu.com）也会参加，期待与大家进行技术交流！

闵月

------------------------------------------------------------------------------------------------------------------------------------------------------
以下是该提案的详细内容，为了方便晚上的电话会议讨论，供大家参考：

1．首屏渲染优化规范介绍
首屏渲染优化规范用于加速移动设备上首屏内容的绘制可见速度。
在web页面代码解析（parse）后，还需要经过布局（layout）与绘制（paint）阶段，才能在屏幕上展示给用户。移动设备屏幕很小，通常很短的代码就能够充满这个屏幕，而这部分内容就是用户首先实际感知到的内容区域。

当一个页面代码由A、B两段组成，代码A能够表示首屏的所有内容，当A完成web内容解析（parse）后，并不能立刻完成布局（layout）与绘制上屏操作（paint）。内核从parse状态转化成layout状态，存在若干触发条件，它们包括了解析的token数目，解析的时间以及延迟（delay）时间。内核从layout状态转化成paint状态，同样存在若干必要条件，这些条件使得内核无法提早退出layout流程，进入实际上屏绘制阶段。所有这些限制条件并没有充分考虑到手机首屏内容的大小，以及实际用户感知内容展现的重要优先级。在复杂的移动网络环境下这种限制对浏览速度的影响更大。

通过定义首屏渲染优化规范，web开发者可以指定浏览器进行合适的首屏内容提前绘制（内核可自行判断首屏位置或是由开发者指定首屏位置），从而加快首屏展现速度，显著缩短用户首次看见非白屏页面时间。

2. 首屏渲染优化规范以及相关firstpaint属性的详细描述
首屏渲染优化规范由head部分的meta描述和body部分的firstpaint属性描述共同组成。
在head部分， meta 信息描述为以下三种：

l  <meta name="layout-optimize" content="First Screen Paint[;browser-defined-strategy]">
该描述指示浏览器自行决定首屏判断机制，进行首屏内容提前绘制优化。


l  <meta name="layout-optimize" content="First Screen Paint;user-defined-position">
该描述指示浏览器在开发者指定的首屏位置进行首屏内容提前绘制优化。

和meta描述对应的，在网页的body部分中会存在开发者定义的首屏位置元素，其描述为<tagName firstpaint>，firstpaint = “firstpaint” or “” (empty string)or empty  其中tagName元素应为block排版元素，firstpaint为firstpaint或空值均表示解析到此元素可以立即触发首屏排版绘制。firstpaint属性为JS只读属性，写入该属性抛出JS异常，未知属性。创建新元素时，默认值为空字符串。该属性只在parse阶段对浏览器起作用，当JS执行时，读写该属性不会对浏览器行为造成任何影响；该属性也并不对于样式和绘制效果存在任何影响，比如对style为display：none的隐藏元素也没有影响。

如果head部分存在meta描述且是由开发者指定首屏绘制位置， 而body部分缺失对应的firstpaint属性元素，浏览器会回退到自身默认的绘制策略。


l  <meta name="layout-optimize" content="First Screen Paint;user-defined-tokens={number}">
该描述指示浏览器在解析阶段达到开发者指定的tokens数目之后，可以立即触发layout过程，进行首屏内容提前绘制优化。

这里的tokens为首屏内容token数目，number为大于0的整数。Token数目可由开发者指定或浏览内核云服务计算获取。这种描述既指定了首屏绘制位置又不用改变原有页面结构。


3.       使用案例
几乎所有的网页都可以使用首屏渲染优化规范制导浏览器加快首屏展现速度，显著缩短用户第一次看见非白屏页面时间。web开发者或是云端标记的firstpaint属性以及内核自行采用的首屏判断机制存在各自的使用场景。

浏览器内核自行预测首屏内容位置的方式，相对比较灵活，在不同机型不同分辨率的设备上，都能够精确计算绘制面积。但是由于依赖解析和布局过程预测，可能存在预测不准，预测开销等问题，比如等待css资源决定绘制面积，重复排版绘制，耗费cpu资源，以及影响完全加载时间。

开发者自行标记和云端标记首屏绘制位置减少了内核预测的开销，但不同机器分辨率不同，一般情况下只会给出一个参考首屏位置，不会适配各种机型分辨率。对于希望首屏达到最优效果的开发者，可以对于主流设备，通过head和body中的属性标记配合指定首屏位置， 保证首屏所有元素能被一次性的布局和绘制，从而避免内核独立首屏优化绘制所带来的冗余的排版计算以及parse/layout/paint调度。


发件人: Zhiqiang Zhang [mailto:zqzhang.cas@gmail.com]
发送时间: 2014年5月4日 20:42
收件人: W3C HTML5 中文興趣小組
主题: 中文兴趣小组5月5日电话会议

Hi,

中文兴趣小组将在5月5日晚上9点至10点在Skype上召开第二次电话会议。欢迎参加。

主要议题包括但不限于：
（1）结识新朋友。
（2）检阅LCWD：DOM Parsing and Serialization [1]，Tracking Preference Expression [2]，The app: URL Scheme [3]。检阅FPWD：CSS Will-Change Level 1 [4]。
（3）介绍中文排版进展。
（4）技术交流。
Skype:
吴小倩：siusinng
冯超：nigelvon
张志强：jackyy313
赵锦江：zhaojinjiang@outlook.com<mailto:zhaojinjiang@outlook.com>

--
Thanks,
Zhiqiang

[1]
​ http://lists.w3.org/Archives/Public/public-webapps/2014AprJun/0290.html

[2] http://lists.w3.org/Archives/Public/public-webapps/2014AprJun/0228.html​


​[3] http://lists.w3.org/Archives/Public/public-sysapps/2014Mar/0034.html​


[4]
​ http://lists.w3.org/Archives/Public/www-style/2014Apr/0462.html​