前言

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

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

不包括：

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

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

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

其他

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

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

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

必備：

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

可選：

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

本文內(nèi)的鏈接

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

吐槽：

用飛書(shū)的思維筆記做的（變相打廣告？），說(shuō)下體驗(yàn)

優(yōu)點(diǎn)：

• ui不錯(cuò)
• 可以通過(guò)@鏈接到其他文檔

缺點(diǎn)：

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

鏈接：

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

前端知識(shí)體系

瀏覽器

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

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

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

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

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

前端基礎(chǔ)

CSS

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

CSS層疊上下文^[17]

js

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

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

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

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

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

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

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

HTTP/3 原理實(shí)戰(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

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

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

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

webpack

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

Webpack HMR 原理解析^[26]

性能優(yōu)化

• 常見(jiàn)的性能優(yōu)化方案
• 一些性能指標(biāo)

performance各階段：

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

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

Performance \- Web API^[29]

前端監(jiān)控

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

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

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

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

javascript-algorithms^[33]

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

書(shū)：

• 算法導(dǎo)論
• 劍指offer
• 小灰的漫畫(huà)算法

結(jié)束

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