H5页面与原生页面的区别

一、定义
1.H5，即是html5，超文本标记语言，用于描述网页内容结构的语言，网页编程中由它有负责描述页面数据和信息

2.JS，即是JavaScript，广泛用于web应用开发中的脚本语言，负责响应用户的操作，为网页添加动态功能

3.Native App，即传统的原生APP开发模式，Android基于Java语言，底层调用Google的 API；iOS基于Objective-C或者Swift语言，底层调用App官方提供的API

4.Hybrid App，即原生和web的混合开发模式，由原生提供统一的API给js调用，实现跨平台的效果

简单来说，原生是Native App ，H5是Web App。

二、鉴别方法
1.看断网时页面显示情况

断网时可正常显示页面即原生页面，显示404或报错则为H5页面。

2.看布局边界（仅针对安卓手机适用）

连续点击手机版本号，打开开发者选项中的显示布局边界。在页面元素很多的情况下，布局是一整块的是H5页面，布局密密麻麻的是原生控件。即页面有布局的是原生，否则为H5页面。

3.看复制文章的提示

比如是文章资讯页面可以长按页面试试，如果出现文字选择、粘贴功能的是H5页面，否则是native原生页面。
注意：有些原生APP开放了复制粘贴功能或者关闭了。而H5的css屏蔽了复制选择功能等等情况。需要通过对目标测试APP进行对比才可知。

4.看加载时是否有载入线条

如果在打开新页面导航栏下面有一条加载的线的话，这个页面就是H5页面，如果没有就是原生的。

5.看app顶部导航栏是否有关闭操作

如果APP顶部导航栏当中出现了关闭按钮或者有关闭的图标，则是H5页面，原生的不会出现。

6.看页面刷新是否明显（前提是要有下拉刷新功能）

如果界面没有明显刷新现象的是原生的，如果有明显刷新现象的是H5页面。

7.看下拉是否有网址显示

下拉页面时显示网址提供方的一定是H5。

三、优缺点
1.H5
（1）优点：支持跨平台，安卓、ios不需要单独开发，只需要开发一套即可；用户无需下载,打开网址即可访问；开发简单，开发成本低，入门门槛低。
（2）缺点：每次打开页面，都需重新加载获取数据；过分依赖网络，访问速度无法保证。

2.原生
（1）优点：直接依托于操作系统，交互性最强，性能最好。
（2）缺点 :开发成本高,无法跨平台；不同平台（Android和iOS）需要各自独立开发；开发人员入门门槛较高；app发布审核流程麻烦，维护成本高。

四、测试点
页面测试点可参考：https://www.cnblogs.com/suntingme/p/5396085.html

H5页面与原生页面的区别相关推荐

微信小程序与webview H5交互（内嵌H5跳转原生页面）
在开发中,使用web-view组件内嵌H5页面是非常常见的,但很多人不知道webview内嵌H5如何与原生小程序交互.下面介绍下实现微信小程序与webview H5交互的方法. web-view功能 ...
H5 架构和原生架构的区别
1. App 的 3 种开发方式表面上看,手机 App 都是同样的东西,就是手机上的应用程序,点击图标就能运行,但是它们的底层技术不一样.按照开发技术,App 可以分成三大类.原生应用(简称 nat ...
5页面调用原生相机_React Native与原生通信全梳理（iOS端）
emmm-- 先说个题外话,时隔一年,再遇RN,较之以前唯一不同的一点就是遇到的坑终于有人先踩了本文会通过原生与RN页面相互跳转.方法间的相互调用.以及H5页面调用原生页面进而调用RN页面等方面来阐述 ...
打开APP，判断是否是原生页面的方法（含flutter判断）
背景介绍作为产品,运营时长对于自己公司的 APP的页面的实现的方式不是很了解, 仅知道原生的页面需要发布(在没热更新的基础上), H5页面可以修改不跟版本, Flutter页面也要跟版本, 但是 ...
Hybrid App中原生页面 VS H5页面（分享）
本文部分转自 http://www.jianshu.com/p/00ff5664e000 现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有" ...
Android精华篇 - App中原生页面 VS H5页面
现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有"混合的"意思). Native App(原生app,后面都用"原生ap ...
Hybrid App中原生页面 VS H5页面
Hybrid App中原生页面 VS H5页面现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有"混合的"意思). Native ...
教你判断一个APP页面是原生的还是H5页面
关注公众号前端开发博客,回复"加群" 加入我们一起学习,天天进步刚好是周末,无意之间在收集相关资料的时候,发现有部分童鞋在问<如何判断一个APP页面是不是H5页面> ...
混合开发中，H5页面与原生app交互（方法互相调用与传参）
H5与原生app交互,需要WebViewJavascriptBridge,废话不多直接上代码,下面是项目中的封装bridge.js的全部代码(示例代码为vue) //iOS 交互声明 function ...

H5页面与原生页面的区别

H5页面与原生页面的区别相关推荐

最新文章

热门文章