Base64圖片制作icon

優勢：

• 可以減少請求(相當于提前把圖片信息提前放到了css的文件當中） ??background:url(data:image/png;base64,{img_data})
• 加快首屏數據的顯示速度

note:體積更大（base64圖片是未經壓縮的）；維護不方便

?

使用CSS3制作icon

youshi優勢：體積更小；

note:維護不大方便；存在兼容性問題；但用在WebAPP上很適合，幾乎不存在兼容性問題；

?

觸屏事件：

1 <script> 2 var body = document.getElementsByTagName('body'); 3 body = body[0]; 4 5 body.addEventListener('touchstart',function(){console.log('touchstart')},false); 6 body.addEventListener('touchmove',function(){console.log('touchmove')},false); 7 body.addEventListener('touchend',function(){console.log('touchend')},false); 8 body.addEventListener('mousedown',function(){console.log('mousedown')},false); 9 body.addEventListener('mouseup',function(){console.log('mouseup')},false); 10 body.addEventListener('click',function(){console.log('click')},false); 11 body.addEventListener('mousemove',function(){console.log('mousemove')},false); 12 13 </script>

?

使用viewport固定整個頁面寬度:

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>

?

ETag是一個可以與Web資源關聯的記號（token）;

(緩存壽命的控制) ? Cache-Control:max-age=2592000

?

前端性能陷阱：

1避免repaint(頁面重繪）,reflow（頁面回流） ?也就是減少對DOM元素的操作

2盡量緩存可以緩存的數據(localStorage,sessionStorage,indexedDB)

3使用CSS3 transform代替DOM操作

?

note（比較Heck,非主流）:

• 不要給非static定位元素（absolute和relative的元素)增加CSS3動畫，不然瀏覽器的開銷會成倍的增加，這是一個原則
• 適當使用硬件加速（觸發GPU的能力來處理），比如canvas就會 ，一般可以使用transform:translate3d(0.0.0); ?這樣，所有具有transform的CSS3屬性的層都會被系統做硬件加速，又不會有任何視覺上的變換，只是讓圖層具有硬件加速的功能

?

真是開發流程：

交互解讀 ? ?設計解讀 ? ?開發（25%） ? 測試

?

移動開發技術選型：?

輕量化；維護簡單；快速開發；高性能

?

框架的選擇；模塊的拆分

?

Base64圖片文件和jsonp.js等lib建議放在文件里，因為這些東西幾乎不變更的；與頁面邏輯，尤其是產品邏輯相關的東西在數量不大的情況下放在頁面效果最好

?

數字不會被當成電話號碼顯示：

<meta name="format-detection" content="telephone=no">

?

轉載于:https://www.cnblogs.com/Hale-Proh/p/6942072.html

總結

以上是生活随笔為你收集整理的WebAPP-1的全部內容，希望文章能夠幫你解決所遇到的問題。

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