h5前端常見面試題

0.New 的執(zhí)行過程大致如下：

  • 創(chuàng)建一個(gè)對(duì)象

  • 將對(duì)象的 _ proto_ 指向 構(gòu)造函數(shù)的 prototype

  • 將這個(gè)對(duì)象作為構(gòu)造函數(shù)的 this

  • 返回該對(duì)象

1.請(qǐng)說一下vue的生命周期

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestroy
  • destroyed

2.vue是如何實(shí)現(xiàn)雙向綁定的？

vue.js 則是采用數(shù)據(jù)劫持的方式，通過Object.defineProperty()來劫持各個(gè)屬性的setter，getter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)

主要步驟：

1、實(shí)現(xiàn)一個(gè)數(shù)據(jù)監(jiān)聽器Observer，能夠?qū)?shù)據(jù)對(duì)象的所有屬性進(jìn)行監(jiān)聽，如有變動(dòng)可拿到最新值并通知訂閱者
2、實(shí)現(xiàn)一個(gè)指令解析器Compile，對(duì)每個(gè)元素節(jié)點(diǎn)的指令進(jìn)行掃描和解析，根據(jù)指令模板替換數(shù)據(jù)，以及綁定相應(yīng)的更新函數(shù)
3、實(shí)現(xiàn)一個(gè)Watcher，作為連接Observer和Compile的橋梁，能夠訂閱并收到每個(gè)屬性變動(dòng)的通知，執(zhí)行指令綁定的相應(yīng)回調(diào)函數(shù)，從而更新視圖

3.什么是 Promise

所謂Promise，簡單說就是一個(gè)容器，里面保存著某個(gè)未來才會(huì)結(jié)束的事件（通常是一個(gè)異步操作）的結(jié)果。從語法上說，Promise 是一個(gè)對(duì)象，從它可以獲取異步操作的消息。Promise 提供統(tǒng)一的 API，各種異步操作都可以用同樣的方法進(jìn)行處理。

Promise對(duì)象有以下兩個(gè)特點(diǎn)。
（1）對(duì)象的狀態(tài)不受外界影響。Promise對(duì)象代表一個(gè)異步操作，有三種狀態(tài)：Pending（進(jìn)行中）、Resolved（已完成，又稱 Fulfilled）和Rejected（已失敗）。只有異步操作的結(jié)果，可以決定當(dāng)前是哪一種狀態(tài)，任何其他操作都無法改變這個(gè)狀態(tài)。這也是Promise這個(gè)名字的由來，它的英語意思就是“承諾”，表示其他手段無法改變。
（2）一旦狀態(tài)改變，就不會(huì)再變，任何時(shí)候都可以得到這個(gè)結(jié)果。Promise對(duì)象的狀態(tài)改變，只有兩種可能：從Pending變?yōu)镽esolved和從Pending變?yōu)镽ejected。只要這兩種情況發(fā)生，狀態(tài)就凝固了，不會(huì)再變了，會(huì)一直保持這個(gè)結(jié)果。就算改變已經(jīng)發(fā)生了，你再對(duì)Promise對(duì)象添加回調(diào)函數(shù)，也會(huì)立即得到這個(gè)結(jié)果。這與事件（Event）完全不同，事件的特點(diǎn)是，如果你錯(cuò)過了它，再去監(jiān)聽，是得不到結(jié)果的。
有了Promise對(duì)象，就可以將異步操作以同步操作的流程表達(dá)出來，避免了層層嵌套的回調(diào)函數(shù)。此外，Promise對(duì)象提供統(tǒng)一的接口，使得控制異步操作更加容易。

4.ES6新增的數(shù)組方法

https://blog.csdn.net/wbiokr/article/details/65939582

//通過Object.prototype.toString.call()判斷
Object.prototype.toString().call() //可以獲取到對(duì)象的不同類型，例如
let a = [1,2,3]
Object.prototype.toString.call(a) === '[object Array]';//true
//它強(qiáng)大的地方在于不僅僅可以檢驗(yàn)是否為數(shù)組，比如是否是一個(gè)函數(shù)，是否是數(shù)字等等
//檢驗(yàn)是否是函數(shù)
let a = function () {};
Object.prototype.toString.call(a) === '[object Function]';//true
//檢驗(yàn)是否是數(shù)字
let b = 1;
Object.prototype.toString.call(a) === '[object Number]';//true
//甚至對(duì)于多全局環(huán)境時(shí)， Object.prototype.toString().call()也能符合預(yù)期處理判斷。

