那些常見的面試題整理

1. 頁面是怎樣載入的一個過程？

URL解析->DNS查詢->資源請求->瀏覽器解析
url解析：協議 域名+埠 路徑 引數 雜湊
DNS查詢：dns快取表
資源請求：三次握手四次揮手
瀏覽器解析：

• 1）瀏覽器根據深度遍歷的方式把html節點遍歷成dom 樹
• 2）將css解析成CSS DOM樹
• 3）將dom樹和CSS DOM樹構造成render樹
• 4）JS根據得到的render樹 計算所有節點在螢幕中的位置，進行佈局（迴流）
• 5）遍歷render樹並呼叫硬體API繪製所有節點（重繪）

圖片引用來自https://img2018.cnblogs.com/blog/1308525/201901/1308525-20190113115419142-478609043.png

2. js冒泡機制

2.1 什麼是冒泡機制？

當一個元素接收到事件的時候，會把他接受到的所有傳播給他的父級；一直到 window 為事件冒泡（該發生還是會發生）

2.2 如何阻止冒泡機制？

1. event.stopPropagation()；
2. event.preventDefault();
3. return false;

2.x dom的事件流

DOM事件流"規定的事件流包括三個階段：

• 1，事件捕獲階段。不斷往下查詢是哪個元素髮出的事件；
• 2，處於目標階段。找到該元素；
• 3，事件冒泡階段。事件不斷往上冒泡執行；

3. img標籤的alt和title有什麼區別？

alt是代替圖片的文字，圖片不能顯示時會顯示alt，title是滑鼠指上去時的解釋的文字

4. 對web語義化有什麼理解？

web語義化的目的是提高開發者對web程式碼的可讀性。比如header就是指頭，food就是腳;

5. 盒模型的結構？

盒模型的組成，由裡向外content, padding, border, margin.
在IE盒子模型中，width表示content+padding+border這三個部分的寬度
在標準的盒子模型中，width指content部分的寬度

6. 關於行塊標籤

6.1 行標籤有哪些？

特點：可以和其他元素保持在同一行，不可以自動換行，但不能設定寬高;
可以padding上下左右，不能margin上下；
a，span，strong，u（下劃線），em(強調)，i(斜體)，sub(下標),sup(上標)

6.2 塊標籤有哪些？

特點：不可以和其他元素保持在同一行（獨佔一行），可以自動換行，能設定寬高
div，p，h1-h6，ul，li，dl，dt，dd

6.3 是行又是塊的有哪些？

特點：可以和其他元素保持在在一行，還能能設定寬高
常見標籤：textarea，input，img，button

7. vue的生命週期以及功能？

vue有8個生命鉤子，分別為建立前後、載入前後、更新前後、銷燬前後。

生命週期	作用
beforeCreate	new Vue後沒有data沒有el沒有methods
create	這個階段data已經載入出來，有data沒有el，一般可以做初始化資料的獲取
beforeMount	虛擬DOM已經建立完成，但是還沒掛載上去，（有data，有el），得不到具體的DOM元素
mount	資料和DOM都已經被渲染出來了
beforeUpdate	這時資料已經更新，但是頁面上的資料還是舊的；
Update	這時頁面上的資料也是更新的
beforeDestroy	可以做alert，“你確定要銷燬這個XXX嗎?”
Destroy	當前元件已被刪除，銷燬監聽事件，元件、事件、子例項也被銷燬。

8. cookie的屬性有哪些？作用是什麼？

欄位	作用
name	cookie的名稱
value	cookie的值
Size	cookie大小
domain	可以訪問此cookie的域名
path	可以訪問此cookie的頁面路徑。 比如domain是abc.com,path是/test，那麼只有/test路徑下的頁面可以讀取此cookie。
expires/Max-Age	欄位為此cookie超時時間。若設定其值為一個時間，那麼當到達此時間後，此cookie失效。不設定的話預設值是Session，意思是cookie會和session一起失效。當瀏覽器關閉(不是瀏覽器標籤頁，而是整個瀏覽器) 後，此cookie失效。
http	cookie的httponly屬性。若此屬性為true，則只有在http請求頭中會帶有此cookie的資訊，而不能通過document.cookie來訪問此cookie。
secure	設定是否只能通過https來傳遞此條cookie

9. cookie，sessionStorage和localStorage的區別

cookie：
預設時間：關閉瀏覽器失效；
設定時間：設定的cookie過期時間之前一直有效，即使視窗關閉或瀏覽器關閉。大小隻有4kb；

---

sessionStorage: 僅在當前會話下有效，關閉頁面或瀏覽器後被清除。存放資料大小為>=5MB,而且它僅在客戶端（即瀏覽器）中儲存，不參與和伺服器的通訊。

---

