前端面試題總結（更新中）

阿新 • • 發佈：2022-04-10

問答題

1.absolute與fixed的區別

absolute（絕對定位）: 物件脫離文件流，使用top、left、bottom、right等進行絕對定位，相對於第一個非static的父元素進行定位，出現滾動條時隨滾動條移動；

fixed（固定定位）:物件脫離文件流，同樣使用top、left、bottom、right等進行絕對定位，相對於瀏覽器視窗進行定位，出現滾動條時不隨滾動條移動；

關於螢幕、瀏覽器視窗、可視視窗區別可參考： https://blog.csdn.net/qq_43327962/article/details/110677964

2.z-index的原理及適用範圍

概念：z-index表示元素在z軸上的堆疊順序，值為整數，一般值越大當前盒子就越顯示在上層（越貼近螢幕）；

適用範圍：該屬性僅適用於定位元素，eg:relative、fixed、absolute定位的position元素中有效，float及static無效；

如果未指定z-index屬性，則元素堆疊順序預設基於當前所在文件樹；

同一個堆疊上下文：層疊級別大的元素顯示在上層；

不同堆疊上下文：元素的顯示順序與自身層疊級別無關，由祖先元素的層疊級別決定；

eg:

<body>
    <div class="container1">
        <ul class="box1">box1</ul>
        <ul class="box2" 
>box2</ul>
    </div>
    <div class="container2">
        <ul class="box3">box3</ul>
    </div>
</body>

box1、box2均沒有單獨指定z-index屬性，也就是說沒有產生新的堆疊上下文，此時它倆屬於同一個堆疊上下文；如果box1、box2設定了position及z-index，誰的值大誰顯示在螢幕上方；（預設規則）

如果container1的z-index小於container2，那麼container1的子元素無論z-index設定的值有多大，box3也總是顯示在上層；（從父規則

）；

3.http1.x與http2的區別

可參考：https://www.cnblogs.com/yll156/p/16045679.html

4.http與https區別？TLS連線過程？

5.瀏覽器快取 7.產生跨域的原因？常見的跨域問題？解決跨域的方案原理？

8.瀏覽器輸入url的渲染過程？瀏覽器核心有哪些？

9.什麼是閉包？閉包的優缺點

10.事件迴圈機制？常見巨集任務、微任務?輸出下面程式碼列印順序

async function async1() {
     console.log('async1')  
}
async function async2() {
   console.log('async2 start')
   await async1();
   console.log('async2 end')
}
setTimeout( () => {
   console.log('setTimeout')
},  0);
new Promise(function(resolve){
    console.log('promise1')
   resolve('ces')
}).then(function(){
    console.log('promise1-then')
})
async2();
new Promise(function(resolve){
    console.log('promise2')
   resolve('ces')
}).then(function(){
    console.log('promise2-then')
})

11.Promise、async、await

12.this作用域問題、apply/call/bind區別

13.let、const、var區別？js是如何支援塊級作用域的？

14.資料型別的判斷？typeof及instanceof的原理

15.new一個物件的過程

16.前端效能優化

17.localStorage、sessionStorage、cookie區別

18.請求中cookie常見的屬性值有哪些

19.編碼解碼

20.unicode與utf-8

21.nextTick原理及適用場景

22.深拷貝與淺拷貝？分別有哪些實現方式？編碼實現深拷貝

23.實現盒子水平居中有哪些方式

24.什麼是bfc?如何觸發bfc?

25.清除浮動的方式

26.css常見的選擇器及優先順序

27.webpack中loader與plugin的區別?loader的載入順序？url-loader與babel-loader的區別

28.TCP、UDP區別？三次握手、四次揮手

29.原型及原型鏈

30.談談對css盒子模型的理解

31.vue的資料雙向繫結原理？vue中的key作用？vue中diff演算法的理解？vue中的computed與watch的區別？

32.元素繫結及銷燬事件的方式有哪幾種？各有什麼區別

33.request-header請求頭中有哪些配置項

34.函式防抖與節流的區別及實現

35.MVC與MVVM、MVP之間的區別

36.vue的生命週期？vue中的data為什麼是一個函式？

37.箭頭函式與普通函式區別

38.事件委託

39.vue-router路由模式及原理

40.keep-alive實現原理

41.vuex幾大核心屬性

42.輸出下面列印結果

var  a = 10;
var obj = {
    a: 20,
    say: () => {
        console.log(this.a)
    },
    anotherSay() {
        console.log(this.a)    
    }      
}
obj.say();
var anotherSay = obj.anotherSay();
obj.say.call(anotherSay, 30)

演算法題

1.編碼實現陣列扁平化

2.編碼實現陣列全排列

3.編碼將數字轉換為金錢格式 eg：121313331 -> 121,313,331

4.解析url中引數並將中文解碼且如果引數key重複，則將值合併到陣列中

eg: https://www.cnblogs.com/test.html?id=1&id=2&name=%E6%B5%8B%E8%AF%95&age=18

結果為：{ id： [1, 2], name: '測試', age: 18}　　

5.計算字串中無重複字元的最大長度 eg:asdadafjkldw -> dafjkldw無重複的最大字串長度為8