為什么80%的碼農都做不了架構師？>>> ??

移動設備概述

?目前所有的移動設備在繪圖上，都是用所謂的“共享內存”。與桌面電腦的顯卡不同，移動設備上的圖形硬件沒有專用的內存，只是共享系統內存。這意味著，隨著越來越多的東西被添加到圖形存儲器，系統可用的內存就會越來越少。在我們隨后討論圖形加速時，牢記這一點很重要。

?用戶界面只需讓人感覺快，而無需真的塊。只需及時響應——立即響應用戶，讓他知道有反應了。

?手勢不能等到完成時才反饋。為了讓界面感覺反應迅速，還必須是連續的反饋，當用戶的手指移動時候，界面也應該移動。

?創建一個簡單的內容型網站

?在許多情況下，我們完全可以利用CSS3的新特性——媒體查詢來避免分支。

?由于網站要能在最慢的免費的Android手機上運行，當涉及CSS選擇器的性能時，我們要非常挑剔，也就是說要避免使用后代選擇器。

?提高第一次加載的速度

?對于較大的文件，比如比較大的圖像，說法有所改變。因為下載站到了請求時間的絕大部分，所以并行下載更好。出于這個原因（以及一些其他的原因），在網站上將圖像與其他資源置于不同的域下市合理的。

?不過由于每個域都需要進行DNS查找，添加太多的域反而會更慢。使用至少兩個，至多不超過五個域名是YSlow的經驗法則。

?內容分發網絡（CDN）是一種服務，讓你能夠從“周邊的服務器”上獲取某些（通常是靜態的）內容：服務器分布在很多地方，最好的情況是可以就近地服務最終用戶。這種服務通常用于圖像、JavaScript和CSS文件，因為他們不太可能動態變化。

?請求數太多時，內聯樣式不會改善多少狀況。由于在文檔中，圖像標簽沒有位于腳本標簽之前，所以瀏覽器在jQuery完全加載完畢之前無法開始獲取圖像。

?Fickr上，用戶上傳大尺寸的圖像后，其他尺寸的圖像會自動創建。

?避免圖像太大的訣竅是：確保大的圖像沒有被移動端下載，只有該設備對應的圖像才應該下載。通過媒體查詢來區分不同的圖像。

?加快下一次訪問的速度

?大多數瀏覽器都有一個最大緩存大小。當緩存達到這個大小時，就會從緩存中刪除最近最少使用的項目。

?使用PJAX提升觸摸體驗

?使用PJAX來代替加載頁面，即將pushState和AJAX結合起來使用：AJAX負責更新內容，pushState負責更新URL。

?大多數用戶都知道URL是什么，知道他事項互聯網上一個特定的“東西”。當他們在Twitter上單擊一個鏈接的時候，他們希望看到的內容和他們的朋友看到的內容完全一樣。破換鏈接是一個極大的錯誤。

?輕觸 VS 單擊：基本的事件處理

?之所以有點慢，是因為每一次單擊都延遲300毫秒。為了獲得觸摸界面的最佳性能，你需要用觸摸時間，而不是單擊事件。

?CSS過渡、動畫和變換

?盡量避免使用setTimeout動畫。對于大多數人物，CSS過渡（transition）可以達到你想要的效果，而且體驗更好。

?當你優化了所有的動畫之后，可能會發現它們仍然不夠快。現在是時候拿出這把大槍了：CSS變換。

?GPU是專為動畫和合成二設計的。在有GPU的設備上，瀏覽器毀在可能的情況下嘗試使用GPU加速。（2D）變換不一定在GPU上渲染，但3D變換總是在GPU上渲染。

?3D變換導致了文字的模糊。由于2D變換不需要渲染圖像，瀏覽器能夠以較大的尺寸重新渲染文本。GPU只有圖像可供操作，所以它只能按比例放大圖像，從而得到一個模糊的版本。要解決這個限制，一旦動畫完成，我們就可以“凈化”變換的元素。可以在動畫將完成時，通過在出發transitionend或animationend事件時改變樣式，將3D變換轉換回2D變換。

?凈化變換還有一個好處：釋放GPU占用的內存。

?JavaScript性能最優化

?提升感知上的性能的真正秘籍是及時反饋用戶。

?可以在一旦圖像完成加載時使用淡入（fade in）效果出現。這實際上會稍微慢一些，但體驗上感覺更快。

?手勢的基本內容

?觸摸界面的某些管理需要遵循。一些交互需要滑動。最常用的是在一個傳送帶或幻燈片中，必須支持左右滑動來使得觸摸環境合理。

?滾動與滑動

?不到萬不得已，不要試圖重新實現原生滾動，完美復制原生滾動是不可能的。

?方向改變時，最簡單的辦法就是使用媒體查詢去適應不同方向的布局。

?雙指縮放和其他復雜的手勢

無

?

轉載于:https://my.oschina.net/lifj/blog/348245

總結

以上是生活随笔為你收集整理的《HTML5 界面设计与开发》 读书笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。