拋磚

此文是一道面試題，又不僅僅是一道面試題

面試題，在各個(gè)技術(shù)社區(qū)里都是一個(gè)永不落伍的話題，好像大多數(shù)人臨面試前都會狂刷面試題，恨不得把所有面試題都看一遍，要說有用沒，當(dāng)然有用，因?yàn)榇蟛糠置嬖囶}確實(shí)可以助力面試者，而且刷面試題對技術(shù)積累和視野提升也是有真實(shí)幫助的，可不只是面試有用

其實(shí)大家面試前都刷面試題，可能幾個(gè)人去面試前刷的面試題題解都是一樣的，這種情況無疑增加了面試者篩選的難度，同樣的，這也是為什么不僅僅是大公司，中小公司面試題也越來難，甚至嚴(yán)重不符合崗位水準(zhǔn)的原因之一，大家每次面試回來都會感嘆一句 俺可能配不上這個(gè)職位，這道題太難了！

也不能全怪那些出面試題的人，因?yàn)槭忻嫔厦嬖囶}越來越多，想要鑒別一個(gè)人的真本事還是有些難度的，所以面的時(shí)候只能往深了問，借此篩掉一些人

這種情況是我們不能避免的，除非從此網(wǎng)上再無面試題解，可能面試時(shí)問題難度系數(shù)就會相對降低了

SO，大家看的都差不多，回答也差不多，怎么突出 我們不一樣呢 ，還是要從面試題下手

引玉

首先，大家面試喜歡找什么樣的題解？肯定是各個(gè)博主統(tǒng)一收集整理的面試題庫了，看著方便、種類多、不用網(wǎng)上反復(fù)找零碎的面試題

其實(shí)這樣好也不好，好處是可以快速了解市面上常見面試題，壞處嘛，各個(gè)博主其實(shí)礙于篇幅，給出的題解都是最精簡的(此處意思是，一道面試題，給出對應(yīng)的經(jīng)典題解，并無太多相關(guān)知識點(diǎn)，而面試過程中是需要發(fā)散思維的)

想要突出和別人的不一樣也簡單，不能只刷面試題，每一個(gè)面試題都有它獨(dú)特的考察意義，每刷一個(gè)面試題，不管它的難易程度，都認(rèn)真看一看這道面試題相關(guān)技術(shù)的帖或文檔，這樣在問到這個(gè)面試題的時(shí)候起碼不會被面試官隨意一發(fā)散思維就Pass掉，在回答的時(shí)候也能從多個(gè)角度回答，而不僅限于此道面試題

還有就是大家方向都在研究各種復(fù)雜的題，這種題能答出來，面試官可能會覺得不錯(cuò)，但簡單的題就不一樣了

千萬不要小瞧那些簡單的面試題，簡單的題大家回答都簡單，但是你要能回答的很復(fù)雜，高低立判

說不得太開，需要自己理解，嘿嘿

我平常也會刷一刷面試題，提升提升視野，看看大前端行業(yè)內(nèi)的水又深了多少 ( 著實(shí)怕嗆水 )

這兩天看一些博主發(fā)的阿里面試帖里都會看到一個(gè)題，就是本文標(biāo)題，其實(shí)它就可以算一個(gè)例子

你說它難？剛?cè)胄械那岸硕寄苷f出來幾條

那它不難？剛看到的時(shí)候我認(rèn)真想了想，如果我去面試被問到這個(gè)題了，顯然我心中的答案并不能突出我比別人強(qiáng)

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

回歸正題

小程序與H5有什么區(qū)別？

解析題目

小程序與H5的區(qū)別，首先我們要看這道題問的側(cè)重點(diǎn)在哪 ( 通俗講就是先想一下這個(gè)題要考的是什么 )？

如果想挖你對H5的理解，我覺得不需要這么問，而問兩者區(qū)別小程序在前，兩者相對來說小程序是比較新的，很明顯側(cè)重點(diǎn)在小程序這塊，通過與H5的對比來挖你對小程序的了解，那么回答的時(shí)候就要側(cè)重小程序這塊發(fā)散，要讓面試官覺得，嗯，這小伙子對小程序還是有些了解的

接下來就側(cè)重小程序嘗試從各個(gè)方面對比來解答這個(gè)問題

運(yùn)行環(huán)境方面

從運(yùn)行環(huán)境方面開看，H5 的宿主環(huán)境是瀏覽器，只要有瀏覽器，就可以使用，包括APP中的 web-view 組件，以及小程序提供的 web-view 組件

小程序就不一樣了，它運(yùn)行于特定的移動軟件平臺 (Wechat / 支付寶 / 字節(jié)跳動 / 百度 / QQ 等)

