前端知识图谱&学习路线

爱读书的二丙子
600 阅读6分钟

免责声明: 本人前端刚刚入门，本文是在参考了很多文章后总结而出（我只是内容的搬运工，我也尽最大可能将原地址贴出）如果您在文章中看到了自己的内容，并觉得侵犯了您的知识产权，请联系我，我将立即删除。

如何成为一个合格的前端工程师?

前端需要学习那些东西？

校招会考察什么东西？

重难点是什么？

主要参考内容：

前端复习课-强烈推荐（主要内容来源）

2021前端必读文章

写给初中级前端的万字高级进阶指南

前端进阶之道-面试重点

ssh_晨曦时梦见兮

2021最新前端面试题汇总

jsliang求职系列

HTML

  1. 常用标签和常见布局

  2. HTML5语义化标签

  3. HTML5新特性

  4. 行内元素、块级元素、行内块元素

  5. <script>、<script async> 和 <script defer> 的区别

  6. meta标签

  7. 表单元素

  1. canvas与svg

  2. 拖拽Drag

  3. 音视频（audio和video）

  4. 离线存储

CSS

  1. CSS选择器及其优先级

  2. BFC（必考）

  3. 盒子模型

  4. 高度/margin塌陷与清除浮动

  5. flex布局和Grid布局

  6. position定位

  7. 层叠上下文

  8. CSS单位

  9. 常见布局方式

    • 居中（水平居中与垂直居中）

    • 两栏布局

    • 三栏布局

      • 圣杯布局

      • 双飞翼布局

    • CSS画三角形

  10. 过渡与动画

  11. 移动端响应式布局

    • 布局方式
    • 300ms延时的原因和解决方案

  12. CSS预处理器

    • less
    • scss

JavaScript（全都是重点）

  1. 数据类型与堆栈内存（数据类型，数据类型转换与数据类型检测的几种方法）

  2. 常用数组方法和字符串方法（数组去重和排序、字符串翻转）

  3. 函数执行机制与执行上下文（普通函数与箭头函数、自执行函数、构造函数的执行步骤，执行上下文，执行栈）

  4. 浏览器垃圾回收机制及闭包作用域（变量提升机制、作用域与作用域链、this、arguments、闭包原理、闭包的应用场景、闭包引发的问题）

  5. 面向对象深入应用（对象的属性和访问方式，结合this的指向（call/bind/apply）、原型与原型链、构造函数、new、继承、深拷贝与浅拷贝）

  6. 事件循环与任务队列、微任务、宏任务

  7. Promise发展历程、Async、Await

  8. DOM事件流与事件委托（事件冒泡与事件委托）

  9. Ajax/Fetch/Axios/跨域

  10. ES6基础语法和进阶

    1. let与const

    2. 解构赋值

    3. 扩展运算符与reset运算符

    4. 模板字符串

    5. 箭头函数

    6. Symbol

    7. Set和Map

    8. Proxy与Reflect

    9. 迭代器和生成器函数

    10. Promise/Async/Await

    11. Class语法

    12. 模块化发展历程(AMD/CMD/CommonJS/ES6Modules)

  11. 设计模式（如发布订阅模式，观察者模式）

  12. 组件插件封装

  13. 手撕代码

    1. new

    2. call/bind/apply

    3. Promise/Async/Await

    4. reduce/forEach/map/filter

    5. instanceof

    6. 柯里化函数、链式调用

    7. 防抖和节流

    8. Ajax、jsonp

    9. 深浅拷贝

    10. 继承

    11. 数组去重、排序

    12. 数组扁平化

    13. 字符串反转

    14. 千位分隔符

    15. 发布订阅模式

    16. 数据类型检测方法封装

  14. 源码解读

    1. JQuery

    2. Lodash

    3. underscore

    4. Axios

  15. 正则表达式

  16. requestAnimationFrame

Vue

  1. MVVM实现原理

  2. 基础语法

    1. 常用指令

    2. watch和computed、methods比较

    3. v-show与v-if

    4. key的作用

    5. 组件中的data属性为什么是函数

    6. keep-alive

    7. 插槽slot

  3. nextTick原理

  4. 组件通信方式

  5. 生命周期

  6. 虚拟DOM与Diff算法

  7. Vuex

    • state/getter/mutation/action/module

  8. VueRouter

    1. hash模式和history模式

    2. 路由懒加载

    3. 动态路由

    4. 嵌套路由

    5. 编程式导航

    6. 重定向

    7. 导航守卫

  9. 组件库（element-ui/vant）和插件（Echarts等）的使用

    1. 项目目录配置

    2. 组件库的文档是否熟悉

    3. 技术选项、坑点总结、性能优化、需求文档、问题解决、组件和功能模块抽离、功能封装

  10. Vue3