localStorage: 生命週期是永久，除非主動清除localStorage資訊，否則這些資訊將永遠存在。存放資料大小為>=5MB,而且它僅在客戶端（即瀏覽器）中儲存，不參與和伺服器的通訊。

9.+ cookie對比session的安全性？

cookie：針對cookie所存在的攻擊：Cookie欺騙，Cookie截獲；session的安全性大於cookie。
原因：
sessionID儲存在cookie中，若要攻破session首先要攻破cookie；
sessionID是加密的
sessionID是要有人登入，或者啟動session_start才會有，所以攻破cookie也不一定能得到sessionID；
第二次啟動session_start後，前一次的sessionID就是失效了，session過期後，sessionID也隨之失效；

10. vue的雙向繫結原理是什麼？

vue是通過Object.defineProperty()來實現資料劫持的，通過get和set運算元據。這一步已經實現簡單的雙向繫結了。但是效率低。

---

為了解決效率低下問題，vue資料雙向繫結是通過資料劫持結合釋出者-訂閱者模式的方式來實現。
1.實現一個監聽器Observer，用來劫持並監聽所有屬性，如果有變動的，就通知訂閱者。
2.實現一個訂閱者Watcher，可以收到屬性的變化通知並執行相應的函式，從而更新檢視。
3.實現一個解析器Compile，可以掃描和解析每個節點的相關指令，並根據初始化模板資料以及初始化相應的訂閱器。
詳細實現過程：https://www.cnblogs.com/chenhuichao/p/10818396.html

11. display:none和visible:hidden;的區別？

相同點：都能隱藏元素。
不同點：
display:none --> 不為隱藏物件保留記憶體，在頁面上消失，通俗講看不見也摸不著；
visible:hidden --> 只是在頁面上看不見，記憶體並未消失，看不見摸得著；

12. 移動端如何實現適配？

方案1：viewport + rem實現：

<meta  name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

---

方案2：
做多個

13. display的取值有哪些？

none : 元素消失，看不見摸不著；
inline : 行內元素 元素會在一行內顯示，超出螢幕寬度自動換行，不能設定寬度和高度，元素的寬度和高度只能是靠元素內的內容撐開。
block : 塊級元素 會獨佔一行，如果不設定寬度，其寬度會自動填滿父元素的寬度，可以設定寬高，即使設定了寬度，小於父元素的寬度，塊級元素也會獨佔一行。
inline-block : 行內塊元素 與行內元素一樣可以再一行內顯示，而且可以設定寬高，可以設定margin和padding;
list-item : 列表元素;
table : 會作為塊級表格來顯示(類似於table)，表格前後帶有換行符;
inline-table : 會作為內聯表格來顯示(類似於table)，表格前後沒有換行符;
flex : 多欄多列布局,自適應佈局；
inherit : 繼承，如果元素的某些屬性沒有進行設定，有些是會有預設值的，有些是會繼承的。

14. vue的data為什麼是個函式而不是一個物件？

如果是物件，那麼構建一個元件的時候data就是公開型別，多個元件傳參就會資料混淆。
所以通過return 返回物件的拷貝，從而開闢一個新的空間地址，致使每個例項都有自己獨立的物件。

15. 淺談深拷貝和淺拷貝

深拷貝：
記憶體地址相互獨立，每條資料之間不相互影響。

---

淺拷貝：
引用記憶體地址，修改新賦值變數，舊變數也會發生改變。

16. call、apply和bind方法的用法以及區別?

相同點：
call、apply、bind的作用是改變函式執行時this的指向

---

不同點：
bind和apply，call的區別在於，bind返回一個方法，用於後面呼叫，apply和call會直接執行

不同名稱	call	applay	bind
引數不同	call(物件，引數1，引數2，…)	applay(物件，[引數1，引數2，…])	bind(物件，引數1，引數2，…)
執行時間	當場執行	當場執行	返回一個方法，用於後面呼叫

17. ::before 和 :after中雙冒號和單冒號 有什麼區別？

• CSS 中偽類一直用 : 表示，如 :hover, :active 等
• 素在CSS1中已存在，當時語法是用 : 表示，如 :before 和 :after
• 在CSS3中修訂，偽元素用 :: 表示，如 ::before 和 ::after，以此區分偽元素和偽類
• 低版本IE對雙冒號不相容，開發者為了相容性各瀏覽器，繼續使使用 :after 這種老語法表示偽元素
• 所述：::before 是 CSS3 中寫偽元素的新語法； :after 是 CSS1 中存在的、相容IE的老語法

18. 透明度opacity和rgba的區別？

opacity 子元素顏色會被影響，即變相的被繼承。rgba(r,g,b,a)不會

19. 對閉包的理解？

什麼叫閉包？
一個function內的function

