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

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

http://f.qq.com 朋友网触屏版开发模式远程调试图片本地压缩其他技巧

http://f.qq.com ｛ S P A ｝

http://f.qq.com 代码组织基础框架选型 Runtime ver.

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

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

http://f.qq.com 页面管理 PageManager Page launched onCreate Page showed at front of users onShow onHide onDestory Page cleared User navigates to the page onBack onClick onXxx…

http://f.qq.com 页面管理 Base Class of Page

http://f.qq.com 事件处理全局代理写事件就是写 evtMap 属性配置

http://f.qq.com 事件处理全局代理处理过程：从子页面逐级冒泡到父页面主框架页一级页面二级页面

http://f.qq.com 事件处理全局代理处理过程：从子页面逐级冒泡到父页面

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

http://f.qq.com 数据存储 304 & 本地 sqlite 存储朋友网 widget 项目同比大概节约了 40% 的流量（忽略 http 请求头）日期 2011-02-252011-02-262011-02-27 304 命中比例 19.53%28.60%38.83%

http://f.qq.com 数据存储 304 Sqlite 本地存储

http://f.qq.com 文件缓存 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. 2012.12.2http://ux.etao.com/posts/449

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

http://f.qq.com 代码组织 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 ）

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

http://f.qq.com 远程调试现有方案 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

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

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

http://f.qq.com 远程调试 Weinre (WEb INspector Remote) 使用方法地址： http://ft.qq.com:18888 http://ft.qq.com:18888 在调试目标页面载入 js 脚本  http://ft.qq.com:18888/target/target-script-min.js#woodsrong 在 pc 上用 chrome 打开调试客户端  http://ft.qq.com:1888/client/woodsrong 接下来你懂的 …

http://f.qq.com 远程调试 Bookmark debug

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

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

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

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

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

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

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

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

http://f.qq.com 图片本地压缩你担心性能问题吗？部分实验数据 HTC Incredible （ 1Ghz ）整个压缩过程耗时约 3s #sourcecompressedTotal time(ms) 1850k66k2656 21.4M81k2773 31.25M68k2705 42M158k2834

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

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

http://f.qq.com 其他技巧使用 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 请求头

http://f.qq.com 参考资料 HTML5. http://www.w3.org/TR/2011/WD-html5-20110525/. 2012.12.2http://www.w3.org/TR/2011/WD-html5-20110525/ W3schools. http://www.w3schools.com/. 2012.12.2http://www.w3schools.com/ Know iOS Resource Limits. http://developer.apple.com/library/safari/#documentation/AppleApplicati ons/Reference/SafariWebContent/CreatingContentforSafarioniPhone/C reatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP40006482 -SW15. 2012.12.2 http://developer.apple.com/library/safari/#documentation/AppleApplicati ons/Reference/SafariWebContent/CreatingContentforSafarioniPhone/C reatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP40006482 -SW15 Weinre. http://people.apache.org/~pmuellr/weinre/docs/latest/. 2012-12- 2http://people.apache.org/~pmuellr/weinre/docs/latest/ JpegEncoder. http://www.bytestrom.eu/blog/2009/1120a_jpeg_encoder_for_javascript. 2012-12-2 http://www.bytestrom.eu/blog/2009/1120a_jpeg_encoder_for_javascript JpegMeta. http://code.google.com/p/jsjpegmeta/. 2012-12-2http://code.google.com/p/jsjpegmeta/ Seajs storage plugin. http://ux.etao.com/posts/449. 2012-12-2http://ux.etao.com/posts/449

http://f.qq.com Thank you all! Q & A

http://f.qq.com 附：用户浏览器分布

http://f.qq.com 附：用户网络分布

http://f.qq.com 附：用户首屏数据加载时间

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

Similar presentations

Presentation on theme: "Woodsrong javascript:alert(“hello, world ”); var shareInfo = { title: “ 朋友网触屏版开发分享 ”, author: “woodsrong”, time: “2012-12-14” }; 朋友网触屏版开发分享."— Presentation transcript:

Similar presentations

About project

反馈

请登录

Auth with social network:

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

Similar presentations

Presentation on theme: "Woodsrong javascript:alert(“hello, world ”); var shareInfo = { title: “ 朋友网触屏版开发分享 ”, author: “woodsrong”, time: “2012-12-14” }; 朋友网触屏版开发分享."— Presentation transcript:

Similar presentations

About project

反馈