支付宝、腾讯前端开发工程师谈实战HTML5

   <p> 如今大热的 HTML5 到底美在哪里？HTML5到底能为实际的移动开发带来哪些改变？来自支付宝和腾讯的前端开发工程师们有他们自己的看法。</p>    <p> 上周，在一场名为“技术风云会”的定期讨论活动中，HTML5小组杭州联盟的同学、阿里巴巴集团 HTML5 爱好者，以及支付宝浙大校友会的会员集中讨论了 HTML5 对前端开发带来的直接改变。</p>    <p> “一个东西美不美就看解决实际问题的能力有多少”，阿里云云手机服务运营部的前端开发工程师<a href="/misc/goto?guid=4958339652527837290">正邪</a>（花名）说，“现在 HTML5 这么火，很多人就拿它跟 Flash 去做对比，说 Flash 多么多么烂，说 HTML5 多么多么好。实际上我们创作的内容最后是给用户去看的，如果这个东西用户觉得好，不管用什么技术我觉得都是次要的。”</p>    <p> 来自腾讯Q＋团队的开发工程师<a href="/misc/goto?guid=4958339653328015918">元彦</a>则从性能分析的角度介绍了他眼中的 HTML5，“预取一共有两部分：一部分是资源的预取，还有一部分是 DNS 的预解析，”元彦说，他分享了来自腾讯Q+ 的多个案例。</p>    <p> 另外，支付宝移动产品部前端开发工程师<a href="/misc/goto?guid=4958339654112736028">轩与</a>（花名）分享了对于 CSS3 中的变形矩阵的理解，“一位日本工程师使用 CSS 画了一张图，粗看上去大家或许会以为这是一张图片，可惜不是，我可以很明确地告诉大家它是由 DIV 组成的，CSS 通过 TRANSFORM 已经可以实现到这样一个程度。”</p>    <p> 来自一淘的前端开发工程师<a href="/misc/goto?guid=4958339654907080426">玄寂</a>（花名）着重阐述了 web app 离线应用的构建，“给大家描述一种情形，当我们在无任何网络的情况下使用 wifi 版 iPad 用 safari 访问页面的时候会有如下提示‘safari cannot open the page because it is not connected to the Internet’。今天讲的主题就是如何解决这种问题，applicationCache，离线缓存”。</p>    <p> 支付宝技术部支付开发组的工程师<a href="/misc/goto?guid=4958339655697892215">心武</a>（花名）则仔细分析了 HTML5 带来的移动开发变革，“‘Hybrid’融合了 web 与 native 的优点，更能满足企业应用。使用 HTML5 作为显示载体的 Hybrid App 具有跨平台特性，能轻松展现复杂的排版内容，降低了开发的门槛，提高了整体的效率。”</p>    <p> 下面看看这些一线开发者们的 HTML5 实战体会分享。</p>    <p> <strong>阿里云前端开发工程师正邪（廖健）——HTML5之美</strong></p>    <p> HTML5的产生以及它的设计完全是遵循了一些常见的原理。</p>    <p> 第一条：发送时保守、接受时开放。作为工程师，发送给浏览器的文档应该尽量的严谨，但是浏览器作为接收方，应该持有一个开放的姿态，而不会因为某个文档有问题，到浏览器窗口里面就不显示了，只是留下一片空白给用户。既然 HTML 存在标签没有正常闭合的可能性，也存在属性丢失的情况，只要文档没有产生二义性，浏览器应该猜测到最终的行为并做出正确处理，在技术层面浏览器有理由这么做。</p>    <p> 第二：避免不必要的复杂性。我们在编写的 HTML 的时候，可能会定义一个很长行长的文档类型声明，这个文档类型声明是给浏览器看的，如果能够简化它，在说创作的时候能省下一些时间，而且也不用浪费力气去记那些难记的字符。实际上，省略大多数字符，浏览器也能按照我们期望的那样去运行。 还有 script 标签，我们可能会设置它的 type 为“text/javascript”，实际上也是不必要，如果 type 属性没有被声明，默认就按 JavaScript 处理。类似的东西有很多，在文档里面能省掉的我们就应该大胆地省掉，这样不仅是在创作这个文档的时候，能够给我们带来这些方便，而且在共同维护的时候也能带来一些益处。</p>    <p> 第三：网络价值同达到网络用户数量的平方成正比。现在 HTML5 这么火，很多人就拿它跟 Flash 去做对比，说 Flash 多么多么烂，说 HTML5 多么多么好。实际上我们创作的内容最后是给用户去看的，如果这个东西用户觉得好，不管用什么技术我觉得都是次要的。</p>    <p> 最后我们要的是将服务推送到用户面前，而不是要说某种技术多么好，可以杀死另一个技术。实际上在这里，它们的协同工作才是符合 HTML5 的设计思想，在这个层面上我觉得 Flash 也是 HTML5 中的一员。 第四，大多数人的意见和可运行的代码。没有 HTML5 规范的时候，浏览器厂商可以各自为阵，可以加入了自己的标准，虽然这些标准不是 W3C 制定的，但是大多人都有这些需求，它们能解决实际问题。所以也刺激 W3C 加入到这些标准的制定中去。</p>    <p> <strong>腾讯Q＋团队开发工程师元彦——从性能分析的角度去介绍 HTML5</strong></p>    <p> <strong>关于简洁的标签方式</strong></p>    <p> HTML5从这个名字大家可以听出，它是从 HTML4 继承过来的。HTML4里面有严格模式跟过渡模式，HTML5是支持这种过渡模式的，就是你可以不把一些标签闭合。但是，我并不推荐所有的标签，比方说 BODY 标签的不闭合，这种我们不推荐。但是像最常用的P标签，还有列表标签 li 可以。为什么这样说？首先从视觉角度来说，这样的方式更简洁。关键的是：在文档传输过程中，内容会更少。</p>    <p> HTML5标签属性的声明支持三种方式。一种是单括号、双括号和不加括号。为了减少文档大小，我选择不加双引号的方式或单引号的方式。但是要注意，假设是类属性的声明，因为属性可能包括多个类，多个类的时候则必须用括号括起来。在这方面，给大家看一下谷歌的一个实践。谷歌自己有一个页面完全实践了上面的东西，文档的大小减少了 20%，使 HTML 文档的传输减少了 20%。如果把整个都实践起来，可以达到5%—20% 之间的减少。这是第一步，缩减 HTML 文档的大小。</p>    <p> <strong>关于预取</strong></p>    <p> 预取，一共有两部分：一部分是资源的预取，还有一部分是 DNS 的预解析。</p>    <p> 资源预加载有几个点需要注意：  </p>    <p> 一，预加载只是在浏览器空闲的时候才会去拉，但不保证一定会去拉，这是很重要的一点。因为本身浏览器有一个全局的监听器，这是内部的一个接口，当浏览气空闲的时候，它会去执行浏览器空闲的时候应该做事情，但是这个空闲的回调不一定被触发，所以说并不保证一定会执行预加载。 </p>    <p> 二，Chrome 不支持 HTTPS 资源的预加载，像 Alipay 是 HTTPS 的页面，Chrome 不会去预拉取。</p>    <p> 三，一个预拉取的页面虽存在后不可见，实际上它是在正常解析。假如说我预拉取登陆页面，登陆页面有很多资源，比方说有图片，有 CSS 文件，JS 文件。它是从上往下正常的会被解析，解析的过程中，这个页面没有显现，但是它实际上是存在的。在 HTML5 里面，可通过 document.visibilityState 得到当前页面状态，通常页面有两种状态，可见与不可见，但是现在有一个新的状态，叫做预渲染的状态。可以直接通过 document.visibilityState 是否等于 prerender 来判断页面是否在预渲染状态。</p>    <p> <strong>支付宝前端开发工程师轩与 （王炜）——CSS3-Transform：Matrix2D & 3D</strong></p>    <p> 一位日本工程师使用 CSS 画了一张图，粗看上去大家或许会以为这是一张图片，可惜不是，我可以很明确地告诉大家它是由 DIV 组成的，可能有人会怀疑这怎么会是由 DIV 组成的，为了证明我不是在忽悠，使用 safari 的调试器，我们可以看到它确实通过了很多的 DIV 的变形来完成的，可以说非常地美轮美奂，但是你却完全看不出来它是由 DIV 画成的。CSS 通过 TRANSFORM 已经可以实现到这样一个程度。</p>    <p> 接下来我们一起深入了解一下他背后的东西。</p>    <p> 先讲 2D 变形的四种基本方法。</p>    <p> 第一个变形方式叫平移（TRANSLATE）。</p>    <p> 第二个是伸缩（SCALE）。</p>    <p> 第三个叫倾斜（SKEW）。</p>    <p> 第四个叫旋转（ROTATE）。</p>    <p> 然后进入主题 MATRIX。2DTRANSFORM 用了六个参数组成了2*3阶的矩阵，其实标准的是 9 个参数，一共是3×3的矩阵，但是由于这块主要是 2D 的，所以实际使用过程中（变化当中）是通过六个参数来表达。</p>    <p> A 是代表了X轴的 SCALE，就是我们前面说的X轴的伸缩，这个具体的值是代表了在X轴上它所伸缩的单位长度。B对应的Y轴上 SKEW，是在Y轴上歪斜的角度；C是X SKEW，是在X轴上倾斜的角度；D是在Y SCALE，是在Y轴上面的伸缩，E是X轴上的 TRANSLATE，即在在X轴上平移。F对应的是Y轴的 TRANSLATE，在Y轴上的平移。</p>    <p> 通过 TRANSLATE 你可以传 1 和0，也可以通过 MATRIX 传递把它改成 0 和1，然后可以得到同样变形的效果。</p>    <p> <strong>一淘前端开发工程师玄寂（姜维）——Web app 离线应用的构建</strong></p>    <p> 手机淘宝，当初定了两种方案，一种是 localStorage，另外一种是 applicationCache，最后采取的方案是 applicationCache+localStorage。</p>    <p> 我们的做法是分离出数据层和基础资源文件层，数据层主要是 ajax 获得的数据，而我们利用的 applicationCache 缓存的是一个框架性的东西，基础 HTML 文档、JS 文件、CSS 文件、图片文件、字库文件 ttf，以及可能需求的一些媒体文件，localStorage 存一些系统信息，关于字库文件，其实这里的字库是一个 icon 集合，我们把大量 icon 集合到一个字库文件，通过对应表来对应相应的 icon，由于字体是矢量的这解决了为不同 iPhone 分辨率的适配问题。当然还减少了 http 请求数。最最重要的是，字库把原有图片体积上足足可以减小 2 分之一。当然这也存在一点点的维护性问题。</p>    <p> 这种结合 applicationCache，localStorage 的 OPOA 的方案，看上去似乎高枕无忧，但是在多人协作问题上显现的特别棘手，由于我们在项目中又引入了 backbone（JS 中的 MVC 框架）项目成员沟通成本增大很多。最后我们的方案是先有专人介入 MVC，架设好最核心的应用体系，然后分配到 page 由不同人开发。另外和 pc 端 one page 还有点不一样的地方是我们移动端可能还需求页面与页面间切换的效果，所以大部分时候我们的 view 层可能需要被缓存，这个缓存言下之意就是显示与隐藏，所以在管理 view 上要做好特别的管理，否则很可能会导致内存的溢出。这个问题目前还没有很好的解决方案，但是之后会参考 iOS native 里面有一个 navigator 的对象，它会有一个动态管理的过程。</p>    <p> 大家可以到 <a href="/misc/goto?guid=4958339656494304967">http://www.slideshare.net/pigcan/applicationcache</a> 查看本次分享的 ppt。</p>    <p> <strong>支付宝开发工程师心武 （杜伟）——HTML5带来的移动开发变革</strong></p>    <p> <strong>如何实现“Hybrid”</strong></p>    <p> “Bridging the gap between the web and the SDK”，这是对于如何实现 Hybrid 的最好描述。在手机 OS 中，Web 页面的载体（如 WebView）是 OS 的一部分，被包含在 SDK 中的。当 Html 页面解析时，WebViewWebBrowser 充当了中间人的作用，它以超出浏览器的界限在 Html 页面中加入额外的操作，这就成为了 web 与 native 建立连接的基础。例如在 Android 中，webview 组件有 addJavascriptInterface (Object,String)方法，这个接口的作用是将一个 Java 对象提供给 Html 页面的 JS 代码访问。</p>    <p> <strong>Hybrid 利器——PhoneGap</strong></p>    <p> PhoneGap 是现下比较流行的 Hybrid 框架，08年推出，11年 10 月被 Adobe 收购，随后被捐赠给 Apache 软件基金会，并更名为“Cordova”。PhoneGap 入门并不困难，在官网上可以方便的找到它的使用步骤、支持的 API 以及跨平台应用构建工具。</p>    <p> 其实，PhoneGap 自带的 API 意义不是很大，它提供的 Plugin 扩展机制才是解决问题的关键。实际应用开发中，我们需要针对不同平台开发特定的 Plugin 插件，这会丧失一定的跨平台能力，但却可以达到“随心所欲”的地步。</p>