h5做app和原生app有啥区别？

Posted 2023-05-08

1.H5的性能很差，一般经常改的地方可以用H5，比如论坛，咨询之类的，而且限制也是很大，很多效果是没办法做到的。GUI框架的WebView普遍是这样的。如果一个APP全部由H5来做(不太可能，送审很可能被拒)，那么会显得非常卡。

2.用ios SDK，如果实现热更新是比较麻烦的。对于论坛，咨询这种模块，动不动就改版，做起来比较头疼，用H5就很合适了。尤其在APP跨安卓和iOS的时候，这类模块如果直接用H5，那么就很容易共用。

H5网页App开发和纯原生的App的差距主要聚集在以下几个方面：

1、动画

动画有很多种，比如侧边栏菜单的滑入滑出、元素的响应动画、页面切换之间的过场等等，在H5之下的众多实现方法都没有办法达到纯原生的性能。一般这些的话有几种不同的选择：css3动画、javascript动画、原生动画。

css3动画非常的消耗性能，如果某一个元素用到css3动画可能还看不出来，但大面积或过场使用css3动画会让app低端手机体验非常差。最好的选择一般是通过框架调用底层的动画，但不管怎么样等于在原来的代码上包上了一层，性能还是不可避免的受到影响。

比如在一个新页面的载入上，如果调用底层动画要考虑的问题有两个，一个是本身资源页面的渲染问题，另一个是远程数据的获取。即便是这些动画能够很快的响应，但大量的css页面会导致渲染卡顿，滑入时可能会有白屏/机器卡顿的现象。为了解决这些性能问题又必须要用到预加载或模拟动画。即便是这样，滑入滑出的动画在低端的安卓机器上还是有很多问题，如果获取服务端数据处理的方式不合适，卡顿白屏的现象会更严重。具体看下面的数据获取方式。

2、获取服务端数据

首先要接受的是，这里的数据获取都是在资源页面上异步完成的，因为只有这样才能让这些资源页面完成预加载或者渲染。但是异步拿到的数据在填入页面中时可能会涉及DOM操作，众所周知，DOM操作非常消耗性能，如果页面小还好，页面稍大数据稍微复杂一点，频繁的DOM操作会导致明显的闪白。而且最重要的一点是，如果页面加载进来之后数据更新的速度太慢，也会让页面模板等待很长时间，对用户体验又不友好，总不能每次打开都像浏览器一样等待刷新是吧

这个问题如果没有得到解决，H5开发是很难承担大规模数据的页面，在它们之中频繁切换更是难上加难，那么肯定有人也会想到用MVVM的方式，其实我也写过一些基于MVVM的H5app开发，相对来说它们获取数据和更新数据的方式更敏捷更科学，但写的过程中又要注意很多H5独有的问题，这些问题在下面的页面切换里来讲。

3、页面切换

上面我们看到了几种不错的实现方式，比如预加载和模拟动画，甚至有批量的预加载，批量的截图模拟动画等等，虽然看起来很友好解决了不少问题，但事实上如果页面足够多就会引发另一个问题——页面的生存周期。

试想一下，如果引导页或者主页面缓存了5个子页面的资源，在跳转到响应的子页面时又会缓存这些子页面的下级页面资源，如此反复肯定会占据大量内存使APP的体验下降。那么怎么知道那些页面是需要的，最多缓存多少页面，什么时候结束哪些页面的生存周期呢？在我用过的很多H5APP的框架里都没有对这些问题有一个完美的解答，因此在页面较多内容较多的app开发中可能会因这些资源分配的问题降低性能。

这时候我们回过头来再看看MVVM的数据加载问题，实际上不管哪个MVVM框架，写过的人都知道管理这种新型的前端代码最重要的问题是内存的问题，你既要保证代码写的足够优雅没有任何内存泄露问题，也要考虑到在页面生存周期结束时它们的控制器/页面资源是否得到释放，这对全局有没有什么影响，在多个请求时也要合理的分配资源，甚至是复用这些父级页面传过来的缓存资源等等。较小的APP可能并不会有这些问题，如果你想用纯H5来开发大型app，这很可能会浪费你很多时间——而且结果还不会让你满意。

4、android/iOS的区别

