2024年最全教你判断一个APP页面是原生的还是H5页面，2024前端精选面试实战总结整理

JavaScript 和 ES6

在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

加入我们一起学习，天天进步

刚好是周末，无意之间在收集相关资料的时候，发现有部分童鞋在问《如何判断一个APP页面是不是H5页面》或者是《如何判断app中原生页面和h5页面》等等类似的问题。

于是，为了帮大家解答这样的问题，特地花了不少时间研究了一下APP里面的原生页面和H5页面到底有哪些不一样。

不仔细去观察，一般人都不会察觉出来的，再加上现在的H5技术和原生应用的技术很多类似，或者说实现的效果很相像。

我们再来回顾一下：

如今最火的APP开发模式是Hybrid  APP开发（即混合模式，半原生半H5页面）。

原生是Native APP

H5就是Web App

在Hybrid当中，如何快速的判断一个APP页面是原生的还是H5页面呢？综合网友的答案汇总整理了一下。如果你们还有更好的判断方法也可以告知我。

一、看断网的情况

---

把手机的网络断掉。然后点开页面。然后可以正常显示的东西就是原生写的。

显示404或者错误页面的是html页面。

二、看布局边界

---

可以打开  开发者选项中的显示布局边界，页面元素很多的情况下布局是一整块的是h5的，布局密密麻麻的是原生控件。页面有布局的是原生的否则为h5页面。（仅针对安卓手机适用）如下图所示：

三、看复制文章的提示

---

这个需要你通过对比才能得出结果，比如是文章资讯页面可以长按页面试试，如果出现文字选择、粘贴功能的是H5页面，否则是native原生的页面。

有些原生APP开放了复制粘贴功能或者关闭了。而H5的css屏蔽了复制选择功能等等情况。需要通过对目标测试APP进行对比才可知。

这个在支付宝APP、蚂蚁聚宝都是可以判断的。

四、看加载的方式

---

如果在打开新页面导航栏下面有一条加载的线的话，这个页面就是H5页面，如果没有就是原生的。微信里面打开我们的H5页面常见的有个绿色的 加载线条。如下图红框里面所示：

五、看app顶部 导航栏是否会有关闭的操作

---

如果APP顶部导航栏当中出现了关闭按钮或者有关闭的图标，那么当前的页面肯定的H5，原生的不会出现（除非设计开发者故意弄的）

美团的、大众点评的APp、微信APP当加载h5过多的时候，左上角会出现关闭2字。

六、判断页面 下拉刷新的时候（前提是要有下拉刷新的功能）

---

如果界面没有明显刷新现象的是原生的，如果有明显刷新现象（比如闪一下）的是H5页面（ios和android）。

比如淘宝的众筹页面。

文末

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。

前端面试题汇总

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

性能

linux

前端资料汇总