前端开发是一个非常特殊的行业,它的历史实际上不是很长,但是知识之繁杂,技术迭代速度之快是其他技术所不能比拟的。
winter
在他的《重学前端》课程中提到:
到现在为止,前端工程师已经成为研发体系中的重要岗位之一。可是,与此相对的是,我发现极少或者几乎没有大学的计算机专业愿意开设前端课程,更没有系统性的教学方案出现。大部分前端工程师的知识,其实都是来自于实践和工作中零散的学习。
这样是一个非常真实的现状,实际上很多前端开发者都是自学甚至转行过来的,前端入门简单,学习了几个 API
以后上手做项目也很简单,但是这往往成为了限制自身发展的瓶颈。
只是停留在会用阶段是远远不够的,我们还需要不断探索和深入。现在市面上并不缺少学习教程,技术文章,如果盲目的学习你会发现看过以后的知识留存率会很低,而且发现没有了解到的知识越来越多,这会让人产生焦虑。
实际上,除了坚持学习的强大的自驱力,你还需要一个很简单的学习方法。那就是:建立自己的知识体系。它能帮助你更系统性的学习,同时你也时刻能知道自己哪些地方是不足的。
我会把我工作和学习中接触到的知识全部归纳到我的知识体系中,其中不仅仅包括我已经学过的,还有很多我没有来得及学习的。
这不仅仅是我的知识体系,更是我时刻提醒自己的自检清单。
下面我会把我的自检清单分享给大家,你可以按照清单上的知识检测自己还有哪些不足和提升,我也建议大家建自己的知识体系,这样工作或者学习甚至面试时,你能快速定位到知识清单中的点,如果你有哪些我没归纳到的点,欢迎在评论区告诉我。
前端工程师吃饭的家伙,深度、广度一样都不能差。
JavaScript
规定了几种语言类型
JavaScript
对象的底层数据结构是什么
Symbol
类型在实际开发中的应用、可手动实现一个简单的 Symbol
JavaScript
中的变量在内存中的具体存储形式
null
和 undefined
的区别
JavaScript
数据类型的方式,以及他们的优缺点,如何准确的判断数组类型
JavaScript
可以存储的最大数字、最大安全数字, JavaScript
处理大数字的方法、避免精度丢失的方法
JavaScript
中的原型规则
instanceof
的底层实现原理,手动实现一个 instanceof
Node
)中应用原型继承的案例
new
一个对象的详细过程,手动实现一个 new
操作符
es6class
构造以及继承的底层实现原理
JavaScript
的作用域和作用域链
JavaScript
的执行上下文栈,可以应用堆栈信息快速定位问题
this
的原理以及几种不同使用场景的取值
try
里面放 return
, finally
还会执行,理解其内部机制
JavaScript
如何实现异步编程,可以详细描述 EventLoop
机制
Promise
实现串行
Node
与浏览器 EventLoop
的差异
ECMAScript
和 JavaScript
的关系
es5
、 es6
提供的语法规范,
JavaScript
提供的全局对象(例如 Date
、 Math
)、全局函数(例如 decodeURI
、 isNaN
)、全局属性(例如 Infinity
、 undefined
)
map
、 reduce
、 filter
等高阶函数解决问题
setInterval
需要注意的点,使用 settimeout
实现 setInterval
JavaScript
提供的正则表达式 API
、可以使用正则表达式(邮箱校验、 URL
解析、去重等)解决常见问题
JavaScript
异常处理的方式,统一的异常处理方案
HTML
,从分类和语义的角度使用标签
head
、 title
、 meta
)的使用目的和配置方法
HTML5
离线缓存原理
CanvasAPI
、 SVG
等绘制高性能的动画
CSS
盒模型,在不同浏览器的差异
CSS
所有选择器及其优先级、使用场景,哪些可以继承,如何运用 at
规则
CSS
伪类和伪元素有哪些,它们的区别和实际应用
HTML
文档流的排版规则, CSS
几种定位的规则、定位参照物、对文档流的影响,如何选择最好的定位方式,雪碧图实现原理
6
种以上并对比它们的优缺点
BFC
实现原理,可以解决的问题,如何创建 BFC
CSS
函数复用代码,实现特殊效果
PostCSS
、 Sass
、 Less
的异同,以及使用配置,至少掌握一种
CSS
模块化方案、如何配置按需加载、如何防止 CSS
阻塞渲染
CSS
实现常见动画,如渐变、移动、旋转、缩放等等
CSS
浏览器兼容性写法,了解不同 API
在不同浏览器下的兼容性情况
CSS
绘制几何图形(圆形、三角形、扇形、菱形等)
CSS
实现曲线运动(贝塞尔曲线)
关于编译原理,不需要理解非常深入,但是最基本的原理和概念一定要懂,这对于学习一门编程语言非常重要
JavaScript
代码解析成抽象语法树( AST
)
base64
的编码原理
JavaScript
中如何表示和转换
TCP/IP
网络协议族的构成,每层协议在应用程序中发挥的作用
TCP
有哪些手段保证可靠交付
DNS
的作用、 DNS
解析的详细过程, DNS
优化原理
CDN
的作用和原理
HTTP
请求报文和响应报文的具体组成,能理解常见请求头的含义,有几种请求方式,区别是什么
HTTP
所有状态码的具体含义,看到异常状态码能快速定位问题
HTTP1.1
、 HTTP2.0
带来的改变
HTTPS
的加密原理,如何开启 HTTPS
,如何劫持 HTTPS
请求
WebSocket
协议的底层原理、与 HTTP
的区别
据我了解的大部分前端对这部分知识有些欠缺,甚至抵触,但是,如果突破更高的天花板,这部分知识是必不可少的,而且我亲身经历——非常有用!
sleep
函数
call、apply、bind
Promise/A+
规范的 Promise
、手动实现 asyncawait
EventEmitter
实现事件发布、订阅
JSON.stringify
、 JSON.parse
懒加载
、 下拉刷新
、 上拉加载
、 预加载
等效果
数组
、 字符串
的存储原理,并熟练应用他们解决问题
二叉树
、 栈
、 队列
、 哈希表
的基本结构和特点,并可以应用它解决问题
图
、 堆
的基本结构和使用场景
回溯算法
、 贪心算法
、 分治算法
、 动态规划
等解决复杂问题
我们需要理清语言和环境的关系:
ECMAScript
描述了JavaScript
语言的语法和基本对象规范 浏览器作为JavaScript
的一种运行环境,为它提供了:文档对象模型(DOM
),描述处理网页内容的方法和接口、浏览器对象模型(BOM
),描述与浏览器进行交互的方法和接口 Node也是JavaScript
的一种运行环境,为它提供了操作I/O
、网络等API
W3C
标准的 DOM
操作 API
、浏览器差异、兼容性
BOM
)提供的所有全局 API
、浏览器差异、兼容性
DOM
操作、海量数据的性能优化(合并操作、 Diff
、 requestAnimationFrame
等)
DOM
事件流的具体实现机制、不同浏览器的差异、事件代理
ajax
、 fetch
、可以熟练使用第三方库
JavaScript
引擎以及它们的异同点、如何在代码中进行区分
URL
到页面展现的详细过程
HTML
代码的原理,以及构建 DOM
树的流程
CSS
规则,并将其应用到 DOM
树上
DOM
树进行绘制
Node
在应用程序中的作用,可以使用 Node
搭建前端运行环境、使用 Node
操作文件、操作数据库等等
Node
开发框架,如 Express
, Express
和 Koa
的区别
Node
提供的 API
如 Path
、 Http
、 ChildProcess
等并理解其实现原理
Node
的底层运行原理、和浏览器的异同
Node
事件驱动、非阻塞机制的实现原理
轮子层出不穷,从原理上理解才是正道
泛型
、 接口
等面向对象的相关概念, TypeScript
对面向对象理念的实现
TypeScript
的好处,掌握 TypeScript
基础语法
TypeScript
的规则检测原理
React
、 Vue
等框架中使用 TypeScript
进行开发
React
和 vue
选型和优缺点、核心架构的区别
React
中 setState
的执行机制,如何有效的管理状态
React
的事件底层实现机制
React
的虚拟 DOM
和 Diff
算法的内部实现
React
的 Fiber
工作原理,解决了什么问题
ReactRouter
和 VueRouter
的底层实现原理、动态加载实现原理
ReactAPI
、生命周期等,可应用 HOC
、 render props
、 Hooks
等高阶用法解决问题
React
的特性和原理,可以手动实现一个简单的 React
Vue
的 API
、生命周期、钩子函数
MVVM
框架设计理念
Vue
双向绑定实现原理、 Diff
算法的内部实现
Vue
的事件机制
template
转换成真实 DOM
的实现机制
SPA
)的原理和优缺点,掌握一种快速开发 SPA
的方案
Viewport
、 em
、 rem
的原理和用法,分辨率、 px
、 ppi
、 dpi
、 dp
的区别和实际应用
JavaScript
移动客户端开发技术,如 ReactNative
:可以搭建 ReactNative
开发环境,熟练进行开发,可理解 ReactNative
的运作原理,不同端适配
JavaScript
PC
客户端开发技术,如 Electron
:可搭建 Electron
开发环境,熟练进行开发,可理解 Electron
的运作原理
React
和 Vue
传统的跨组件通信方案,对比采用数据流管理框架的异同
Redux
管理数据流,并理解其实现原理,中间件实现原理
Mobx
管理数据流,并理解其实现原理,相比 Redux
有什么优势
Vuex
管理数据流,并理解其实现原理
UI
组件框架,如 antd design
,理解其设计理念、底层实现
Echart
,理解其设计理念、底层实现,可以自己实现图表
GIS
开发框架,如百度地图 API
Three.js
、 D3
lodash
、 underscore
、 moment
等,理解使用的工具类或工具函数的具体实现原理
charls
Android
、 IOS
模拟器进行调试,并掌握一种真机调试方案
Vue
、 React
等框架调试工具的使用
前端工程化:以工程化方法和工具提高开发生产效率、降低维护难度
npm
、 yarn
依赖包管理的原理,两者的区别
npm
运行自定义脚本
Babel
、 ESLint
、 webpack
等工具在项目中承担的作用
ESLint
规则检测原理,常用的 ESLint
配置
Babel
的核心原理,可以自己编写一个 Babel
插件
Polyfill
Webpack
的编译原理、构建流程、热更新原理, chunk
、 bundle
和 module
的区别和应用
loaders
和 plugins
解决问题,可以自己编写 loaders
和 plugins
nginx
服务器、
nginx
内置变量,掌握常用的匹配规则写法
nginx
实现请求过滤、配置 gzip
、负载均衡等,并能解释其内部原理
mock
工具的使用,如 yapi
TDD
与 BDD
模式,至少会使用一种前端单元测试框架
Git
的核心原理、工作流程、和 SVN
的区别
Git
命令、 git rebase
、 git stash
等进阶命令
线上分支回滚
、 线上分支错误合并
等复杂问题
CI/CD
技术的意义,至少熟练掌握一种 CI/CD
工具的使用,如 Jenkins
Web
应用、移动客户端应用、 PC
客户端应用、小程序、 H5
等等)
Web
、 App
性能优化方案
SEO
排名规则、 SEO
优化方案、前后端分离的 SEO
SSR
实现方案、优缺点、及其性能优化
Webpack
的性能优化方案
Canvas
性能优化方案
React
、 Vue
等框架使用性能优化方案
XSS
攻击的原理、分类、具体案例,前端如何防御
CSRF
攻击的原理、具体案例,前端如何防御
HTTP
劫持、页面劫持的原理、防御措施
vczh
大神在知乎问题【如何能以后达到温赵轮三位大神的水平?】下的回答:
这十几年我一共做了三件事:
上面几点可能有点难,第一点我就做不到,但是做到下面绩点还是比较容易的。 关于写博客说明下,能给别人讲明白的知识会比自己学习掌握的要深刻许多
自己
的代码,不要盲目的扎进公司业
这部分可能比上面九条加起来重要!
CEO
、 CTO
、 COO
、 CFO
、 PM
、 QA
、 UI
、 FE
、 DEV
、 DBA
、 OPS
等
B2B
、 B2C
、 C2C
、 O2O
等
"PPT"
能力
有了知识体系,在阅读一篇技术文章的时候就很容易把它归类,我一直以来就是这样做的。
事实证明,在阅读文章或书籍时,有目的和归类的阅读比"随便看看"后的只是留存率要高很多。
每阅读到一篇好的文章或者书籍,我都会收藏并归类到我的知识体系中。
下面是一些我觉得还不错的文章、博客或者书籍教程等等,分享给大家,资源不多,但都是精品。
学习一门知识,最好先阅读官方文档,把所有的 API
大概浏览一遍,再继续看大佬们总结的进阶知识,什么东西是搬运过来的,什么是干货,一目了然。
JavaScript
高级程序设计(必看):https://book.douban.com/subject/10546125/
JavaScript
:https://book.douban.com/subject/5362856/
JavaScript
教程:https://zh.javascript.info/
ECMAScript6
教程:http://es6.ruanyifeng.com/
ECMAScript6
标准:https://www.ecma-international.org/ecma-262/6.0/
HTML meta
标签总结与属性使用介绍:https://segmentfault.com/a/1190000004279791
CSS
编码指导:https://github.com/chadluo/CSS-Guidelines/blob/master/README.md
HTTP
:https://book.douban.com/subject/25863515/
JavaScript
设计模式与开发实践:https://book.douban.com/subject/26382780/
LeetCode
题目的思路:https://github.com/MisterBooo/LeetCodeAnimation
JavaScript
数据结构和算法:https://github.com/ConardLi/awesome-coding-js
30-seconds-of-code
(里面有很多 js
代码非常巧妙,我正在将它翻译成中文):https://github.com/ConardLi/30-seconds-of-code-Zh-CN
NodeJS
:https://github.com/nqdeng/7-days-nodejs
Node.js
模块加载与运行原理:https://efe.baidu.com/blog/nodejs-module-analyze/
TypeScriptHandbook
:https://zhongsp.gitbooks.io/typescript-handbook/content/
React.js
小书:http://huziketang.mangojuice.top/books/react/
React
深入系列:https://juejin.im/post/5cad39b3f265da03502b1c0a
WebpackReact
小书:https://fakefish.github.io/react-webpack-cookbook/index.html
Vue.js
技术揭秘:https://github.com/ustbhuangyi/vue-analysis
Vuex
-在 Vue
中管理状态:https://sabe.io/tutorials/getting-started-with-vuex
Mobx
还是 Redux
?:https://juejin.im/post/5a7fd72c5188257a766324ae
Underscore
源码分析:https://yoyoyohamapi.gitbooks.io/undersercore-analysis/content/
Web
前端知识库:https://github.com/AlloyTeam/Mars
babel
:https://zhuanlan.zhihu.com/p/43249121
Webpack
傻瓜式指南:https://zhuanlan.zhihu.com/p/20367175
Webpack
原理:https://segmentfault.com/a/1190000015088834?utm_source=tag-newest
git
教程:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000
Git
:https://marklodato.github.io/visual-git-guide/index-zh-cn.html
Nginx
知识:https://juejin.im/post/5c85a64d6fb9a04a0e2e038c
Web
安全攻防解析:https://github.com/ljianshu/Blog/issues/56
另外推荐我一直在关注的几位大佬的个人博客:
其实在这个信息发达的时代最不缺的就是资源,如何从众多的资源中获取到真正精华的部分,是非常重要的,资源在于精不在于多,强烈建议在保证深度的情况下再保证广度。