標籤：

如何看待html5在移動端的未來？

01-06

首先反對下現在的一樓的答案，原生效果非常容易實現，他說很艱難我只能懷疑他到底搞清楚HTML5 的API了沒，他的比喻

用一堆離散的石頭去搭細膩的雕塑一樣痛苦不堪。

這一點我是認同的，但是我不認為前端領域現有的工具和技術是離散的石頭。

現在的適用於移動端的前端框架類似：

  • Ionic: Advanced HTML5 Hybrid Mobile App Framework

  • Reapp - Hybrid apps, fast

已經非常完善與強大了，效果非常接近原生應用（不包含性能），開發成本也非常低，構建／迭代起來非常快。

最最重要的是如果不想花時間熟悉API,並且花時間對自己目標的系統的各種特性加以了解,那麼是無法避免的要掉到一些坑裡面爬不出來的。

再說我的觀點：

移動應用的未來取決於移動設備晶元性能提升的有多快。

我在2013年的時候讀到一篇非常有意思的文章：

為什麼移動Web應用程序很慢

這篇文章裡面有幾個有意思的觀點非常值得探討：

  1. 在Benchmark中，Javascript 的速度比原生代碼慢4.5 ~ 5倍

如果你在想「如果是計算密集型（CPU-bound）的功能，本地代碼比Nitro JS快多少呢」，那麼答案是差不多5倍。這個結果大致上和Benchmark Game在x86/GCC/V8上面的結果一致，那裡面的GCC/x86通常比V8/x86快2到9倍。所以結果大致上是正確的，無論是ARM還是x86。

這裡關鍵是要理解4.5 ～ 5倍是什麼程度的差距：

如果你的C程序運行了10ms，那麼一個運行50ms的JavaScript程序差不多是接近C的速度了。如果你的C程序運行了10s，那麼一個運行了50s的JavaScript程序對於大多數正常人來說很可能就不是接近C的速度了。

2. x86架構的CPU比ARM 架構的 CPU 快 10倍左右

這個數據來自於作者2013年寫文章的時候，對比的是 iPhone 5 和 Macbook Pro. 恰巧我手上就有一部 iPhone 5，它在現在(2015年中) 運行相當複雜的web app都可以達到令人滿意的流暢度。

下面是廣告：

我測試過

  • https://weixin.teambition.com/ (需要關注teambition 微信公眾號，在微信內訪問)
  • 石墨 - 最優美的在線協作文檔
  • https://onedrive.live.com/

這些webapp 基本是我能找到的市面上最複雜的mobile web app，但是離它們各自的desktop web app version 體驗和複雜度都還差很遠（不好具體的量化，但是可以很好的反映出desktop 和 mobile 10倍的性能差距）。而實際上，這些應用的 desktop version 的功能和體驗，已經完全不輸 native app了，這說明在一些場景下（在線協同文檔編輯這個複雜量級及其以下的場景），webapp 已經可以差不多達到 native app 的性能以及體驗了。

3. ARM 在短時間內性能很難追上 x86

作者在2013年引用了很多東西來證明這一點，但是到現在其實我還不能確定 短時間 有多短，因為按照目前的情況來看： Apple Nvidia Qualcomm 的 ppt 越寫越厲害。

但我對硬體其實也沒有很深入的研究，沒有找到客觀數據也不好確定 ARM 從13 年到15 年到底有多大的性能提升。

我的觀點是，摩爾定律可能還會在一段時間內是正確的，但是性能提升的比例是否和晶體管數量增加的比例成正比值得懷疑。

4. 由於GC的存在，內存對性能的影響遠比硬體性能差距帶來的影響大的多的多

這個情況可能在近幾年得到改善，因為現在甚至出現了 4GB RAM 的 Android 設備和 2GB RAM的 iOS設備。

這是文中最重要的一幅圖：

Y軸是垃圾回收所用的時間，X軸是「相對的內存足跡」，相對於什麼？相對於所需的最小內存。

這張圖想說明的是，「如果你有6倍以上你實際需要的內存，那麼使用垃圾回收是沒有問題的。但是如果你只有小於4倍你實際需要的內存，那麼災難就要降臨了。」

特別的，如果垃圾回收時系統擁有5倍於所需的內存時，它的運行時性能差不多甚至是超過顯式內存管理。但是，垃圾回收的性能在必須使用小堆（small heap）的情況下會出現急劇下降。如果有3倍於所需的內存的話，它會跑得慢17%；如果只有2倍於所需的內存的話，會慢70%。垃圾回收比物理內存的換頁更容易受到內存不足的影響。在這種情況下，我們所測試的所有垃圾回收器相對於手動內存管理都出現指數級的性能下降。

眾所周知 Javascript 是無法手動管理內存的，這也意味著，在內存足夠大（5倍於 webapp 運行時所需內存）之前，我們無法做任何事情來對這種影響進行優化。

5. Javascript 的實現在近幾年 （2011 ~ 2013 ） 並沒有本質的性能提升

這裡是作者測試的 Chrome 10 vs Chrome 27

