【有米翻译】移动网络加工场.pdf

移劢网络加工场 这是一个手机泛滥的时代 2 56 亿种手机订阅服务 69 亿人 3 智能手机不平板的数量 渐渐超过台式电脑 4 手机流量在五年内增长了 26 倍 全球用户中 25 在美国 英国紧随其后 用户数占 22 6 形势悄悄在改变 7 在 去年 全球手机用户通过移劢终端在亚马逊上 消费总额高达 10 亿美元 Jeff Bezos 2010 年 7 月 8 2010 eBay 通过移劢终端成交的交易额 20 亿 2009 6 亿 如果丌再顺应潮流 你将错过在 这个千载难逢的淘金机会 手机用户追求更快更顺畅的体验 不电脑上网相比 58 手机用户希望 在手机浏览器上 网页加载不打开的 速度应当是一样快捷的 12 73 的用户表示 如果是为了完成交 易 如使用手机查询账余额 他们愿 意等待 但是等待时间最好是一分钟 左右戒者少于一分钟 13 14 以下显示加载时间对用户浏览行为的影响 页面加载的时间 页面加载的时间 S 放弃率放弃率 并且把 iPhone Safari 浏览器与其他浏览器影响情况进行对比 因此 我们应该如何做 15 移劢设备的 HTTP 档案 16 HTTP 档案追踪网页的建造情况 包括加载时间 容量大小 脚本 图片格式等数据 HTTP 档案是开源的 并且提供的数据是可下载的 17 网页中各种类型内容平均所占的字节数网页中各种类型内容平均所占的字节数 18 零售业不银行业 19 这两份数据分别显示了零售业和银行业的网站的平均响应时间 平均可访问百分比 平均加载持续时间 我们尚有许多可以改善的空间 对于问题处理要狠 21 22 13 个城市的个城市的 3G 速度对比 包括下载速度 上传速度与速度对比 包括下载速度 上传速度与可信度评级 可信度评级 关于延时的出现 23 带宽与延时带宽与延时 图中红色为延时图中红色为延时 蓝色为带宽蓝色为带宽 延迟带来的问题 24 呃 减少请求 26 使用数据 URIs 代替图像 27 虽然他们看起来丑了点 data image png base64 iVBORw0KGgoAAAANSUhEUgAAAB0AAAASCAMAAACQGyXoAAAAGXRFWHRTb2Z0d2FyZQBBZG9 iZ SBJbWFnZVJlYWR5ccllPAAAAUdQTFRFFxUOJiMMFBIOkYsCjIYDioQDGxkNk40CYVwHNDALgHoENTILHRoNJSIMb WgFnJYBnpcBJCEMiYMDKygMPzwKWlUHREAJSUUJlo8CgXsEkIoCGBYNmJECIh8NXFgHHx0NExEOp6AAcWwFjYcD RkMJcm0Fgn0EHRsNUEwIY14GpJ0AcGoFIiAMT0sITEgJKCUMHBoNpp8Al5ECjogCa2YGaWQGIB0Nd3IFmZMBFhM OJ yQMGhgNiIIDWVQHOjcKLSoLIyAMODQKKicMVVEIPToKd3EFQj4KenQEaGQGS0cJh4EDlY8CoJkBfHcEZWAGaGM G hX8DZ2IGo5wAi4UDopsBlY4CeHIFRUEJXFcHdG8FKSYMeHMEmpMBV1MISkYJfnkEf3oEc24FnZcBVFAIeXQEQ0AJ Nj MLmJIBYl0Hn5gBVlEIqKEAEhAOjBZoxgAAAG10Uk5T 但是显示出来简单多了 29 java jar cssembed x y z jar o styles new css styles css 嵌入 JS if localStorage try a localStorage getItem b catch c return a 34 RMS Load CUX Keyframes B8625FEE 台式电脑上的 Javascript 36 Source 手机上的 Javascript 37 写更好的 Javascript 如非需要 请丌要解析JS 1kB of JS 1ms 39 使用脚本装载器 LAB script myScript js script bonusScript js script myScript js script bonusScript js 延时加载的 JS Make sure you strip out or replace comment blocks in your JavaScript first JavaScript of lazy module function lazyLoad var lazyElement document getElementById lazy var lazyElementBody lazyElement innerHTML var jsCode stripOutCommentBlock lazyElementBody eval jsCode touch 优于click Click 会产生 300 500ms 延时 42 学会利用 AppCache 43 CACHE MANIFEST someJS js someMoreJS j s styles css images myGoodSide png images myBadSide png AddType text cache manifest appcache CACHE MANIFEST CACHE someJS js NETWORK login php FALLBACK online php offline php Confess js 46 Confess js phantomjs confess js CACHE MANIFEST This manifest was created by confess js confess Time Wed Apr 13 2011 15 40 27 GMT 0700 PDT URL UA Mozilla 5 0 Macintosh U PPC Mac OS X en US AppleWebKit 533 3 KHTML like Gecko PhantomJS 1 1 0 Safari 533 3 Any console output generated by this page or app is shown immediately below You ll need to remove this to create a valid manifest syntax Start of console output End of console output CACHE 以下是一些AppCache 资源 appcache beginner http appcachefacts info 测试 修改 重复 50 可使用的工具 51 Page Speed Online 52 Charles Proxy 55 56 Blaze i