woodsrong javascript:alert(“hello, world ”); var shareInfo = { title: “ 朋友网触屏版开发分享 ”, author: “woodsrong”, time: “ ” }; 朋友网触屏版开发分享

朋友网触屏版 开发模式 远程调试 图片本地压缩 其他技巧

｛ S P A ｝

代码组织 基础框架选型 Runtime ver.

代码组织 基础框架选型 Framework File size (gzip) Community activity Learning costs jQuery Mobile30k + 40k ★★★★★★ jqmobi6k ★★★★ zepto8k ★★★☆★ underscore4k ★★★★★★★★ Self- development ？？？

代码组织 模块化代码 减少全局变量污染 减小代码体积 继承、覆盖父类方法 PY.Class.create() 抽离公共模板复用 预编译 template 为 function

页面管理 PageManager Page launched onCreate Page showed at front of users onShow onHide onDestory Page cleared User navigates to the page onBack onClick onXxx…

页面管理 Base Class of Page

事件处理 全局代理 写事件就是写 evtMap 属性配置

事件处理 全局代理 处理过程：从子页面 逐级冒泡到父页面 主框架页 一级页面 二级页面

事件处理 全局代理 处理过程：从子页面逐级冒泡到父页面

网络请求 请求合并 后台请求入口支持发送 cmds[] array 实现批量请 求，使用 _key 来标识每个独立的请求 cmds[] = _key=xxx&server=xxx&cmd=xx&xxxxxx Connection:keep-alive

数据存储 304 & 本地 sqlite 存储 朋友网 widget 项目 同比大概节约了 40% 的流量 （忽略 http 请求头） 日期 命中 比例 19.53%28.60%38.83%

数据存储 304 Sqlite 本地存储

文件缓存 Manifest cache 含有 manifest 属性的当前请求页无论如何都会被缓存 对于动态页而言很致命 更新需要建立在 manifest 文件的更新，文件更新后是需要页面再次刷新的 需要 2 次刷新才能获取新资源 更新是全局性的，无法单独更新某个文件 无法单点更新 Seajs plugin storage ❶ 彻底磨灭二次访问的网络请求数（主要指 js 和 css 文件），消灭 304 所 带来的各种开销（ RTT, TCP Connection setup - 3way - handshake ） 使用 localStorage 模拟 manifest 管理，支持单点实时更新 ❶ 无线前端资源管理方案 http://ux.etao.com/posts/449

文件缓存 Seajs plugin storage 304 开销 NetDnsConnRttTran 2G27%25% 27% 3G31%26%33%10% wifi33%17%40%10% 注：数据来源于一淘网一淘网 没有请求 才是王道！

代码组织 Framework Inherit & Override Common template 网络请求 Merge request Connect keep alive 页面管理 PageManager Base class(onCreate…) 数据存储 304 localStorage 事件处理 evtMap config Bubble Event Model 文件缓存 Manifest cache Seajs plugin storage SPA （ Single Page App ）

远程调试 远程调试难点 Breakpoint & console http request watch Android: 使用代理上网在代理上抓包 ios: 越狱后 tcpdump 抓包 代码修改及时生效 Host 反向代理

远程调试 现有方案 Supported target PaltformSupported panels WeinreIos4+, android, other webkit Elements, resources, network, timeline, console JsconsoleIos4.2+, android2.2.2+, webosConsole Aardwolf Ios, android, WinPhone 7, BlackBerry OS 6+ Breakpoint WebKit Remote Debugging protocolwebkit(pc)All panels Chrome v8 debugger protocolV8 javascript engineBreakpoint DragonFlyOpera mobileopera dragon panel Iphone app (JSConsole app or Bugaboo) IosConsole UCweb browser dev (android)Ucweb android only Elements, resources, network, script, console

远程调试 Weinre (WEb INspector Remote) Phonegap 子项目 Nodejs 版 原理： weinre 远程设备调试里有 3 个主要概念名词 调试服务器  调试服务器起到代理的作用，用来同步调试目标和调试客户端之间的命 令 调试客户端  通常为桌面调试环境，即开发者实际操作调试的地方（比如 Web Inspector 或者 Google Chrome 的开发者工具） 调试目标  运行被调试 web 内容的移动设备

远程调试 Weinre (WEb INspector Remote) weinre 的调试目标和客户端都运行在浏览器中，而调试服务器则以 HTTP 服务器方 式作为二者的中介运行 关键：搭建一个 “ 调试服务器 (Debug Server)”

远程调试 Weinre (WEb INspector Remote) 使用方法 地址： 在调试目标页面载入 js 脚本  在 pc 上用 chrome 打开调试客户端  接下来你懂的 …

远程调试 Bookmark debug