React

  1. 与Vue的对比

  2. JSX

  3. setState

  4. 组件通信

  5. 虚拟DOM与Diff

  6. 函数组件、类组件、高阶组件封装

  7. 受控组件与非受控组件

  8. React项目中引入CSS的方案

  9. redux/react-redux

  10. ReactHooks

Node

  1. npm包管理

  2. 模块查找机制

  3. 事件循环

  4. Express

  5. Koa

  6. MongoDB

前端工程化

  1. Webpack

    1. loader和plugin的区别

    2. 有哪些常用的loader和plugin

    3. tree shaking

  2. Gulp(*)

  3. Git

  4. Babel

  5. Eslint

网络/安全/浏览器/性能优化/操作系统

网络

  1. OSI与TCP/IP模型

  2. HTTP

    1. HTTP请求报文与响应报文

    2. HTTP状态码

    3. HTTP缓存

    4. HTTP1.0/1.1/2.0/3.0

    5. Keep-Alive

  3. DNS

  4. TCP和UDP

    1. 三次握手与四次挥手

  5. HTTPS

  6. WebSocket

  7. CDN

安全

  1. XSS

  2. CSRF

浏览器

推荐资料：《浏览器工作原理与实践》《图解Google V8》

  1. 从输入URL到页面展示，发生了什么？

  2. 浏览器缓存

  3. 页面渲染优化

  4. 重绘与回流

  5. localStorage和SessionStorage

  6. Cookie/Session/Token

性能优化

  1. 网络层面

  2. 代码打包

  3. 技术方案

操作系统

  1. 进程与线程

  2. 进程通信

  3. 死锁

  4. 进程调度策略

算法

awesome-coding-js

前端算法渣的救赎之路

主要参考：

《剑指Offer》

《LeetCode Top100》

《代码随想录》

  1. 排序（必会）

  2. 二分查找

  3. 双指针

  4. 数组

  5. 字符串

  6. 链表

  7. 栈和队列

  8. 二叉树

  9. BFS和DFS

  10. 回溯

  11. 贪心

  12. 动态规划

  13. 滑动窗口

简历/面试

该内容来自周啸天老师公开课

简历

  1. 简历模板（简洁大方，1-2页）

  2. 简历命名（姓名-学历-工作年限-前端开发-联系方式.pdf）

  3. 基本信息

    1. 姓名、联系方式、工作年限、求职岗位

    2. 学历、专业（教育经历）

    3. 期望薪资

  4. 专业技能

    1. 调研招聘需求，提取公共要素、核心要点

    2. 突出技术广度和实战经验

    3. 突出深度（如源码阅读、组件插件封装）

    4. 精简语言，突出重点

  5. 工作履历

    1. 突出所做贡献

    2. 不要频繁跳槽

  6. 项目经验

    面试的时候，再不济，脑子中也要能够清晰呈现出当前项目所有板块页面的原型图，能够清楚知道该如何去实现，会遇到哪些技术难点（规划出合理的技术栈和使用的插件等）（不要写废话）

    • 技术栈

    • 负责的功能版块

    • 不要无脑描述（如描述使用Vuex做状态管理，VueRouter做路由跳转）

    • 项目亮点

      • 重难点业务

      • 深层次优化、插件、组件的封装

      • 重构、性能优化、打包优化

  7. 其他

    • 兴趣爱好、语言、自我评价

其他

  1. 自我介绍

  2. 介绍项目

  3. 项目中遇到的问题，怎么解决的？

  4. 项目优化

  5. 为什么学习前端？

  6. 怎么学习前端的？（学习途径）

  7. 如何看待前端的发展？

  8. 比较擅长那一块，不足的地方在哪里？

  9. 职业规划

  10. 缺点与优点？身边人对你的评价？

  11. 最近看的书？

  12. 如何看待996和加班

  13. 你有什么要问的吗？

avatar
文章
阅读
粉丝