给20/21届前端同学准备的前端基础知识, 非科班同学速来

1,691 阅读9分钟

自我介绍下, 我来自南昌大学管理科学专业, 目前大三, 在今年刚刚拿到阿里暑期实习offer, 由于我个人规划习惯, 面试前做了自认为还算覆盖率比较好的知识点总结,在成功上岸后希望回馈一波~

尤其是非科班同学, 以我为例, 大学学过的和计算机有关的只有计算机通识..., 就是告诉你第一台电脑啥时候发明的那门课. 对于非科班同学来说网络与数据结构算法通常会是大问题. 对于科班同学最多只是欠缺下项目经验. 因此希望这篇文章能够对非科班的同学提供一些帮助.

一些建议

首先为还未上岸的同学给出一波建议:

  • 算法和数据结构, 我的思路是投入产出比太小, 因为我估算至少需要一个月的集中刷题才能稍微达到及格线, 因此我只准备了常用的排序, leetcode刷了大概30道左右. 也建议非科班的同学不要死磕, 不如把前端方向做的更出色一点.
  • 项目很重要, 即使是简单的项目(当然不能太简单, 以React为例你起码做个带权限带接口带多级路由blabla的后台管理系统这种吧), 如果没有实习经历, 推荐慕课网上的一些课程, 吃透了知识点完全可以写在简历上. 通常面试过程中针对项目的提问主要有: 亮点, 难点, 某个功能模块的考量, 组件复用, 鉴权, 还有针对项目技术栈如小程序/React/Flutter等的提问. 一定注意确保自己吃透项目的每个边角, 如小程序项目, 生命周期/基础架构/通信/WXS/原生能力/微信开放能力/与Hybrid或者普通H5区别等都要确保烂熟于心.
  • 框架, 建议针对性准备一个, 对另外一个熟悉常见问题. 以我为例, 主要准备了React, 包括setState机制/事件机制/Hooks/新旧生命周期/Fiber调度/性能优化, 而对于Vue只准备了如其MVVM架构是如何实现的问题. 另外一个常见的点就是比较这两个框架异同, 如数据的mutable, 整体重渲染与局部更新等.
  • 基础部分, JS/ES都必须非常熟悉, JS的闭包这一块, 推荐从执行上下文-调用栈-VO/AO-作用域链这里入手, 而不是死记常见的面试题之类的. 我面试的时候就给面试官讲了一遍VO/AO, 想象出了面试官嘴角微微上扬的画面??
    CSS部分, 由于我平时都是用的Ant Design, 所以这次也恶补了下CSS基础, 但不用准备太多, 大概就是下文提到的就够了.
  • Node, 应该大部分同学都用Node写过接口之类的, 面试主要针对Node适用场景/事件循环/内存管理等这一块, 所以也得好好准备下. 可以看一下Koa源码(推荐我写的那篇), 熟悉下洋葱模型.
  • 网络, 没啥好说的, 就是看! 但是不要光看网上的文章就满足了, 你得自己想想看面试官会怎么问, 比如https如何防范非法CA, CA链最长长度, TCP第三次握手断开了咋办与泛洪攻击...
  • 对前端的理解以及未来趋势看法, 这个通常在倒数一二轮面试问道, 直接讲你自己的理解就好了, 以我为例未来趋势主要讲了跨端方案/智能化/Serverless这几个方向.
  • 整体准备, 我的建议是真的不要报着背的心思, 完全当成轻松愉快的东西来看, 然后在思考中去扩展, 比如CSS3开启GPU加速的原理是什么, 为什么3d属性就能开启? 比如Node的内存管理新生代From空间和To空间什么时候不会交换,为什么, 其实真的前端的每一个知识点都是有趣好玩的, 只要你是真的热爱它.

以下就是全部知识点正文, 你也可在GitHub上阅读, 赏个star吧~

JavaScript基础

  • 常用设计模式

  • 装箱 / 拆箱 & 类型转换

  • 常用位运算

  • 原型

    • __proto__与prototype
    • Object.prototype
    • Function与Object
  • 闭包

    • 实现
    • 应用
    • 原理
    • 经典问题(setTimeout IIFE let)
  • 执行上下文 调用栈 作用域链

    • 变量对象(VO)与活动对象(AO)
  • 继承

    • 寄生组合式继承(组合+原型)
  • 事件循环

    • 浏览器UI渲染与事件循环?
    • async与await
    • Promise/A+规范
      • 立即resolved的Promise执行时机
  • 垃圾收集

    • 标记清除
    • 引用计数
      • 循环引用如何处理?
  • this

    • 作用 & 意义
    • 隐式丢失
    • 优先级
    • 箭头函数的this
  • 对象冻结

    • freeze
    • seal
  • Object.defineProperties() 与 descriptor

  • 模块化

    • ES Modules与CommonJS差异
    • 对循环引用的处理
  • 其他

    • caller / callee
    • typeof 与 Instanceof 原理
      • tyoeof null? (机器码)
    • 柯里化
      • 尾递归
    • 类数组
    • isNaN 和 Number.isNaN
    • Obejct.is()漏洞
      • React 使用的 shallowEqual() 对其进行的增强

