• 1. Yunishi 石玉磊HTML5在Qzone的实践
  • 2. About yuni2
  • 3. HTML5是什么?
  • 4. 广义上
  • 5. JavaScript new API
  • 6. 本地存储静态资源 动态数据6
  • 7. 资源本地存储当用户再次访问页面的时候读取本地cache js 相对于从网络拉取,本地读取的时间可以忽略7
  • 8. 资源本地存储原理 8开始用户访问需要存储结束本地版本号等于外网版本号本地存储中存在该文件本地存储cdn版本号配置
  • 9. 资源本地存储优点 相比于html5官方的manifest cache: 支持js单文件更新,更新后本次立即生效; 支持动态直出页配置manifest cache但是不cache动态页本身; 支持combo文件的cache;且下次combo请求自动排除本地cache已有的文件 在触屏项目实践中,项目针对对plugin storage插件做了以下优化: 在不支持localstorage的平台,manifest.js配置文件直接应用为cache文件的版本号控制; Js本地存、取前加合法性验证9
  • 10. 资源本地存储自动化版本号管理 通过svn钩子实现前端js文件的版本号管理,配置该svn hook后,每次提交js文件都会自动更新manifest.js配置文件10
  • 11. http 304conditional request Cache-control If-Modified-Since Etag If-None-Match11
  • 12. Etag12用户请求读取本地etag构造etag请求Server比较etag使用server数据使用local数据展示本地存储200304更新
  • 13. EtagEtag & 本地存储同比大概节约了40%的流量 13
  • 14. 但是…性能的提升不会显著增加用户,要倾听用户的心声,满足他们更多的需求 拍照上传14
  • 15. 拍照压缩上传基本原理 通过input type=file选择本地图片 通过FileReader Api获取本地图片数据 将本地大尺寸图片渲染到尺寸更小的canvas 通过canvas生成被缩放后的小图的base64字符串 base64字符串可以用来本地预览和ajax上传Input type=fileFileReader ApiCanvasBase64图片地址图片数据图片转换图片地址15
  • 16. 图片本地压缩api支持情况 Input type=file & FileReader canvas Input type=fileFileReader Android QQBrowser 3.X√× Android QQBrowser 4.X√√ Android UcWeb√√表1. fileReader表2. canvas16
  • 17. 图片本地压缩iOS平台bug Subsample 官方文档描述 大于2M的图片读到浏览器里的时候会做subsample处理 最大可以处理的jpg图片为32M 其他类型图片256M内存机器最大可以处理3M图片;大于256M内存可以处理5M图片 大图高度被压缩bug 图片高度只有原来的1/417
  • 18. 图片本地压缩iOS平台实战 Subsample 对大于1024x1024的图片检测是否有被抽值 检测抽值原理:取图片右下角的1x1px像素的aRGB数组判断alpha值 被抽值的 图片按1:2 (经验值) 还原 原始图片大小抽值后大小wh/2w/2h判断该点的alpha值18
  • 19. 图片本地压缩19
  • 20. 图片本地压缩iOS平台实战 高度被压缩bug 计算图片高度被压缩比例,通过贴瓷砖的方法用固定大小的小canvas去分片读取大图到小canvas,拷贝过程中计算压缩比 原始大图 一般大图高度会被压缩到1/4h/4 目标大小瓷砖瓷砖wh拷贝20
  • 21. 图片本地压缩Android平台canvas.toDataURL()输出图片格式限制 w3c标准:image/png;浏览器可选择实现其他格式 Ios支持image/jpg格式输出,可调整压缩质量 canvas.toDataURL(‘image/jpeg’, 0.8) android只支持默认格式 Jpg图片大小只有Png格式的约1/321
  • 22. 图片本地压缩Android平台实战 借助第三方工具库jpegEncoder 将canvas的argb颜色数组转化为为压缩比更高的jpg格式,同时支持设置压缩质量 22
  • 23. 图片本地压缩其实,还可以做的更好! 借助第三方工具库JpegMeta 读取图片meta数据里照片拍摄方向后自动旋转图片 23
  • 24. 图片本地压缩你担心性能问题吗? 小米2A整个过程约1s24
  • 25. 图片本地压缩推荐压缩方案 根据业务特点 图片压缩到800x800以内 压缩质量0.8 Android下2G网络压缩质量调整为0.5 一般2M的图片可以压缩到150k左右 适合移动网络下传输25
  • 26. 百万上传量! 用户 很开心26
  • 27. nodejs取代CGI? 最小成本最大功效27
  • 28. 模块化:页面管理PageManagerPage launchedonCreatePage showed at front of usersonShowonHideonDestoryPage clearedUser navigates to the pageonBackonClickonXxx…28
  • 29. 动静分离29
  • 30. 多普勒测速Qzone touch多普勒测速数据30#dns(s)conn(s)rtt(s)tran(kb/s)2g3.857852.334822.5747814.03743g1.606430.7431090.60804760.1967wifi0.9869210.5502080.44433270.8728
  • 31. nodejs直出31原理 基于nodejs前后端公用一套js模板 对前端更加友好
  • 32. nodejs直出容灾 当nodejs请求非关键路径出错时,转化为异步渲染 吐页面到浏览器,浏览器尝试异步再次请求 当nodejs请求关键路径出错时 提示用户错误信息 32
  • 33. nodejs直出测速 可查看时间点直出一般在2.5s;而异步渲染则大于5s33
  • 34. nodejs直出测速 Nodejs内网拉取后端cgi耗时(180ms左右)34
  • 35. nodejs直出测速 Nodejs渲染模板耗时(可以忽略)35
  • 36. HTML5是
  • 37. 理想与现实37
  • 38. H5+Q+(PC) Phonegap QCML SNG H5 hybrid SDK 微信JS SDK 38
  • 39. (本页无文本内容)
  • 40. javaAndroid40loadUrl Load the given url addJavascriptInterface Use this function to bind an object to JavaScript so that the methods can be accessed from JavaScriptwebviewJava调用Js mWebview.loadUrl(“javascript: JS_FUNCTION”);Js调用Java mWebView. addJavascriptInterface(JAVA_OBJECT, “OBJECT_NAME_IN_JS”)
  • 41. ios41Objecct cUIwebviewoc调用Js NSString *title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];Js调用oc window.location = “phonegap://COMMANDSstringByEvaluating -JavaScriptFromString Inject javascript functions into a uiwebview
  • 42. 问题Android平台 Java通过webview.loadUrl(“javascript:commands”)执行 JS方法时会隐藏用户正在输入使用的软键盘 iPhone平台 使用自定义协议如window.location=phonegap://commands不能实现连续多次调用(白屏)42
  • 43. javaAndroid43addJavascriptInterface Use this function to bind an object to JavaScript so that the methods can be accessed from JavaScriptwebviewJs调用Java Js可通过官方接口直接调用java mWebView. addJavascriptInterface(JAVA_OBJECT, “OBJECT_NAME_IN_JS”) Java调用js java不直接调用js,java调用js时只是将需要执行的js函数保存到java队列;js定时到java环境通过java接口getCommands取到所需执行的js函数队列Js cmdJs cmdJs cmdJs cmdJs cmd……exec(“js cmd”)
  • 44. ios44Objecct cUIwebviewoc调用js oc可通过官方接口直接调用js NSString *title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"]; js调用oc js 不直接调用ios平台oc方法,js调用oc函数时只是将需要执行的oc函数保存到js队列;oc定时到js环境通过js接口getCommands取到所需执行的oc函数队列oc cmdoc cmdoc cmdoc cmdoc cmd……stringByEvaluating -JavaScriptFromString Inject javascript functions into a uiwebviewexec(“oc cmd”)
  • 45. H5的未来45
  • 46. 还是一个态度
  • 47. 敢吃螃蟹
  • 48. 提炼和分享
  • 49. 融合Native +Web公司 + 业界业务 + 开源49
  • 50. 健康生活
  • 51. 为H5继续奋斗20年!
  • 52. 对开源的一点思考和聪明的人一起工作 持续跟进,追逐技术红利52
  • 53. 53
  • 54. https://github.com/QzoneTouch 微信:yunishi Q & A54
  • 55. 参考资料HTML5. http://www.w3.org/TR/2011/WD-html5-20110525/. 2012.12.2 W3schools. http://www.w3schools.com/. 2012.12.2 Know iOS Resource Limits. http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP40006482-SW15. 2012.12.2 Weinre. http://people.apache.org/~pmuellr/weinre/docs/latest/. 2012-12-2 JpegEncoder. http://www.bytestrom.eu/blog/2009/1120a_jpeg_encoder_for_javascript. 2012-12-2 JpegMeta. http://code.google.com/p/jsjpegmeta/. 2012-12-2 Seajs storage plugin. http://ux.etao.com/posts/449. 2012-12-2 55
  • 56. 附:用户浏览器分布56
  • 57. 附:用户网络分布57
  • 58. 附:用户首屏数据加载时间58