2020前端春招經驗分享(掘金處女做),從面試小白到老油條的蛻變 | 掘金技術徵文

時間 2020-06-08

標籤前端經驗分享面試老油條蛻變技術徵文欄目快樂工作简体版

原文原文鏈接

終於上岸了嗚嗚嗚...,終於又能愉快的寫代碼了前端

tip:爲方便閱讀部份內容細節使用摺疊node

自我介紹

大三雙非本科,大一開始學前端,今年2月底開始投實習,前幾天終於收到了第一個offergit

初生牛犢不怕虎,前期沒好好準備,浪費了太多好機會,奉勸你們必定要好好複習和總結github

→面試歷程(不含筆試時間)

2月25日:阿里淘系一面
2月26日:CVTE一面(涼)
3月13日:騰訊一面
3月23日:阿里淘系二面(涼)
3月24日:字節一面(涼)
3月25日:騰訊二面
3月26日:騰訊三面(涼)
3月28日:美團一面
3月31日:美團二面
4月03日:美團hr面
4月03日:蘑菇街一面
4月09日:蘑菇街二面(拒)
4月10日:TW一面
4月10日:騰訊換部門撈起來一面(涼)
4月12日:百度一,二,三面技術
4月13日:美團OC(上岸)
4月16日:網易雲一面
4月16日:TW二面

當淘系前端二面涼了以後,周圍同窗都陸續上岸了,我開始慌了,就海投了一波web

→目前還在流程中

百度
TW
網易雲
騰訊
快手

下面開始乾貨分享,請各位細細品,若有不足之處還請斧正面試

面試前應該作哪些準備?

1.一些知識儲備

這裏主要是根據個人面試經驗總結的一些面試高頻的知識點供你們參考,以樹形結構展開(避免貼圖勸退)正則表達式

若是並無深刻了解或使用Node,你們能夠不用刻意去準備Node算法

計算機基礎知識

算法與數據結構
1. 鏈表
2. 堆/棧
3. 哈希表
4. 二叉樹
5. 各類排序,尤爲是快排
6. BST
7. KMP
8. 二分
操做系統
1. 線程相關的問題
2. 進程相關的問題
3. 進程與線程進行對比所產生的問題
計算機網絡
1. TCP相關
2. UDP相關
3. HTTP相關
4. DNS相關
設計模式
1. 工廠模式
2. 抽象工廠模式
3. 單例模式

大前端

JS(包含ES6)
1. DOM事件觸發的幾個階段(捕獲,目標,冒泡)相關問題
2. 值類型與引用類型相關問題
3. 函數柯里化
4. 閉包
5. this指向判斷
6. apply,call,bind
7. event loop
8. promise
9. 定時器
10. 原型與原型鏈
11. 箭頭函數
12. 類型轉換
13. async與await
14. 類數組
15. 節流防抖
16. 垃圾回收機制
17. typeof與instanceof
18. ==與===
19. JS中的繼承實現
20. let,const,var區別
21. 各類遍歷數組的方式比較(for,forof,forin,forEach)
CSS
1. 迴流與重繪
2. 盒模型
3. 彈性佈局(flex)
4. 柵欄佈局(grid)
5. display各類值及其做業
6. position各類值及其做用
7. BFC(概念,如何觸發,特色)
8. display:none,visibility:hidden,opacity:0區別
9. CSS層級關係,樣式權重計算
10. CSS僞類
11. CSS僞元素
12. 斑馬紋實現
13. 簡單動畫的實現
14. 小球從屏幕左滾動到右xxxpx
15. 子元素相對於父元素水平居中的方法
16. 子元素相對於父元素水平垂直居中的方法
17. 如何作頁面主題(皮膚)切換
VUE(針對沒看源碼)
1. 數據雙向綁定,數據響應式實現的原理
2. 生命週期
3. 組件之間通訊方法(父子,兄弟,祖孫,任意)
4. v-if,v-show異同
5. 路由原理,爲何地址發生改變,瀏覽器不會刷新
6. 權限管理
瀏覽器
1. 緩存機制
2. 頁面渲染原理(過程)
3. 本地存儲
4. 瀏覽器安全相關問題(SQL注入,XSS,CSRF,DNS劫持,點擊劫持)
5. 跨域相關問題(緣由,解決方式)
6. 同源策略
7. 預檢請求
性能優化
1. Webpack代碼打包優化
2. 網絡層面優化
3. 首屏加載優化
小程序
1. 小程序的特色
2. 你對小程序的發展見解
3. 小程序的原理
4. 小程序與傳統移動端Web的區別
Node
1. node中的Event loop
2. node中的進程與線程相關問題
正則表達式簡單使用

