本文结合我所在团队的实际情况,总结新手、初级、中级前端工程师需要掌握的基础能力项 check list,主要围绕 html、js、css、vue、http 展开,除了知识点的汇总外还会附上各阶段适用优质书籍,希望能帮助到有需要的同学。
写作不易,觉得有用的话点个赞再走吧。
新手级
受众:实习生、在校生
学习目标:可以预设没有任何开发经验,没有系统学过web开发所需具备的基本技能点,因此学习的重点主要围绕基础知识html、css、js展开;学习的目标主要还是应用能力,不需要也不应该涉及原理层面。
知识要点
- HTML 入门
- 理解富文本标记基本语言语法、标记的属性、事件定义
- 理解常用标签,特别关注标签的语义及基本样式
- 交互标签:a、button
- div + span
- Form 标签:form、input、select、checkbox
- 语义标签:section、header、footer、figure、article、ul、ol、li
- 了解其他标签: www.runoob.com/tags/html-r…
- CSS 入门
- 理解盒子模型、流式布局概念
- 熟悉如下选择器:id、class、元素、通配符
- 掌握如下选择器:伪类、属性、关系
- 熟悉如下属性用法:
- 颜色: background、color、opacity
- 字体:font-family、font-size
- 边框:border、border-radius
- 盒子:width、height、padding、margin、min-width、min-height
- 掌握 position 用法,包括:absolute/fixed/relative
- 掌握 display 用法,包括:block/inline/line-block
- 掌握 transition 用法,特别是:scale、translate、skew
- 了解 animation 用法
- Javascript 入门
- 熟练掌握编程结构:循环语句、判断语句、顺序语句
- 了解原型链、闭包、运行时概念
- 了解DOM协议及用法
- 熟练掌握浏览器(Chrome) 断点调试功能
- 了解axios用法,并能使用axios实现简单的get、post请求交互场景
- Vue 入门
- 理解 template 模板语法
- 理解数据绑定语法
- 理解条件判断、循环语法
- 掌握过滤器语法,能使用 vue2-filters 等工具解决实际问题
- 掌握常见指令用法,包括:v-if/v-for/v-bind/v-model
- 理解组件语法及生命周期规则
- 掌握 vue-cli 工具的使用方法
- 了解MVVM模式,能够分清 view、view-model 的概念与关系
- 网络知识
- 了解http协议,能够明白http的 请求-响应 模式
- 了解 websocket 协议,能够明白 websocket 与http 在交互模式上的区别
推荐书籍
资源
学习任务
使用 Vue/react/原生JS 实现Todo list列表,支持增加、删除列表项;支持设定列表项的标题、到期时间。
初级
受众:工作0-2年
学习目标:巩固基础
门槛:
- 掌握html语法,能灵活使用各类标签
- 能够灵活使用基础的 JS 语法与工具链解决生产问题
知识要点
- HTML
- 理解标签语义,能根据上下文场景正确使用标签
- 理解form表单用法,理解浏览器默认处理逻辑
- 理解meta、keyword等SEO标签的作用
- 掌握通过html标签实现性能优化的手段
- Script 标签对页面执行流程的影响及优化
- 样式对页面执行流程的影响及优化
- 了解 http-equiv 标签的作用
- Css
- 掌握常用布局的实现方法,包括:
- 流式布局
- 响应式布局
- 弹性布局
- 网格布局
- 理解margin的特殊使用场景,包括:margin 坍塌、基于margin 实现居中
- 了解移动端渲染单位概念,包括:PPI、像素比;理解 2X、3X图概念及其使用场景
- 理解多媒体查询能力
- 了解postcss用法
- Less
- 理解CSS预处理器概念,了解less的环境配置、处理过程、解决的问题、输出结果形态
- 理解编程结构:循环、判断、赋值、mixin
- 理解变量概念,并能够基于变量实现数值、颜色、角度、百分比计算
- 掌握函数工具用法
- 理解 less-loader 的运行原理
- JavaScript
- 理解内存堆栈,理解值类型、引用类型、包装类型的概念
- 理解原型链概念,能够使用原型接口实现OOP编程
- 掌握 Object.defineProperty 、Object.create、Proxy 用法,能简单描述这几个接口之间的区别
- 理解V8引擎垃圾回收原理
- BOM & DOM
- 了解多媒体接口,能够在页面中实现视频、音频的加载、播放。
- 理解 DOM 事件模型,及冒泡特性在性能优化上的作用
- 了解文档操作接口,包括:查询、复制、删除、更新属性、更新内容
- 工具库
- 熟练掌握lodash常见函数用法,包括:map、reduce、filter、forEach、chain、sortBy、groupBy、pick、omit
- 熟悉dayjs/moment.js 工具库,能够进行日期字符串解析、格式化;能够进行时间计算、duration计算
- 工程化
- 理解 webpack 文件打包原理,熟悉 entry、resolve、rules、plugins 配置项
- 了解AST概念,理解AST在webpack、babel等工程化工具中的作用
- 小程序
- 理解小程序多进程架构,特别是setData 、事件模型的作用
- Vue
- 理解 v-model 指令原理,能够自行封装组件的v-model逻辑
- 理解数据绑定实现原理
- 理解diff算法原理
- HTTP 协议入门
- 掌握抓包工具Charles(或 Fiddle)、Bifrost 用法
- 理解缓存相关header,包括:etag/last-modified/cache-control/expires;理解协商缓存、强缓存的区别
- 熟悉常见响应码的语义,包括:200、301、302、404、500、502、101
- 理解 get、post、put、delete 请求方法的语义及使用场景;理解幂等概念
- 理解HTTP 1.x的传输性能的主要约束,包括:
- 浏览器并行连接数概念及解决了什么问题
- 域名解析、TCP握手、TLS握手
- 请求阻塞/对首阻塞
- Node.js
- 熟悉文件IO接口,能够熟练使用:read/write/open/stat
- 了解流式接口概念,能够使用流式接口实现文件读、写、转换
- 了解http模块接口
- 理解KOA框架,能够使用KOA编写一个简单的HTTP服务程序
- 网络知识
- 了解TCP/IP协议,理解TCP三次握手过程
- 理解TCP vs UDP的区别,能够分清楚为什么http协议底层通常使用TCP实现
- 了解DNS,并能理清楚DNS 与CDN之间的关系
- 了解TLS/SSL协议,理解TLS握手过程,理解TLS证书及验证过程
- 理解网页性能指标,包括:FMP、TTI、FP
- 计算机基础知识
- 熟悉常用数据结构,包括:链表、hash 表、二叉树、数组
- 熟悉常见算法,包括:冒泡排序、快速排序、希尔排序、二分查找
- 理解UTC日期格式、时间戳概念
- 了解编解码概念及常见方法,包括 utf-8/utf-16/ASCII/unicode
- 了解冯·诺依曼结构概念
推荐书籍
- 《CSS 权威指南》
- 《图解HTTP》
- 《HTTP 权威指南》
- 《NodeJs 实战》
- 《深入浅出NodeJs》
- 《JavaScript 高级程序设计》
- 《JavaScript 权威指南》
资源
学习任务
- 在 astexplorer.net/ 工具上尝试各种JS语法编译,仔细阅读AST结构,理解内在逻辑
- 使用DOM原生Form接口实现文件传输
中级
受众:2-4年经验
特点:团队中流砥柱,已经具备较丰富的开发经验,对前端技术应该已经足够了解且有自己的观点,能够应付大多数开发场景。
知识要点
- 深入理解HTML、CSS、JavaScript
- 理解页面渲染流程,包括从静态文档编译为DOM、RenderObject、RenderTree、RenderLayout的过程
- ESM 模块化
- 学习 Jest ,掌握自动化测试能力
- 掌握 jest 常用命令
- 能够配合webpack、rollup、npm scripts 等工具构建自动化测试流程
- 代码优雅性
- 深入理解OOP,包括封装、继承、多态、组合概念
- 理解OOP编程六大原则
- 熟悉常见设计模式,能够在实战中灵活使用各类设计模式
- 架构知识
- 理解插件式架构原理,阅读并理解 vue 的 plugins 的源码实现
- 理解BFF架构概念
- 了解微服务概念
- 软技能
- 学习能力强,能够把握某个技术方向的自研工作
- 深入学习 HTTP
- 理解HTTP2的增强特性,包括:分包算法、流式加载、二进制传输、头部压缩特性
推荐书籍
字节游戏前端大量招聘初中高各层级,有内推需求可加微信: tecvan