很多人都说纯H5app开发一次编写就能编译Android/iOS两种不同的APP，大大降低了成本。实际上这个观点本身就是值得怀疑的，如果你写过这类APP就能明白我在说什么，它们既不省事，又存在很多BUG，调试时尤其繁琐。举一个很简单的例子，Android和iOS在返回上一页的处理方式上就有明显的区别，iOS的顶部bar在全屏下怎样处理，Android机器出现smart bar怎样处理页面的布局，调用底层硬件时怎样区分不同的场景等等，你需要写一个又一个机型和系统的判断，然后分别在Android和iOS下调试，最后你却发现这并没有卵用，累的要死却什么没学到，只有一堆不知道什么时候会过时的经验。

现在做H5混合APP开发的人很多，但是纯H5却很年轻，很多问题都没有很好的解决，这几个是我在做这些APP时考虑最多的问题。最后说一个很少人注意到的H5优势，大家大谈H5APP时都是快速开发、低成本、多平台等等，但我却觉得它和很多APP开发方式相比有一个不同之处——图文混合的排版。正是这些复杂多变的CSS样式消耗了性能，但是它带来了排版的多样性，能够细致到每一个字宽行高和风格的像素级处理，才是H5的优异之处。

参考技术A 原生app和h5做的app的区别：
1、开发方面的区别

目前React Native开发越来越火，微信小程序是基于React Native开发的，体验接近原生APP，发展前景值得重视。不过好在现在非原生APP同样可以调用蓝牙、相机等硬件，也能顺利发布到苹果APP store。
移动Web App
1、因为运行在移动设备的浏览器上，所以只需要一个开发项目
2、这种应用可以使用html5,CSS3以及JavaScript以及服务器端语言来完成(php,Ruby on Rails,Python)
3、这里可没有标准的SDK，基本任意选择别忘了有一些跨平台的开发工具，比如PhoneGap, Sencha Touch 2以及Appcelerator Titanium等等。
原生App
1、每一种移动操作系统都需要独立的开发项目
2、每种平台都需要独立的开发语言。Java(Android), Objective-C(iOS)以及Visual C++(Windows phone)等等
3、需要使用各自的软件开发包，开发工具以及各自的控件
2、能力方面的区别
移动Web App
只能使用有限的移动硬件设备功能。
原生App
能够与移动硬件设备的底层功能，比如个人信息，摄像头以及重力加速器等等。对于这一点感触很深刻，2016年做新年H5营销小活动的时候，就是因为没有考虑到H5不能使用移动硬件端重力加速器而导致临时替换设计方案。
3、获取方法的区别
移动Web App
1、从移动设备上的浏览器访问
2、不需要安装额外的软件
3、软件更新只需要服务器就够了
4、因为现在没有什么商品或卖场提供这种App，不过一般都是嵌套在系统内部，或者内部系 统中使用
5、跨平台开发，用户不需要去卖场来下载安装App
6、需要过度依赖网络，没有任何缓存数据
7、任何时候都可以发布App，因为根本不需要官方卖场的审核
8、如果你已经有了一个Web App，你可以使用 responsive web design来辅助改进
9、所有的用户都是用同样的版本
原生App
1、直接下载到设备
2、以独立的应用程序运行(并不需要浏览器)
3、用户必须手动去下载并安装这些原生App
4、有一些商店与卖场来帮助用户寻找你的App，app store里面应有尽有。
5、原生型APP应用的安装包相对较大，包含UI元素、数据内容、逻辑框架;
6、手机用户无法上网也可访问APP应用中以前下载的数据。
7、原生型的APP可以调用手机终端的硬件设备(语音、摄像头、短信、GPS、蓝牙、重力感应等)
8、APP应用更新新功能，涉及到每次要向各个应用商店进行提交审核。
9、用户可以自由地选择是否更新软件版本，所以会出现不同用户同时使用不同版本的情况
如果企业选择商领云进行定制开发原生app，需要单独开发两套系统即ios和安卓系统。如果是通过商领云的在线制作app，则可以同时生成ios和安卓系统的app，并且还可以制作小程序、移动网站和微商城，非常方便，而且价格也只需几万左右，具体需要看功能需求。 参考技术B

