Milo前端日记

# 前端学习路线

# 01_引言

我是上海某双非研究生，2023年7月毕业

# 计划前端学习路线

在2022年5月的时候大概把论文写的差不多了，感觉自己该准备找工作了，才发现我对开发一窍不通...

在 B站 看了 程序员鱼皮 (opens new window) 的 前端学习路线 (opens new window) ，以及他的其他视频，让我对前端燃起了兴趣。于是按照鱼皮的前端学习路线展开了我的前端学习之旅。

# 前端三件套

从2022年5月1日开始，花了一天时间，按照鱼皮的学习路线，计划好了自己要看的视频和文档顺序。由于此时我还是个啥也不懂的小白，所以从HTML&CSS入手，大概花了半个月（两个星期）看完了B栈上硅谷超哥的HTML&CSS，在超哥详细的解说下算是入门了吧，唯一遗憾的是超哥的视频比较早，CSS这里对Grid布局没有提及。由于很喜欢超哥的声音和节奏，又通过他的JS视频，又是半个月（两个星期），跟着敲和做笔记，算是入门了吧。

这里非常幸运的在视频评论区发现了 VectoryX (opens new window) 大佬的笔记，参考了他的HTML&CSS和JS，让我记笔记的时候如鱼得水！也学着他，第一次将记的笔记、敲的代码上传到Github上，以及将笔记放在语雀上方便在线浏览。

# React 框架

时间来到2022年6月1日，此时的我刚入门了HTML、CSS和JS基础，甚至JS的深入知识比如ES6、原型链、闭包什么的都没学习，在本科室友的推荐下直接看了尚硅谷天禹老师的视频。万幸的是，在天禹老师React全家桶视频里将用到的我没学过的知识大多重新讲了一遍，经过一个月的学习，React的学习也算入门了。

这里非常幸运的在视频评论区发现了 小丞同学 (opens new window) 的笔记，参考了他的React笔记，让我记笔记的时候如鱼得水！同时也学着他，我将之前记的笔记放在我用Vuepress+Github搭建的技术文档中，方便查看。

学完React，让我知道我在JS这里还有很多知识点没有覆盖到。

# 回顾前端学习路线

时间来到2022年7月9日，我又顺着鱼皮的前端学习路线整理了一下思路，不同于第一次看的时候一头雾水，我对路线中⭐✅的部分熟悉了很多，这都是老朋友，这使我更加坚定！此时的我学完了前端三件套，入门了React框架，跟着天禹敲了一遍，对React基础、React生命周期、React-router、Redux以及React-hooks都有了基本的了解。在我看了别人的面经后，我知道我目前掌握的知识不足以通过任何一家企业的面试。

哪里不会点哪里，从JS入手，通过阮一峰老师的《JavaScript教程》和《ES6教程》把之前的短板补齐；以牛客网校招前端工程师面试题为基础，结合 程序员山月 (opens new window)的前端常见面试题总结 (opens new window)，每天早上都刷面试题；缺项目就在 小丞同学 (opens new window) 的帮助下找到一个适合现在的我的项目。

# 秋招提前批

2022年7月9日 我得知字节秋招提前批已经开始了，到7月月底结束，便开始紧张的准备面试。不悔当初啊，为啥不早点开始学前端，只学了两个月，匆匆忙忙的开始刷面经，算法还没碰呢...

vSihbF.png

# 02_前端入门

学习前端基础三件套：HTML、CSS、JavaScript，以及ES6新特性，Vue/React框架二选一

# 1 我看的视频：

  1. HTML&CSS：B站尚硅谷Web前端零基础入门HTML5+CSS3基础教程 (opens new window)
  2. JavaScript基础：B站尚硅谷JavaScript基础&实战丨JS入门到精通全套完整版 (opens new window)
  3. React：尚硅谷React技术全家桶全套完整版（零基础入门到精通/男神天禹老师亲授） (opens new window)

