移勱網絡加工場 這是一個手機泛濫的時代 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