图片本地压缩 基本原理 通过 input type=file 选择本地图片 通过 FileReader Api 获取本地图片数据 将本地大尺寸图片渲染到尺寸更小的 canvas 通过 canvas 生成被缩放后的小图的 base64 字符串 base64 字符串可以用来本地预览和 ajax 上传 图片地址 图片数据 图片转换 图片地址

图片本地压缩 Api 支持情况 Input type=file & FileReader canvas Input type=fileFileReader Android QQBrowser 3.X√× Android QQBrowser 4.X√√ Android UcWeb√√ 表 1. fileReader 表 2. canvas

图片本地压缩 Ios 平台 bug Subsample 官方文档描述 官方文档  大于 2M 的图片读到浏览器里的时候会做 subsample 处理  最大可以处理的 jpg 图片为 32M  其他类型图片 256M 内存机器最大可以处理 3M 图片；大于 256M 内存可以处理 5M 图片 大图高度被压缩 bug 图片高度只有原来的 1/4

图片本地压缩 Ios 平台实战 Subsample 对大于 1024x1024 的图片检测是否有被抽值 检测抽值原理：取图片右下角的 1x1px 像素的 aRGB 数组判断 alpha 值 被抽值的 图片按 1 ： 2 ( 经验值 ) 还原 原始图片大小 抽值后大小 w h/2 w/2 h 判断该点的 alpha 值

图片本地压缩 Ios 平台实战 高度被压缩 bug 计算图片高度被压缩比例，通过贴瓷砖的方法用固定大小的小 canvas 去分片读取大图到小 canvas ，拷贝过程中计算压缩比 原始大图 一般大图高度会被压缩到 1/4 h/4 目标大 小 瓷砖 w h 拷贝

图片本地压缩 Android 平台 canvas.toDataURL() 输出图片 格式限制 w3c 标准： image/png ；浏览器可选择实现其他格式 Ios 支持 image/jpg 格式输出，可调整压缩质量 canvas.toDataURL(‘image/jpeg’, 0.8) android 只支持默认格式  Jpg 图片大小只有 Png 格式的约 1/3

图片本地压缩 Android 平台实战 借助第三方工具库 jpegEncoder jpegEncoder 将 canvas 的 argb 颜色数组转化为为压缩比更高 的 jpg 格式，同时支持设置压缩质量

图片本地压缩 其实，还可以做的更好！ 借助第三方工具库 JpegMeta JpegMeta 读取图片 meta 数据里照片拍摄方向后自动旋转 图片

图片本地压缩 你担心性能问题吗？ 部分实验数据 HTC Incredible （ 1Ghz ） 整个压缩过程耗时约 3s #sourcecompressedTotal time(ms) 1850k66k M81k M68k M158k2834

图片本地压缩 推荐压缩方案 根据朋友网业务特点 图片压缩到 800x800 以内 压缩质量 0.8 Android 下 2G 网络压缩质量调整为 0.5 一般 2M 的图片可以压缩到 150k 左右 适合移动网络下传输

其他技巧 Ucweb 极速模式如何避免 点击超链接跳转 ext:webkit: 申请白名单 ( 需要交换商业资源, 可联系 uc 市场部接口人 ) iphone safari textarea focus 后横竖屏切换导致 viewport scale 越来越 大 使用 form 表单后，可以启用键盘上的提交，这个时候如何收起键盘 通过 form 表单可以使键盘上的 “ 换行 ” 变为 “ 前往 ” 或者 “ 提交 “ ；点击前往的时候收起 虚拟键盘，必须要 focus 一个可点击元素，这个元素不能是一个空节点，里面可以 放一个 同时不能设 display:none 或 visibility:hidden ，可以设 width:0; height:0;

其他技巧 使用 css 3D 高效动画 Css 动画 time-function 使用 cubic-bezier 变换可大幅提升动画流畅度 webkit-transition-timing-function:cubic-bezier(0.33,0.66,0.66,1) 3D 动画闪屏问题 在动画元素的父节点上应用 webkit-backface-visibility:hidden Onorientationchange Onresize 延时检测 跨域 ajax Qcookie 登录 QQbrowser 后会自动附到 http 请求头

参考资料 HTML http:// W3schools http:// Know iOS Resource Limits. ons/Reference/SafariWebContent/CreatingContentforSafarioniPhone/C reatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP SW ons/Reference/SafariWebContent/CreatingContentforSafarioniPhone/C reatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP SW15 Weinre http://people.apache.org/~pmuellr/weinre/docs/latest/ JpegEncoder JpegMeta http://code.google.com/p/jsjpegmeta/ Seajs storage plugin http://ux.etao.com/posts/449

Thank you all! Q & A

附：用户浏览器分布

附：用户网络分布

附：用户首屏数据加载时间