H5 APP即是一种框架型APP开发模式(HTML5 APP 框架开发模式)，该开发具有跨平台的优势，该模式通常由“HTML5云网站+APP应用客户端”两部份构成，APP应用客户端只需安装应用的框架部份，而应用的数据则是每次打开APP的时候，去云端取数据呈现给手机用户。

原生APP又称Native App，该开发针对IOS、Android、Windows等不同的手机操作系统要采用不同的语言和框架进行开发，该模式通常是由“云服务器数据+APP应用客户端”两部份构成，APP应用所有的UI元素、数据内容、逻辑框架均安装在手机终端上。

1、开发方面的区别（这个地方太专业啦，请教了团队的开发小伙伴）

目前React Native开发越来越火，微信小程序是基于React Native开发的，体验接近原生APP，发展前景值得重视。不过好在现在非原生APP同样可以调用蓝牙、相机等硬件，也能顺利发布到苹果APP store。

移动Web App

1、因为运行在移动设备的浏览器上，所以只需要一个开发项目

2、这种应用可以使用HTML5,CSS3以及JavaScript以及服务器端语言来完成(PHP,Ruby on Rails,Python)

3、这里可没有标准的SDK，基本任意选择别忘了有一些跨平台的开发工具，比如PhoneGap, Sencha Touch 2以及Appcelerator Titanium等等。

原生App

1、每一种移动操作系统都需要独立的开发项目

2、每种平台都需要独立的开发语言。Java(Android), Objective-C(iOS)以及Visual C++(Windows phone)等等

3、需要使用各自的软件开发包，开发工具以及各自的控件

2、能力方面的区别

移动Web App

只能使用有限的移动硬件设备功能。

原生App

能够与移动硬件设备的底层功能，比如个人信息，摄像头以及重力加速器等等。对于这一点感触很深刻，2016年做新年H5营销小活动的时候，就是因为没有考虑到H5不能使用移动硬件端重力加速器而导致临时替换设计方案。

3、获取方法的区别

移动Web App

1、从移动设备上的浏览器访问

2、不需要安装额外的软件

3、软件更新只需要服务器就够了

4、因为现在没有什么商品或卖场提供这种App，不过一般都是嵌套在系统内部，或者内部系             统中使用

5、跨平台开发，用户不需要去卖场来下载安装App

6、需要过度依赖网络，没有任何缓存数据

7、任何时候都可以发布App，因为根本不需要官方卖场的审核

8、如果你已经有了一个Web App，你可以使用 responsive web design来辅助改进(这也是优势?)

9、所有的用户都是用同样的版本

原生App

1、直接下载到设备

2、以独立的应用程序运行(并不需要浏览器)

3、用户必须手动去下载并安装这些原生App

4、有一些商店与卖场来帮助用户寻找你的App，app store里面应有尽有。

5、原生型APP应用的安装包相对较大，包含UI元素、数据内容、逻辑框架;

6、手机用户无法上网也可访问APP应用中以前下载的数据。

7、原生型的APP可以调用手机终端的硬件设备(语音、摄像头、短信、GPS、蓝牙、重力感应等)

8、APP应用更新新功能，涉及到每次要向各个应用商店进行提交审核。

9、用户可以自由地选择是否更新软件版本，所以会出现不同用户同时使用不同版本的情况

即使两者之间有很大的区别，即使H5有一大堆的坑和问题，但是仍旧不妨碍移动WEB无所不在，移动web是目前唯一的支持各种设备访问的平台，也是唯一一个可供开发者发布移动应用的平台，它将各种移动交互与PC系统任务有效的结合在一起。而原生native app可以充分利用设备的特性，这一点是它得天独厚的优势。

正式因为它有复杂多变的CSS样式消耗了大量性能，它才有一个更有竞争力的优势——它带来了多样性的排版，能够细致到每一个字宽行高和风格的像素级处理，能够给你带来不一样的图文汇合的排版。

参考技术C

H5 APP即是一种框架型APP开发模式(HTML5 APP 框架开发模式)，该开发具有跨平台的优势，该模式通常由“HTML5云网站+APP应用客户端”两部份构成，APP应用客户端只需安装应用的框架部份，而应用的数据则是每次打开APP的时候，去云端取数据呈现给手机用户。

原生APP又称Native App，该开发针对IOS、Android、Windows等不同的手机操作系统要采用不同的语言和框架进行开发，该模式通常是由“云服务器数据+APP应用客户端”两部份构成，APP应用所有的UI元素、数据内容、逻辑框架均安装在手机终端上。