# 2 我看的书籍：

  1. 《JavaScript 语言入门教程》

  2. 《ES6 标准入门》

# 3 我用的开发工具

工欲善其事，必先利其器

# 1 浏览器

  • ⭐ Chrome
  • ✅ Firefox
  • ✅ Edge

# 2 编辑器

  • ⭐ VSCODE
  • ⭐ Sublime Text
  • ✅ WebStorm

# 3 文档笔记（Markdown语法）

  • ⭐ Typora（89💰）
  • ✅ Vuepress + Github （搭建自己的技术文档）
  • ✅ 语雀 （在线笔记）

# ⭐ HTML

用于定义一个网页结构的基本技术

我的学习方式：视频入门+文档巩固

  • ⭐ 基本语法
  • ⭐ 标签
    • 分区 div
    • 标题 h1~h6
    • 段落 p
    • 图像 img
    • 列表 ul / ol
    • 超链接 a
    • 表单 form
    • 表格 table
    • 框架 iframe
  • ⭐ 属性
  • ✅ HTML5 特性
    • 语义化标签
    • 浏览器支持
    • 多媒体标签
    • Canvas 画布
    • 本地存储
      • localStorage
      • sessionStorage
    • Web Workers
    • 应用缓存（Cache Manifest）

# ⭐ CSS

层叠样式表，用于设计风格和布局

我的学习方式：视频入门+文档巩固

  • ⭐ 基本语法
  • ⭐ 引入方式
    • 行内样式
    • 内部样式表
    • 外部样式表
  • ⭐ 选择器
    • 通用选择器
    • 标签选择器
    • id 选择器
    • class 选择器
    • 属性选择器
    • 派生选择器
      • 后代选择器
      • 子元素选择器
      • 相邻兄弟选择器
    • 组合选择器
    • 伪选择器
    • 选择器优先级
  • ⭐ 属性
    • 单位
      • px
      • em
      • rem
      • vw
      • vh
    • 背景
    • 文本
    • 字体
    • 列表
    • 表格
  • ⭐ 文档流
    • 标准流
    • 浮动流
    • 定位流
  • ⭐ 内联元素 / 块状元素
  • ⭐ 盒子模型
    • content
    • padding
    • border
    • margin
  • ⭐ 浮动
    • 设置浮动 float
    • 清除浮动 clear
  • ⭐ 定位
    • static
    • absolute
    • relative
    • fixed
    • sticky
  • ⭐ 层叠规则
  • ✅❗ BFC 和 IFC 机制
  • CSS3
    • ⭐ 响应式布局
      • 媒体查询
      • Flex 布局
      • Grid 布局
      • 瀑布流
    • 动画
    • 过渡
    • 渐变
    • 背景
    • 边框
    • 圆角
    • 字体
    • 2D / 3D 转换

# ⭐ JavaScript

具有函数优先的轻量级、解释型或即时编译型的编程语言

我的学习方式：视频入门+文档巩固

  • ⭐ 基本语法
  • ⭐ 数据类型
    • 值类型
      • 字符串 String
      • 数组 String
      • 布尔 Boolean
      • 空值 Null
      • 未定义 Undefined
      • Symbol
    • 引用类型
      • 对象 Object
      • 数组 Array
      • 函数 Function
  • ✅ 数据类型转换
  • ✅ 函数
    • ⭐ 概念
    • ⭐ 自定义函数
    • 调用方式
      • ⭐ 全局调用
      • 构造函数调用
      • 函数方法调用
      • call
      • apply
    • ✅❗ 闭包
  • ✅ 对象
    • 概念
    • ✅❗ this
    • ✅❗ 原型链和继承
    • 常用对象
      • 数字 Number
      • 字符串 String 对象
      • 日期 Date 对象
      • 数组 Array
      • 布尔 Boolean
      • 算数 Math
    • 自定义对象
  • ✅❗作用域（作用域链）
  • ✅ BOM API
  • ⭐ DOM API
  • ⭐ JSON
  • ⭐ Ajax
  • ✅ JavaScript 执行机制