(一）
用閉包主要是為了設計私有的方法和變數。
閉包的優點是可以避免全域性變數的汙染，缺點是閉包會常駐>存，會增大記憶體使用量，使用不當很容易造成記憶體洩露。
包有三個特性：
.函式巢狀函式
.函式內部可以引用外部的引數和變數
.引數和變數不會被垃圾回收機制回收

20. post和get的區別是怎麼理解的？

GET和POST本質上兩者沒有任何區別。他們都是HTTP協議中的請求方法。底層實現都是基於TCP/IP協議。
傳送方式：get通過位址列傳輸，post通過報文傳輸。
get請求資料接在url後面，post請求資料通過send方法傳遞
get傳遞的資料會比較少，post沒有限制
get傳遞的資料會暴露出來
GET產生一個TCP資料包；POST產生兩個TCP資料包

21. 出現記憶體洩露的的幾種常見情況：

1.全域性變數：如未宣告變數
2.閉包：閉包可以讀取函式內部的變數，然後讓這些變數始終儲存在記憶體中。如果在使用結束後沒有將區域性變數清除，就可能導致記憶體洩露。
3.事件監聽：對同一個事件重複監聽，但是忘記移除，會導致記憶體洩露。
4.其他原因
console.log列印的物件不能被垃圾回收，可能會導致記憶體洩露。
setInterval也可能會導致記憶體洩露。

22. 筆試題：

深圳pmst公司筆試題

1. var a = /678/,
	b = /678/;
	console.log(a==b) /*false*/
	console.log(a===b) /*false*/
	
2. var a = {}, b = Object.prototype;
	[a.prototype === b, Object.getPrototypeOf(a) === b]
	/*結果 = [false, true]*/

3. javascript定義var a='40', b=7，則執行a%b會得到什麼？
	/*結果 = 5*/
 
4. console.log(([])?true:false)
   console.log(([]==false)?true:false)
   console.log(({}==false)?true:false)
   /*結果： true、true、false*/

5. var msg = 'hello'
	for(var i=0;i<10;i++){
		var msg = 'hello'+i*2+i
		//9*2+9='hello18'+9
	}
	console.log(msg)
	/*結果： hello189*/
6. console.log([typeof null, null instanceof Object])
	/*結果：“object”, false */

23. 如何解決精度問題0.1+0.2 != 0.3

23.1 為什麼會出現精度型別的錯誤？

因為0.1等小數在底層計算轉換二進位制時是無線的，所以到最後是0.2999999.

23.2 如何解決？

1. 引入math.js
2. (0.1 + 0.2).toFixed(10) == 0.3
3. 記錄小數點後個數，使用增大倍數到整數，按小數點個數插入小數點

24. 子元件和父元件一起執行，誰先開始渲染完成？

子元件先完成渲染。父元件最先開始渲染
父beforeCreate->父create->父boforeMount->子beforeCreate->子create->子beforeMount->子Mount->夫Mount

25. post提交json型別，其中contentType是什麼？

application/json

26. http的header裡面有哪些屬性？

（幾個常見的）

1. Request Headers

屬性	例如	作用
Accept	text/html	代表瀏覽器可以接受伺服器回發的型別為 text/html
Accept-Encoding	zh-CN,zh	瀏覽器申明自己接收的編碼方法，通常指定壓縮方法，是否支援壓縮，支援什麼壓縮方法
Accept-Language	Accept-Language: en-us	瀏覽器申明自己接收的語言。
Referer	url格式	告訴伺服器我是從哪個頁面連結過來的，伺服器籍此可以獲得一些資訊用於處理。
User-Agent	略	告訴HTTP伺服器， 客戶端使用的作業系統和瀏覽器的名稱和版本.

27. 用axios如何實現攔截？

//請求攔截
http.interceptors.request.use(config=>{
	// 這兒一般涉及到使用者驗證
	//使用token進行使用者許可權認證，需要在請求的header中新增token資訊進行驗證
	let t = cookies.get('t')
    if (t) {
      	config.headers.t = t
    } else {
      	router.replace({path: '/login'})
    }
    	return config
	},
  err => {
    return Promise.reject(err)
 })
 
//響應攔截
http.interceptors.response.use(response=>{
	// 這兒一般涉及到使用者cookie過期
	console.log(response)
    return response
},err =>{
	if (err.response) {
      switch (err.response.status) {
        case 401:
          // 這裡寫清除token的程式碼
          router.replace({
            path: 'login',
            query: {redirect: router.currentRoute.fullPath} // 登入成功後跳入瀏覽的當前頁面
          })
      }
})

28. js中有多少種資料型別？

7種

1. null (複雜型別)
2. undefined (複雜型別)
3. boolean （基本型別）
4. number （基本型別）
5. string（基本型別）
6. 引用型別（object、array、function）
7. symbol

29. ES6有哪些宣告變數方式？

6種

名稱	版本
var	ES5、ES6
let	ES5、ES6
const	ES5、ES6
function	ES5、ES6
import	ES6
class	ES6

30. 使用過哪些ES6語法？

名稱	展示	作用
塊作用域	{}	let 允許建立塊級作用域，ES6 推薦在函式中使用 let 定義變數，而非 var
箭頭函式	()=>	箭頭函式就是函式的一種簡寫形式，使用括號包裹引數，跟隨一個 =>，緊接著是函式體
函式引數預設值	略	ES6 中允許你對函式引數設定預設值
展開操作符	…	[…arr]
模板語法	``	`Hi ${user}!`
物件超類	super()
二進位制和八進位制字面量	0o、0O	通過在數字前面新增 0o 或者 0O 即可將其轉換為二進位制值
for of和for in	for of 、for in	for…of 用於遍歷一個迭代器用陣列；for…in 用來遍歷物件中的屬性;
Map 和 WeakMap		在 Map 中，任何型別都可以作為物件的 key；WeakMap 的所有 key 必須是物件
Set 和 WeakSet		Set 物件是一組不重複的值，重複的值將被忽略，值型別可以是原始型別和引用型別
類	class	建立物件，可以使用extends 繼承
Symbol		ES6 中提出 symbol 的目的是為了生成一個唯一的識別符號
迭代器	Iterators	它提供了 next() 函式來遍歷一個序列、ES6 中可以通過 Symbol.iterator 給物件設定預設的遍歷器
Generators
Promises		promise物件代表一個非同步操作，有三種狀態：Pending（進行中）、Resolved（已完成）和Rejected（已失敗）

31. 瞭解過原生鏈嗎？

32. 迴流和重繪

迴流必定重繪

1. 迴流

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

2. 重繪

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

3. 區別：

   迴流必將引起重繪，而重繪不一定會引起迴流。比如：只有顏色改變的時候就只會發生重繪而不會引起迴流
   當頁面佈局和幾何屬性改變時就需要回流
   比如：新增或者刪除可見的DOM元素，元素位置改變，元素尺寸改變——邊距、填充、邊框、寬度和高度，內容改變

4. 如何優化？

   • 儘量使用transform 代替margin-top
   • 用opacity(透明) 代替 visibility（隱藏）
   • 不要使用table佈局，可能很小的一個小改動會造成整個 table 的重新佈局
   • 對於頻繁變化的元素應該為其加一個 transform 屬性，對於視訊使用video 標籤
   • …

33. vue-router有哪些生命週期？

beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
每個生命鉤子（週期）都有三個引數：

• to: Route: 即將要進入的目標 路由物件
• from: Route: 當前導航正要離開的路由
• next: Function: 一定要呼叫該方法來 resolve 這個鉤子

34. http中的doctype宣告作用？

35. 防抖與節流

應用場景：瀏覽器滾動條監聽、輸入監聽、滑鼠移動監聽等…

---

防抖：
所謂防抖，就是指觸發事件後在 n 秒內函式只能執行一次，如果在 n 秒內又觸發了事件，則會重新計算函式執行時間。

function debounce(func, wait) {
    let timeout;
    return function () {
        let context = this;
        let args = arguments;

        if (timeout) clearTimeout(timeout);
        
        timeout = setTimeout(() => {
            func.apply(context, args)
        }, wait);
    }
}
content.onmousemove = debounce(count,1000);

節流：
所謂節流，就是指連續觸發事件但是在 n 秒中只執行一次函式。節流會稀釋函式的執行頻率。

function throttle(func, wait) {
    let timeout;
    return function() {
        let context = this;
        let args = arguments;
        if (!timeout) {
            timeout = setTimeout(() => {
                timeout = null;
                func.apply(context, args)
            }, wait)
        }
    }
}
content.onmousemove = throttle(count,1000);

36. 微任務與巨集任務

主任務
巨集任務setTimeout()
微任務.then()

37. Vue中各種生命週期總結

1. 根元件例項：8個 (beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed)
2. 元件例項：8個 (beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed)
3. 全域性路由鉤子：2個 (beforeEach、afterEach)
4. 元件路由鉤子：3個 (beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave)
5. 指令的週期： 5個 (bind、inserted、update、componentUpdated、unbind)
6. beforeRouteEnter的next所對應的週期
7. nextTick所對應的週期

38. 強制使低版本瀏覽器相容

<configuration>
  <system.webServer>
    <!-- 設定網站伺服器以指定預設相容性模式 Lionden -->
    <httpProtocol>
      <customHeaders>
        <clear />
        <add name="X-UA-Compatible" value="IE=EmulateIE7" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

39. 講一下標準盒模型和怪異盒模型

40. 多頁面和單頁面的區別