前言

雖然馬上就要金九銀十了，面試的人應(yīng)該不少，雖然我也有在面，寫文的目的主要是梳理下知識，能對復習有點幫助就行，本文主要針對前端知識體系相關(guān)，涉及的內(nèi)容有：

• 瀏覽器
• 計算機網(wǎng)絡(luò)
• 前端基礎(chǔ)（html、css、js）
• node
• webpack
• 數(shù)據(jù)結(jié)構(gòu)和算法
• web安全
• 前端工程化（編譯原理的應(yīng)用）
• 渲染優(yōu)化
• 性能監(jiān)控

不包括：

• 跨端（小程序、混合應(yīng)用）
• 框架
• typescript
• 移動端

不過前端是真的內(nèi)卷啊，內(nèi)容是真多，并丟了點面試題作為參考，以上基本涵蓋前端整個知識體系。

其余部分的話，就不算很熟了，所以有人要整第二部分嗎？

其他

看了下評論，有人對自己的能力感覺受限，這也正常，由于前端體系本身內(nèi)容比較多，該文也只是整理了下，沒必要全部都關(guān)注，只是目前的一個趨勢而已。

目前的前端領(lǐng)域方向：

• 可視化
• 跨端
• 小程序
• 工程化
• 游戲
• DevOps
• webAssembly（rust、c、cpp）通過其他語言對前端進行擴展，實現(xiàn)前端無法做到的方案
• 音視頻（FFmpeg）
• 全棧

必備：

• html、css、js
• typescirpt（2021了，現(xiàn)在ts也差不多算必備技能了）
• 框架
• 瀏覽器相關(guān)知識
• 監(jiān)控、埋點
• 團隊協(xié)作

可選：

• 計算機網(wǎng)絡(luò)
• 編譯原理
• 數(shù)據(jù)結(jié)構(gòu)和算法
• 單元測試

本文內(nèi)的鏈接

應(yīng)評論要求，本文所有內(nèi)容都可以在這上面找到，并且只會增加，基本不會減少，鏈接可能有的并沒什么內(nèi)容，如數(shù)據(jù)結(jié)構(gòu)和算法這個，后續(xù)應(yīng)該會慢慢補充吧，只限于個人的知識體系范圍，至于其他告辭。

吐槽：

用飛書的思維筆記做的（變相打廣告？），說下體驗

優(yōu)點：

• ui不錯
• 可以通過@鏈接到其他文檔

缺點：

• 粘貼的鏈接沒辦法修改title，默認自動識別
• 沒辦法換行
• 不支持圖片
• 采用2邊結(jié)構(gòu)的時候，沒辦法拖拽
• 分享不支持文件夾（讓我添加協(xié)作者？？？？？），文件多了，分享就很麻煩。
• 預覽感覺會糊？編輯的時候明顯要比預覽更清晰

鏈接：

• html^[1] 暫無內(nèi)容
• css^[2]
• js^[3]
• ts^[4] 暫無內(nèi)容
• node^[5]
• Vue^[6] 暫無內(nèi)容
• React^[7]
• webpack^[8]
• 前端工程化^[9]
• 瀏覽器^[10]
• 計算機網(wǎng)絡(luò)^[11]
• 數(shù)據(jù)結(jié)構(gòu)和算法^[12]
• 性能優(yōu)化^[13]

前端知識體系

瀏覽器

• 從輸入網(wǎng)址到看到網(wǎng)頁發(fā)生了什么
• dom 解析規(guī)則
• css、js是否會阻塞渲染
• xss、csrf
• 重繪和重排的區(qū)別
• 瀏覽器緩存是怎樣的
• 跨域

作為個前端，畢竟每天都和瀏覽器打交道，不懂瀏覽器的前端不算好前端。

瀏覽器渲染詳細過程：重繪、重排和 composite 只是冰山一角^[14]

瀏覽器工作原理與實踐\_瀏覽器\_V8原理-極客時間^[15]

圖解 Google V8\_虛擬機\_JavaScript\_Node.js\_前端\_Google-極客時間 \(geekbang.org\)^[16]

前端基礎(chǔ)

CSS

• css 盒模型
• bfc
• 居中
• 偽類和偽元素
• css選擇器優(yōu)先級

CSS層疊上下文^[17]

js

• 事件循環(huán)
• 原型鏈
• this
• 作用域
• 閉包
• 柯里化
• 事件流
• 數(shù)據(jù)類型
• promise、generator、async await
• 0.1 + 0.2 為什么不等于0.3 (IEEE754)
• 浮點精度

(圖靈社區(qū) \(ituring.com.cn\)^[18])

事件循環(huán)^[19]

一文搞懂V8引擎的垃圾回收 \(juejin.cn\)^[20]

JavaScript 深入之浮點數(shù)精度 \(juejin.cn\)^[21]

計算機網(wǎng)絡(luò)

• https 為什么安全
• http2的特點
• tcp阻塞
• http狀態(tài)碼
• http3
• http和https握手

HTTP/3 原理實戰(zhàn) \- 知乎 \(zhihu.com\)^[22]

前端工程化

• amd、cmd、esmodule、commonjs區(qū)別
• import from 和require、import()區(qū)別
• babel
• vite
• eslint
• postcss
• ast
• 微前端

git commit 規(guī)范指南^[23]

node

• 模塊查找機制
• stream 流
• 非阻塞異步io
• 中間件

深入淺出node中間件原理^[24]

Node.js理論實踐之《異步非阻塞IO與事件循環(huán)》^[25]

webpack

• loader和plugin的區(qū)別
• tapable
• webpack hmr原理
• webpack 編譯流程
• webpack 優(yōu)化
• tree shaking

Webpack HMR 原理解析^[26]

性能優(yōu)化

• 常見的性能優(yōu)化方案
• 一些性能指標

performance各階段：

前端性能優(yōu)化之雅虎35條軍規(guī) \(juejin.cn\)^[27]

網(wǎng)站性能監(jiān)測^[28]

Performance \- Web API^[29]

前端監(jiān)控

一篇講透自研的前端錯誤監(jiān)控^[30]

數(shù)據(jù)結(jié)構(gòu)和算法

宮水三葉的刷題日記^[31]

算法面試通關(guān)40講\_算法面試\_LeetCode刷題^[32]

javascript-algorithms^[33]

VisuAlgo \- 數(shù)據(jù)結(jié)構(gòu)和算法動態(tài)可視化^[34]

書：

• 算法導論
• 劍指offer
• 小灰的漫畫算法

結(jié)束

整理這個，也算是自己的復習，也算總結(jié)，馬上9月了，dalao們加油。