5.cookie，localStorage和sessionStorage三者之間的區(qū)別

  • cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶，即cookie在瀏覽器和服務(wù)間來回傳遞。而localStorage和sessionStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存

  • 數(shù)據(jù)的生命期：cookie可設(shè)置失效時(shí)間，默認(rèn)是瀏覽器關(guān)閉。localStorage 始終有效，除非被清除。sessionStorage 僅僅在當(dāng)前會(huì)話下有效，關(guān)閉頁面或?yàn)g覽器后被清除

6.什么是原型鏈？

Javascript是面向?qū)ο蟮模總€(gè)實(shí)例對(duì)象（ object ）都有一個(gè)私有屬性（稱之為 proto ）指向它的構(gòu)造函數(shù)的原型對(duì)象（prototype ）。該原型對(duì)象也有一個(gè)自己的原型對(duì)象( proto ) ，層層向上直到一個(gè)對(duì)象的原型對(duì)象為 null。根據(jù)定義，null 沒有原型，并作為這個(gè)原型鏈中的最后一個(gè)環(huán)節(jié)。

7.說說你對(duì)this的理解

  • this是一個(gè)關(guān)鍵字，它代表函數(shù)運(yùn)行時(shí)，自動(dòng)生成的一個(gè)內(nèi)部對(duì)象，只能在函數(shù)內(nèi)部使用。
  • 作為純粹的函數(shù)調(diào)用this指向全局對(duì)象
  • 作為對(duì)象的方法調(diào)用this指向調(diào)用對(duì)象
  • 作為構(gòu)造函數(shù)被調(diào)用this指向新的對(duì)象（new會(huì)改變this指向）
  • apply調(diào)用this指向apply方法的第一個(gè)參數(shù)

8.get跟post的區(qū)別

  • get存儲(chǔ)內(nèi)容小，不能超過2kb，有限。文件上傳只能有post。
  • get 不安全顯示在地址欄
  • get 效率高，因?yàn)閜ost需要加密和解密的過程，get不需要。

9.請(qǐng)說出你關(guān)于閉包函數(shù)的理解以及閉包函數(shù)帶來的影響

  • 閉包函數(shù)通常情況下是指函數(shù)里面再一次的嵌套另外的一個(gè)函數(shù)這種形式，而處于函數(shù)內(nèi)部的函數(shù)可以獲取外部函數(shù)的變量的值。

  • 使用閉包函數(shù)會(huì)帶來變量存儲(chǔ)到內(nèi)存，不會(huì)被釋放 ，以及this指向的改變
    和內(nèi)存泄漏的問題等等。

10.onload跟ready的區(qū)別

1.$(document).ready()

執(zhí)行時(shí)機(jī)：等DOM樹加載完畢后就能執(zhí)行

2.window.onload

執(zhí)行時(shí)機(jī)：等網(wǎng)頁中所有的資源加載完畢后（包括圖片、flash、音頻、視頻），才能執(zhí)行

11.'data-'屬性的作用是什么？如何獲取‘data-’屬性的值？

data-屬性是h5中用來自定義屬性，通過dataset屬性獲取。
不是所有瀏覽器都支持，不支持用getAttribute

12.image和canvas在處理圖片的時(shí)候有什么區(qū)別？

image是通過對(duì)象的形式描述圖片的
canvas是通過專門的API講圖片繪制在畫布上的

13.JS中的"=="轉(zhuǎn)換規(guī)則

14. 回流跟重繪的區(qū)別

html 加載時(shí)發(fā)生了什么