HTML&CSS

  • 语义化

  • SEO

  • DTD <!DOCTYPE>

  • W3C与WHATWG

  • Html5新增API

  • DOM/BOM API

  • 常见布局

  • 优先级

  • 伪类与伪元素

  • 预处理器与后处理器

  • 盒模型

  • CSS3动画

    • GPU加速原理
  • 定位

    • 文档流

    • sticky

  • src & href

  • Flex

  • Grid

  • Rem与em

  • Flexible.js思路

  • BFC / IFC

  • 水平 / 垂直 / 水平垂直居中

  • Prefix

  • reset与normalize.css

  • 移动端

    • 像素比

    • 检测横屏

    • 图片模糊问题

    • IOS橡皮筋问题

    • 视口类型

    • Vw Vh

    • 1Px

基础手写/算法

  • ajax

  • bind / call / apply

  • debounce / throttle

  • instanceof

  • 深浅拷贝

  • promise

  • lazy man

  • new

  • 用setTimeout实现setInterval

  • 继承

    • 实现ES6 Class实质的继承
  • 冒泡 / 快排 / 选择 ...

  • 观察者与发布订阅模式

ES6

  • ES6的Class实质, 与ES5继承异同?

    • Babel编译结果
    • 为什么先super()?
  • Generator

    • 协程
    • yield
    • co模块
    • Thunk函数
  • Iterator

    • for...of
  • Symbol

    • 常用的内置接口
  • ES6 Module与CommonJS

  • Promise

    • 回调函数延迟绑定
    • 错误穿透
    • 状态机制
  • Async/Await 的原理

  • Decorator

  • Proxy

    • 为什么Vue抛弃了Object.defineProperty
    • 元编程
    • 常用方法
  • Reflect

    • 为什么需要它?
    • 与Proxy的结合
  • map set

    • map与对象互转

    • set与数组互转

    • weakMap weakSet

  • 其他新增API

  • 关于TC39的标准制定过程

    • Strawman
    • Proposal
    • Draft
    • Canidate
    • Finished
  • ES 7/8/9/10 /...

    • 可选链
    • null判断
    • 私有变量
    • ...

Node

  • 优缺点 适用场景

  • Node创建子进程的方式

    • spawn
    • exec
    • execFile
    • fork
  • npm install

    • dedupe
  • Buffer

  • Stream

  • Node的适用场景及原因

  • V8内存管理

    • 新生代与老生代机制
      • From空间与To空间
    • 标记清除与标记整理
      • 触发点
    • 增量标记
  • Cluster & IPC

    • child_progress
    • 主从模式
  • Node异步I/O & 进程池 & Libuv

  • 事件循环

    • timer
    • I/O
    • Idle prepare
    • poll
      • 阻塞
    • check
    • close CB
    • 每一阶段均有的nextTick与microTask
  • Koa

    • vs Express?

    • 中间件原理 与 洋葱模型

浏览器

  • 跨域与跨站

  • 强缓存与协商缓存

    • 优先级

    • 请求与响应中的缓存相关请求头

    • E-tag 与 Last-Modified

  • 从输入URL到页面呈现

    • 页面渲染中的不良现象

      • 白屏
      • FOUC
    • 图层树 绘制指令 绘制列表

      • 显示提升
      • 隐式提升(层爆炸)
    • 栅格化线程池 位图

    • 重绘 回流

    • DOM树与CSSOM树建树过程

      • 令牌化->建树
      • 样式收集
    • 阻塞

      • js & dom
      • css & js
      • async & defer
  • 操作DOM为什么慢

    • 互斥
  • cookie / session / token

    • Chrome80默认cookie samesite属性为Lax, 造成的影响?
      • 如何解决兼容性
    • 双令牌机制
    • cookie session_id
    • jwt机理
  • 本地存储

  • service worker

  • requesAnimationFrame

  • requestIdleCallback

  • 事件机制

    • 委托发生的阶段
    • IE的事件模型
    • 阻止事件与冒泡
    • addEventListener & useCapture
  • RESTFul规范

  • 跨域

    • JSONP 原理
    • Nginx 原理
    • CORS
      • Options预检
      • 简单 / 复杂 请求
      • 相关字段
  • 前端路由原理

    • hash
      • onHashChange
    • history
      • pushState
      • replaceState
      • onPopState
  • XSS

    • 文档型 & 反射型 & 存储型
    • httpOnly
    • 转义
    • CSP
  • XSRF

    • GET型 POST型 链接类型

    • 同源检测

      • origin
      • referer
    • axios的XSRF防御手段

    • samesite

  • Fetch & XHR对比

    • cookie
    • abort
    • onProgress

