一份不想成为劝退清单的劝退清单
一、JavaScript基础
变量和类型
- 1.
JavaScript
规定了几种语言类型 - 2.
JavaScript对象
的底层数据结构是什么 - 3.
Symbol
类型在实际开发中的应用、可手动实现一个简单的Symbol - 4.JavaScript中的
变量
在内存中的具体存储形式 - 5.基本类型对应的
内置对象
,以及他们之间的装箱拆箱操作 - 6.理解
值类型
和引用类型
- 7.
null
和undefined
的区别 - 8.至少可以说出三种
判断JavaScript数据类型的方式
,以及他们的优缺点,如何准确的判断数组类型 - 9.可能发生
隐式类型转换
的场景以及转换原则
,应如何避免或巧妙应用 - 10.出现
小数精度丢失
的原因,JavaScript可以存储的最大数字、最大安全数字,JavaScript处理大数字的方法、避免精度丢失的方法
原型和原型链
- 1.理解
原型设计模式
以及JavaScript中的原型规则
- 2.
instanceof
的底层实现原理,手动实现一个instanceof - 3.实现
继承
的几种方式以及他们的优缺点 - 4.至少说出一种开源项目(如Node)中
应用原型继承
的案例 - 5.可以描述
new一个对象
的详细过程,手动实现一个new操作符 - 6.理解es6
class构造
以及继承
的底层实现原理.
作用域和闭包
- 1.理解
词法作用域
和动态作用域
- 2.理解JavaScript的
作用域
和作用域链
- 3.理解JavaScript的
执行上下文栈
,可以应用堆栈信息快速定位问题 - 4.
this的原理
以及几种不同使用场景的取值 - 5.
闭包
的实现原理和作用,可以列举几个开发中闭包的实际应用 - 6.理解
堆栈溢出
和内存泄漏
的原理,如何防止 - 7.如何处理
循环的异步
操作 - 8.理解
模块化
解决的实际问题,可列举几个模块化方案并理解其中原理
执行机制
- 1.为何
try
里面放return
,finally
还会执行,理解其内部机制 - 2.JavaScript如何实现
异步编程
,可以详细描述EventLoop机制
- 3.
宏任务
和微任务
分别有哪些 - 4.可以快速分析一个复杂的
异步嵌套
逻辑,并掌握分析方法 - 5.使用Promise实现
串行
- 6.Node与浏览器EventLoop的差异
- 7.如何在保证页面运行流畅的情况下处理
海量数据
语法和API
- 1.理解
ECMAScript
和JavaScript
的关系 - 2.熟练运用
es5、es6
提供的语法规范, - 3.熟练掌握JavaScript提供的
全局对象
(例如Date、Math)、全局函数
(例如decodeURI、isNaN)、全局属性
(例如Infinity、undefined) - 4.熟练应用map、reduce、filter 等
高阶函数
解决问题 - 5.
setInterval
需要注意的点,使用settimeout
实现setInterval - 6.JavaScript提供的
正则表达式API
、可以使用正则表达式(邮箱校验、URL解析、去重等)解决常见问题 - 7.JavaScript异常处理的方式,统一的
异常处理
方案
二、HTML和CSS
HTML
- 1.从规范的角度理解
HTML
,从分类和语义的角度使用标签 - 2.
常用页面标签
的默认样式、自带属性、不同浏览器的差异、处理浏览器兼容问题的方式 - 3.
元信息类标签
(head、title、meta)的使用目的和配置方法 - 4.HTML5
离线缓存
原理 - 5.可以使用
Canvas API
、SVG
等绘制高性能的动画
CSS
- 1.CSS
盒模型
,在不同浏览器的差异 - 2.CSS所有
选择器
及其优先级、使用场景,哪些可以继承,如何运用at规则 - 3.CSS
伪类
和伪元素
有哪些,它们的区别和实际应用 - 4.HTML
文档流
的排版规则,CSS几种定位
的规则、定位参照物、对文档流的影响,如何选择最好的定位方式,雪碧图
实现原理 - 5.
水平垂直居中
的方案、可以实现6种以上并对比它们的优缺点 - 6.
BFC
实现原理,可以解决的问题,如何创建BFC - 7.可使用
CSS函数复用代码
,实现特殊效果 - 8.
PostCSS
、Sass
、Less
的异同,以及使用配置,至少掌握一种 - 9.CSS模块化方案、如何配置
按需加载
、如何防止CSS阻塞渲染
- 10.熟练使用CSS实现常见
动画
,如渐变、移动、旋转、缩放等等 - 11.CSS
浏览器兼容
性写法,了解不同API在不同浏览器下的兼容性情况 - 12.掌握一套完整的
响应式布局
方案
手写
- 1.手写图片
瀑布流
效果 - 2.使用CSS绘制
几何图形
(圆形、三角形、扇形、菱形等) - 3.使用纯CSS实现
曲线运动
(贝塞尔曲线) - 4.实现常用布局(
三栏、圣杯、双飞翼、吸顶
),可是说出多种方式并理解其优缺点
三、计算机基础
关于编译原理,不需要理解非常深入,但是最基本的原理和概念一定要懂,这对于学习一门编程语言非常重要
编译原理
- 1.理解代码到底是什么,计算机如何将
代码
转换为可以运行的目标程序
- 2.
正则表达式
的匹配原理和性能优化 - 3.如何将JavaScript代码解析成
抽象语法树(AST)
- 4.
base64
的编码原理 - 5.几种
进制
的相互转换计算方法,在JavaScript中如何表示和转换
网络协议
- 1.理解什么是协议,了解
TCP/IP网络协议族
的构成,每层协议在应用程序中发挥的作用 - 2.
三次握手
和四次挥手
详细原理,为什么要使用这种机制 - 3.有哪些协议是
可靠
,TCP有哪些手段保证可靠交付 - 4.
DNS
的作用、DNS解析的详细过程,DNS优化原理 - 5.CDN的作用和原理
- 6.
HTTP
请求报文和响应报文的具体组成,能理解常见请求头的含义,有几种请求方式,区别是什么 - 7.HTTP所有
状态码
的具体含义,看到异常状态码能快速定位问题 - 8.
HTTP1.1、HTTP2.0
带来的改变 - 9.HTTPS的
加密
原理,如何开启HTTPS,如何劫持
HTTPS请求 - 10.理解
WebSocket
协议的底层原理、与HTTP的区别
设计模式
- 1.熟练使用前端常用的
设计模式
编写代码,如单例模式、装饰器模式、代理模式等 - 2.
发布订阅模式
和观察者模式
的异同以及实际应用 - 3.可以说出几种
设计模式
在开发中的实际应用,理解框架源码中对设计模式的应用
四、数据结构和算法
据我了解的大部分前端对这部分知识有些欠缺,甚至抵触,但是,如果突破更高的天花板,这部分知识是必不可少的
JavaScript编码能力
- 1.多种方式实现
数组去重
、扁平化
、对比优缺点 - 2.多种方式实现
深拷贝
、对比优缺点 - 3.手写函数
柯里化工具函数
、并理解其应用场景和优势 - 4.手写
防抖和节流工具函数
、并理解其内部原理和应用场景
企业级理解:节流—王者荣耀释放技能 防抖—王者荣耀回城
- 5.实现一个
sleep函数
手动实现前端轮子
- 1.手动实现
call、apply、bind
- 2.手动实现符合Promise/A+规范的
Promise
、手动实现async await
- 3.手写一个EventEmitter实现
事件发布、订阅
- 4.可以说出两种实现
双向绑定
的方案、可以手动实现 - 5.手写
JSON.stringify
、JSON.parse
- 6.手写一个
模版引擎
,并能解释其中原理 - 7.手写
懒加载
、下拉刷新
、上拉加载
、预加载
等效果
数据结构
- 1.理解常见
数据结构
的特点,以及他们在不同场景下使用的优缺点 - 2.理解数组、字符串的
存储原理
,并熟练应用他们解决问题 - 3.理解
二叉树、栈、队列、哈希表
的基本结构和特点,并可以应用它解决问题 - 4.了解
栈、堆
的基本结构和使用场景
算法
- 1.可计算一个算法的
时间复杂度
和空间复杂度
,可估计业务逻辑代码的耗时和内存消耗 - 2.至少理解五种
排序算法
的实现原理、应用场景、优缺点,可快速说出时间、空间复杂度 - 3.了解
递归
和循环
的优缺点、应用场景、并可在开发中熟练应用 - 4.可应用
回溯算法
、贪心算法
、分治算法
、动态规划
等解决复杂问题 - 5.前端处理
海量数据
的算法方案
五、运行环境
我们需要理清
语言和环境
的关系:ECMAScript
描述了JavaScript语言的语法和基本对象规范
浏览器
作为JavaScript的一种运行环境,为它提供了:文档对象模型(DOM),描述处理网页内容的方法和接口、浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口
Node
也是JavaScript的一种运行环境,为它提供了操作I/O、网络等API
浏览器API
- 1.浏览器提供的符合W3C标准的
DOM操作API、浏览器差异、兼容性
- 2.浏览器提供的
浏览器对象模型 (BOM)
提供的所有全局API、浏览器差异、兼容性 - 3.大量DOM操作、海量数据的性能优化(
合并操作
、Diff
、requestAnimationFrame
等) - 4.浏览器海量数据存储、操作性能优化
- 5.
DOM事件流
的具体实现机制、不同浏览器的差异、事件代理 - 6.前端发起网络请求的几种方式及其底层实现、可以手写原生ajax、fetch、可以熟练使用第三方库
- 7.浏览器的
同源策略
,如何避免同源策略,几种方式的异同点以及如何选型 - 8.浏览器提供的几种
存储机制
、优缺点、开发中正确的选择 - 9.浏览器
跨标签通信
浏览器原理
- 1.各浏览器使用的JavaScript引擎以及它们的异同点、如何在代码中进行区分
- 2.请求数据到请求结束与服务器进行了几次交互
- 3.可详细描述浏览器从输入URL到页面展现的详细过程
- 4.浏览器解析HTML代码的原理,以及构建DOM树的流程
- 5.浏览器如何解析CSS规则,并将其应用到DOM树上
- 6.浏览器如何将解析好的带有样式的DOM树进行绘制
- 7.浏览器的运行机制,如何配置资源
异步同步加载
- 8.浏览器
回流与重绘
的底层原理,引发原因,如何有效避免 - 9.浏览器的
垃圾回收机制
,如何避免内存泄漏 - 10.浏览器采用的
缓存方案
,如何选择和控制合适的缓存方案
Node
- 1.理解
Node
在应用程序中的作用,可以使用Node搭建前端运行环境、使用Node操作文件、操作数据库等等 - 2.掌握一种Node开发框架,如
Express
,Express
和Koa
的区别 - 3.熟练使用Node提供的API如
Path
、Http
、Child Process
等并理解其实现原理 - 4.Node的
底层运行原理
、和浏览器的异同 - 5.Node
事件驱动
、非阻塞机制
的实现原理
六、框架和类库
轮子层出不穷,从原理上理解才是正道
TypeScript
- 1.理解
泛型、接口等面向对象
的相关概念,TypeScript对面向对象理念的实现 - 2.理解使用
TypeScript
的好处,掌握TypeScript基础语法 - 3.TypeScript的
规则检测原理
- 4.可以在React、Vue等框架中使用TypeScript进行开发
React
- 1.React和vue 选型和优缺点、核心架构的区别
- 2.React中
setState
的执行机制,如何有效的管理状态 - 3.React的
事件底层实现机制
- 4.React的
虚拟DOM和Diff算法
的内部实现 - 5.React的
Fiber工作原理
,解决了什么问题 - 6.React
Router
和Vue Router的底层实现原理、动态加载
实现原理 - 7.可熟练应用
React API
、生命周期
等,可应用HOC、render props、Hooks等高阶用法
解决问题 - 8.基于React的特性和原理,可以手动实现一个简单的React
Vue
- 1.熟练使用Vue的
API
、生命周期
、钩子函数
- 2.
MVVM
框架设计理念 - 3.Vue
双向绑定
实现原理、Diff算法
的内部实现 - 4.Vue的
事件机制
- 5.从template转换成真实DOM的
实现机制
多端开发
- 1.
单页面应用(SPA)
的原理和优缺点,掌握一种快速开发SPA的方案 - 2.理解
Viewport
、em
、rem
的原理和用法,分辨率
、px
、ppi
、dpi
、dp
的区别和实际应用 - 3.
移动端页面适配
解决方案、不同机型适配方案 - 4.掌握一种JavaScript移动客户端开发技术,如
React Native
:可以搭建React Native开发环境,熟练进行开发,可理解React Native的运作原理,不同端适配 - 5.掌握一种JavaScript PC客户端开发技术,如
Electron
:可搭建Electron开发环境,熟练进行开发,可理解Electron的运作原理 - 6.掌握一种
小程序
开发框架或原生小程序开发 - 7.理解
多端框架
的内部实现原理,至少了解一个多端框架的使用
数据流管理
- 1.掌握React和Vue传统的
跨组件通信
方案,对比采用数据流管理框架的异同 - 2.熟练使用
Redux
管理数据流,并理解其实现原理,中间件实现原理 - 3.熟练使用
Mobx
管理数据流,并理解其实现原理,相比Redux有什么优势 - 4.熟练使用
Vuex
管理数据流,并理解其实现原理 - 5.以上数据流方案的异同和优缺点,不情况下的技术选型
实用库
- 1.至少掌握一种UI组件框架,如
antd design
,理解其设计理念、底层实现 - 2.掌握一种图表绘制框架,如
Echart
,理解其设计理念、底层实现,可以自己实现图表 - 3.掌握一种GIS开发框架,如
百度地图AP
I - 4.掌握一种可视化开发框架,如
Three.js
、D3
- 5.工具函数库,如
lodash
、underscore
、moment
等,理解使用的工具类或工具函数的具体实现原理
开发和调试
- 1.熟练使用各浏览器提供的
调试工具
- 2.熟练使用一种代理工具实现请求代理、抓包,如
charls
- 3.可以使用
Android
、IOS模拟器
进行调试,并掌握一种真机调试方案 - 4.了解Vue、React等框架
调试工具
的使用
七、前端工程
前端工程化:以工程化方法和工具提高开发生产效率、降低维护难度
项目构建
- 1.理解
npm
、yarn
依赖包管理的原理,两者的区别 - 2.可以使用npm运行自定义脚本
- 3.理解
Babel
、ESLint
、webpack
等工具在项目中承担的作用 - 4.
ESLint
规则检测原理,常用的ESLint配置 - 5.
Babel
的核心原理,可以自己编写一个Babel插件 - 6.可以配置一种前端代码兼容方案,如
Polyfill
- 7.
Webpack
的编译原理、构建流程、热更新原理,chunk
、bundle
和module
的区别和应用 - 8.可熟练配置已有的
loaders
和plugins
解决问题,可以自己编写loaders和plugins
nginx
- 1.
正向代理
与反向代理
的特点和实例 - 2.可手动搭建一个简单的
nginx服务器
、 - 3.熟练应用常用的nginx
内置变量
,掌握常用的匹配规则写法 - 4.可以用nginx实现
请求过滤
、配置gzip
、负载均衡
等,并能解释其内部原理
开发提速
- 1.熟练掌握一种接口管理、接口mock工具的使用,如
yapi
- 2.掌握一种高效的
日志埋点
方案,可快速使用日志查询工具定位线上问题 - 3.理解
TDD
与BDD
模式,至少会使用一种前端单元测试框架
版本控制
- 1.理解
Git
的核心原理、工作流程、和SVN
的区别 - 2.熟练使用常规的
Git命令
、git rebase、git stash等进阶命令
- 3.可以快速解决
线上分支回滚
、线上分支错误合并
等复杂问题
持续集成
- 1.理解
CI/CD
技术的意义,至少熟练掌握一种CI/CD工具的使用,如Jenkins
- 2.可以独自完成架构设计、技术选型、环境搭建、全流程开发、部署上线等一套
完整的开发流程
(包括Web应用、移动客户端应用、PC客户端应用、小程序、H5等等)
八、项目和业务
后端技能
- 1.了解后端的开发方式,在应用程序中的作用,至少会使用一种后端语言
- 2.掌握数据最终在
数据库
中是如何落地存储的,能看懂表结构设计、表之间的关联,至少会使用一种数据库
性能优化
- 1.了解前端性能衡量指标、性能监控要点,掌握一种
前端性能监控
方案 - 2.了解常见的
Web、App性能优化
方案 - 3.
SEO
排名规则、SEO优化方案、前后端分离的SEO - 4.
SSR
实现方案、优缺点、及其性能优化 - 5.
Webpack
的性能优化方案 - 6.
Canvas
性能优化方案 - 7.React、Vue等框架使用
性能优化
方案
前端安全
- 1.
XSS
攻击的原理、分类、具体案例,前端如何防御 - 2.
CSRF
攻击的原理、具体案例,前端如何防御 - 3.
HTTP
劫持、页面劫持的原理、防御措施
业务相关
- 1.能理解所开发项目的
整体
业务形态、业务目标、业务架构,可以快速定位线上业务问题 - 2.能理解所开发项目整体的
技术架构
、能快读的根据新需求进行开发规划、能快速根据业务报警、线上日志等定位并解决线上技术问题 - 3.可以将自己的想法或新技术在业务中
落地实践
,尽量在团队中拥有一定的不可替代性
九、学习提升
vczh大神在知乎问题【如何能以后达到温赵轮三位大神的水平?】下的回答: 这十几年我一共做了三件事:
- 1、不以赚钱为目的选择学习的内容;
- 2、以自己是否能造出轮子来衡量学习的效果;
- 3、坚持每天写自己的代码,前10年每天至少6个小时,不包含学习和工作的时间。
十、技术之外
这部分可能比上面九条加起来重要
1.了解互联网人员术语:CEO、CTO、COO、CFO、PM、QA、UI、FE、DEV、DBA、OPS等
2.了解互联网行业术语:B2B、B2C、C2C、O2O等
3.掌握互联网行业沟通、问答、学习的
4.有一定的"PPT"能力
5.有一定的理财意识
,至少了解储蓄、货币基金、保险、指数基金、股票等基本的理财知识
6.掌握在繁重的工作和长期的电脑辐射的情况下保持健康
的方法,建立正确的养生
知识体系
小结
是不是以为要结束了,都到小结了,哈哈,给你一个惊喜,再来看一份清单(检验一下成果):
- 你关于性能优化是否只知道js文件摆放顺序、减少请求、雪碧图等等,却连衡量指标
window.performance.timing
都不清楚是干什么的?
- 请你描述下一个网页是如何
渲染
出来的,dom树
和css树
是如何合并的,浏览器的运行机
制是什么,什么是否会造成渲染阻塞
?
- 请简述下
js引擎
的工作原理,js是怎样处理事件的eventloop
,宏任务源tasks
和微任务源jobs
分别有哪些?js是如何构造抽象语法书(AST)
的?
- 你是否考虑全面你编写的整个函数,或者整个功能的
容错性
与扩展性
?怎样构建一个组件是最合理最科学的,对于错误的处理是否有统一的方式方法?
浏览器缓存
的基本策略,什么时候该缓存什么时候不该缓存,以及对于控制缓存的字段的相关设置是否清楚?
- 你是否可以利用
面向对象
的思维去抽象你的功能,你会构建一个class
(ES6)吗?你对于前端架构的理解?
- 你会用VUE,你会用React,你读得懂这两个
架构的源码
吗?你懂他俩的基本设计模式
吗?让你去构建一个类似的框架你如何下手?
- 你了解的
ES6
只是const、let、promise吗?你考虑过ES6提出的真正趋势吗?
- 你会用less,那么让你去写一个
loader
你可以吗?
webpack
你也会用,你了解其中原理吗?你知道分析打包依赖的过程吗?你知道tree-shakeing
是如何干掉无用重复的代码的吗?
- 你真的熟练使用
css
吗,那你知道position有几个属性吗
- 你了解js的
数据结构
吗?基本数据类型有哪些?复杂数据类型有哪些?在内存是如何表现的?
- 你可以用js去实现一个
单向、双向、循环链表
吗?你可以实现查找、插入、删除操作吗?
- 你了解基本常见
算法
吗?快速排序写一个?要是限制空间利用
你该如何写?
- 你了解
贪心算法
、动态规划
、分治算法
、回溯算法
等常见的算法吗?
- 你是如何理解前端架构的?你了解持续集成吗?
- 你了解基本的
设计模式
吗?举例单例模式
、策略模式
、代理模式
、迭代模式
、发布订阅模式
等等?
- 写一个
事件监听
函数呗?实现once
、on
、remove
、emit
功能
node.j
s的实现层是什么?
- node的
事件循环机制
是怎样的?
- node的
child_process
模块有几个api,分别的作用是什么?
http1.0
与1.1协议
的区别?
- node是如何实现
http模块
的?
- 如何构建一个
主从模式
?
nginx
相关配置了解过吗?
- 如何看待前后端分离?(前端负责将数据按照产品设计渲染以及调用后端接口实现产品功能,而后端则提供数据接口,功能接口!前后端分离的开发模式是为了让专业的人做专业的事,且现在前端和后端可以通过接口文档实现并行开发,提高开发效率。)
- 你真的理解前端吗? (最最最扎心的问题,看完这些清单,可以试着正式回答一下这个问题)
认真的小结:
我自己看到这些问题的时候真的会被劝退,哈哈,感觉自己好菜,但是吧,人总是要成长的,为了那个多多的money,想想其实也挺简单的,努力努力应该也可以吧,我猜,哈哈,让我们一起在评论区打卡吧,先评论出你还没开始认真学习这份清单是的薪资,最后再来展示一下学习完之后你的薪资,一起努力吧,一起打卡!!!(希望我别先放弃了哈哈!!)