# ✅ ES6+特性

新引入的 JavaScript 语法特性

我的学习方式：文档学习+巩固

  • ✅ let 和 const
  • ✅ 变量解构赋值
  • ✅ 对象扩展和新增方法
  • Symbol
  • Set 和 Map 数据结构
  • ⭐❗ Promise & async / await 异步编程
  • Generator 函数异步编程

# 03_巩固基础

学习前端、计算机、软件开发相关基础，并复习巩固上阶段学到的前端三件套

我的学习方法：这些在本科课程中学习过，所以我放到学完 React 后去复习了，主要是巩固之前学到的前端三件套，把相应的笔记做知识分类，放到Vuepress+Github搭建的技术文档中日常翻看，以及阮一峰老师的JS和ES6不断巩固。⭐JS看多少遍都不算多，因为它是核心！！！

# 前端基础知识

为了学 React 打下坚实的基础，先跳过也行。但最好过一遍，有助于理解React学习过程中的知识点

  • ✅ 互联网
  • ⭐ 域名
  • ⭐ DNS
  • ⭐ 服务器
  • ✅ 浏览器
    • 浏览器 DOM 事件流 / 事件委托
    • ⭐ 浏览器加载顺序
    • ⭐ 浏览器渲染过程
    • 浏览器事件循环
    • 浏览器同源策略
    • ✅❗ 跨域解决方案
    • 浏览器缓存
    • 控制台调试技巧
  • ✅ HTTP
    • ✅❗ HTTP 请求过程
    • 常见 HTTP 协议
      • HTTP 1.0
      • ⭐ HTTP 1.1
      • HTTP 2
      • HTTP 3
    • ⭐ HTTP 请求类别
    • ⭐ 常见状态码
      • 1xx 信息
      • 2xx 成功
      • 3xx 重定向
      • 4xx 客户端错误
      • 5xx 服务器错误
    • WebSocket
    • ⭐ Cookie
    • Session
    • ⭐ HTTPS

# 计算机基础

# ✅ 算法和数据结构

  • ⭐ 时间 / 空间复杂度分析
  • ⭐ 数据结构
    • 数组
    • 字符串
    • 队列
    • 栈
    • 链表
    • 集合
    • 哈希表
    • 二叉树
  • 算法
    • 排序
    • 双指针
    • 查找
    • 分治
    • 动态规划
    • 递归
    • 回溯
    • 贪心
    • 位运算
    • DFS
    • BFS
    • 图

# ✅ 计算机网络

  • HTTP 协议
  • 网络模型
  • UDP / TCP 协议

# ✅ 操作系统

  • 进程、线程
  • 进程 / 线程间通讯方式
  • 进程调度算法
  • 进程 / 线程状态
  • 死锁
  • 内存管理

# 软件开发基础

# ✅ 设计模式

  • 单例模式
  • 代理模式
  • 工厂模式
  • 装饰者模式
  • 观察者模式
  • 策略模式
  • 门面模式

# ⭐ Git 版本控制

  • 常用命令

# ✅ Linux 服务器

  • 常用命令

# ✅ 正则表达式

# 04_前端工程化

前端工程化是实用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，其主要目的是为了提高开发工程中的开发效率，减少不必要的重复工作时间。

我的学习方法：视频学习+文档巩固 React框架，当然你也可以学Vue

# ⭐ 开发框架

# ⭐ React

  • React 基础
  • ⭐❗ React 生命周期
  • React DOM
  • React Router
  • Redux
  • MobX
  • ✅❗ React Hooks

# ⭐ Vue

  • Vue Router
  • Vuex

# ⭐ CSS框架

我还没学。。。

  • ✅ BootStrap
  • ⭐ Tailwind CSS

# ✅ Svelte

我还没学。。。

# ✅ UmiJS

我还没学。。。

# ⭐ 脚手架