2.總結本身的項目

主要從:json

項目背景
對於多人協做項目在項目中所擔任的職責,以及對項目的貢獻
遇到了什麼難題,如何解決的
項目的創新點
你有什麼收穫
項目所用技術棧,項目產出(web(PC/Mobile),app,小程序?)

這幾個方面,更加細節之處能夠參考面試被問項目經驗不用慌，按這個步驟回答絕對驚豔小程序

3.根據當前面試的進度作相應的複習

對於2+1的面試

一面:計算機基礎+前端相關
二面:項目+計算機基礎+前端相關
hr面:非技術的開放性問題

對於3+1的面試

一,二面:計算機基礎+前端相關
三面:項目+非技術開放性問題+一點點大前端相關
hr面:非技術的開放性問題

4.面試中自我介紹打草稿

大多數面試開場就是叫你介紹一下本身,能夠從如下幾個方面入手

我的基本信息:姓名,目前情況(大三,應屆),興趣愛好
前端的學習經歷
實習經歷
項目經歷能夠簡單介紹一下
1. 你收貨最大的項目
2. 最近作的一個項目
3. 本身最自豪的我的做品

5.面試中經常問的非技術問題準備

必定要本身下來打打草稿,臨場發揮不免不完美

展開查看

除開發外有什麼其餘興趣愛好嗎
畢業後直接工做仍是考研,爲何不考研
將來/近5年的職業規劃
你認爲本身的優點/長處是什麼
你認爲本身有什麼不足之處
爲何選擇前端
平時是如何學習的,最近在看什麼
如何平衡學校的課程學習與前端的自學與開發
你以爲本身最成功的一次分享或者成果是什麼
有投其它公司嗎?有結果了沒?爲何沒過,你知道緣由嗎
爲何選擇咱們

面試中

若是是初次面試不免會緊張,這個不可避免,隨着面試次數增長應增長本身的自信心,減小緊張時間
語速不能過快
面試官提問後,不要急於回答,能夠在大腦中思考幾秒中整理回答的思路,再脫口而出,出口成章,減小回答時卡頓
當遇到手撕代碼的時候,若是思考了一段時間,一點思路都沒有,就直接給面試官說,避免長時間耗着(面試時長是有限的通常技術面再1小時左右短的30-40分鐘)
手撕代碼,若是你有解決方案即使不是最優的也能夠寫上,而後面試官會問你有不有更優的解法(或者優化空間),你能夠藉此再思考一小會兒,沒有的話直接告知面試官(部分面試官在當你結束這題做答的時候,會告訴你一個解法的思路)
面試官問你有什麼問題的時候,不要說沒有問題,能夠問問部門的一些狀況,面試官職級,負責的產品,前端部門有開源項目沒,當前面試的什麼部門,將來工做Base在哪裏等等

面試後

及時整理面試內容,尤爲是知識盲點,必定要下來去查資料瞭解,填上這個點

面試中所遇問題整理(附部分自我回答)

以面試題類型分類整理,爲何不按公司分?在我看來同一個公司不一樣的人面難有太多相同的面試題,只有綜合多家的經驗才能百戰不殆

0.在瀏覽器中輸入URL到頁面渲染的整個過程(詳解,很是高頻的考點)

構建請求行

GET   /     HTTP/1.1
方法  請求路徑 請求的協議/版本
複製代碼

查找強緩存

檢查資源是否存在強緩存,存在的話直接進行資源解析

讀取DNS緩存

瀏覽器先檢查自身緩存中有沒有被解析過的這個域名對應的ip地址，若是有，解析結束
檢查操做系統緩存中有沒有對應的已解析過的結果(win中的hosts文件)
都沒有則進行下一步

DNS解析