拿微信小程序來說，它是基于瀏覽器內(nèi)核重構(gòu)的內(nèi)置解析器，它并不是一個(gè)完整的瀏覽器，官方文檔中重點(diǎn)強(qiáng)調(diào)了腳本內(nèi)無法使用瀏覽器中常用的 window 對象和 document 對象，就是沒有 DOM 和 BOM 的相關(guān)的 API，這一條就干掉了 JQ 和一些依賴于 BOM 和 DOM 的NPM包

運(yùn)行機(jī)制方面

H5 的運(yùn)行就是一個(gè)網(wǎng)頁的運(yùn)行，這里不過多敘述

小程序還是以微信小程序舉例

啟動

• 如果用戶已經(jīng)打開過某小程序，在一定時(shí)間內(nèi)再次打開該小程序，此時(shí)無需重新啟動，只需將后臺的小程序切換到前臺，整個(gè)過程就是所謂的 熱啟動

• 如果用戶首次打開或小程序被微信主動銷毀后再次打開的情況，此時(shí)小程序需要重新加載啟動，就是 冷啟動

銷毀

• 當(dāng)小程序進(jìn)入后臺一定時(shí)間，或系統(tǒng)資源占用過高，或者是你手動銷毀，才算真正的銷毀

系統(tǒng)權(quán)限方面

H5最被詬病的地方在哪？系統(tǒng)權(quán)限不夠，比如網(wǎng)絡(luò)通信狀態(tài)、數(shù)據(jù)緩存能力、通訊錄、或調(diào)用硬件的，如藍(lán)牙功能等等一些APP有的功能，H5就沒有這些系統(tǒng)權(quán)限，因?yàn)樗囟纫蕾嚍g覽器能力

依舊是微信小程序舉例，微信客戶端的這些系統(tǒng)級權(quán)限都可以和微信小程序無縫銜接，官方宣稱擁有 Native App 的流暢性能

開發(fā)語言方面

H5 開發(fā)大家都知道，標(biāo)準(zhǔn)的 HTML、CSS、JavaScript ，萬變不離其三劍客

小程序不同， (Wechat / 支付寶 / 字節(jié)跳動 / 百度 / QQ 等)不同的小程序都有自己定義獨(dú)特的語言

最常用的微信小程序，自定義的 WXML、WXSS，WXML 中全部是微信自定義的標(biāo)簽，WXSS、JSON 和 JS 文件中的寫法都稍有限制，官方文檔中都有明確的使用介紹，雖容易上手，但還是有區(qū)別的

?

不同系小程序的開發(fā)語言都有些區(qū)別，說到這，來個(gè)題外話

隨著微信小程序越來越火百度阿里字節(jié)這些大廠都出了對應(yīng)的小程序，但是問題來了，小程序技術(shù)標(biāo)準(zhǔn)越來越碎片化，去年9月，萬維網(wǎng)聯(lián)盟 ( World Wide Web Consortium，簡稱 W3C ) 針對這一行業(yè)問題，正式對外發(fā)布由阿里巴巴主導(dǎo)發(fā)起并聯(lián)合W3C中國及國內(nèi)外廠商起草的《小程序國際標(biāo)準(zhǔn)化白皮書》( 鏈接 )

其實(shí)就是阿里準(zhǔn)備牽頭搞小程序標(biāo)準(zhǔn)了，阿里百度字節(jié)這些企業(yè)都有參與，但是一說小程序都是微信小程序，微信才是大頭啊，騰訊好像并沒有理它們，哈哈 (題外話，適當(dāng)皮一下，如覺不妥請聯(lián)系我刪掉?)

?

從開發(fā)語言的不同，就引出了開發(fā)成本這個(gè)問題了

開發(fā)成本方面

還是先說 H5，開發(fā)一個(gè) H5 ，我們要考慮什么，首先開發(fā)工具 ( vscode/webstorm/atom/sublim等 )，其次是開發(fā)框架 ( Vue/React/Angular等 )， 接著考慮模塊化工具 ( Webpack/Gulp/Parcel等 )，再然后UI庫、各種包的選擇，更是數(shù)不勝數(shù)，還要考慮兼容問題，成本還是比較高的

這塊小程序的話不用再去考慮瀏覽器兼容性，拿微信小程序舉例子，沒有兼容性問題后，只需要看著文檔在微信開發(fā)工具里寫就行了，小程序還獨(dú)立出來了很多原生APP的組件，在H5需要模擬才能實(shí)現(xiàn)的功能，小程序里可以直接調(diào)用組件，都是封裝好的，你也可以使用轉(zhuǎn)譯框架來寫小程序，也有很多UI庫選擇，單論開發(fā)成本的話，小程序應(yīng)該是勝出的

