6月阅读周·WebKit技术内幕 | 移动WebKit
背景
去年下半年，我在微信书架里加入了许多技术书籍，各种类别的都有，断断续续的读了一部分。
没有计划的阅读，收效甚微。
新年伊始，我准备尝试一下其他方式，比如阅读周。每月抽出1~2个非连续周，完整阅读一本书籍。
这个“玩法”虽然常见且板正，但是有效，已经坚持阅读五个月。
已读完书籍：《架构简洁之道》、《深入浅出的Node.js》、《你不知道的JavaScript（上卷）》、《你不知道的JavaScript（中卷）》、《你不知道的JavaScript（下卷）》、《数据结构与算法JavaScript描述》。
当前阅读周书籍：《WebKit技术内幕》。
移动WebKit
触控和手势事件
HTML5规范
目前，Web领域引入两种与触控相关的技术，其一是HTML5 Touch Events，它基本上已经成为了规范，得到了众多渲染引擎和浏览器的支持和认可。其二是Gesture Events，它是苹果公司设计并在Safari浏览器中实现的，但是没有得到其他更多浏览器的支持。
HTML5 Touch Events，它已经成为推荐的规范，而且事实上也得到了两家主流移动操作系统中浏览器的支持，可以说发展得非常好，该标准主要是定义如何将原始的触控事件以特定的方式传递给JavaScript引擎，然后再传递给注册的事件响应函数。这一规范在HTML5网页应用中已经比较成熟，网页开发者可以根据规范进行定义，其中最主要的接口是TouchEvent。
根据标准中的定义，TouchEvent分成4种类型：touchstart、touchmove、touchend和touchcancel。它们分别表示触控点开始接触屏幕、触控点移动、触控点离开屏幕和触控点取消。
工作原理
WebKit中，最下层的WebWidget和WebView是WebKit的Chromium移植提供的接口，它们也是被Chromium项目的代码所调用，当Chromium接收到事件之后会将其传给WebViewImpl这个非常重要的类来处理。因为事件有多种类型，WebViewImpl类借助于PageWidgetDelegate类来处理和区分这些输入事件。经过PageWidgetDelegate类处理后的事件会调用WebViewImpl类各个事件处理接口，而WebViewImpl类的这些接口基本上使用主框(Frame)的事件处理句柄EventHandler对象来处理事件。
WebKit除了接收原始的触控事件之外，还需要它的移植或者说是浏览器提供手势事件，这些事件会触发WebKit的默认动作。例如“LongPress”事件，它表示手指在屏幕上长按一段时间，这需要浏览器将其识别成手势事件然后传递给WebKit，当WebKit接收到这个事件之后，触发自己的默认动作。
移动化用户界面
HTML5为移动领域做了大量的工作，其中“meta”标签中的众多设置值能够帮助提供非常好的移动用户体验。一个典型的例子就是上面提到的用该标签来控制网页缩放。
<meta name-"viewport" content="user-scalable-no">非常简单的一行代码，就能够将缩放功能取消而不需要相对复杂的JavaScript代码，遗憾的是，目前“meta”标签只能用来控制缩放，而没有能力解决不能翻页的问题。而WebKit很好地解决了这一问题。
首先是同Viewport相关的功能。使用meta标签最常见的设置就是“viewport”，视窗的概念之前介绍过，它表示当前可视的区域。因为设备的大小有差异，所以如何使网页的宽度适合屏幕的宽度就显得非常重要了。
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=0.9,maximum-scale=1,minimum-scale=0.5 />其次是全屏浏览。因为移动设备通常屏幕较小，所以浏览器的地址栏和移动系统上的状态栏会占用较为可观的可视区域，因此Safari提供了一些设置来解决这个问题，就是使用全屏浏览模式。
最后是图标的设置。为了让网页在移动设备中也能像其他应用（这个会在第15章详细介绍）一样，可以设置该网页的图标，使用的方法是使用“link”标签设置，在Android浏览器中的方式是使用如下属性，与Safari中的设置类似。
其他机制
为了更好地支持移动设备，WebKit做了大量的工作，引入了一些新的机制，例如，在本节中，主要介绍两种技术，其一是Application Cache，其二是Frame Flatterning技术，也就是处理网页的多框结构。
移动设备因为其移动的特性，需要能够提供离线浏览网页对的内容，而应用缓存(Application Cache)这一新支持的机制能够支持离线浏览，同时还能够加速资源的访问并加快启动速度。它的基本思想是使用缓存机制并缓存那些需要保存在本地的资源，开发者可以现实指定哪些是需要缓存的资源，并且使用起来非常简单。
<html manifest="app.appcach">
......
</html>总结
移动领域对HTML5的发展起了非常重要的作用，特别是在著名的Flash和HTML5之争事件后，HTML5标准得到了几乎所有智能移动设备的支持，这一情况甚至要好于桌面设备。伴随着移动领域的众多创新，标准化组织也将这些新功能带入了Web领域，如对各种屏幕的支持，触控(Touch)、手势(Gesture)和一些新设备能力接口等。移动化已经成为HTML5重要的发展方向，
本篇主要讨论了移动领域的技术和WebKit是如何走在时代的前沿去支持和推动这一趋势的。
作者介绍
非职业「传道授业解惑」的开发者叶一一。
《趣学前端》、《CSS畅想》等系列作者。华夏美食、国漫、古风重度爱好者，刑侦、无限流小说初级玩家。
如果看完文章有所收获，欢迎点赞👍 | 收藏⭐️ | 留言📝。
- 点赞
- 收藏
- 关注作者
评论（0）