請求本地域名服務器（LDNS）來解析這個域名,沒有則進行下一步
DNS 根服務器查詢

創建TCP鏈接

能夠在此簡述創建TCP連接的3次握手的過程

客戶端向服務端發送請求報文
服務端收到請求報文,贊成鏈接則向客戶端發送一個應答
客戶端收到服務端的應答,並告知服務端我準備好了

TCP 的一些特性

創建鏈接須要進行三次握手
斷開鏈接都須要四次握手
在傳輸數據的過程當中，經過各類算法保證數據的可靠性
相比 UDP 來講不那麼的高效。

判斷是不是Https請求

是:進行TLS握手

基本過程

客戶端向服務器端索要並驗證公鑰
雙方協商生成」對話密鑰」
雙方採用」對話密鑰」進行加密通訊

在 TLS 握手階段，兩端使用非對稱加密的方式來通訊，可是由於非對稱加密損耗的性能比對稱加密大，因此在正式傳輸數據時，兩端使用對稱加密的方式通訊

否:發起Http請求

發送HTTP請求

向服務端正式發送http請求

返回HTTP報文

服務器處理請求響應結果,並返回Http報文

判斷狀態碼是什麼?

200:繼續解析，若是 4xx 或 5xx 的話就會報錯，若是 3xx 進行重定向

若是是gzip格式的話會先解壓一下，而後經過文件的編碼格式去解碼文件

瀏覽器解析渲染頁面

針對下載完成後的HTML文件
- 詞法分析:標記化
- 語法分析:構建DOM樹
解析HTML(超文本標記語言)-->DOM(文檔對象模型)樹
- 遇到 script 標籤的話，會判斷是否存在 async 或者 defer屬性
  - async:並行進行下載,下載完成後並執行js
  - defer:先並行下載文件，而後等待 HTML 解析完成後順序執行。
  - 若是都沒有:就會阻塞住渲染流程直到 JS 下載並執行完畢
- 遇到link下載並解析CSS(層疊樣式表)-->CSSOM(CSS對象模型)樹
  - link標籤引用
  - style標籤中的樣式
  - 元素的內嵌style屬性
DOM樹 + CSSOM樹 --> Render Tree(渲染樹):CSSOM 樹和 DOM 樹構建完成後開始生成渲染樹
迴流(Layout):根據生成的渲染樹,迴流獲得節點的幾何信息(位置,尺寸)
- 計算可見的Dom節點在設備視口的位置和尺寸,這個計算階段就是迴流
- 爲了知道每一個可見節點在視口的確切大小和位置,瀏覽器從渲染樹的根節點進行遍歷
重繪(Painting):根據渲染樹與迴流獲得的節點幾何信息,獲得節點的絕對像素
- 通過生成的渲染樹和迴流階段,獲得了全部可見節點具體的幾何信息與樣式,而後將渲染樹的每一個節點轉換成屏幕上的實際像素,這個階段就叫重繪節點
將像素髮送給GPU繪製,合成圖層,而後展現在頁面上

斷開TCP鏈接

簡述斷開進行4次數握手過程

客戶端對服務端發送釋放鏈接的請求
服務端收到客戶端的請求後,告知應用層釋放鏈接
服務端將數據發送完畢後,再向客戶端發送釋放鏈接請求
客戶端收到釋放請求後,並向服務端發送確認釋放的應答,贊成釋放

1.算法與數據結構

查找一個字符串是否在另外一個字符串中存在,考查KMP
鏈表轉置,迭代/遞歸
合併兩個有序鏈表
合併兩棵BST
構建BST
二叉樹前/中/後序遍歷
TopK問題

二叉樹深度優先/DFS,廣度優先(層序遍歷)/BFS

// DFS藉助棧
function dfs(root){
    let stack = []
    if(!root){
        stack.push(root)
    }
    while(stack.length!==0){
        let node = stack.pop()
        console.log(node.value)
        if(node.right){
            stack.push(node.right)
        }
        if(node.left){
            stack.push(node.left)
        }
    }
}

// BFS藉助隊列
function bfs(root){
    let queue = []
    if(!root){
        queue.push(root)
    }
    while(queue.length!==0){
        let node = queue.shift()
        console.log(node.value)
        if(node.left){
            stack.push(node.left)
        }
        if(node.right){
            stack.push(node.right)
        }
    }
}
複製代碼

