[建议收藏] 初中级前端应该掌握的基础知识

2,279

本文结合我所在团队的实际情况,总结新手、初级、中级前端工程师需要掌握的基础能力项 check list,​主要围绕 html、js、css、vue、http 展开,除了知识点的汇总外还会附上各阶段适用优质书籍,希望能帮助到有需要的同学。

写作不易,觉得有用的话点个赞再走吧。

新手级

受众:实习生、在校生

学习目标:可以预设没有任何开发经验,没有系统学过web开发所需具备的基本技能点,因此学习的重点主要围绕基础知识html、css、js展开;学习的目标主要还是应用能力,不需要也不应该涉及原理层面。

知识要点

  1. HTML 入门
    1. 理解富文本标记基本语言语法、标记的属性、事件定义
    2. 理解常用标签,特别关注标签的语义及基本样式
    3. 交互标签:a、button
    4. div + span
    5. Form 标签:form、input、select、checkbox
    6. 语义标签:section、header、footer、figure、article、ul、ol、li
    7. 了解其他标签: www.runoob.com/tags/html-r…
  2. CSS 入门
    1. 理解盒子模型、流式布局概念
    2. 熟悉如下选择器:id、class、元素、通配符
    3. 掌握如下选择器:伪类、属性、关系
    4. 熟悉如下属性用法:
    5. 颜色: background、color、opacity
    6. 字体:font-family、font-size
    7. 边框:border、border-radius
    8. 盒子:width、height、padding、margin、min-width、min-height
    9. 掌握 position 用法,包括:absolute/fixed/relative
    10. 掌握 display 用法,包括:block/inline/line-block
    11. 掌握 transition 用法,特别是:scale、translate、skew
    12. 了解 animation 用法
  3. Javascript 入门
    1. 熟练掌握编程结构:循环语句、判断语句、顺序语句
    2. 了解原型链、闭包、运行时概念
    3. 了解DOM协议及用法
    4. 熟练掌握浏览器(Chrome) 断点调试功能
    5. 了解axios用法,并能使用axios实现简单的get、post请求交互场景
  4. Vue 入门
    1. 理解 template 模板语法
    2. 理解数据绑定语法
    3. 理解条件判断、循环语法
    4. 掌握过滤器语法,能使用 vue2-filters 等工具解决实际问题
    5. 掌握常见指令用法,包括:v-if/v-for/v-bind/v-model
    6. 理解组件语法及生命周期规则
    7. 掌握 vue-cli 工具的使用方法
    8. 了解MVVM模式,能够分清 view、view-model 的概念与关系
  5. 网络知识
    1. 了解http协议,能够明白http的 请求-响应 模式
    2. 了解 websocket 协议,能够明白 websocket 与http 在交互模式上的区别

推荐书籍

资源

学习任务

使用 Vue/react/原生JS 实现Todo list列表,支持增加、删除列表项;支持设定列表项的标题、到期时间。

初级

受众:工作0-2年

学习目标:巩固基础

门槛:

  1. 掌握html语法,能灵活使用各类标签
  2. 能够灵活使用基础的 JS 语法与工具链解决生产问题

