另外有时候设备会在你输入英文名称时默认首字母大写，或者在你输入英文词汇时启动自动纠错（底部出现波浪形），这两种默认开启的功能可以通过配置 autocapitalize='off' 和 autocorrect='off' 特性来关闭。

时间都去哪了——移动 Web 首屏优化实践

该环节由高级前端工程师 Johnny 郭碧青主持，开始时抛出了一些问题和首屏时间的概念，然后开始讨论影响首屏加载时间的因素，包括DOM与资源的加载、解析和渲染，还有网络过程中的耗时：

其中 RTT 表示 Round-TripTime，即“往返时延”，表示从发送端发送数据开始，到发送端收到来自接收端的确认（接收端收到数据后便立即发送确认），总共经历的时延。

关于不同网络环境下的RTT，Johnny 分享了一些数据：

通过数据研究可获得一个结论——web页面在网络上的耗时总是远大于浏览器（解析渲染资源、执行脚本等）耗时的，因此针对网络耗时的部分来着手优化是减少首屏时间的关键。

关于页面测速的方法，Johnny也分享了两种原生实现—— Navigation Timing 和 Resource Timing 。

后续就是实打实的一些优化方案了，主要包括了如下建议：

⑴ DNS预解析

即预先解析那些用户后续可能会访问到的域名，这样用户再访问那些页面的时候可减少DNS的解析耗时，使用的是H5的 prefetch 特性：

⑵ 域名收敛

说的简单点就是单条请求获取多个资源，该方案在腾讯内部应用的还是挺多的。

这里举个例子吧，比如下面这条请求就一口气返回了对应的多个脚本资源：

=/club/qv/pkg/qv_1.x.x.js,/clubact/premin/jquery.webStorage.min.js,/clubact/common/oz.js,/clubact/common/aid.js,/clubact/common/mustache.js,/clubact/common/nav/youxi_nav.js

⑶ 链路复用

这里主要是针对网络耗时所做的优化，具体方案为开启长连接（keep alive）功能：

也提及了未来的 http2.0 规范，随着长连接的普及可以减少很多耗费在RTT上的时间。

不过这里没有提及SPDY，虽然是被抛弃的货，但还没有彻底退出市场（腾讯内部其实也开过几次SPDY的课程）。

⑷ 组件化开发

鼓励页面资源按需异步加载和渲染，最好能先在服务端（Node）做渲染处理，这块属于直出的概念了。

另外也建议前后端组件同构（React的服务端渲染会是个好例子）。

⑸ 资源加载优化

例如利用webpack进行打包，再通过页面路由按需加载/卸载相关资源。

⑹ 图片懒加载

<img>插入DOM树时先进行可视区域计算，如果不在可视区域则 scroll 后再赋予src。

⑺ 缓存利用

详尽一切变态方法来利用缓存，就手Q这个客户端而言，企鹅做了不少的优化，包括缓存页面上次访问的数据（下次打开时先复用该数据，再做cgi请求来更新），还有离线包。

这里也介绍了兴趣部落页面的数据缓存框架：

也顺道举了个例子，部落首页获取到的帖子标题、作者和点赞数，可以先存到本地（localStorage），用户打开该帖子时先直接从缓存去复用这块数据，然后再通过cgi请求做更新，减少白屏时间：

⑻ 离线包

也是手Q客户端独有的功能，可以将业务资源永久地保存在本地，用户取相关资源时直接从离线包去取，而无须发送http请求。

不过这块仅支持公司内部业务，并未对外开放接口。

参会者“五分钟”分享

该环节共有三位同行做了精彩的分享，分别是“逐帧动画的像素差优化”、“React单页面性能调优”和“前端心路历程”。