快速排序

function quickSort(array) {
    const _quickSort = (arr, left, right) => {
        if (left >= right) {
            return
        }
        let o = left
        let start = left
        let end = right
        while (left < right) {
            while (arr[right] >= arr[o] && right > left) {
                right--
            }
            while (arr[left] <= arr[o] && left < right) {
                left++
            }
            if (left !== right) {
                swap(arr, left, right)
            }
        }
        [arr[o],arr[left]] = [arr[left],arr[o]]
        _quickSort(arr, start, left - 1)
        _quickSort(arr, left + 1, end)
    }
    _quickSort(array, 0, array.length - 1)
}
複製代碼

2.計算機網絡

TCP與UDP的區別
簡述HTTP(把你知道的與HTTP相關的都吐露出來)
HTTP中經常使用首部字段有哪些?你瞭解哪些HTTP首部
HTTP狀態碼有哪些,各表明什麼
HTTP經常使用方法有哪些
簡述UDP
- 面向無鏈接:不須要在正式傳遞數據以前先鏈接起雙方
- 數據報文的搬運工:不保證有序且不丟失的傳遞到對端
- 沒有任何控制流量的算法,以恆定速率傳輸
- 適用於對網絡通信質量要求不高但實時性要求高的地方
  - 直播,語音,視屏等場景
簡述TCP
- 面向有鏈接:創建連接三次握手,斷開四次握手
- 在傳輸數據的過程當中，經過各類算法保證數據的可靠性
- 應用場景
  - HTTP
  - FTP
  - 網遊
爲何TCP要經歷三次握手,不是一次或者兩次
- 防止出現失效的鏈接請求報文段被服務端接收的狀況，從而產生錯誤
- 若是一次:客戶端發送鏈接請求後，沒有收到服務端的應答，是無法判斷鏈接是否成功的
- 若是兩次:客戶端發送鏈接請求後，等待服務器端的應答。如過客戶端的SYN過了一段時間沒有到達服務器端，客戶端連接超時，會從新發送一次鏈接，若是重發的此次服務器端收到了，且應答了客戶端，鏈接就創建了。可是創建後，第一個SYN也到達服務端了，這時服務端會認爲這是一個新鏈接，會再給客戶端發送一個ACK，這個ACK固然會被客戶端丟棄。可是此時服務器端已經爲這個鏈接分配資源了，並且服務器端會一直維持着這個資源，會形成浪費
HTTP與HTTPS的區別
- HTTP是明文傳輸的
- HTTP(80) 和 HTTPS(443) 使用不一樣的端口
- HTTP 頁面響應速度比 HTTPS 快
- HTTPS 是建構在 SSL/TLS 之上的 HTTP 協議,HTTPS 比 HTTP 要更耗費服務器資源
- HTTPS是在HTTP上創建SSL/TLS加密層，並對傳輸數據進行加密
HTTP2的特色
- 多路複用
- Header壓縮
- 服務端主動 Push資源
- HTTP/2 中引入了新的編碼機制，全部傳輸的數據都會被分割，並採用二進制格式編碼
HTTP2使用條件
- 支持Http2的服務端與客戶端
- 域名就必須是https(基於TLS/1.2或以上版本的加密鏈接)
簡述TLS協議工做過程

利用非對稱加密實現身份認證和密鑰協商，對稱加密算法採用協商的密鑰對數據加密，基於散列函數驗證信息的完整性

3.操做系統

線程與進程的概念/區別/如何工做
進程|線程之間如何通訊的
進程如何切換

4.JS

爲何typeof null == 'object'|null是對象嗎

null不是對象

雖然 typeof null 會輸出 object，可是這只是 JS 存在的一個悠久 Bug。在 JS 的最第一版本中使用的是 32 位系統，爲了性能考慮使用低位存儲變量的類型信息，000 開頭表明是對象，然而 null 表示爲全零，因此將它錯誤的判斷爲 object
什麼是函數柯里化

把一個接受多個參數的函數變換成接受一個單一參數（最初函數的第一個參數）的函數，而且返回(接受剩下的參數並且返回結果的)新函數的技術
對象類型和原始值類型的不一樣之處

