一个网络请求可以简单分为连接服务器, 获取数据两个部分。
其中连接服务器前还包括 DNS 解析的过程;获取数据后会对数据进行缓存以优化下次对同一网络资源的请求。
一. 对预置链接和用户常访问链接进行DNS预解析
DNS 全名 Domain Name System,解析意指根据域名得到其对应的 IP 地址。
首次域名解析一般需要几百毫秒,可通过直接向 IP 而非域名请求,节省掉这部分时间。
国内浏览器普遍采用在首页中, 预置网站推广链接的方式作为商业收入,同时展示用户经常访问的网址,以提高用户体验。在用户打开浏览器后, 对这两部分链接来源进行DNS预解析,维护一张域名和IP对应的列表, 并在用户使用过程中,动态更新这张列表,可有效提高用户打开网页的时间。
二. 预连接、预取数据。
采用chromium的prefetch和prerender,分析用户的使用场景,对预发起网络请求的链接进行预连接,预取数据和预渲染。
三. 对网页中的点击操作进行优化(300ms), 即click delay.
对于不是为移动设备开发的网页,即在header中没有添加如下的meta标签:
<meta name="viewport" content="width=device-width, user-scalable=no">
浏览器为了支持在网页中的双击操作,实现按屏幕尺寸去缩放网页, 需要延时300ms去加载被点击的网页。原因是浏览器对每一次的tap事件,都不得不等待一个设定的延时,去看是不是一个double-tap事件。
对于事件的处理流程是:
- 当手指触屏时, touchstart event会被发出。
- 当手指离开屏幕时,touchend event被发出。
- 浏览器等待延时时间,去看是否会再次触屏。
- 如果没有,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
优化前:
优化后:
对于无核浏览器的优化方案:
可通过注入fastclick js库, 实现这部分优化。
https://github.com/ftlabs/fastclick