天天看點

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

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

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

[技術解析]

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

  1. 離線資料緩存

考慮到移動裝置流量的寶貴性及離線的可通路性,網易攝影精選使用HTML5中本地緩存API将使用者通路過的資料儲存在用戶端,是以使用者在離線的情況下可以繼續檢視上一次浏覽過的資訊,在聯網的情況下使用者可以通過手動重新整理的方式更新資料。

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

2.  觸摸手勢

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

架構對移動裝置上的手勢做了更好的支援,支援正常的如滑動、擠捏等手勢,在網易攝影精選中也有具體應用

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

3.  模拟滾動條

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

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

4.  CSS3應用

IOS平台浏覽器核心對CSS3屬性有着非常好的支援,網易攝影精選大量使用了圓角、陰影、漸變、動畫等CSS3新特性,減少圖檔資源的應用,是以整個應用的大小得到極大的優化。

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

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

繼續閱讀