記2020前端面試之路

時間  2021-02-19
標籤 javascript css html 前端 vue java node jquery webpack es6 欄目 快樂工作 简体版
原文   原文鏈接

2020從我第一份簡歷投遞出去已經將近兩個月了，雖然暫時沒畫句號，但我想先記錄一下，大家裸面的，裸辭的都慎重一下。javascript

下面寫的都是真實面試過的，真的會考的。包括騰訊，阿里，頭條，滴滴，美團，好將來，真融寶，快手，貝殼等，對問的題目進行了分類。css

題主中途也心理崩潰過，好在有靠譜領導和小夥伴分析，靠譜老公支持，最終抗到了如今。html

  1. 平常問題前端

    1. 自我介紹（99%會問，最好仍是準備一下）

  2. html篇vue

    1. meta通常有什麼屬性？

  3. css篇java

    1. flex 彈性佈局瞭解嗎？用過哪些？
    2. flex佈局？？怎麼讓它一個居左一個居右？
    3. positon說一下類型；absolute父級沒有relative針對什麼定位
    4. 左右佈局有幾種方式
    5. 標準盒模型和怪異盒模型的區別
    6. BFC解釋一下
    7. 元素居中的方法

  4. js基礎篇node

    1. 閉包、原型鏈（手寫閉包）
    2. javascript繼承
    3. 原型鏈說一下，字符串有原型嗎(有，__propto__指向Object)，全部對象都有原型嗎

    4. 理解事件循環機制（會問你詳細怎麼走的，必須得無理解了才能徹底hold住）；async與await是什麼任務；爲何是微任務jquery

      示例題1
console.log('script start');
setTimeout(function()  {
console.log('setTimeout');
},  0);
Promise.resolve().then(function()  {
console.log('promise1');
}).then(function()  {
console.log('promise2');
});
console.log('script end');

      示例2:輸出什麼，爲何？
      image.pngwebpack

      示例3
async function async1(){
    console.log('async1 start')
    await async2()
    console.log('async1 end')//w1
}
async function async2(){
    console.log('async2')
}
console.log('script start')
setTimeout(function(){// h1
    console.log('setTimeout')
},0)  
async1();
new Promise(function(resolve){
    console.log('promise1')
    resolve();
}).then(function(){
    console.log('promise2')//w2
})
console.log('script end')
      示例4任務隊列理解
setTimeout(()=>{
    console.log(1);
    Promise.resolve().then(()=>{
        console.log(2);
    });
}, 0)

