首頁 > html教程 > HTML熱點 閱讀:0更新時間:2020-12-20 09:50:24

網易攝影推出html5開發的iPad APP

網易攝影精選是網易攝影(http://pp.163.com/)出品的第一款基于html5開發的ipad應用,聚焦于用戶瀏覽美圖時的體驗,崇尚極簡主義的設計,一切皆為用戶看到自己喜歡的高清美圖而服務。沒有復雜的功能,用戶不需要注冊、填寫任何信息就能使用。

[技術解析]

網易攝影精選采用目前比較流行的混搭模式(native+web)開發,native層選用phonegap開源框架用來提供web層對設備功能的支持,web層基于網易自主研發的前端開發框架用來實現頁面布局及業務邏輯,應用對部分HTML5/CSS3技術做了實踐,整個應用大小只有500K左右。

  1. 離線數據緩存

考慮到移動設備流量的寶貴性及離線的可訪問性,網易攝影精選使用HTML5中本地緩存API將用戶訪問過的數據保存在客戶端,因此用戶在離線的情況下可以繼續查看上一次瀏覽過的信息,在聯網的情況下用戶可以通過手動刷新的方式更新數據。

2.? 觸摸手勢

由于移動設備對頁面上的點擊事件會有一定的延遲,網易攝影精選用戶操作使用了框架提供的自定義點擊事件來提高操作的響應速度。

框架對移動設備上的手勢做了更好的支持,支持常規的如滑動、擠捏等手勢,在網易攝影精選中也有具體應用

3.? 模擬滾動條

由于大部分移動平臺都不支持節點的overflow:scroll的樣式,因此框架也為具體應用提供了模擬滾動條,這在網易攝影精選中也有多處應用,并獲得接近native的效果及流暢的性能體驗。

4.? CSS3應用

IOS平臺瀏覽器內核對CSS3屬性有著非常好的支持,網易攝影精選大量使用了圓角、陰影、漸變、動畫等CSS3新特性,減少圖片資源的應用,因此整個應用的大小得到極大的優化。

?

另外,網易攝影精選應用在開發過程中也碰到很多問題,如IOS 4.x上出現動畫閃爍、應用退出等問題,通過實踐得出的一些開發建議如盡量減少動畫播放過程中對頁面上的DOM操作、盡量避免使用陰影效果的虛化度、在低版本設備上盡量避免太多動畫疊加、對應用的內存管理上的實踐包括如動態控制大圖頁的圖片加載(防止用戶在快速撥動的過程中、下載大量圖片)、控制大圖節點的分配和回收(在大圖撥動的過程中,只保存當前圖片的前一張和下一張)等。


beylze編程學院,一個分享編程知識和seo優化知識的網站。跟著beylze一起學習,每天都有進步。

通俗易懂,深入淺出,一篇文章只講一個知識點。

文章不深奧,不需要鉆研,在公交、在地鐵、在廁所都可以閱讀,隨時隨地漲姿勢。

文章不涉及代碼,不燒腦細胞,人人都可以學習。

當你決定關注beylze(公眾號:beylze),你已然超越了90%的其他從業者!

相關文章

優秀教程

国产亚洲欧美日韩