對象
- 對象類型存儲的是(地址)指針:聲明一個對象會在內存中開闢一塊空間存放值
- 變量賦值的時候是賦值的地址:新變量修改會影響原變量
- 存在深淺拷貝問題
值類型
- 賦值的時候拷貝的一個新的值,不會影響原來的
typeof可否正確判斷類型

可以判斷
- number
- string
- boolean
- undefined
- symbol
- function
instanceof能正確判斷類型的緣由是什麼
- 經過原型鏈進行判斷
- 每一個對象都有一個原型,instanceof會沿着原型鏈進行判斷,直到最頂層原型爲止
- 能夠經過Symbol.hasInstance重定義instanceof的行爲,因此instanceof的結果不必定絕對正確
什麼是原型,原型鏈
- 每個js對象在建立的時候就會自動關聯另外一個對象，這個對象就是原型，每個對象都會從原型"繼承"屬性
- 相互關聯的原型組成的鏈狀結構就是原型鏈

this指向如何判斷,箭頭函數的 this 是什麼

對於普通函數來講,this->window
對於對象來講,誰調用函數誰就是this
new 的方式,this永遠被綁定在實例上
bind/call/apply對於這些函數來講，this 取決於第一個參數，若是第一個參數爲空，那麼就是 window
無論給函數 bind 幾回，function中的 this 永遠由第一次 bind 決定
箭頭函數自己是沒有this
箭頭函數中的this取決於包裹箭頭函數的第一個普通函數的this
箭頭函數使用bind,call,this無效

一個筆試題

let obj2 = {
    name: 'obj2'
}

const obj = {
    name: 'obj',
    say1() {
        console.log(this.name)
    },
    obj1: {
        name: 'obj1',
        say2() {
            console.log(this.name);
        }
    },
    say3() {
        const fn = () => {
            console.log(this.name);
        }
        fn()
    },
    say4() {
        const fn = function () {
            console.log(this.name);
        }
        fn()
    },
    say5() {
        const fn = () => {
            console.log(this.name);
        }
        fn.call(obj2)
    },
    say6() {
        const fn = function () {
            console.log(this.name);
        }
        fn.call(obj2)
    }
}

let a = obj.say1
let b = obj.obj1.say2
a() 
b()
obj.say1()
obj.obj1.say2()
obj.say3()
obj.say4()
obj.say5()
obj.say6()
複製代碼

結果

undefined
undefined
obj
obj1
obj
undefined
obj
obj2
複製代碼

== 和 === 有什麼區別

==
- 首先會判斷二者類型是否相同。相同的話就直接進行比較
- 若是對比雙方的類型不同的話，就會進行類型轉換
- null 與 undefined : true
- string 與 number : string->number
- 其中一方爲 boolean:boolean -> number
- object 與 string、number、symbol : object -> 原始值類型
===
- 判斷二者類型和值是否相同,都相同則true
什麼是閉包,其特色與缺點

1.簡單定義

閉包就是可以讀取其它函數內部變量的函數

2.使用場景
- 須要重用一個變量,又要保護變量不會被污染
- 將一個變量長期駐紮在內存當中可用於循環取值
- 私有變量計數器,外部沒法訪問,避免全局變量額污染
3.特色

參數與變量不會被垃圾回收機制回收

4.與做用域相比較
- 全局變量
  - 優:可重用
  - 缺:容易污染
- 局部變量
  - 優:不會被污染,僅函數內部可用
  - 缺:不可重用
5.缺點
- 比普通函數佔用更多的內存。
- 內存泄漏的影響，當內存泄漏到必定程度會影響你的項目運行變得卡頓等等問題
- 釋放方法:將引用內層函數對象的變量賦值爲null
淺拷貝/深拷貝是什麼,如何實現?

淺拷貝
- 只拷貝一層,深層次的對象只能拷貝對象的引用
淺拷貝實現
- Object.assign
- 展開運算符...
深拷貝
- 完整的拷貝一個深層次的對象
深拷貝實現

