转自:code秘密花园
前端开发是一个非常特殊的行业,它的历史实际上不是很长,但是知识之繁杂,技术迭代速度之快,是其他技术所不能比拟的。
winter在他的《重学前端》课程中提到:
“到现在为止,前端工程师已经成为研发体系中的重要岗位之一。可是,与此相对的是,我发现极少或者几乎没有大学的计算机专业愿意开设前端课程,更没有系统性的教学方案出现。大部分前端工程师的知识,其实都是来自于实践和工作中零散的学习”。
这样是一个非常真实的现状,实际上很多前端开发者都是自学甚至转行过来的,前端入门简单,学习了几个 API以后上手做项目也很简单,但是这往往成为了限制自身发展的瓶颈。只是停留在会用阶段是远远不够的,我们还需要不断探索和深入。现在市面上并不缺少学习教程,技术文章,如果盲目的学习你会发现看过以后的知识留存率会很低,而且发现没有了解到的知识越来越多,这会让人产生焦虑。
实际上,除了坚持学习的强大的自驱力,你还需要一个很简单的学习方法。那就是:建立自己的知识体系。它能帮助你更系统性的学习,同时你也时刻能知道自己哪些地方是不足的。
我会把我工作和学习中接触到的知识全部归纳到我的知识体系中,其中不仅仅包括我已经学过的,还有很多我没有来得及学习的。
这不仅仅是我的知识体系,更是我时刻提醒自己的自检清单。
下面我会把我的自检清单分享给大家,你可以按照清单上的知识检测自己还有哪些不足和提升,我也建议大家构建自己的知识体系,这样工作或者学习甚至面试时,你能快速定位到知识清单中的点。

知识体系
前端工程师吃饭的家伙,深度、广度一样都不能差。
JavaScript规定了几种语言类型JavaScript对象的底层数据结构是什么Symbol类型在实际开发中的应用、可手动实现一个简单的 Symbol JavaScript中的变量在内存中的具体存储形式null和 undefined的区别JavaScript数据类型的方式,以及它们的优缺点,如何准确的判断数组类型JavaScript可以存储的最大数字、最大安全数字, JavaScript处理大数字的方法、避免精度丢失的方法JavaScript中的原型规则instanceof的底层实现原理,手动实现一个 instanceof Node)中应用原型继承的案例new一个对象的详细过程,手动实现一个 new操作符es6 class构造以及继承的底层实现原理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等,理解使用的工具类或工具函数的具体实现原理charles 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: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/ TypeScriptHandbookhttps://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 另外推荐我一直在关注的几位大佬的个人博客:
其实在这个信息发达的时代最不缺的就是资源,如何从众多的资源中获取到真正精华的部分,是非常重要的,资源在于精不在于多,强烈建议在保证深度的情况下再保证广度。
希望你阅读本篇文章后可以达到以下几点: