前端面試八股文彙總

一、CSS

1.說一下CSS的盒模型。

2.CSS選擇器的優先順序？

3.隱藏元素的方法有哪些？

4.px和rem的區別是什麼？

5.重繪重排有什麼區別？

6.讓一個元素水平垂直居中的方式有哪些？

7.CSS的哪些屬性哪些可以繼承？哪些不可以繼承？

8.有沒有用過預處理器？

二、JavaSscipt

1.JS由哪三部分組成？

2.JS有哪些內置對象？

3.操作數組的方法有哪些？

4.JS對數據類的檢測方式有哪些？

5.說一下閉包，閉包有什麼特點？

6.前端的記憶體泄漏怎麼理解

7.事件委托是什麼

8.基本數據類型和引用數據類型的區別？

9.說一下原型鏈。

10.new操作符具體做了什麼？

11.JS是如何實現繼承的？

12.JS的設計原理是什麼？

13.JS中關於this指向的問題

1. 全局對象中的this指向

2. 全局作用域或者普通函數中的this

3. this永遠指向最後調用它的那個對象

4. new 關鍵詞改變了this的指向

5. apply,call,bind

6. 箭頭函數中的this

7. 匿名函數中的this

14.script標簽里的async和defer有什麼區別？

15.setTimeout最小執行時間是多少？

16.ES6和ES5有什麼區別？

17.ES6的新特性有哪些？

1.新增塊級作用域（let,const）

2.新增了定義類的語法糖（class）

3.新增了一種基本數據類型（symbol）

4.新增瞭解構賦值

5.新增了函數參數的預設值

6.給數組新增了API

7.對象和數組新增了擴展運算符

8.Promise

    <h4>9.新增了模塊化（import,export）</h4>
    <h4>10.新增了set和map數據結構</h4>
        set就是不重覆
        map的key的類型不受限制
    <h4>11.新增了generator</h4>
    <h4>12.新增了箭頭函數</h4>
        不能作為構造函數使用，不能用new
        箭頭函數就沒有原型
        箭頭函數沒有arguments
        箭頭函數不能用call,apply,bind去改變this的執行
        this指向外層第一個函數的this
<h3>18.call,aply,bind三者有什麼區別？</h3>
    都是改變this指向和函數的調用，call和apply的功能類似，只是傳參的方法不同
    call方法傳的是一個參數列表
    apply傳遞的是一個數組
    bind傳參後不會立刻執行，會返回一個改變了this指向的函數，這個函數還是可以傳參的，bind()()
    call方法的性能要比apply好一些，所以call用的更多一點
<h3>19.用遞歸的時候有沒有遇到什麼問題？</h3>
    如果一個函數內可以調用函數本身，那麼這個就是遞歸函數
    函數內部調用自己
    特別註意：寫遞歸必須要有退出條件return
<h3>20.如何實現一個深拷貝？</h3>
    深拷貝就是完全拷貝一份新的對象，會在堆記憶體中開闢新的空間，拷貝的對象被修改後，原對象不受影響
    主要針對的是引用數據類型
    1.擴展運算符
    2.JSON.parse(JSON.stringify())
    3.利用遞歸函數實現
<h3>21.說一下事件迴圈。</h3>
    JS是一個單線程的腳本語言
    主線程 執行棧 任務隊列  巨集任務 微任務
    主線程先執行同步任務，然後才去執行任務隊列里的任務，如果在執行巨集任務之前有微任務，那麼要先執行微任務
    全部執行完之後等待主線程的調用，調用完之後再去任務隊列中查看是否有非同步任務，這樣一個迴圈往複的過程就是事件迴圈！
<h3>22.ajax是什麼？怎麼實現的？</h3>
    創建互動式網頁應用的網頁開發技術
        在不重新載入整個網頁的前提下，與伺服器交換數據並更新部分內容
    通過XmlHttpRequest對象向伺服器發送非同步請求，然後從伺服器拿到數據，最後通過JS操作DOM更新頁面
    1.創建XmlHttpRequest對象 xmh
    2.通過xmh對象里的open()方法和伺服器建立連接
    3.構建請求所需的數據，並通過xmh對象的send()發送給伺服器
    4.通過xmh對象的onreadystate chansge事件監聽伺服器和你的通信狀態
    5.接收並處理伺服器響應的數據結果
    6.把處理的數據更新到HTML頁面上
