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