拋磚

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

面試題，在各個技術社區里都是一個永不落伍的話題，好像大多數人臨面試前都會狂刷面試題，恨不得把所有面試題都看一遍，要說有用沒，當然有用，因為大部分面試題確實可以助力面試者，而且刷面試題對技術積累和視野提升也是有真實幫助的，可不只是面試有用

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

也不能全怪那些出面試題的人，因為市面上面試題越來越多，想要鑒別一個人的真本事還是有些難度的，所以面的時候只能往深了問，借此篩掉一些人

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

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分鐘就夠了，上面就是個大概，先把上面講一下，然后你得給面試官問的機會，而他問的東西肯定是你講的這些內容中發散出來的

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

最后，此文寫的比較快，內容為個人理解，可能會有些片面，如有不當或補充，還請指出，互相討論，多謝

對你有用的話，點個贊吧

哦，還有，可以加個好友加下群一起交流噻，公眾號【不正經的前端】也歡迎關注呦 ?

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。