<h3>23.get和post有什麼區別？</h3>
    1.get一般是獲取數據，post一般是提交數據
    2.get參數會放在url上，所以安全性比較差，post是放在body中
    3.get請求刷新伺服器或退回是沒有影響的，post請求退回時會重新提交數據
    4.get請求時會被緩存,post請求不會被緩存
    5.get請求會被保存在瀏覽器歷史記錄中,post不會
    6.get請求只能進行url編碼，post請求支持很多種
<h3>24.promise的內部原理是什麼？它的優缺點是什麼？</h3>
    Promise對象，封裝了一個非同步操作並且還可以獲取成功或失敗的結果
    Promise主要就是解決回調地獄的問題，之前如果非同步任務比較多，同時他們之間有相互依賴的關係，
    就只能使用回調函數處理，這樣就容易形成回調地獄，代碼的可讀性差，可維護性也很差
    有三種狀態：pending初始狀態  fulfilled成功狀態  rejected失敗狀態
    狀態改變只會有兩種情況，
        pending -> fulfilled; pending -> rejected 一旦發生，狀態就會凝固，不會再變
    首先就是我們無法取消promise，一旦創建它就會立即執行，不能中途取消
    如果不設置回調，promise內部拋出的測u哦嗚就無法反饋到外面
    若當前處於pending狀態時，無法得知目前在哪個階段。
    原理：
        構造一個Promise實例，實例需要傳遞函數的參數，這個函數有兩個形參，分別都是函數類型，一個是resolve一個是reject
        promise上還有then方法，這個方法就是來指定狀態改變時的確定操作，resolve是執行第一個函數，reject是執行第二個函數
<h3>25.promise和async await的區別是什麼？</h3>
    1.都是處理非同步請求的方式
    2.promise是ES6，async await 是ES7的語法
    3.async await是基於promise實現的，他和promise都是非阻塞性的
    優缺點：
    1.promise是返回對象我們要用then，catch方法去處理和捕獲異常，並且書寫方式是鏈式，容易造成代碼重疊，不好維護，async await 是通過tra catch進行捕獲異常
    2.async await最大的優點就是能讓代碼看起來像同步一樣，只要遇到await就會立刻返回結果，然後再執行後面的操作
    promise.then()的方式返回，會出現請求還沒返回，就執行了後面的操作
<h3>26.瀏覽器的存儲方式有哪些？</h3>
    1.cookies
        H5標準前的本地存儲方式
        相容性好，請求頭自帶cookie
        存儲量小，資源浪費，使用麻煩（封裝）
    2.localstorage
        H5加入的以鍵值對為標準的方式
        操作方便，永久存儲，相容性較好
        保存值的類型被限定，瀏覽器在隱私模式下不可讀取，不能被爬蟲
    3.sessionstorage
        當前頁面關閉後就會立刻清理，會話級別的存儲方式
    4.indexedDB
        H5標準的存儲方式，，他是以鍵值對進行存儲，可以快速讀取，適合WEB場景

27.token存在sessionstorage還是loaclstorage？

28.token的登錄流程。

29.頁面渲染的過程是怎樣的？

30.DOM樹和渲染樹有什麼區別？

31.精靈圖和base64的區別是什麼？

32.svg格式瞭解多少？

33.瞭解過JWT嗎？

34.npm的底層環境是什麼？

35.HTTP協議規定的協議頭和請求頭有什麼？

36.說一下瀏覽器的緩存策略。

37.說一下什麼是“同源策略”？

38.防抖和節流是什麼？

39.解釋一下什麼是json？

40.當數據沒有請求過來的時候，該怎麼做？

41.有沒有做過無感登錄？

