移动端browser网络优化

一个网络请求可以简单分为连接服务器, 获取数据两个部分。
其中连接服务器前还包括 DNS 解析的过程；获取数据后会对数据进行缓存以优化下次对同一网络资源的请求。
一. 对预置链接和用户常访问链接进行DNS预解析
DNS 全名 Domain Name System，解析意指根据域名得到其对应的 IP 地址。
首次域名解析一般需要几百毫秒，可通过直接向 IP 而非域名请求，节省掉这部分时间。
国内浏览器普遍采用在首页中， 预置网站推广链接的方式作为商业收入，同时展示用户经常访问的网址，以提高用户体验。在用户打开浏览器后， 对这两部分链接来源进行DNS预解析，维护一张域名和IP对应的列表， 并在用户使用过程中，动态更新这张列表，可有效提高用户打开网页的时间。

homescreen.png

二. 预连接、预取数据。
采用chromium的prefetch和prerender，分析用户的使用场景，对预发起网络请求的链接进行预连接，预取数据和预渲染。

三. 对网页中的点击操作进行优化(300ms), 即click delay.
对于不是为移动设备开发的网页，即在header中没有添加如下的meta标签:

浏览器为了支持在网页中的双击操作，实现按屏幕尺寸去缩放网页， 需要延时300ms去加载被点击的网页。原因是浏览器对每一次的tap事件，都不得不等待一个设定的延时，去看是不是一个double-tap事件。
对于事件的处理流程是：

1. 当手指触屏时， touchstart event会被发出。
2. 当手指离开屏幕时，touchend event被发出。
3. 浏览器等待延时时间，去看是否会再次触屏。
4. 如果没有，click event被发出， 浏览器加载被点击的链接。
   这个设定的等待时间在chromium的源码中被定义,
   src/ui/events/gesture_detection/gesture_config_helper_android.cc中被设置(默认值300ms)

 config.double_tap_timeout = base::TimeDelta::FromMilliseconds(
     ViewConfiguration::GetDoubleTapTimeoutInMs());

可在测试网页上测量优化前后的对比：
http://phonegap-tips.com/demos/click-delay.html
优化前：

click_delay_original.png

优化后：

click_delay_optimized.png

对于无核浏览器的优化方案：
可通过注入fastclick js库， 实现这部分优化。
https://github.com/ftlabs/fastclick