1、开发方面的区别（这个地方太专业啦，请教了团队的开发小伙伴）

目前React Native开发越来越火，微信小程序是基于React Native开发的，体验接近原生APP，发展前景值得重视。不过好在现在非原生APP同样可以调用蓝牙、相机等硬件，也能顺利发布到苹果APP store。

移动Web App

1、因为运行在移动设备的浏览器上，所以只需要一个开发项目

2、这种应用可以使用HTML5,CSS3以及JavaScript以及服务器端语言来完成(PHP,Ruby on Rails,Python)

3、这里可没有标准的SDK，基本任意选择别忘了有一些跨平台的开发工具，比如PhoneGap, Sencha Touch 2以及Appcelerator Titanium等等。

原生App

1、每一种移动操作系统都需要独立的开发项目

2、每种平台都需要独立的开发语言。Java(Android), Objective-C(iOS)以及Visual C++(Windows phone)等等

3、需要使用各自的软件开发包，开发工具以及各自的控件

2、能力方面的区别

移动Web App

只能使用有限的移动硬件设备功能。

原生App

能够与移动硬件设备的底层功能，比如个人信息，摄像头以及重力加速器等等。对于这一点感触很深刻，2016年做新年H5营销小活动的时候，就是因为没有考虑到H5不能使用移动硬件端重力加速器而导致临时替换设计方案。

3、获取方法的区别

移动Web App

1、从移动设备上的浏览器访问

2、不需要安装额外的软件

3、软件更新只需要服务器就够了

4、因为现在没有什么商品或卖场提供这种App，不过一般都是嵌套在系统内部，或者内部系             统中使用

5、跨平台开发，用户不需要去卖场来下载安装App

6、需要过度依赖网络，没有任何缓存数据

7、任何时候都可以发布App，因为根本不需要官方卖场的审核

8、如果你已经有了一个Web App，你可以使用 responsive web design来辅助改进(这也是优势?)

9、所有的用户都是用同样的版本

原生App

1、直接下载到设备

2、以独立的应用程序运行(并不需要浏览器)

3、用户必须手动去下载并安装这些原生App

4、有一些商店与卖场来帮助用户寻找你的App，app store里面应有尽有。

5、原生型APP应用的安装包相对较大，包含UI元素、数据内容、逻辑框架;

6、手机用户无法上网也可访问APP应用中以前下载的数据。

7、原生型的APP可以调用手机终端的硬件设备(语音、摄像头、短信、GPS、蓝牙、重力感应等)

8、APP应用更新新功能，涉及到每次要向各个应用商店进行提交审核。

9、用户可以自由地选择是否更新软件版本，所以会出现不同用户同时使用不同版本的情况

即使两者之间有很大的区别，即使H5有一大堆的坑和问题，但是仍旧不妨碍移动WEB无所不在，移动web是目前唯一的支持各种设备访问的平台，也是唯一一个可供开发者发布移动应用的平台，它将各种移动交互与PC系统任务有效的结合在一起。而原生native app可以充分利用设备的特性，这一点是它得天独厚的优势。

正式因为它有复杂多变的CSS样式消耗了大量性能，它才有一个更有竞争力的优势——它带来了多样性的排版，能够细致到每一个字宽行高和风格的像素级处理，能够给你带来不一样的图文汇合的排版。

参考技术D H5开发的web APP和原生APP的区别有以下几个方面：
一、开发方面
原生App
⊙ 每一种移动操作系统都需要独立的开发项目
⊙ 每种平台都需要独立的开发语言。Java(Android), Objective-C(iOS)以及Visual C++(Windows Mobile)等等
⊙ 需要使用各自的软件开发包，开发工具以及各自的控件

移动Web App
⊙ 因为运行在移动设备的浏览器上，所以只需要一个开发项目
⊙ 这种应用可以使用HTML5,CSS3以及JavaScript以及服务器端语言来完成（PHP,Ruby on Rails,Python）
⊙ 这里可没有标准的SDK，基本任意选择别忘了有一些跨平台的开发工具，比如PhoneGap, Sencha Touch 2，APPcan以及Appcelerator Titanium等等。