42.大文件上傳是怎麼做的？

三、HTML5CSS3

1.語義化的理解。

2.H5C3有哪些新特性？

H5的新特性：

CSS3的新特性：

3.rem是如何做適配的？

4.解決了哪些移動端的相容問題？

四、Vue

1.v-if和v-show的區別？

2.如何理解MVVM的？

3.v-for中的key值的作用是什麼？

4.說一下你對vue生命周期的理解。

5.在created和mounted去請求數據，有什麼區別？

6.vue中的修飾符有哪些？

1.事件修飾符

2.按鍵修飾符

3.系統修飾符

4.滑鼠修飾符

5.表單修飾符

7.elementui是怎麼做表單驗證的？

8.vue如何進行組件通信？

1.父傳子

2.子傳父

3.兄弟傳

4.vuex傳值

9.keep-alive是什麼？怎麼使用？

10.axios是怎麼做封裝的？

11.vue路由時怎麼傳參的？

12.vue路由的hash模式和history模式有什麼區別？

13.路由攔截是怎麼實現的？

            }
        }
    })
<h3>14.說一下vue的動態路由。</h3>
    要在路由配置里設置meat屬性，擴展許可權相關的欄位，在路由導航守衛里通過判斷這個許可權標識，實現路由的動態增加和跳轉
    根據用戶登錄的賬號，返回用戶角色
    前端再根據角色，跟路由表的meta.role進行匹配
    把匹配搭配的路由形成可訪問的路由
<h3>15.如何解決刷新後二次載入路由？</h3>
    1.window.location.reload()
    2.matcher
        const router = createRouter()
        export function resetRouter(){
            const newRouter = creatRouter()
            router.matcher = newRouter.matcher
        }
<h3>16.vuex刷新數據會丟失嗎？怎麼解決？</h3>
    vuex肯定會重新獲取數據，頁面也會丟失數據
    1.把數據直接保存在瀏覽器緩存里（cookie  localstorage  sessionstorage）
    2.頁面刷新的時候，再次請求數據，達到可以動態更新的方法
        監聽瀏覽器的刷新書簡，在刷新前把數據保存到sessionstorage里，刷新後請求數據，請求到了用vuex，如果沒有那就用sessionstorage里的數據
<h3>17.computed和watch的區別？</h3>
    1.computed是計算屬性，watch是監聽，監聽的是data中數據的變化
    2.computed是支持緩存，依賴的屬性值發生變化，計算屬性才會重新計算，否則用緩存；watch不支持緩存
    3.computed不支持非同步，watch是可以非同步操作
    4.computed是第一次載入就監聽，watch是不監聽
    5.computed函數中必須有return  watch不用
<h3>18.vuex在什麼場景會去使用？屬性有哪些？</h3>
    state       存儲變數
    getters     state的計算屬性
    mutations   提交更新數據的方法
    actions     和mutations差不多，他是提交mutations來修改數據，可以包括非同步操作
    modules     模塊化vuex
    使用場景：
        用戶的個人信息、購物車模塊、訂單模塊
<h3>19.vue的雙向數據綁定原理是什麼？</h3>
    通過數據劫持和發佈訂閱者模式來實現，同時利用Object.defineProperty()劫持各個屬性的setter和getter，
    在數據發生改變的時候發佈消息給訂閱者，觸發對應的監聽回調渲染視圖，也就是說數據和視圖時同步的，數據發生改變，視圖跟著發生改變，視圖改變，數據也會發生改變。
    第一步：需要observer的數據對象進行遞歸遍歷，包括子屬性對象的屬性，都加上setter和getter
    第二步：compile模板解析指令，把模板中的變數替換成數據，然後初始化渲染視圖，同時把每個指令對應的節點綁定上更新函數，添加訂閱者，如果數據變化，收到通知，更新視圖
    第三步：Watcher訂閱者是Observer和Compile之間的通信橋梁，作用：
            1.在自身實例化的時候忘訂閱器內添加自己
            2.自身要有一個update()方法
            3.等待屬性變動時，調用自身的update方法，觸發compile這種的回調
    第四步：MVVM作為數據綁定的入口，整合了observer、compile和watcher三者，通過observer來監聽自己的數據變化，通過compile解析模板指令，最後利用watcher把observer和compile聯繫起來，最終達到數據更新視圖更新，視圖更新數據更新的效果
