讀書隨筆


《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.js、FormFactor.js

用戶端 userAgent 檢測：(node)https://github.com/tobie/ua-parser、platform.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 Compiler、Microsoft Ajax Minifier、Yahoo! 的 YUI Compressor、Pretty Diff JSMin、Packer、Dojo 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/