在頁面加載時(shí)，瀏覽器把獲取到的HTML代碼解析成1個(gè)DOM樹，DOM樹里包含了所有HTML標(biāo)簽，包括display:none隱藏，還有用JS動(dòng)態(tài)添加的元素等。
瀏覽器把所有樣式(用戶定義的CSS和用戶代理)解析成樣式結(jié)構(gòu)體
DOM Tree 和樣式結(jié)構(gòu)體組合后構(gòu)建render tree, render tree類似于DOM tree，但區(qū)別很大，因?yàn)閞ender tree能識(shí)別樣式，render tree中每個(gè)NODE都有自己的style，而且render tree不包含隱藏的節(jié)點(diǎn)(比如display:none的節(jié)點(diǎn)，還有head節(jié)點(diǎn))，因?yàn)檫@些節(jié)點(diǎn)不會(huì)用于呈現(xiàn)，而且不會(huì)影響呈現(xiàn)的，所以就不會(huì)包含到 render tree中。我自己簡單的理解就是DOM Tree和我們寫的CSS結(jié)合在一起之后，渲染出了render tree。

什么是回流

當(dāng)render tree中的一部分(或全部)因?yàn)樵氐囊?guī)模尺寸，布局，隱藏等改變而需要重新構(gòu)建。這就稱為回流(reflow)。每個(gè)頁面至少需要一次回流，就是在頁面第一次加載的時(shí)候，這時(shí)候是一定會(huì)發(fā)生回流的，因?yàn)橐獦?gòu)建render tree。在回流的時(shí)候，瀏覽器會(huì)使渲染樹中受到影響的部分失效，并重新構(gòu)造這部分渲染樹，完成回流后，瀏覽器會(huì)重新繪制受影響的部分到屏幕中，該過程成為重繪。

什么是重繪

當(dāng)render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風(fēng)格，而不會(huì)影響布局的，比如background-color。則就叫稱為重繪。

區(qū)別：

他們的區(qū)別很大：
回流必將引起重繪，而重繪不一定會(huì)引起回流。比如：只有顏色改變的時(shí)候就只會(huì)發(fā)生重繪而不會(huì)引起回流
當(dāng)頁面布局和幾何屬性改變時(shí)就需要回流
比如：添加或者刪除可見的DOM元素，元素位置改變，元素尺寸改變——邊距、填充、邊框、寬度和高度，內(nèi)容改變

15.了解nodejs嗎？請(qǐng)簡要描述

nodejs是一款基于Chrome V8 引擎的Javascript運(yùn)行環(huán)境。Nodejs使用了事件驅(qū)動(dòng)、非阻塞式I/O的模型，使其輕量又高效。

16. 單頁面應(yīng)用的優(yōu)缺點(diǎn)（SPA）

單頁面的優(yōu)點(diǎn)：
1，用戶體驗(yàn)好，快，內(nèi)容的改變不需要重新加載整個(gè)頁面，基于這一點(diǎn)spa對(duì)服務(wù)器壓力較小
2，前后端分離

單頁面缺點(diǎn)：
1，不利于seo
3，初次加載時(shí)耗時(shí)多
3，頁面復(fù)雜度提高很多

17. v-show v-if 的區(qū)別

相同點(diǎn)：v-show和v-if都能控制元素的顯示和隱藏。
不同點(diǎn)：
實(shí)現(xiàn)本質(zhì)方法不同
v-show本質(zhì)就是通過設(shè)置css中的display設(shè)置為none，控制隱藏
v-if是動(dòng)態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素

18.vue中data為什么必須是個(gè)函數(shù)？

vue中data必須是函數(shù)是為了保證組件的獨(dú)立性和可復(fù)用性，data是一個(gè)函數(shù)，組件實(shí)例化的時(shí)候這個(gè)函數(shù)將會(huì)被調(diào)用，返回一個(gè)對(duì)象，計(jì)算機(jī)會(huì)給這個(gè)對(duì)象分配一個(gè)內(nèi)存地址，你實(shí)例化幾次，就分配幾個(gè)內(nèi)存地址，他們的地址都不一樣，所以每個(gè)組件中的數(shù)據(jù)不會(huì)相互干擾，改變其中一個(gè)組件的狀態(tài)，其它組件不變

19.為什么避免 v-if 和 v-for 用在一起

因?yàn)関-for的優(yōu)先級(jí)比v-if的優(yōu)先級(jí)高,所以每次渲染時(shí)都會(huì)先循環(huán)再進(jìn)行條件判斷,而又因?yàn)関-if會(huì)根據(jù)渲染條件為ture或false來決定渲染與否的,所以如果將v-if 和 v-for 用在一起會(huì)特別消耗性能

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容