<h3>20.瞭解diff演算法和虛擬DOM嗎？</h3>
    虛擬DOM，描述元素和元素之間的關係，創建一個JS對象
    如果組件內有響應的數據，數據發生改變的時候，render函數會生成一個新的虛擬DOM，這個新的虛擬DOM會和舊的虛擬DOM進行比對，找到需要修改的虛擬DOM內容，然後去對應的真實DOM中修改
    diff演算法就是虛擬DOM的比對時用的，返回一個patch對象，這個對象的作用就是存儲兩個節點不同的地方，最後用patch里記錄的信息進行更新真實DOM
    步驟：
        1.JS對象表示真實的DOM結構，要生成一個虛擬DOM，再用虛擬DOM構建一個真實DOM樹，渲染到頁面
        2.狀態改變生成新的虛擬DOM，跟就得虛擬DOM進行比對，這個比對的過程就是DIFF演算法，利用patch記錄差異
        3.把記錄的差異用在第一個虛擬DOM生成的真實DOM上，視圖就更新了。
<h3>21.vue和jquery的區別是什麼？</h3>
    1.原理不同
        vue就是數據綁定；jq是先獲取dom再處理
    2.著重點不同
        vue是數據驅動，jq是著重於頁面
    3.操作不同
    4.未來發展不同
<h3>22.vuex的響應式處理。</h3>
    vuex是vue的狀態管理工具
    vue中可以直接觸發methods中的方法，vuex是不可以的。未來處理非同步，當觸發事件的時候，會通過dispatch來訪問actions中的方法，actions中的commit會觸發mutations中的方法從而修改state里的值，通過getter把數據更新到視圖
    Vue.use(vuex)，調用install方法，通過applyMixin(vue)在任意組件內執行this.$store就可以訪問到store對象。
    vuex的state是響應式的，藉助的就是vue的data，把state存到vue實例組件的data中
<h3>23.vue中遍歷全局的方法有哪些？</h3>
    1.普通遍歷，對象.forEach()
        arr.forEach(function(item,index,arr){
            console.log(item,index)
        })
    2.對元素統一操作  對象.map()
        var newarr = arr.map(function(item){
            return item+1
        })
    3.查找符合條件的元素 對象.filter()
        arr.filter(function(item){
            if(item > 2){
                return false
            }else{
                return true
            }
        })
    4.查詢符合條件的元素，返回索引 對象.findindex()
        arr.finindex(function(item){
            if(item>1){
                return true
            }else{
                return false
            }
        })
    對象.evening()  遇到不符合的對象會停止
    對象.some()  找到符合條件的元素就停止
<h3>24.如何搭建腳手架？</h3>
    下載：node  cnpm  webpack vue-cli
    創建項目：
        1.找到對應的文件，然後利用node指令創建（cmd）
        2.vue init webpack xxxx
        3.回車項目描述
        4.作者回車
        5.選擇vue build
        6.回車
        7.輸入n
        8.不按照yarn
        9.輸入npm run dev
<h3>25.如何封裝一個組件？</h3>
    1.使用Vue.extend()創建一個組件
    2.使用Vue.components()方法註冊組件
    3.如果子組件需要數據，可以在props中接收定義
    4.子組件修改好數據，要把數據傳遞給父組件，可以用emit()方法
    原則：
        把功能拆開
        儘量讓組件原子化，一個組件做一件事情
        容器組件管數據，展示組件管視圖
<h3>26.封裝一個可復用的組件，需要滿足什麼條件？</h3>
    1.低耦合，組件之間的依賴越小越好
    2.最好從父級傳入信息，不要在公共組件中請求數據
    3.傳入的數據要進行校驗
    4.處理事件的方法寫在父組件中
