h5前端常見面試題

0.New 的執行過程大致如下:

  • 創建一個對象

  • 將對象的 _ proto_ 指向 構造函數的 prototype

  • 將這個對象作為構造函數的 this

  • 返回該對象

1.請說一下vue的生命周期

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

2.vue是如何實現雙向綁定的?

vue.js 則是采用數據劫持的方式,通過Object.defineProperty()來劫持各個屬性的setter,getter,在數據變動時發布消息給訂閱者,觸發相應的監聽回調

主要步驟:

1、實現一個數據監聽器Observer,能夠對數據對象的所有屬性進行監聽,如有變動可拿到最新值并通知訂閱者
2、實現一個指令解析器Compile,對每個元素節點的指令進行掃描和解析,根據指令模板替換數據,以及綁定相應的更新函數
3、實現一個Watcher,作為連接Observer和Compile的橋梁,能夠訂閱并收到每個屬性變動的通知,執行指令綁定的相應回調函數,從而更新視圖

3.什么是 Promise

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

Promise對象有以下兩個特點。
(1)對象的狀態不受外界影響。Promise對象代表一個異步操作,有三種狀態:Pending(進行中)、Resolved(已完成,又稱 Fulfilled)和Rejected(已失敗)。只有異步操作的結果,可以決定當前是哪一種狀態,任何其他操作都無法改變這個狀態。這也是Promise這個名字的由來,它的英語意思就是“承諾”,表示其他手段無法改變。
(2)一旦狀態改變,就不會再變,任何時候都可以得到這個結果。Promise對象的狀態改變,只有兩種可能:從Pending變為Resolved和從Pending變為Rejected。只要這兩種情況發生,狀態就凝固了,不會再變了,會一直保持這個結果。就算改變已經發生了,你再對Promise對象添加回調函數,也會立即得到這個結果。這與事件(Event)完全不同,事件的特點是,如果你錯過了它,再去監聽,是得不到結果的。
有了Promise對象,就可以將異步操作以同步操作的流程表達出來,避免了層層嵌套的回調函數。此外,Promise對象提供統一的接口,使得控制異步操作更加容易。

4.ES6新增的數組方法

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

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

5.cookie,localStorage和sessionStorage三者之間的區別

  • cookie數據始終在同源的http請求中攜帶,即cookie在瀏覽器和服務間來回傳遞。而localStorage和sessionStorage不會自動把數據發給服務器,僅在本地保存

  • 數據的生命期:cookie可設置失效時間,默認是瀏覽器關閉。localStorage 始終有效,除非被清除。sessionStorage 僅僅在當前會話下有效,關閉頁面或瀏覽器后被清除

6.什么是原型鏈?

Javascript是面向對象的,每個實例對象( object )都有一個私有屬性(稱之為 proto )指向它的構造函數的原型對象(prototype )。該原型對象也有一個自己的原型對象( proto ) ,層層向上直到一個對象的原型對象為 null。根據定義,null 沒有原型,并作為這個原型鏈中的最后一個環節。

7.說說你對this的理解

  • this是一個關鍵字,它代表函數運行時,自動生成的一個內部對象,只能在函數內部使用。
  • 作為純粹的函數調用this指向全局對象
  • 作為對象的方法調用this指向調用對象
  • 作為構造函數被調用this指向新的對象(new會改變this指向)
  • apply調用this指向apply方法的第一個參數

8.get跟post的區別

  • get存儲內容小,不能超過2kb,有限。文件上傳只能有post。
  • get 不安全顯示在地址欄
  • get 效率高,因為post需要加密和解密的過程,get不需要。

9.請說出你關于閉包函數的理解以及閉包函數帶來的影響

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

  • 使用閉包函數會帶來變量存儲到內存,不會被釋放 ,以及this指向的改變
    和內存泄漏的問題等等。

10.onload跟ready的區別

1.$(document).ready()

執行時機:等DOM樹加載完畢后就能執行

2.window.onload

執行時機:等網頁中所有的資源加載完畢后(包括圖片、flash、音頻、視頻),才能執行

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

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

12.image和canvas在處理圖片的時候有什么區別?

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

13.JS中的"=="轉換規則

14. 回流跟重繪的區別

html 加載時發生了什么

在頁面加載時,瀏覽器把獲取到的HTML代碼解析成1個DOM樹,DOM樹里包含了所有HTML標簽,包括display:none隱藏,還有用JS動態添加的元素等。
瀏覽器把所有樣式(用戶定義的CSS和用戶代理)解析成樣式結構體
DOM Tree 和樣式結構體組合后構建render tree, render tree類似于DOM tree,但區別很大,因為render tree能識別樣式,render tree中每個NODE都有自己的style,而且render tree不包含隱藏的節點(比如display:none的節點,還有head節點),因為這些節點不會用于呈現,而且不會影響呈現的,所以就不會包含到 render tree中。我自己簡單的理解就是DOM Tree和我們寫的CSS結合在一起之后,渲染出了render tree。

什么是回流

當render tree中的一部分(或全部)因為元素的規模尺寸,布局,隱藏等改變而需要重新構建。這就稱為回流(reflow)。每個頁面至少需要一次回流,就是在頁面第一次加載的時候,這時候是一定會發生回流的,因為要構建render tree。在回流的時候,瀏覽器會使渲染樹中受到影響的部分失效,并重新構造這部分渲染樹,完成回流后,瀏覽器會重新繪制受影響的部分到屏幕中,該過程成為重繪。

什么是重繪

當render tree中的一些元素需要更新屬性,而這些屬性只是影響元素的外觀,風格,而不會影響布局的,比如background-color。則就叫稱為重繪。

區別:

他們的區別很大:
回流必將引起重繪,而重繪不一定會引起回流。比如:只有顏色改變的時候就只會發生重繪而不會引起回流
當頁面布局和幾何屬性改變時就需要回流
比如:添加或者刪除可見的DOM元素,元素位置改變,元素尺寸改變——邊距、填充、邊框、寬度和高度,內容改變

15.了解nodejs嗎?請簡要描述

nodejs是一款基于Chrome V8 引擎的Javascript運行環境。Nodejs使用了事件驅動、非阻塞式I/O的模型,使其輕量又高效。

16. 單頁面應用的優缺點(SPA)

單頁面的優點:
1,用戶體驗好,快,內容的改變不需要重新加載整個頁面,基于這一點spa對服務器壓力較小
2,前后端分離

單頁面缺點:
1,不利于seo
3,初次加載時耗時多
3,頁面復雜度提高很多

17. v-show v-if 的區別

相同點:v-show和v-if都能控制元素的顯示和隱藏。
不同點:
實現本質方法不同
v-show本質就是通過設置css中的display設置為none,控制隱藏
v-if是動態的向DOM樹內添加或者刪除DOM元素

18.vue中data為什么必須是個函數?

vue中data必須是函數是為了保證組件的獨立性和可復用性,data是一個函數,組件實例化的時候這個函數將會被調用,返回一個對象,計算機會給這個對象分配一個內存地址,你實例化幾次,就分配幾個內存地址,他們的地址都不一樣,所以每個組件中的數據不會相互干擾,改變其中一個組件的狀態,其它組件不變

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

因為v-for的優先級比v-if的優先級高,所以每次渲染時都會先循環再進行條件判斷,而又因為v-if會根據渲染條件為ture或false來決定渲染與否的,所以如果將v-if 和 v-for 用在一起會特別消耗性能

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容