数据库

  • 脏读 / 幻读 / 不可重复读
  • 事务及边界
  • 索引

网络

  • 七层与五层模型
  • DNS查找机制
    • CDN CNAME
  • http1.1 -> http1
    • 身份认证
    • 断点续传(206状态码)
    • 缓存
    • keep-alive
  • http2 -> http1.1
    • 多路复用
    • 头部压缩
    • server-push
  • https 会话层机制?
    • 浏览器内置CA链
  • TCP 握手/挥手 过程中出错?
  • 泛洪攻击
    • RST包
  • TCP/UDP适用场景
    • QUIC协议
    • 为什么DNS使用UDP
  • TCP拥塞控制
    • 慢启动 & 拥塞避免
    • 快速重传 & 快速恢复
  • 正向代理与反向代理
  • Get与Post区别
    • 幂等性

进阶

框架及工具

TypeScript

  • type & interface
  • 泛型
  • 工具类型
  • 类型守护
  • 装饰器 / IOC

Git

  • git fetch
  • git rebase
  • git merge
  • git reset
    • hard
    • soft
    • mixed
  • git revert

Webpack & Parcel

  • compiler与compilation
  • HMR原理
  • 工作流程
  • Loader
    • 以Babel-Loader为例
  • Plugin
    • 事件流模型
  • 性能调优
    • 打包速率
    • 打包大小
    • 打包交互友好度
  • 异同

React

  • Immutable.JS

  • 生命周期

    • WillMount x
    • render
    • DidMount
      • 为什么数据获取要在这里? 而不是WillMount?
    • WillReceiveProps x
    • shouldComponentUpdate
    • WillUpdate x
    • render
    • DidUpdate x
    • 以下为新增
    • getDerivedStateFromProps
    • getSnapshotBeforeUpdate
    • getDerivedStateFromError
      • 与componentDidCatch如何搭配
  • 为什么要废弃掉这几个生命周期?

    • 为什么getDerivedStateFromProps是静态方法
  • Hooks

    • useEffect

    • useState

    • forwardRef & useRef & useImperativeHandle

  • Fiber

    • requestIdleCallback

    • 机制

    • reconciliation / commit

  • Redux

    • 中间件原理
  • setState

    • 原生事件->同步, 合成事件->异步, 为什么?
  • React实现的事件机制

  • V-Dom与Diff

    • 时间复杂度
  • 与Vue的比较

    • 约束 / 迎合
    • 思想

Vue

  • MVVM原理
    • Observer
    • Compile
    • Watcher

业务场景

  • 白屏问题排查
  • 骨架屏
  • 超长列表
    • requesAnimationFrame
    • 虚拟列表
  • 单点登录(SSO)
  • 埋点的原理
  • 扫码登陆
  • 大文件分片/完整性校验/断点续传/秒传/拖拽上传/粘贴上传

小程序

  • 基础架构

  • properties / data

  • behavior

  • DOM BOM如何禁止访问的?

  • 生命周期

  • 性能优化

  • vs PWA / H5 / Hybrid / 各种跨端方案

漫谈

测试

  • 单元测试
  • E2E
  • 混沌

工程化

  • 错误监控

  • 性能优化

  • 脚手架

  • 埋点

    • SPA应用
    • Hybrid应用
  • GraphQL & BFF & Apollo

    • vs RESTFul 优劣势
    • BFF意义, 解决了什么问题?
      • 接口清洗 聚合 ...
      • 带来的新问题
      • Serverless协作
    • Apollo生态圈的主要package
  • CI / CD, 自动化构建流程解决了什么问题?

  • Serverless

    • FaaS
    • BaaS
    • 小程序云函数思路
  • 前端趋势

    • 智能化
    • 跨端
      • 5G 物联网
      • Flutter 与 RN此类方案
      • 演进
    • 价值
      • 向后端侵袭
      • 对业务更熟悉
  • 工程化

    • 模块化
      • 以React为例, 你的组件模块化思路?
      • 项目开发模块化
    • 规范化
      • 各种各样的Lint
      • CR
      • 测试
      • ...
    • 系统化
      • 微服务
      • Serverless
      • 中间层
      • ...