<h3>27.vue的過濾器怎麼使用？</h3>
    vue的特性，用來對文本進行格式化處理
    使用它的兩個地方，一個是插值表達式，一個是v-bind
    分類：
        1.全局過濾器
            Vue.filter('add',function(v){
                return v < 10 ? '0' + v : v
            })
            <div>{{33 | add}}</div>
        2.本地過濾器
            和methods同級
            filter:{
                add:function(v){
                    return v < 10 ? '0' + v : v
                }
            }
<h3>28.vue中如何做強制刷新？</h3>
    1.localtion.reload()
    2.this.$router.go(0)
    3.provide和inject
<h3>29.vue3和vue2有哪些區別？</h3>
    1.雙向數據綁定的原理不同
    2.是否支持碎片
    3.API不同
    4.定義數據變數方法不同
    5.生命周期的不同
    6.傳值不同
    7.指令和插槽不同
    8.main.js不同
<h3>30.vue的性能優化怎麼做？</h3>
    1.編碼優化
        不要把所有數據都放在data中
        v-for時給每個元素綁定事件用事件代理
        keep-alive緩存組件
        儘可能拆分組件，提高復用性、維護性
        key值要保證唯一
        合理使用路由懶載入，非同步組件
        數據持久化存儲的使用儘量用防抖、節流優化
    2.載入優化
        按需載入
        內容懶載入
        圖片懶載入
    3.用戶體驗
        骨架屏
    4.SEO優化
        預渲染
        服務端渲染ssr
    5.打包優化
        CDN形式載入第三方模塊
        多線程打包
        抽離公共文件
    6.緩存和壓縮
        客戶端緩存、服務端緩存
        服務端Gzip壓縮
<h3>31.首屏優化該如何去做？</h3>
    1.使用路由懶載入
    2.非首屏組件使用非同步組件
    3.首屏不中要的組件延遲載入
    4.靜態資源放在CDN上
    5.減少首屏上JS、CSS等資源文件的大小
    6.使用服務端渲染
    7.簡歷減少DOM的數量和層級
    8.使用精靈圖請求
    9.做一些loading
    10.開啟Gzip壓縮
    11.圖片懶載入
<h3>32.vue3的性能為什麼比vue2好？</h3>
    1.diff演算法的優化
    2.靜態提升
    3.事件偵聽緩存
<h3>33.vue3為什麼使用proxy？</h3>
    1.proxy可以代理整個對象，defineproperty只代理對象上的某個屬性
    2.proxy對代理對象的監聽更加豐富
    3.proxy代理對象會生成新的對象，不會修改被代理對象本身
    4.proxy補相容ie瀏覽器
<h3>34.說一下你對組件的理解。</h3>
    可以重覆使用的vue實例，獨一無二的組件名稱
    可以抽離單獨的公共模塊
    提高代碼的復用率
<h3>35.你是如何規劃項目文件的？</h3>
    public
        圖標、index.html、img
    src
        api
        assets
        components
            按分類再次劃分子目錄
        plugins
        router
        static
        styles
        utils
        views
    App.vue
    main.js
    package.json
    vue.config.js
<h3>36.是否使用過nuxt.js？</h3>
    是基於vue的應用框架，關註的是渲染，可以開發服務端渲染應用的配置
    SSR：服務端渲染
        好處：
            SSR生成的是有內容的HTML頁面，有利於搜索引擎的搜索
            優化了首屏載入時間
    SEO：優化搜索引擎
    SPA的應用不利於搜索引擎SEO的操作
<h3>37.SEO如何優化？</h3>
    1.SSR
    2.預渲染 prerender-spa-plugin

五、Echarts

1.echarts有用過嗎？常用的組件有哪些？

六、Uni-APP

七、Weabpack

八、Git

1.git如何合併、拉取代碼？

2.git如何解決衝突問題？

九、HR

1.你的離職原因是什麼？

2.工作到現在，項目中遇到最難的問題是什麼？怎麼解決的？

3.你的優勢在哪裡？

4.如何協同工作？