此文是一道面试题，又不仅仅是一道面试题

抛砖

刚写完一道面试题的文章就看到了掘金技术征文，正好赶上了，就凑个数

面试题，在各个技术社区里都是一个永不落伍的话题，好像大多数人临面试前都会狂刷面试题，恨不得把所有面试题都看一遍，要说有用没，当然有用，因为大部分面试题确实可以助力面试者，而且刷面试题对技术积累和视野提升也是有真实帮助的，可不只是面试有用

其实大家面试前都刷面试题，可能几个人去面试前刷的面试题题解都是一样的，这种情况无疑增加了面试者筛选的难度，同样的，这也是为什么不仅仅是大公司，中小公司面试题也越来难，甚至严重不符合岗位水准的原因之一，大家每次面试回来都会感叹一句 俺可能配不上这个职位，这道题太难了！

也不能全怪那些出面试题的人，因为市面上面试题越来越多，想要鉴别一个人的真本事还是有些难度的，所以面的时候只能往深了问，借此筛掉一些人

这种情况是我们不能避免的，除非从此网上再无面试题解，可能面试时问题难度系数就会相对降低了

SO，大家看的都差不多，回答也差不多，怎么突出 我们不一样呢 ，还是要从面试题下手

引玉

首先，大家面试喜欢找什么样的题解？肯定是各个博主统一收集整理的面试题库了，看着方便、种类多、不用网上反复找零碎的面试题

其实这样好也不好，好处是可以快速了解市面上常见面试题，坏处嘛，各个博主其实碍于篇幅，给出的题解都是最精简的(此处意思是，一道面试题，给出对应的经典题解，并无太多相关知识点，而面试过程中是需要发散思维的)

想要突出和别人的不一样也简单，不能只刷面试题，每一个面试题都有它独特的考察意义，每刷一个面试题，不管它的难易程度，都认真看一看这道面试题相关技术的帖或文档，这样在问到这个面试题的时候起码不会被面试官随意一发散思维就Pass掉，在回答的时候也能从多个角度回答，而不仅限于此道面试题

还有就是大家方向都在研究各种复杂的题，这种题能答出来，面试官可能会觉得不错，但简单的题就不一样了

千万不要小瞧那些简单的面试题，简单的题大家回答都简单，但是你要能回答的很复杂，高低立判

说不得太开，需要自己理解，嘿嘿

我平常也会刷一刷面试题，提升提升视野，看看大前端行业内的水又深了多少 ( 着实怕呛水 )

这两天看一些博主发的阿里面试帖里都会看到一个题，就是本文标题，其实它就可以算一个例子

你说它难？刚入行的前端都能说出来几条

那它不难？刚看到的时候我认真想了想，如果我去面试被问到这个题了，显然我心中的答案并不能突出我比别人强

所以好好想了下怎么回答后就写了此文

回归正题

小程序与H5有什么区别？

解析题目

小程序与H5的区别，首先我们要看这道题问的侧重点在哪 ( 通俗讲就是先想一下这个题要考的是什么 )？

如果想挖你对H5的理解，我觉得不需要这么问，而问两者区别小程序在前，两者相对来说小程序是比较新的，很明显侧重点在小程序这块，通过与H5的对比来挖你对小程序的了解，那么回答的时候就要侧重小程序这块发散，要让面试官觉得，嗯，这小伙子对小程序还是有些了解的

接下来就侧重小程序尝试从各个方面对比来解答这个问题

运行环境方面

从运行环境方面开看，H5 的宿主环境是浏览器，只要有浏览器，就可以使用，包括APP中的 web-view 组件，以及小程序提供的 web-view 组件

小程序就不一样了，它运行于特定的移动软件平台 (Wechat / 支付宝 / 字节跳动 / 百度 / QQ 等)

拿微信小程序来说，它是基于浏览器内核重构的内置解析器，它并不是一个完整的浏览器，官方文档中重点强调了脚本内无法使用浏览器中常用的 window 对象和 document 对象，就是没有 DOM 和 BOM 的相关的 API，这一条就干掉了 JQ 和一些依赖于 BOM 和 DOM 的NPM包

运行机制方面

H5 的运行就是一个网页的运行，这里不过多叙述

小程序还是以微信小程序举例

启动

如果用户已经打开过某小程序，在一定时间内再次打开该小程序，此时无需重新启动，只需将后台态的小程序切换到前台，整个过程就是所谓的 热启动
如果用户首次打开或小程序被微信主动销毁后再次打开的情况，此时小程序需要重新加载启动，就是 冷启动

销毁

当小程序进入后台一定时间，或系统资源占用过高，或者是你手动销毁，才算真正的销毁

系统权限方面

H5最被诟病的地方在哪？系统权限不够，比如网络通信状态、数据缓存能力、通讯录、或调用硬件的，如蓝牙功能等等一些APP有的功能，H5就没有这些系统权限，因为它重度依赖浏览器能力

依旧是微信小程序举例，微信客户端的这些系统级权限都可以和微信小程序无缝衔接，官方宣称拥有 Native App 的流畅性能

开发语言方面

H5 开发大家都知道，标准的 HTML、CSS、JavaScript ，万变不离其三剑客