面試中通常不會考慮過多的邊界問題,通常考查遞歸實現一個可以拷貝對象與數組混合的對象
- JSON.parse(JSON.stringify(object))
  - 忽略undefined
  - 忽略symbol
  - 不能序列化函數
  - 不能解決循環引用的對象
- 遞歸實現deepClone
Promise 有幾種狀態,分別是什麼

三種狀態
- pending:等待
- resolved:完成
- rejectde:拒絕
一旦從等待狀態變成爲其餘狀態就永遠不能更改狀態
你瞭解async/await嗎,簡單描述一下
- 特色
  - 一個函數若是加上async 那麼其返回值是Promise,async 就是將函數返回值使用 Promise.resolve() 進行包裹
  - await只能配合async使用不能單獨使用
- 優勢
  - 相比於Promise來講優點在於可以寫出更加清晰的調用鏈
- 缺點
  - 由於await將異步代碼變成了同步代碼,若是多個異步之間沒有關係,會致使性能下降
- 原理
  - await 就是 generator 加上 Promise 的語法糖，且內部實現了自動執行 generator
事件的觸發過程是怎麼樣的

事件觸發有三個階段:
- 捕獲階段
- 目標階段
- 冒泡階段
什麼是事件代理

若是一個節點中的子節點是動態生成的，那麼子節點須要註冊事件的話應該註冊在父節點上
- 節省內存,不須要給每一個子節點註冊一次
- 不須要給子節點註銷事件
什麼是同源策略,什麼是跨域,如何解決

瀏覽器有同源策略,若是:協議,端口,域名有一個不一樣就是跨域

解決方法
- jsonp
- 服務端開啓CROS支持
- Nginx反向代理
你知道什麼是預檢請求嗎

使用後端開啓CROS解決跨域的方式，會把請求分紅兩種類型:
- 簡單請求
- 複雜請求
對於複雜請求，首先會發起一個預檢請求,請求方法爲options,經過該請求來判斷服務器是否容許跨域
你知道什麼是event loop,簡單描述一下

執行 JS 代碼的時候其實就是往執行棧中放入函數,當遇到異步的代碼時，會被掛起並在須要執行的時候加入到 Task（有多種 Task）隊列中,一旦執行棧爲空，Event Loop 就會從 Task 隊列中拿出須要執行的代碼並放入執行棧中執行

Event Loop執行順序
- 同步代碼
- 執行完全部同步代碼後，執行棧爲空，查詢是否有異步代碼須要執行
- 執行微任務,若是在執行microtask的過程當中，又產生了microtask，那麼會加入到隊列的末尾，也會在這個週期被調用執行
- 執行完全部微任務後，若有必要會渲染頁面:
  - 判斷document是否須要更新:瀏覽器是 60Hz 的刷新率，每 16.6ms 纔會更新一次。
  - 判斷是否有 resize 或者 scroll 事件，有的話會去觸發事件:因此 resize 和 scroll 事件也是至少 16ms 纔會觸發一次，而且自帶節流功能。
  - 判斷是否觸發了 media query
  - 更新動畫而且發送事件
  - 判斷是否有全屏操做事件
  - 執行 requestAnimationFrame 回調
  - 更新界面
- 而後開始下一輪 Event Loop，執行宏任務中的異步代碼，也就是 setTimeout 中的回調函數
總結
- 宏隊列macrotask一次只從隊列中取一個任務執行，執行完後就去執行微任務隊列中的任務
- 微任務隊列中全部的任務都會被依次取出來執行，直到microtask queue爲空
- 只要執行UI rendering，它的節點是在執行完全部的microtask以後，下一個macrotask以前，緊跟着執行UI render
微任務
- promise
- MutationObserver
- process.nextTick（node）
宏任務
- script
- xhr
- setTimeout
- setInterval
- setImmediate(node)
- requestAnimationFrame(瀏覽器)
- I/O
- UI rendering(瀏覽器)
var、let 及 const 區別

全局做用域下:
- 使用 var 聲明的變量會被掛載到window上
- 使用 let 和 const 聲明的變量，不會被掛載到 window 上
- 使用 var 聲明的變量會被提高到做用域的頂部,函數也會被提高，而且優先於變量提高
let 與 const 不能在聲明前就使用,做用基本一致,後者聲明的變量不能再次賦值
ES6有哪些新特性,你瞭解到的