在我看來，在這個期間的性能提升還是太小，不足以支撐JS馬上就會足夠快這樣的論調。然而，要說我過分強調這個情況也沒錯，畢竟JavaScript的計算密集型操作的確在發生變化。但是推我來說，這些數字可以得出更大的推斷：這些性能提升的幅度還不足以在一定時間之內使得JavaScript的速度趕上原生代碼。你需要性能達到2-9倍才能跟LLVM競爭。這些提升是好的，但還不足夠好。

Javascript 引擎的性能提升確實不足以支撐 「Javascript 馬上就能變得足夠快」 這一假設。

6. 電池技術的發展至關重要

這一點其實是最好理解的，性能的提升帶來的是功耗的增加。

總結一下我的看法：

1. 移動 web app（提問是html 5，我認為不太準確）的發展主要受到性能的制約，目前已經有足夠複雜的 Desktop Web App 實現，例如Google docs， ondrive ， Teambition（廣告）這樣，受制於性能的差距，移動端現在還沒有條件實現這麼複雜的 web app.

2. 移動web app 可能很快（我的預測是3~5年）就會達到目前 （2015年）的複雜度，預測這個時間是因為我了解到在最新版本的Android 中 搭載 V8 引擎的 Chrome 將會成為默認瀏覽器（非常重要），以及 64 位 ARM 處理器的快速發展（更多大內存的移動設備將會出現）.

3. 前端技術的高速發展足以支撐 mobile web app能夠做到足夠複雜（已經有不少了），在工程化方面前端已經開始慢慢的縮小和一些有著悠久歷史語言的差距了（還是差很遠）。

4. mobile web app 很有前途，瓶頸不在html css Javascript 身上，每種語言都有缺陷，足夠了解就可以避免踩坑。

另外，建議大家讀一下引用的文章，寫的非常嚴謹：為什麼移動Web應用程序很慢

從各個平台來看，移動端是趨勢，這也是為什麼這幾年移動互聯網創業火熱的原因，就連菜市場賣菜的大媽都要搞自己的app,當然是不是泡沫就另當別論了。我覺得H5的發力點就是在app,H5+js+css--&>打包app，簡潔、高效、一次開發多平台適用的這種模式將會被越來越多的人接受。HBuilder,AppCan這些整體解決方案的出現，也能讓那些嘲笑H5App性功能障礙的native高富帥們消停會了，phonegap+sencha已成過去時，前端的福音已經到來。

我在看老周的《方法論》時，他有一個觀點我特別認同，『『你永遠打不敗的競爭對手就是趨勢，趨勢一旦爆發，就不會是一種線性發展，它會積蓄力量於無形，最後突然爆發成雪崩效應，任何不願意改變的力量都會被毀滅，被市場邊緣化』』，H5就是未來的趨勢，雖然發展有些曲折，但你看看w3c不斷推出的H5特性，各大公司的招聘啟示，就連我賣茶葉蛋的同學都知道H5game...,你知道為什麼所有的前端都對ie嗤之以鼻嗎？難道是因為界面丑嗎？圖樣圖森破！

適合內容型（也就是傳統網站）應用。稍微複雜一些的，都不適合。以後也不適合。

我現在用HTML5開發移動應用，也不複雜，但是比預想的麻煩很多，效果和成本都比開發兩套原生程序差。

這跟HTML、JavaScript、CSS的先天缺陷有關。就像用一堆離散的石頭去搭細膩的雕塑一樣痛苦不堪。

尤其是客戶要求實現原生一樣的效果就更痛苦了。比如客戶要求移動WebApp實現和iOS日期選擇框一樣的效果，在安卓上也一樣效果。

APP html5化是一個趨勢 微信 支付寶等超級APP 非核心功能基本上都用html5實現的 這種優勢就是更新快 部署快 不需要用戶升級APP 不需要蘋果審核 但如果html5想要完全替代原生APP 個人不看好

H5的生態圈正在完善，引爆H5是遲早的事，拭目以待。

首先，移動是未來的趨勢，移動可以讓人們充分利用碎片時間，滿足各種需求。

其次，html5是一種實現移動應用的方式，隨著device API的豐富，給了h5各種可能性

那麼，html5可以做什麼？

大家討論的比較多的是html5和native的性能對比，開發速度，維護，升級等方面的問題，但這些在我看來不是大問題，隨著硬體的提升，相信html5的性能會越來越好。我比較看好的是device API在未來可以應用的空間：

1. 利用重力感應開發物理遊戲

2. 陀螺儀實現搖一搖

3. video和audio開發語音識別和視頻通話、虛擬現實、增強現實

4. 濕度和溫度感測器可以開發智能家居

5. webnfc可以用來開發近場通訊支付

6. 震動API

7. 距離感測器

8. 噪音檢測

未來還會有更多的感測器API實現，相信這將會讓前端開發者有機會開發智能應用。

開發語言降低門檻和人類可續技術進度都是一定會發生的事情。

為什麼有很多名人讓人們警惕人工智慧？ - 科技

看了這篇文章你就能感覺到 了。

推薦閱讀：

TAG:HTML5 | HTML5遊戲 | 移動互聯網HTML5 | HTML5應用 |