不過小程序再簡單也是需要學(xué)習(xí)過程的，坑肯定也多，因?yàn)樗€在逐步變強(qiáng)的過程中嘛，畢竟是和H5不一樣的東西

更新機(jī)制方面

H5 的話想怎么更新就怎么更新，更新后拋開CDN/瀏覽器緩存啥的，基本上更新結(jié)束刷新就可以看到效果

小程序不同，還是微信舉例，嘿嘿，微信小程序更新啥的是需要通過審核的

而且開發(fā)者在發(fā)布新版本之后，無法立刻影響到所有現(xiàn)網(wǎng)用戶，要在發(fā)布之后 24 小時(shí)之內(nèi)才下發(fā)新版本信息到用戶

小程序每次 冷啟動 時(shí)，都會檢查有無更新版本，如果發(fā)現(xiàn)有新版本，會異步下載新版本代碼包，并同時(shí)用客戶端本地包進(jìn)行啟動，所以新版本的小程序需要等下一次 冷啟動 才會應(yīng)用上，當(dāng)然微信也有 wx.getUpdateManager 可以做檢查更新

渲染機(jī)制方面

H5就是 web 渲染，瀏覽器渲染

微信小程序的宿主環(huán)境是微信，宿主環(huán)境為了執(zhí)行小程序的各種文件：wxml文件、wxss文件、js文件，提供了雙線模型 ，什么是雙線程模型呢，先看一張官方圖

小程序的渲染層和邏輯層分別由2個(gè)線程管理

• 渲染層：界面渲染相關(guān)的任務(wù)全都在 WebView 線程里執(zhí)行，一個(gè)小程序存在多個(gè)界面，所以渲染層存在多個(gè) WebView線程
• 邏輯層：一個(gè)單獨(dú)的線程執(zhí)行 JavaScript，在這個(gè)環(huán)境下執(zhí)行的都是有關(guān)小程序業(yè)務(wù)邏輯的代碼，就是通過圖中的 JsCore 線程來運(yùn)行 JS 腳本
• 這兩個(gè)線程都會經(jīng)過微信客戶端( Native )中的 WeixinJsBridage 進(jìn)行中轉(zhuǎn)通信，邏輯層把數(shù)據(jù)變化通知到視圖層，觸發(fā)視圖層頁面更新，視圖層把觸發(fā)的事件通知到邏輯層進(jìn)行業(yè)務(wù)處理

小程序的渲染邏輯

• 在渲染層將 WXML 先轉(zhuǎn)換為 js 對象也就是虛擬 DOM
• 在邏輯層將虛擬 DOM 對象生成真實(shí) DOM 樹，交給渲染層渲染
• 當(dāng)視圖有數(shù)據(jù)需更新時(shí)，邏輯層調(diào)用小程序宿主環(huán)境提供的 setData 方法將數(shù)據(jù)從邏輯層傳遞到渲染層
• 經(jīng)過對比前后差異 ( diff算法 )，把差異應(yīng)用在真實(shí)的 Dom 樹上，渲染出正確的 UI 界面完成視圖更新

雖然小程序是通過 Native 原生渲染的，但是小程序也支持web渲染，就是 web-view 組件，在 web-view 中加載 H5 頁面，而我們開發(fā)小程序時(shí)，通常會使用 hybrid 的方式，根據(jù)具體情況選擇部分功能用小程序原生的代碼來開發(fā)，部分功能通過 web-view 加載 H5 頁面來實(shí)現(xiàn)，Native 與 Web 渲染 混合使用，實(shí)現(xiàn)項(xiàng)目最優(yōu)解

最后

嗯，就到這了，內(nèi)容不多，當(dāng)作回答我覺得講個(gè)5～10分鐘就夠了，上面就是個(gè)大概，先把上面講一下，然后你得給面試官問的機(jī)會，而他問的東西肯定是你講的這些內(nèi)容中發(fā)散出來的

所以你還需要按照上文講述的大致內(nèi)容看些相關(guān)文檔，起碼是要對上面自己發(fā)散出來的東西有一些了解的，能夠突出亮點(diǎn)的其實(shí)都在渲染機(jī)制那里，也是這個(gè)問題的重點(diǎn) ( 這里最能吹 ) ，而面試官發(fā)散的點(diǎn)也極大可能是雙線程/渲染這里

最后，此文寫的比較快，內(nèi)容為個(gè)人理解，可能會有些片面，如有不當(dāng)或補(bǔ)充，還請指出，互相討論，多謝

對你有用的話，點(diǎn)個(gè)贊吧

哦，還有，可以加個(gè)好友加下群一起交流噻，公眾號【不正經(jīng)的前端】也歡迎關(guān)注呦 ?

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的h5 bootstrap 小程序模板_一道面试题小程序与H5的区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。