快速生成新项目的目录模版，提升开发效率和开发舒适度

  • ⭐ create-react-app
  • Vue CLI
  • Yeoman

# ⭐ 研发流程

  1. 技术选型
  2. 初始化
  3. 开发
  4. 本地测试
  5. 代码提交
  6. 编译、打包、构建
  7. 部署
  8. 集成测试
  9. 发布上线
  10. 监控运维

# ⭐ 代码托管

集中存储、备份你的代码，还能和团队成员协作开发

  • ⭐ GitHub
  • ✅ Gitee
  • GitLab

# ✅ Node.JS

一个开源与跨平台的 JavaScript 运行时环境，它是一个可用于几乎任何项目的流行工具！

我的学习方式：我还没系统学习过。。。只是会用npm、yarn而已。。

# ⭐ 包管理

用于安装 Node.js 的扩展、工具等。

  • ⭐ npm
  • ⭐ yarn

# ⭐ 开发框架

  • Express
  • Koa
  • Egg

# 封装库

# ⭐ 组件库

  • ⭐ Ant Design（React）
  • ✅ LayUI
  • ⭐ ElementUI（Vue）
  • ✅ VantUI（Vue）

# 数据可视化

  • ✅ AntV
  • Apache ECharts
  • HighCharts
  • D3.js

# 组件（插件）

  • 富文本编辑器
  • 弹窗
  • 轮播图

# 工具库

  • ✅ jQuery
  • ✅ Lodashg
  • ✅ Axios
  • 事件处理 Moment.js

# 动效库

  • ✅ Animate.css
  • Ant Motion

# 字体图标库

  • ⭐ IconFont
  • ✅ Font Awesome
  • IconPark

# ⭐ 前端架构设计

一系列工具和流程的集合，旨在提升前端代码的质量，并实现高效可持续的工作流

  • 模块化
  • 组件化
  • ✅ MVVM
  • 设计原则
  • ⭐ SPA 单页应用
  • ⭐ 多页应用
  • ✅ 前端路由
  • PWA
  • 有损服务

# ✅ 服务端渲染

在服务端渲染 HTML 页面的模式

  • Next.js (React)
  • Nuxt.js (Vue)

# BFF

Backend For Frontend（服务于前端的后端），就是服务器设计API时会考虑前端的使用，并在服务器端直接进行业务逻辑的处理

  • GraphQL

# ✅ 微前端

将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块，从而解决庞大的一整块后端服务带来的变更与扩展方面的限制

  • qiankun
  • single-spa

# CSS in JS

用 JavaScript 来写 CSS

  • 内联样式
  • 声明样式
  • 引入样式

# ⭐ CSS 模块化

  • ⭐ CSS Modules
  • ✅ styled-components
  • ✅Styled JSX
  • Emotion

# ✅ 开发调试

本地开发时热更新，提升开发效率

  • webpack-dev-server
  • serve

# 内网穿透

将内网外网通过nat隧道打通，让内网的网站、数据可以让外网访问

  • Ngrok
  • NATAPP

# ⭐ CSS 预编译

使用新的扩展语言以增强 CSS 的能力，并通过预编译的方式将其转换为浏览器认识的 CSS 代码

  • ⭐ SASS

  • ✅ PostCSS

  • Stylus

  • LESS

# 测试

# 测试分类

  • ⭐ UT 单元测试
  • SIT系统集成测试
  • E2E 端到端测试
  • UAT 用户验收测试

# ✅ Mock

通过随机数据，模拟各种场景，增加单元测试的真实性

  • Mock.js

# ✅ 测试框架

  • ✅ Jest
  • Enzyme
  • ✅ Puppeteer（Headless Browser）
  • Mocha
  • Jasmine

# ✅ 代码质量

# 开发规范

依照规范写出的代码会更加合理

GitHub：https://github.com/BingKui/javascript-zh (opens new window)

  • CSS Style Guide
  • JavaScript Guide

