一些面試題整理

抄別人的 以爲能夠 就mark了

1、說說從輸入URL到看到頁面發生的全過程，越詳細越好。

一、首先瀏覽器主進程接管，開了一個下載線程。
二、而後進行HTTP請求（DNS查詢、IP尋址等等），中間會有三次捂手，等待響應，開始下載響應報文。
三、將下載完的內容轉交給Renderer進程管理。
四、Renderer進程開始解析css rule tree和dom tree，這兩個過程是並行的，因此通常我會把link標籤放在頁面頂部。
五、解析繪製過程當中，當瀏覽器遇到link標籤或者script、img等標籤，瀏覽器會去下載這些內容，遇到時候緩存的使用緩存，不適用緩存的從新下載資源。
六、css rule tree和dom tree生成完了以後，開始合成render tree，這個時候瀏覽器會進行layout，開始計算每個節點的位置，而後進行繪製。
七、繪製結束後，關閉TCP鏈接，過程有四次揮手。

2、CSS和JS的位置會影響頁面效率，爲何？

css在加載過程當中不會影響到DOM樹的生成，可是會影響到Render樹的生成，進而影響到layout，因此通常來講，style的link標籤須要儘可能放在head裏面，由於在解析DOM樹的時候是自上而下的，而css樣式又是經過異步加載的，這樣的話，解析DOM樹下的body節點和加載css樣式能儘量的並行，加快Render樹的生成的速度。

js腳本應該放在底部，緣由在於js線程與GUI渲染線程是互斥的關係，若是js放在首部，當下載執行js的時候，會影響渲染行程繪製頁面，js的做用主要是處理交互，而交互必須得先讓頁面呈現才能進行，因此爲了保證用戶體驗，儘可能讓頁面先繪製出來。

3、描述一下this

this，函數執行的上下文，能夠經過apply，call，bind改變this的指向。對於匿名函數或者直接調用的函數來講，this指向全局上下文（瀏覽器爲window，nodejs爲global），剩下的函數調用，那就是誰調用它，this就指向誰。固然還有es6的箭頭函數，箭頭函數的指向取決於該箭頭函數聲明的位置，在哪裏聲明，this就指向哪裏。

4、深拷貝和淺拷貝的區

深拷貝和淺拷貝是針對複雜數據類型來講的，淺拷貝只拷貝一層，而深拷貝是層層拷貝。別是什麼？實現一個深拷貝

深拷貝複製變量值，對於非基本類型的變量，則遞歸至基本類型變量後，再複製。 深拷貝後的對象與原來的對象是徹底隔離的，互不影響，對一個對象的修改並不會影響另外一個對象。

淺拷貝是會將對象的每一個屬性進行依次複製，可是當對象的屬性值是引用類型時，實質複製的是其引用，當引用指向的值改變時也會跟着變化。

淺拷貝只最第一層屬性進行了拷貝，當第一層的屬性值是基本數據類型時，新的對象和原對象互不影響，可是若是第一層的屬性值是複雜數據類型，那麼新對象和原對象的屬性值其指向的是同一塊內存地址。
深拷貝實現

1.深拷貝最簡單的實現是: JSON.parse(JSON.stringify(obj))

JSON.parse(JSON.stringify(obj)) 是最簡單的實現方式，可是有一些缺陷：

1.對象的屬性值是函數時，沒法拷貝。
2.原型鏈上的屬性沒法拷貝
3.不能正確的處理 Date 類型的數據
4.不能處理 RegExp
5.會忽略 symbol
6.會忽略 undefined

2.實現一個 deepClone 函數

若是是基本數據類型，直接返回
若是是 RegExp 或者 Date 類型，返回對應類型
若是是複雜數據類型，遞歸。
考慮循環引用的問題

5、 call/apply 的實現原理是什麼？

call 和 apply 的功能相同，都是改變 this 的執行，並當即執行函數。區別在於傳參方式不一樣。

func.call(thisArg, arg1, arg2, ...)：第一個參數是 this 指向的對象，其它參數依次傳入。

func.apply(thisArg, [argsArray])：第一個參數是 this 指向的對象，第二個參數是數組或類數組。

一塊兒思考一下，如何模擬實現 call ？
首先，咱們知道，函數均可以調用call，說明 call 是函數原型上的方法，全部的實例均可以調用。即:

Function.prototype.call

在 call 方法中獲取調用 call() 函數
若是第一個參數沒有傳入，那麼默認指向window / global(非嚴格模式)
傳入 call 的第一個參數是 this 指向的對象，根據隱式綁定的規則，咱們知道 obj.foo(),foo() 中的 this 指向 obj;所以咱們能夠這樣調用函數 thisArgs.func(...args)
返回執行結果

apply 的實現思路和 call 一致，僅參數處理略有差異。以下：

6、什麼是BFC？BFC的佈局規則是什麼？如何建立BFC？

Box 是 CSS 佈局的對象和基本單位，頁面是由若干個Box組成的。

元素的類型 和 display 屬性，決定了這個 Box 的類型。不一樣類型的Box 會參與不一樣的 Formatting Context。

Formatting Context

Formatting Context 是頁面的一塊渲染區域，而且有一套渲染規則，決定了其子元素將如何定位，以及和其它元素的關係和相互做用。
Formatting Context 有 BFC (Block formatting context)，IFC (Inline formatting context)，FFC (Flex formatting context) 和 GFC (Grid formatting context)。FFC 和 GFC 爲 CC3 中新增。

BFC佈局規則

• BFC內，盒子依次垂直排列。
• BFC內，兩個盒子的垂直距離由 margin 屬性決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊【符合合併原則的margin合併後是使用大的margin】
• BFC內，每一個盒子的左外邊緣接觸內部盒子的左邊緣（對於從右到左的格式，右邊緣接觸）。即便在存在浮動的狀況下也是如此。除非建立新的BFC。
• BFC的區域不會與float box重疊。
• BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。

• 計算BFC的高度時，浮動元素也參與計算。

  如何建立BFC

• 根元素
• 浮動元素（float 屬性不爲 none）
• position 爲 absolute 或 fixed
• overflow 不爲 visible 的塊元素

• display 爲 inline-block, table-cell, table-caption

  BFC 的應用

1.防止 margin 重疊 (同一個BFC內的兩個相鄰Box的 margin 會發生重疊，觸發生成兩個BFC，即不會重疊)
2.清除內部浮動 (建立一個新的 BFC，由於根據 BFC 的規則，計算 BFC 的高度時，浮動元素也參與計算)
3.自適應多欄佈局 (BFC的區域不會與float box重疊。所以，能夠觸發生成一個新的BFC)

7、異步加載JS腳本的方式有哪些？

刷新評論 刷新頁面 返回頂部