html5+css3方式實現mobie app的一些瓶頸

来源:http://www.cnblogs.com/shouce/archive/2016/04/11/5376966.html
-Advertisement-
Play Games

PC的早期階段,也是傳統的C/S模式居多,後進化到B/S模式,並產生了SaaS、雲計算等概念和應用。從客戶端進化到瀏覽器最大好處是客戶端無需更新,減少了大量的更新成本,只需伺服器端進行更新。這也是為什麼現在流行webQQ, google docs, photoshop網頁版的原因。現在同時很多軟體廠 ...


PC的早期階段,也是傳統的C/S模式居多,後進化到B/S模式,並產生了SaaS、雲計算等概念和應用。從客戶端進化到瀏覽器最大好處是客戶端無需更新,減少了大量的更新成本,只需伺服器端進行更新。這也是為什麼現在流行webQQ, google docs, photoshop網頁版的原因。現在同時很多軟體廠商也在製作他們的web版本,國內的一些ERP廠商也開始了這條道路。iPhone、android的巨大成功揭開了移動互聯網的大幕,互聯網企業都想在移動互聯網的的巨大市場中分得一杯羹。游戲、sns、微博、視頻、本地生活服務都在大力發展移動互聯網,推出了自己的app。

  mobie native app指使用手機官方提供的SDK和開發語言開發的手機客戶端軟體,它能夠很好的使用手機提供的一些介面來操作手機的軟硬體資源。隨著html5和css3的流行和webkit對html5和css3的較好支持,很多人開始使用html5和css3來製作mobie app。如前所述,使用web方式製作mobie app最大的好處是,客戶端無需更新,並且數據顯示很多手機用戶不是經常更新他的app程式,同時相對於native app,web方式修改app的界面的成本更低一些。所以說,對於對界面的靈活性有較高要求的app,比較傾向於用web方式實現mobie app。

  android和iphone都提供了webview的控制項,這個控制項實質是一個webkit瀏覽器內核,用於解析html、css、js代碼。所以,native app可以調用webview空間來展示我們的web頁面。同時,由於對css3的較好支持,native那種絢麗的界面就可以用html+css較好的實現出來,達到逼真的native app的效果。

  但是,web實現mobie app有一些瓶頸。以下是我在項目實戰中碰到的,如果各位看官有好的解決方案,請不吝賜教。

  其一,根據百度移動互聯網發展趨勢報告2010Q4,iphone下下載一個1.407k的網頁,建立連接耗時1.35s左右,傳輸耗時0.15s左右。這樣,導致app在建立連接的時候,屏幕處於白屏狀態。也就是說這個app在一秒多的時間內,完全處於白屏狀態,再加上3G、GPRS網路的不穩定,有時候等待app響應需要幾秒甚至1幾秒的時間,這對於速度就是生命的mobie app來說,無疑是個致命的缺陷。

  其二,有人說,native app也需要建立tcp連接,同樣需要耗時這麼長時間。很對,那麼目前常用的解決方案是什麼呢。開機畫面+loading圖片,有了這兩個,程式不會處於假死狀態,用戶擁有耐心繼續等待。那麼,web app是否也能這樣做呢。首先,程式打開同樣顯示開機畫面,畫面結束後切換界面(webview),webview如果無loading圖片依然是在建立連接,依然處於白屏狀態。因為我們無法在開機畫面的時間內對程式進行預載入。然後,使用native方式在webview外面蒙上一層,上面放上loading圖片,但是webview沒有提供web頁面開始渲染的介面,指提供了web頁面load完成的介面。也就是說,如果通過native方式在webview上放置一個loading圖片的話,那麼這個圖片指能在頁面完全載入完消失,這樣也會影響用戶體驗。這裡再提供一種方式,實現這種loading圖片的效果:放置一個靜態頁面在本地,點擊打開靜態頁面,無需建立連接。而後通過ajax方式請求數據來替換頁面內容。這種方式,也是Nokia widget的實現方式,但是這種方式的效率比較低下。

  其三,難以實現本地存儲。本地存儲是html5的一個重要成果之一,但是,基於android存在多版本系統。android低版本中的webkit對html5和css3支持的並不好。簡單的兩個例子是:input type="number"會導致低版本android的webkit直接crash,css3的圓角在低版本的android webkit中也會出現明顯裂縫。現在常用的html5向後相容方案是通過javascript+css+html來模擬html5的一些特性,但過多的js存在於mobie app中會不會得不償失。

  個人覺得,移動互聯網的發展趨勢一定也是從C/S模式向B/S模式轉變。但面臨的困難就是,手機端的瀏覽器更多,對web標準的支持也不盡相同,適配各種解析度的手機屏幕也是讓人很崩潰的一件事情。相信以後的移動互聯網也將適應現在的格局:web方式瀏覽信息,app方式游戲,工具等。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • #登堂入室——JAVA流——文章出自PeterYe,不得私自轉載###我所知道的>java.io裡面的[流],就仿佛太平洋裡面的水一樣,浩浩蕩蕩,橫無際涯。。。——天黑請閉眼,明日再續。。。 ...
  • 獲取【下載地址】 QQ: 313596790 【免費支持更新】三大資料庫 mysql oracle sqlsever 更專業、更強悍、適合不同用戶群體【新錄針對本系統的視頻教程,手把手教開發一個模塊,快速掌握本系統】A 集成代碼生成器(開發利器); 技術:313596790 增刪改查的處理類,ser ...
  • 培訓大數據架構開發! 從零基礎到高級,一對一培訓![技術QQ:2937765541] 課程體系: 獲取視頻資料和培訓解答技術支持地址 課程展示(大數據技術很廣,一直線上為你培訓解答!): 獲取視頻資料和培訓解答技術支持地址 ...
  • Atiti。流量提升軟體設計大綱規劃 v1 q45 1. 通用數據管理1 2. 網頁Url管理模塊1 3. 網站domain管理1 4. ad廣告管理2 5. Task任務管理2 6. 任務執行功能::進入網站,隨機瀏覽網頁2 7. 系統設置2 8. 界面跨平臺h52 9. 開發語言java+h53 ...
  • atitit.userService 用戶系統設計 v5 q330 1. 新特性1 2. Admin login1 3. 用戶註冊登錄2 3.1. <!-- 會員註冊使用 --> 商家註冊2 3.2. <!-- 會員登錄使用 -->3 3.3. <!-- 會員退出登錄 -->3 3.4. <!-- ...
  • 在所有的設計模式開篇中,總是說一個好的架構,或多或少都會有設計模式的出現。當然或多或少也會使用設計模式的相關原則: SOLID+迪米爾原則 1.優化代碼的第一步:單一職責原則 S:單一職責鏈原則:英文名稱為Single Responsibility Principle(SRP) 定義:就一個類而言, ...
  • 寫在最前面:轉載請註明出處 目錄置頂: 關於項目 基於DDD領域驅動設計的WCF+EF+WPF分層框架(1) 架構搭建 基於DDD領域驅動設計的WCF+EF+WPF分層框架(2) WCF服務端具體實現 基於DDD領域驅動設計的WCF+EF+WPF分層框架(3) WCF客戶端配置以及代理 基於DDD領 ...
  • 移動設備已經成為在任何時間的一部分工作。在小型和中型組織人員使用個人平板電腦和智能手機業務。開源社區在這個移動應用工作的增長起到了關鍵作用。有許多開放源代碼的應用程式,可以幫助提高你的創造力。今天我們所列舉的10大開源工具,你會在工作中找到有用的。 1.Convertigo 這是用於開發和部署應用程 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...