5.CSS

什麼是迴流與重繪

迴流

計算可見的Dom節點在設備視口的位置和尺寸,這個計算階段就是迴流

爲了知道每一個可見節點在視口的確切大小和位置,瀏覽器從渲染樹的根節點進行遍歷

重繪

通過生成的渲染樹和迴流階段,獲得了全部可見節點具體的幾何信息與樣式,而後將渲染樹的每一個節點轉換成屏幕上的實際像素,這個階段就叫重繪節點
CSS層級關係

權重
- tag(標籤選擇器):1
- class(類選擇器):10
- id(id選擇器):100
- tag行內樣式:1000
- !important最大
權重同樣的狀況下,後聲明的覆蓋前面的
你瞭解BFC嗎,如何觸發
BFC規範(塊級格式化上下文：block formatting context)
- 規定了內部的Block Box如何佈局:內部的Box會在垂直方向上一個接一個放置
- Box垂直方向的距離由margin決定
- 每一個元素的margin box 的左邊，與包含塊border box的左邊相接觸
- BFC的區域不會與float box重疊
- 屬於同一個BFC的兩個相鄰Box的margin會發生重疊
- 計算BFC的高度時，浮動元素也會參與計算
- 隔離的獨立容器，容器裏面的子元素不會影響到外面的元素
如何觸發
- float值不爲none
- overflow不爲visible
- display的值爲inline-block、table-cell、table-caption
- position的值爲absolute或fixed
彈性佈局flex
柵欄佈局grid
display屬性值有哪些,分別是什麼做用
position屬性值有哪些,分別有什麼做用
display:none,opactiy:0,visibility:hidden區別

6.VUE

數據雙向綁定,數據響應式實現的原理
生命週期
組件之間通訊方法(父子,兄弟,祖孫,任意)
v-if,v-show異同
路由原理,爲何地址發生改變,瀏覽器不會刷新
權限管理

7.瀏覽器相關問題

緩存機制
頁面渲染原理(過程)
本地存儲
瀏覽器安全相關問題(SQL注入,XSS,CSRF,DNS劫持,點擊劫持)

8.性能優化

Webpack代碼打包優化
網絡層面優化
首屏加載優化

9.小程序

小程序的特色
你對小程序的發展見解
小程序的原理
小程序與傳統移動端Web的區別

因篇幅有限,內容太多,部分未回答的內容與6-9部分的題目回答,都整理在了個人→博客←中,歡迎你們戳連接查看

下面分享(水貨)一下我的是如何跳進前端這個"坑"

在校經歷

專業是"計算機科學與技術",學院的培養方向爲嵌入式開發工程師,在上大學前,想的學計算機學作遊戲,大一開學後的新生研討課就直接來了當頭一棒,專業只教嵌入式相關知識

我想嵌入式就嵌入式嘛,哪曉得培養計劃也太落後了,全是理論課,實驗課也是給個試驗箱,比着實驗報告一步步作,啥東西都學不到.跟我想象中的(智能電子設備開發)差太遠了,而後就自學U3D去了,學了幾個月據說獨立遊戲開發沒有"錢途",就剎車了,恰好學校有個軟件開發的比賽,跟同窗組了個隊就參加了,三我的(1划水,1JAVA,我就只好搞前端了),這一搞就覆水難收了,今後踏上前端不歸路

最開始學的東西很是雜,周圍也沒有前端大佬,本身摸索着學習,走了很多彎路,接了很多商業外包和學校的比賽項目,致使後端技術也蹭蹭蹭的學了很多,但尚未一個深刻的點,大二的時候就在考慮到底作後端仍是前端亦或是"僞全棧(會寫頁面+CRUD)",後來思考了一段時間選擇了前端,以爲前端更容易出成果,更容易實現本身的想法,而後開始系統性的學習前端

在大三的時候開始準備複習春招找工做,看了看牛客上的面經,發現好多技術名詞都不知道,不少點本身都還不會,被作項目的能力迷惑了,心想涼了,本身開始慌了,而後把手裏的項目加急趕完,而後杜絕一切外包和學校的項目,開始緊張的複習

比較喜歡的一句雞湯