# 类型校验

  • ✅ TypeScript

# 代码检查

  • ESLint
  • StyleLint

# 代码风格

根据配置自动格式化代码，统一风格

  • Prettier

# 提交规范

  • 约定式提交

# 提交检查

在提交代码时触发一些操作，比如检查代码的风格等

  • Pre-commit
  • husky

# 构建工具

# 自动化构建

按照配置好的流程自动打包构建项目，提高团队的开发效率，降低项目的维护难度

  • Gulp
  • ✅ npm script
  • Grunt

# 打包工具

将各种零散的资源文件打包为可在浏览器等环境运行的代码

  • ⭐ Webpack
  • ✅ Vite
  • Roullup
  • Parcel
  • Snowpack

# CI / CD

通过在应用开发阶段引入自动化来频繁向客户交付应用

  • GitLab CI
  • ✅ Jenkins

# 部署

# ⭐ Web 服务器

# ⭐ Nginx

高性能的 HTTP 和反向代理 web 服务器

  • 反向代理
  • 解决跨域
  • 改写请求
# ✅ Apache

# 容器

# ✅ Docker

容器是一个标准化的软件单元，它将代码及其所有依赖关系打包，以便应用程序从一个计算环境可靠快速地运行到另一个计算环境。Docker容器镜像是一个轻量的独立的可执行的软件包。包含程序运行时候所需的一切：代码、运行时间、系统工具、系统库和设置。

参考教程：https://vuepress.mirror.docker-practice.com (opens new window)

  • Dockerfile
# 部署策略
  • 全量发布
  • 蓝绿部署
  • 滚动发布
  • 灰度发布

# 监控告警

  • 前端埋点
  • 错误监控
  • 性能监控
  • 行为监控

# 05_前端优化

通过分析和优化手段，提高网站的性能和用户体验

# ✅ 性能优化

# 性能指标

用于衡量一个 Web 页面的性能

  • FP（First Paint）

从开始加载 到 浏览器首次绘制像素到屏幕上的时间，也就是页面在屏幕上首次发生视觉变化的时间

  • FCP（First Contentful Paint）

浏览器首次绘制来自 DOM 的内容的时间

  • FMP（First Meaningful Paint）

页面的主要内容绘制到屏幕上的时间

  • FSP（First Screen Paint）

页面从开始加载到首屏内容全部绘制完成的时间，用户可以看到首屏的全部内容

  • TTI（Time to Interactive）

表示页面第一次完全达到可交互状态的时间点，浏览器已经可以持续性的响应用户的输入

# 优化手段

  • 性能监控
  • 样式优化
  • JavaScript 优化
    • 防抖
    • 节流
  • 代码分割
  • 资源压缩
  • 打包优化
  • 服务器优化
  • 缓存优化
    • Service Worker
  • 动画性能
  • dns-prefetch
  • Lazy loading
  • 优化启动性能
    • 异步化
  • 渲染优化
  • 网络优化
  • 移动端性能优化
  • ✅ CDN

内容分发网络，是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

# 用户体验

  • 设计系统
  • 骨架屏

# ✅ 兼容性

# 浏览器兼容性

  • ✅ Babel
  • normalize.css
  • html5shiv.js
  • respond.js
  • Polyfill

# 屏幕分辨率兼容性

# 跨平台兼容性

# SEO

搜索引擎优化，利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名

资源：https://ziyuan.baidu.com/cooperateresource/index (opens new window)

  • robots.txt
  • description
  • keywords
  • SiteMap
  • HTML 标签优化
  • 站内链接建设
  • 友情链接

# ✅ 安全

  • ⭐ XSS
  • CSRF
  • 反爬虫
  • SQL注入
  • DDoS

# 06_前端生态

如今，前端领域的范围越来越广，出现了更多前端工程师需要了解和关注的技术

# 静态站点构建

# 开发

  • React Static

