《HTML 與 JavaScript Web Apps 開發實務》
原文書官網:http://html5e.org/
中文書參考:https://www.books.com.tw/products/0010582159
本篇記錄於 2017.12,有些框架已不適用,請自行更新資訊。

  • 要求行動設備的 CPU 設定初始動畫,接著在動畫運行期間,讓 GPU 只負責合成不同的圖層,像 CSS3 的 transalte3d、transform3d、translateZ 讓動畫元素擁有自己的圖層
  • 使用 CSS 的 garden、box shadow、borders、background-repeat 等於讓設備忙碌的繪製圖像
  • 在行動 web 程式中重度使用 CSS 裝飾會嚴重拖慢瀏覽器速度
  • CSS sprite 讓設備只下載一張圖像,至於較小的圖像應使用 base64
  • 不需重繪的動畫為:transition-property、opacity、transform
  • CSS 某些選取器會削弱瀏覽器效能,例如 div[style*=‘foo’]


除錯與硬體加速

  1. 減少圖層數量
  2. 讓圖層越小越好
  3. 切勿時常更新圖層
  4. 依需求剪裁複合圖層
  5. 請使用試誤法,進行測試非常重要


記憶體消耗

開啟與手機裝置一樣大小的螢幕尺寸,才能真正知道行動設備上的記憶體消耗量


擷取與快取

  1. 擷取:透過預先擷取網頁,讓使用者離線狀態時使用應用程式,去除進行導覽時的等待時間
  2. 快取:使用並行(concurrent)或非同步的方法來擷取或快取頁面,也許可用到 localStorage
  3. ajax 與剖析回應訊息:iframe 的 sandbox 模式會比 innerHTML 安全且快


框架與方法

所有的事物都放到同一個網頁,為了使用 ajax 和 CSS3 轉場來模擬本金應用程式的感覺並動態載入資料,這會產生類本機的轉場及更少量的 HTTP 初始請求

評估行動 javascript 框架時應該考量:

  1. 觸碰式螢幕的最佳化,請確保框架使用 CSS3 轉場來處理動畫
  2. 所有主流平台(等級 A 與 B)瀏覽器的跨平台一致性
  3. 使用(或包裝)最新的 HTML5 及 CSS3 標準
  4. 有堅強的開源社群支持

換頁方式:


行動除錯

  1. weinre
  2. Adobe Shadow
  3. Opera 遠端除錯 dragonfly


瀏覽器平台

  • 用戶端產生 HTML 可以降低伺服器的負擔,帶來更佳體驗,相較於展示用的 HTML,JSON 和 XML 使用較少的頻寬,也不需經常字串串接和轉義
  • CDN 的好處是避免使用者再次下載一樣的 JS

但解析 JSON 或 XML 來產生 HTML 將會耗費較多的記憶體及處理時間,在用戶端運行所有事物將會造成性能的下降,因此在用戶端或伺服端生成 HTML 各有利弊。

用戶端優點:

  1. 較佳的使用者體驗
  2. 降低網路頻寬(減少成本)
  3. 可攜性(可離線)

*缺點:安全性,離線使用像是 WebStorage 

伺服端優點:

  1. 較佳的安全性
  2. 減少用戶端的負擔(電池壽命等等)
  3. 可擴充性(加入更多伺服器可擴充載入能力)

*如果網頁必須持續連接網路,或許應該考慮這一類框架


設備和功能檢測

用戶端功能檢測:Modernizr.jsFormFactor.js

用戶端 userAgent 檢測:(node)https://github.com/tobie/ua-parserplatform.js

伺服端 userAgent 檢測:MobileESP


壓縮(Compression)

常見方法:DEFLATE 與 GZIP 考慮是否要對每一個請求進行壓縮:

  • 確保只壓縮可壓縮的內容、不浪費任何資源來壓縮不可壓縮的內容
  • 針對你的訪客選擇適當的壓縮方案
  • 妥善的設置 web 伺服器,將已壓縮的內容送給可使用的用戶端

除了 JS、CSS、HTML,還有以下資源也應該進行 HTTP 壓縮:

  • XML
  • JSON
  • 新聞源(RSS 與 Atom 訂閱元都是 XML 文檔)
  • HTML 元件(HTC[IE 特有功能])
  • 各種形式的純文字檔,README、LICENSE、Markdown
  • 用來告知搜尋引擎爬抓(crawl)網站的文字檔,因為人們通常不需要存取 Robots.txt,使它經常被人們遺忘,引擎蜘蛛會不斷存取 Robots.txt,讓它變得非常龐大,在你不知情的情況下耗費大量的頻寬
  • 圖像,如 SVG、Favicon、BMP…


精簡(Minification)

在不改變原始碼功能的情況下,移除非必要的字元。 參考:Google 的 Closure CompilerMicrosoft Ajax MinifierYahoo! 的 YUI CompressorPretty Diff JSMinPackerDojo ShrinkSafe


整合

grunt


Websockets

優點:

  • 沒有 HTTP 標頭
  • 在維持活動狀態時不會產生延遲
  • 低延遲時間,更佳的傳輸量與反應速度
  • 減少行動設備電池電力用量


localStorage

儲存較大的 JSON 物件、base64 圖像字串、HTML 程式片段。

須使用 JSON 編碼與解碼:
localStorage.setItem(‘mydata’, JSON.stringify(my data));
JSON.parse(localStorage.getItem(‘mydata’));

使用範例:

  1. Google 手機版搜尋首頁,用 localStorage 儲存 base64 圖像與其他 CSS;桌機版則用 sessonStorage
  2. Twitter 手機版用 localStorage 儲存所有必要資料來呈現使用者介面

使用理由:

  1. 等待時間很久的地方(這需規劃網頁的載入方式以及使用最佳的做法來儲存與取回資料)
  2. 讓使用者輸入的地方,例如一個可輸入評論的表單,在session 超時或錯誤提交表單時,使用 localStorage 來儲存輸入的草稿
  3. 啟用自動登入:因為手機比桌機更難輸入資料,可存放在 cookie 或本機存放區,切勿儲存未經加密的的密碼資訊,必要的話,通常可以在伺服器上撤銷安全雜湊權杖,並將它存放在本機端以啟用自動登入
  4. 使用時戳快取:將 localStorage 與時戳並用,可以在指定時間過後更新他們的資料,https://github.com/pamelafox/lscache 支援 memcahe 快取行為,lscache 模擬記憶快取功能,讓你可以在用戶端快取資料,並且將每一段資料與逾期時間結合在一起,如果容量超過 5MB,會試著移除最靠近逾期時間的項目來釋放儲存空間,如果瀏覽器不可使用 localStorage,程式庫會將降級不進行快取,並回傳 null 給所有快取請求從用戶端同步資料:…
  5. 同步資料庫:目前有一些框架提供這種功能


Geolocation

切記要將電池壽命與設備的延遲時間列入考量(enableHighAccuracy、timeout、maximumAge)

相關框架:
https://code.google.com/archive/p/geo-location-javascript/
https://afarkas.github.io/webshim/demos/