知识要点

  1. HTML
    1. 理解标签语义,能根据上下文场景正确使用标签
    2. 理解form表单用法,理解浏览器默认处理逻辑
    3. 理解meta、keyword等SEO标签的作用
    4. 掌握通过html标签实现性能优化的手段
    5. Script 标签对页面执行流程的影响及优化
    6. 样式对页面执行流程的影响及优化
    7. 了解 http-equiv 标签的作用
  2. Css
    1. 掌握常用布局的实现方法,包括:
    2. 流式布局
    3. 响应式布局
    4. 弹性布局
    5. 网格布局
    6. 理解margin的特殊使用场景,包括:margin 坍塌、基于margin 实现居中
    7. 了解移动端渲染单位概念,包括:PPI、像素比;理解 2X、3X图概念及其使用场景
    8. 理解多媒体查询能力
    9. 了解postcss用法
  3. Less
    1. 理解CSS预处理器概念,了解less的环境配置、处理过程、解决的问题、输出结果形态
    2. 理解编程结构:循环、判断、赋值、mixin
    3. 理解变量概念,并能够基于变量实现数值、颜色、角度、百分比计算
    4. 掌握函数工具用法
    5. 理解 less-loader 的运行原理
  4. JavaScript
    1. 理解内存堆栈,理解值类型、引用类型、包装类型的概念
    2. 理解原型链概念,能够使用原型接口实现OOP编程
    3. 掌握 Object.defineProperty 、Object.create、Proxy 用法,能简单描述这几个接口之间的区别
    4. 理解V8引擎垃圾回收原理
  5. BOM & DOM
    1. 了解多媒体接口,能够在页面中实现视频、音频的加载、播放。
    2. 理解 DOM 事件模型,及冒泡特性在性能优化上的作用
    3. 了解文档操作接口,包括:查询、复制、删除、更新属性、更新内容
  6. 工具库
    1. 熟练掌握lodash常见函数用法,包括:map、reduce、filter、forEach、chain、sortBy、groupBy、pick、omit
    2. 熟悉dayjs/moment.js 工具库,能够进行日期字符串解析、格式化;能够进行时间计算、duration计算
  7. 工程化
    1. 理解 webpack 文件打包原理,熟悉 entry、resolve、rules、plugins 配置项
    2. 了解AST概念,理解AST在webpack、babel等工程化工具中的作用
  8. 小程序
    1. 理解小程序多进程架构,特别是setData 、事件模型的作用
  9. Vue
    1. 理解 v-model 指令原理,能够自行封装组件的v-model逻辑
    2. 理解数据绑定实现原理
    3. 理解diff算法原理
  10. HTTP 协议入门
    1. 掌握抓包工具Charles(或 Fiddle)、Bifrost 用法
    2. 理解缓存相关header,包括:etag/last-modified/cache-control/expires;理解协商缓存、强缓存的区别
    3. 熟悉常见响应码的语义,包括:200、301、302、404、500、502、101
    4. 理解 get、post、put、delete 请求方法的语义及使用场景;理解幂等概念
    5. 理解HTTP 1.x的传输性能的主要约束,包括:
    6. 浏览器并行连接数概念及解决了什么问题
    7. 域名解析、TCP握手、TLS握手
    8. 请求阻塞/对首阻塞
  11. Node.js
    1. 熟悉文件IO接口,能够熟练使用:read/write/open/stat
    2. 了解流式接口概念,能够使用流式接口实现文件读、写、转换
    3. 了解http模块接口
    4. 理解KOA框架,能够使用KOA编写一个简单的HTTP服务程序
  12. 网络知识
    1. 了解TCP/IP协议,理解TCP三次握手过程
    2. 理解TCP vs UDP的区别,能够分清楚为什么http协议底层通常使用TCP实现
    3. 了解DNS,并能理清楚DNS 与CDN之间的关系
    4. 了解TLS/SSL协议,理解TLS握手过程,理解TLS证书及验证过程
    5. 理解网页性能指标,包括:FMP、TTI、FP
  13. 计算机基础知识
    1. 熟悉常用数据结构,包括:链表、hash 表、二叉树、数组
    2. 熟悉常见算法,包括:冒泡排序、快速排序、希尔排序、二分查找
    3. 理解UTC日期格式、时间戳概念
    4. 了解编解码概念及常见方法,包括 utf-8/utf-16/ASCII/unicode
    5. 了解冯·诺依曼结构概念

推荐书籍

资源

学习任务

  • astexplorer.net/ 工具上尝试各种JS语法编译,仔细阅读AST结构,理解内在逻辑
  • 使用DOM原生Form接口实现文件传输

中级

受众:2-4年经验

特点:团队中流砥柱,已经具备较丰富的开发经验,对前端技术应该已经足够了解且有自己的观点,能够应付大多数开发场景。

知识要点

  1. 深入理解HTML、CSS、JavaScript
    1. 理解页面渲染流程,包括从静态文档编译为DOM、RenderObject、RenderTree、RenderLayout的过程
    2. ESM 模块化
  2. 学习 Jest ,掌握自动化测试能力
    1. 掌握 jest 常用命令
    2. 能够配合webpack、rollup、npm scripts 等工具构建自动化测试流程
  3. 代码优雅性
    1. 深入理解OOP,包括封装、继承、多态、组合概念
    2. 理解OOP编程六大原则
    3. 熟悉常见设计模式,能够在实战中灵活使用各类设计模式
  4. 架构知识
    1. 理解插件式架构原理,阅读并理解 vue 的 plugins 的源码实现
    2. 理解BFF架构概念
    3. 了解微服务概念
  5. 软技能
    1. 学习能力强,能够把握某个技术方向的自研工作
  6. 深入学习 HTTP
    1. 理解HTTP2的增强特性,包括:分包算法、流式加载、二进制传输、头部压缩特性

推荐书籍

字节游戏前端大量招聘初中高各层级,有内推需求可加微信: tecvan