小程序不同， (Wechat / 支付宝 / 字节跳动 / 百度 / QQ 等)不同的小程序都有自己定义独特的语言

最常用的微信小程序，自定义的 WXML、WXSS，WXML 中全部是微信自定义的标签，WXSS、JSON 和 JS 文件中的写法都稍有限制，官方文档中都有明确的使用介绍，虽容易上手，但还是有区别的

不同系小程序的开发语言都有些区别，说到这，来个题外话

随着微信小程序越来越火百度阿里字节这些大厂都出了对应的小程序，但是问题来了，小程序技术标准越来越碎片化，去年9月，万维网联盟 ( World Wide Web Consortium，简称 W3C ) 针对这一行业问题，正式对外发布由阿里巴巴主导发起并联合W3C中国及国内外厂商起草的《小程序国际标准化白皮书》( 链接 )

其实就是阿里准备牵头搞小程序标准了，阿里百度字节这些企业都有参与，但是一说小程序都是微信小程序，微信才是大头啊，腾讯好像并没有理它们，哈哈 (题外话，适当皮一下，如觉不妥请联系我删掉😂)

从开发语言的不同，就引出了开发成本这个问题了

开发成本方面

还是先说 H5，开发一个 H5 ，我们要考虑什么，首先开发工具 ( vscode/webstorm/atom/sublim等 )，其次是开发框架 ( Vue/React/Angular等 )，接着考虑模块化工具 ( Webpack/Gulp/Parcel等 )，再然后UI库、各种包的选择，更是数不胜数，还要考虑兼容问题，成本还是比较高的

这块小程序的话不用再去考虑浏览器兼容性，拿微信小程序举例子，没有兼容性问题后，只需要看着文档在微信开发工具里写就行了，小程序独还立出来了很多原生APP的组件，在H5需要模拟才能实现的功能，小程序里可以直接调用组件，都是封装好的，你也可以使用转译框架来写小程序，也有很多UI库选择，单论开发成本的话，小程序应该是胜出的

不过小程序再简单也是需要学习过程的，坑肯定也多，因为它还在逐步变强的过程中嘛，毕竟是和H5不一样的东西

更新机制方面

H5 的话想怎么更新就怎么更新，更新后抛开CDN/浏览器缓存啥的，基本上更新结束刷新就可以看到效果

小程序不同，还是微信举例，嘿嘿，微信小程序更新啥的是需要通过审核的

而且开发者在发布新版本之后，无法立刻影响到所有现网用户，要在发布之后 24 小时之内才下发新版本信息到用户

小程序每次 冷启动 时，都会检查有无更新版本，如果发现有新版本，会异步下载新版本代码包，并同时用客户端本地包进行启动，所以新版本的小程序需要等下一次 冷启动 才会应用上，当然微信也有 wx.getUpdateManager 可以做检查更新

渲染机制方面

H5就是 web 渲染，浏览器渲染

微信小程序的宿主环境是微信，宿主环境为了执行小程序的各种文件：wxml文件、wxss文件、js文件，提供了双线模型 ，什么是双线程模型呢，先看一张官方图

小程序的渲染层和逻辑层分别由2个线程管理

渲染层：界面渲染相关的任务全都在 WebView 线程里执行，一个小程序存在多个界面，所以渲染层存在多个 WebView线程
逻辑层：一个单独的线程执行 JavaScript，在这个环境下执行的都是有关小程序业务逻辑的代码，就是通过图中的 JsCore 线程来运行 JS 脚本
这两个线程都会经过微信客户端( Native )中的 WeixinJsBridage 进行中转通信，逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层把触发的事件通知到逻辑层进行业务处理

小程序的渲染逻辑

在渲染层将 WXML 先转换为 js 对象也就是虚拟 DOM
在逻辑层将虚拟 DOM 对象生成真实 DOM 树，交给渲染层渲染
当视图有数据需更新时，逻辑层调用小程序宿主环境提供的 setData 方法将数据从逻辑层传递到渲染层
经过对比前后差异 ( diff算法 )，把差异应用在真实的 Dom 树上，渲染出正确的 UI 界面完成视图更新

虽然小程序是通过 Native 原生渲染的，但是小程序也支持web渲染，就是 web-view 组件，在 web-view 中加载 H5 页面，而我们开发小程序时，通常会使用 hybrid 的方式，根据具体情况选择部分功能用小程序原生的代码来开发，部分功能通过 web-view 加载 H5 页面来实现，Native 与 Web 渲染 混合使用，实现项目最优解

最后

嗯，就到这了，内容不多，当作回答我觉得讲个5～10分钟就够了，上面就是个大概，先把上面讲一下，然后你得给面试官问的机会，而他问的东西肯定是你讲的这些内容中发散出来的

所以你还需要按照上文讲述的大致内容看些相关文档，起码是要对上面自己发散出来的东西有一些了解的，能够突出亮点的其实都在渲染机制那里，也是这个问题的重点 ( 这里最能吹 ) ，而面试官发散的点也极大可能是双线程/渲染这里

最后，此文写的比较快，内容为个人理解，可能会有些片面，如有不当或补充，还请指出，互相讨论，多谢

对你有用的话，点个赞吧

哦，还有，可以加个好友加下群一起交流噻，公众号【不正经的前端】也欢迎关注呦 😄