HTML 5 APP 與原生 APP的差距到底在哪

2021-07-07 01:20:53 字數 913 閱讀 7920

1、動畫

動畫有很多種,比如側邊欄選單的滑入滑出、元素的響應動畫、頁面切換之間的過場等等,在h5之下的眾多實現方法都沒有辦法達到純原生的效能。一般這些的話有幾種不同的選擇:

比如在乙個新頁面的載入上,如果呼叫底層動畫要考慮的問題有兩個,乙個是本身資源頁面的渲染問題,另乙個是遠端資料的獲取。即便是這些動畫能夠很快的響應,但大量的css頁面會導致渲染卡頓,滑入時可能會有白屏/機器卡頓的現象。為了解決這些效能問題又必須要用到預載入或模擬動畫。即便是這樣,滑入滑出的動畫在低端的安卓機器上還是有很多問題,如果獲取服務端資料處理的方式不合適,卡頓白屏的現象會更嚴重。具體看下面的資料獲取方式。

2、獲取服務端資料

首先要接受的是,這裡的資料獲取都是在資源頁面上非同步完成的,因為只有這樣才能讓這些資源頁面完成預載入或者渲染。但是非同步拿到的資料在填入頁面中時可能會涉及dom操作,眾所周知,dom操作非常消耗效能,如果頁面小還好,頁面稍大資料稍微複雜一點,頻繁的dom操作會導致明顯的閃白。

而且最重要的一點是,如果頁面載入進來之後資料更新的速度太慢,也會讓頁面模板等待很長時間,對使用者體驗又不友好,總不能每次開啟都像瀏覽器一樣等待重新整理是吧。

3、頁面切換

上面我們看到了幾種不錯的實現方式,比如預載入和模擬動畫,甚至有批量的預載入,批量的截圖模擬動畫等等,雖然看起來很友好解決了不少問題,但事實上如果頁面足夠多就會引發另乙個問題——頁面的生存週期。

4、android/ios的區別

正是這些複雜多變的css樣式消耗了效能,但是它帶來了排版的多樣性,能夠細緻到每乙個字寬行高和風格的畫素級處理,才是h5的優異之處。

純HTML5 APP與原生APP的差距在哪?

1 動畫 動畫有很多種,比如側邊欄選單的滑入滑出 元素的響應動畫 頁面切換之間的過場等等,在h5之下的眾多實現方法都沒有辦法達到純原生的效能。一般這些的話有幾種不同的選擇 比如在乙個新頁面的載入上,如果呼叫底層動畫要考慮的問題有兩個,乙個是本身資源頁面的渲染問題,另乙個是遠端資料的獲取。即便是這些動...

uni app常用 HTML5 APP 設定

1.鎖定螢幕方向 鎖定螢幕方向後螢幕只能按鎖定的螢幕方向顯示,關閉當前頁面後仍然有效。可再次呼叫此方法修改螢幕鎖定方向或呼叫unlockorientation 方法恢復到應用的預設值。鎖定螢幕方向可取以下值 portrait primary 豎屏正方向 portrait secondary 豎屏反方...

HTML5 App實戰 3 蘇爾特方格

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!2.現在我們把裝置切換成firefoxos的手機。雙擊裝置開啟裝置的屬性對話方塊,在裝置列表中選擇firefoxos的手機。3.選擇 確定 之後,我們就可以看到iphone5變成了firefoxos手機了。我們不需要上面的 把它刪除掉。4.我們在視...