setTimeout(()=>{
    console.log(3);
    Promise.resolve().then(()=>{
        console.log(4);
    });
}, 0)
    5. DOM操做——怎樣添加、移除、移動、複製、建立和查找節點
    6. cookie、localStorage、sessionStorage 區別和使用場景
    7. 跨域相關問題，怎麼解決？幾種方式？
    8. 跨域的方法
    9. 爲何會跨域，跨域到後端了嗎
    10. 爲何會跨域，跨域的實現；option在什麼狀況會發
    11. 跨域,cookie容許跨域的配置withCredentials: true
    12. 緩存有哪些
    13. 緩存有哪些，協商緩存返回狀態是什麼，強緩存返回狀態是多少
    14. 緩存：強緩存，協商緩存，seestion,localstorge,cookie
    15. 刷新列表會形成數據丟失怎麼辦
    16. cookie,localstorge,sessionStorge區別
    17. cookie怎麼帶給後端(withcans)
    18. call,apply,bind的區別
    19. ajax原生怎麼寫？get與post的區別？post的參數放在哪裏的？
    20. post/get的區別，contentType的類型
    21. js實現深度複製（手寫代碼）
    22. js的基本數據類型；怎麼判斷數據類型（必須答出對象原型才肯罷休）；symbol怎麼聲明
    23. [1,2,3].toString()和{a:10}.toString分別打印什麼，爲何
    24. 郵箱的正則怎麼寫？
    25. 寫一個正則匹配/<script/>內的內容
 const str = 
 /<script\>....</script>
 /<div\></div>
 \<label text="aa"/></label>
    26. 垃圾回收機制，閉包應用場景
    27. 事件循環原理
    28. 判斷是不是數組--instanseof ，是不是它的實例
    29. 瀏覽器緩存
    30. 判斷下面的對象是如何成環的
 var a = {
     b: c
 }
 var c = {
     d: d
 }
 var d = {
     a: a
 }

  5. ES6篇es6

    1. promise 實現原理
    2. promise的實現（手寫代碼）
    3. 怎麼判斷5個全對
    4. promiseAll --->原生實現

    5. promise結合try catch

      try{
    Promise.reject(2)
    .catch((e)=>{
        console.log(e) 
        throw new Error(3)
    })
}catch(e){
    console.log(e) 
}
try{ 
    const data = await Promise.reject(2);
     console.log(data);
     console.log(4);
     throw new Error(3);
}catch(e){ 
     console.log(e)
    6. async await
    7. js實現繼承,ES6實現繼承，es6有用嗎？ES6 class有用嗎？babel把es6轉爲ES5?ES5實現繼承？
    8. set map/weakmap區別
    9. map和forEach的區別
    10. Es6 commonJS的區別
    11. es6和ts

    12. function 和尖頭函數的區別

      m:function(){
        console.log(this)
    },
    n:()=>{console.log(this)}
};
a.m();
a.n();
var x=a.m;
var y=a.n;
function f(){
    x();
    y();
}
x();
y();

    13. 解構

      const obj = { 
        a: { b:1, }, 
        c:2
        } 
        const obj1 = {...obj}; 
        const obj2 = {...obj1}; 
        obj.a.b = 3;
        obj.c = 4; 

        obj1.a.b

  6. Vue篇

    1. vue的組件間怎麼通訊？父子間怎麼通訊？父組件調子組件的方法怎麼調用？
    2. vuex
    3. vue生命週期；beforeCreated created之間的區別；created和 beforeMouned之間的區別；若是父組件和子組件，生命週期又是怎樣的
    4. SPA，vue單頁面如何在後退時返回到上次滾動位置（考vue-router）
    5. vue雙向綁定的原理。那是怎麼向訂閱者發送消息的呢？
    6. vue data 到view的過程（要答出Vdom哦，沒問你也要答，否則扣分～～～）
    7. vue-router路由：hash# history；history主要的API；pushState replaceState 區別
    8. vue 模版，虛擬Dom 到真實Dom的轉換過程
    9. vue MVVM驅動的原理是什麼
    10. 詳細說一下vue的週期,平時用什麼哪些週期多一些？他們的應用場景
    11. nextTick，他的原理是什麼

    12. vue.nextTick(()=>{})是怎麼實現的，以及下面的輸出

      data: {
   a: 1
 }
 vue.nextTick(()=>{
     this.a = 2
     console.log(this.a)
 })
 Promise.resolve().then(()=>{
     this.a = 3;
 })
 console.log(this.a)
    13. vue-router路由,默認的是什麼【hash】
    14. vue路由的鉤子函數----沒答上來
    15. 組件的通訊方法
    16. vuex的數據流向，vuex的原理
    17. vue過濾器有哪些,數字格式化{{ num | formatAmount(0)}} 它的原理
    18. vue使用use的使用的發生了什麼
    19. computed計算屬性的原理
    20. vuex爲何這麼設計,爲何要採用傳參數的方式
    21. vue-router
    22. vue函數式組件和非函數式組件
    23. 登陸 權限 content 路由導航
    24. vuex說一下
    25. event.bus (知識)//new Vue()，自定義事件
    26. v-model的雙向綁定原理
    27. object.property的缺點，爲何不能監聽
    28. vue3.0的改進proxy
    29. vue的原理
    30. jquery和vue的區別
    31. vue獲取元素的方法
    32. nextTick，原理
    33. created和mounted的區別
    34. computed和watch的區別，哪一種效率高一些
    35. data 爲何是一個函數
    36. data的函數能夠改爲箭頭函數嗎
    37. vue3.0 爲何使用proxy
    38. 數據新增對象怎麼讓它能夠更新到組件上-vue.set

  7. webpack篇

    1. webpack打包用過嗎？
    2. webpack loader(module)和plugin用了哪些
    3. webpack的loader和plugin的區別，爲何要使用loader，各個loader的做用
    4. 爲何webpack4能夠再命令行直接執行
    5. 用過哪些webpack的高級屬性
    6. 熱重載是怎麼作的
    7. 不一樣環境怎麼區分打包（packge.json）
    8. webpack的構建過程
    9. 熱更新的原理-------》不知道
    10. 自定義插件的流程
    11. require的原理，es6轉es5原理
    12. tree shaking的原理以及如何充分利用tree shanking

  8. npm篇

    1. npm發佈了幾個包？打包出來的格式？
    2. npm install發生了什麼

  9. http篇

    1. http緩存？
    2. http緩存,這兩個緩存的關聯關係是怎麼樣的,是怎麼轉換的
    3. 一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？
    4. HTTP/2 和 HTTP 1.1 有什麼區別？
    5. http狀態碼有哪些？
    6. 瀏覽器輸入地址發生了什麼
    7. http2.0瞭解嗎
    8. http請求成功的狀態碼有哪些
    9. http2.0的改進

  10. 移動端

    1. 移動端怎麼作適配？
    2. rem和em的區別；
    3. 若是要在chrome上顯示10px的字怎麼辦
    4. rem是基於什麼佈局的一個方式？
    5. hybrid開發？
    6. 怎樣實現 微信開發的登錄與分享 ？
    7. 遇到過哪些移動端的一些坑
    8. PC和移動怎麼自適應怎麼作
    9. 手機調試問題
    10. 移動端設置
    11. Pc和移動開發的區別

  11. 性能優化篇

    1. 如何優化和減小頁面的加載時間。
    2. 性能優化相關？
    3. 項目中作了哪些性能優化
    4. cdn有哪些優化靜態資源加載速度的機制
    5. 設計AutoComplete組件（又叫搜索組件、自動補全組件等）時，須要考慮什麼問題？
    6. 瀏覽器第一次訪問，第二次訪問，第三次訪問的區別
    7. DOMContentLoad 與ttfb區別
    8. ready與onload區別，哪一個先執行
    9. 錯誤監控
    10. DNS解析
    11. CDN的理解
    12. 常見的性能
    13. 防抖
    14. 函數節流，函數防抖實現

  12. 服務端篇

    1. koa2中間鍵用了哪些
    2. nodejs?瞭解哪些部分？
    3. node的進程管理
    4. koa2節點管理
    5. node瞭解多少
    6. node瞭解多少

  13. 手寫代碼和算法篇

    1. 請用js實現將一個二維數組轉換成樹結構
   例如：將下面數據
   [
       ["a", "aa", "aaa", "aaaa"],
       ["b", "bb", "bbb"],
       ["a", "ab", "aba"],
       ["a", "aa", "aab"]
   ] 轉爲：
   [
       {
           "name" : "a",
           "child" : [
               {
                   "name" : "aa",
                   "child" : [
                       {
                           "name" : "aaa",
                           "child" : [
                               {
                                   "name" : "aaaa",
                                   "child" : []
                               }
                           ]
                       },
                       {
                           "name" : "aab", "child" : []
                       }
                   ]
               },
               {
                   "name" : "ab",
                   "child" : [
                       {
                           "name": "aba",
                           "child" : []
                       }
                   ]
               }
           ]
       },
       {
           "name": "b",
           "child" : [
               {
                   "name" : "bb",
                   "child" : [
                       {
                           "name" : "bbb",
                           "child" : []
                       }
                   ]
               }
           ]
       }
    2. `fn = f(n-1) + f(n-2)
   f0 = 0
   f1 = 1
   n >=0 正整數
   fn`
    3. 數組拍平（手寫代碼）
      image.png
      image.png

    4. 嵌套數組拍平

      [1,2,3,4,[5,6,[7]],8]
[1,2,3,4,5,6,7,8]
除了常規方法，還有奇葩方法，全轉字符串再把中括號刪掉
    5. image.png

    6. query解析

      ?a=0&a=1&a=2&c&url=url內容#333
轉成
{
    query:{
        a:[0,1,2],
        url:'url內容'
    },
    hash:''

    7. 手寫

      var data = { a: { b: { c: 'ScriptOJ' } } }
console.log(safeGet(data, 'a.b.c')) // => scriptoj
console.log(safeGet(data, 'a.b.c.d')) // => 返回 undefined
console.log(safeGet(data, 'a.b.c.d.e.f.g')) // => 返回 undefined
console.log('ScriptOJ') // => 打印 ScriptOJ
    8. 手寫階乘 5*4*3*2*1
    9. 拖拽
    10. 寫一個函數，計算兩個矩形是否碰撞
    11. 實現函數，功能是給數組打亂順序，要求不能用sort進行打亂
    12. 手寫快速排序
    13. 手寫promise的實現
    14. 淺拷貝
    15. 深拷貝
    16. 怎麼讓0所有到最後去的方法
    17. 二叉樹
    18. [1,2,5,3] 獲得10的函數
    19. 兩個有序數組（升序）排序組合成1個有序數組（升序）
    20. 二分查找算法
    21. 5000 → 5,000,5430342 → 5,430,342
    22. var list = [{age: 1}, {age:13}, {age:8}],按照 age的值 將list從大到小排序
    23. var list = [{age: 1}, {age:13}, {age:8}],輸出重複次數最多的age？重複了多少次？（此問題和第一問無關係）

    24. 函數柯里化

      請實現方法`curry(Function) => Function`，傳入一個多參函數，返回單參函數
 example:
 const sub = function(a, b, c, d) {
     return a+b+c+d;
 }
 const subCurry = curry(sub);
 sub(1,2,3,4) = subCurry(1)(2)(3)(4)
 sub(1,2,3,4) = subCurry(1,2)(3)(4)

  14. 項目流程篇

    1. 前端上線流程是怎麼樣的
    2. 怎麼保障你的代碼質量
    3. 代碼上線了有問題怎麼辦
    4. 部署是怎麼樣的過程，上線的過程是怎麼樣的？他是怎麼被用戶訪問到的？
    5. 如何保證代碼質量

  15. 開放性問題

    1. 目前你對什麼Web技術最感興趣
    2. 最近了解前端的什麼技術？
    3. 你有什麼想問個人嗎
    4. 你遇到的一些難點
    5. 介紹一個你的一個項目
    6. 說一下你的用戶體驗怎麼優化的
    7. 你最近在學習什麼
    8. 技術的積累沉澱有哪些
    9. 你爲何要離職
    10. 瞭解爲微應用嗎
    11. 你是如何設計組件的，如何設計一個dialog，要考慮哪些問題
    12. 你平時是怎麼學習
    13. 你想作什麼工程
    14. 你有什麼想問個人
    15. 技術管理有什麼想法
    16. mock方法
    17. 組件怎麼封裝
    18. 你的興趣愛好
    19. 最驕傲的一件事
    20. 你的優勢和缺點
    21. 你有什麼要問個人
    22. 開發組件的注意事項
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程