二、能力方面
原生App
⊙ 能够与移动硬件设备的底层功能，比如个人信息，摄像头以及重力加速器等等

移动Web App
⊙ 只能使用有限的移动硬件设备功能。

三、获取方法
原生App
⊙ 直接下载到设备
⊙ 以独立的应用程序运行(并不需要浏览器)
⊙ 用户必须手动去下载并安装这些原生App
⊙ 有一些商店与卖场来帮助用户寻找你的App，目前app市场不计其数

移动Web App
⊙ 从移动设备上的浏览器访问
⊙ 不需要安装额外的软件
⊙ 软件更新只需要服务器就够了
⊙ 因为现在没有什么商品或卖场提供这种App，所以如何搜索这些移动Web App相当不简单。

四、版本控制
原生App
⊙ 用户可以自由地选择是否更新软件版本，所以会出现不同用户同时使用不同版本的情况

移动Web App
⊙ 所有的用户都是用同样的版本

五、优势
原生App

⊙ 比移动Web App运行快
⊙ 一些商店与卖场会帮助用户寻找原生App
⊙ 官方卖场的应用审核流程会保证让用户得到高质量以及安全的App
⊙ 官方会发布很多开发工具或者人工支持来帮助你的开发

移动Web App
⊙ 跨平台开发
⊙ 用户不需要去卖场来下载安装App
⊙ 任何时候都可以发布App，因为根本不需要官方卖场的审核
⊙ 如果你已经有了一个Web App，你可以使用 responsive web design来辅助改进

六、缺陷
原生App
⊙ 开发成本高，尤其是当需要多种移动设备来测试时
⊙ 因为是不同的开发语言，所以开发，维护成本也高
⊙ 因为用户使用的App版本不同，所以你维护起来很困难
⊙ 官方卖场审核流程复杂且慢，会严重影响你的发布进程

移动Web App
⊙ 无法使用很多移动硬件设备的独特功能
⊙ 要同时支持多种移动设备的浏览器让开发维护的成本也不低
⊙ 如果用户使用更多的新型浏览器，那问题就更不好处理了
⊙ 对于用户来说，这种App很难被用户发现

附：原生App 与 移动Web App:您如何选择？
所以在你准备做移动App时，你应该先问问自己以下几个问题：

1. 你的应用是否需要使用某些设备的特殊功能，比如摄像头，摄像头闪光灯或者重力加速器
2. 你的开发预算是多少？
3. 你的应用是否一定需要网络
4. 你的应用的目标硬件设备是所有的移动设备还是仅仅只是一部分而已
5. 你自己已经熟悉的开发语言
6. 这个应用对于性能要求是否苛刻
7. 如何靠这个应用赢利

从'../components/App'导入应用程序有啥区别；和 var App = require('../components/App');?

【中文标题】从\'../components/App\'导入应用程序有啥区别；和 var App = require(\'../components/App\');?

【英文标题】：what is the difference between import App from '../components/App'; and var App = require('../components/App');?从'../components/App'导入应用程序有什么区别；和 var App = require('../components/App');?

【发布时间】：2019-01-22 01:37:48

【问题描述】：

有什么区别：

import App from '../components/App';

和

var App = require('../components/App');

两者都用于获取组件，但它不能解决我在这里提出的查询： Uncaught Error: Minified React error #130

【参考方案1】：

require 在 NodeJS 中用于指定脚本中需要的模块。欲了解更多信息，请查看here。另一方面，import 是 ES6 中引入的语句，用于导入由另一个模块导出的绑定。，正如它所说的here。

【参考方案2】：

import/export 是 ES6 的功能之一，用于导入/导出模块/组件。 例如：您可以对 React 组件进行命名/默认导出。同样，您可以导入它们。

export default App

尽管大多数网络浏览器无法理解 ES6，但 Babel 或任何其他工具都用于转译。 在后台，这些语句默认转换为 require()，在 node 环境中使用 common.js。

【参考方案3】：

import/export 是 ES6 的特性之一，你不会看到仅仅导入默认导出的好处。例如，您可以像这样导出其他组件...等

  export default MainComponent;
  export OtherComponent

您可以使用 ES6 导入它们：

  import MainComponent, OtherComponent from '../components/App';

你当然可以使用 ES5 来做到这一点，但这会更快......