# 博客

  • ✅ Hugo（构建贼快，适合写博客）
  • Halo
  • Gatsby.js
  • Docusaurus

# 文档

  • ✅ VuePress（适合写技术文档）
  • Jekyll
  • Docsify
  • Dumi

# ✅ 大前端

前端技术的融合更加紧密，应用的领域也更加广泛，前端领域的内容呈现多样化，除了网站外，还可以用前端技术跨平台开发 Android、iOS、小程序、虚拟现实、增强现实等。

# 小程序

  • 原生
  • WebView

# 移动应用

  • Hybrid
  • WebView
  • ✅ React Native
  • Flutter

# 移动应用打包

  • Weex
  • Cordova
  • Phonegap
  • lonic

# 跨端开发框架

  • ✅ uni-app
  • ✅ Taro
  • Flutter
  • Chameleon
  • Wepy
  • Rax

# 桌面应用

  • Electron
  • NW.js
  • Pronton Native

# ✅ Serverless

一种构建和管理基于微服务框架的完整流程，允许你在服务部署级别而不是服务器部署级别来管理你的应用部署，你甚至可以管理某个具体功能或端口的部署，这就能让开发者快速迭代，更快速地开发软件。

# ✅ 云开发

云端一体化的后端云服务，采用 Severless 架构，免去了移动应用构建中繁琐的服务器搭建和运维。同时云开发提供的静态托管、命令行工具（CLI）、Flutter SDK 等能力降低了应用开发的门槛。使用云开发可以构建完整的小程序/小游戏、H5、Web、移动 APP 等应用

  • ✅ 腾讯云云开发
  • 阿里云云开发

# 低代码

无需编码（零代码）或通过少量代码就可以快速生成应用程序的开发平台。通过可视化进行应用程序开发的方法，使具有不同经验水平的开发人员可以通过图形化的用户界面，使用拖拽组件和模型驱动的逻辑来创建网页和移动应用程序。

  • 腾讯云低码
  • 阿里宜搭

# 07_前端求职

求职是一个漫长的过程，建议拉长战线，越早准备越好

# 准备简历

根据想要面试的岗位的 JD 来学习技术和写简历

  • 木及简历

一款我很喜欢，而且经常用的在线 Markdown 简历制作工具，选那个很简约的模版

链接：https://www.mujicv.com/ (opens new window)

# 刷面试题

  • 牛客网

（其实就是拿牛客网知识点作为大纲参考，内容就那样）

链接：校招前端工程师面试题 (opens new window)

  • 程序员山月

我很喜欢程序员山月的大厂面试题每日一题，题目很多

链接：https://q.shanyue.tech/fe/ (opens new window)

  • CavsZhouyou/Front-End-Interview-Notebook

在 GitHub 上看到的非常nice的前端面试题整理，太棒了！

GitHub：https://github.com/CavsZhouyou/Front-End-Interview-Notebook (opens new window)

  • vortesnail大佬写的前端复习计划

复习计划写的很清晰，路线可参考

掘金：https://juejin.cn/post/7061588533214969892 (opens new window)

# 看面经

  • 牛客网

# 模拟面试

  • 程序员山月

山月大佬有模拟面试的活动

# 08_前端未来

前端未来可能的发展趋势和热门技术

  • WebAssembly
  • 智能 UI
  • React Sever Component
  • CSS Houdini

# WebComponents

  • HTML templates（HTML 模版）
  • Custom elements（自定义元素）
  • Shadow DOM（影子DOM）

# 优秀前端人的特质

  • 深厚的功底
  • 良好的编码习惯
  • 发现问题的洞察力
  • 思维灵活，善于思考
  • 追求技术，紧跟前沿
  • 有创造力，有行动力
  • 追求用户体验
  • 时刻保持好奇
  • 全栈意识
  • 解决问题的能力强
  • 懂得合作和高效沟通
  • 重视工作，同样重视生活责任心和全局观
  • 个人的进步能带动团队的进步

前端学习计划(B站视频) →