前端路线

免费且实用的 前端 刷题(面经大全)网站,👉点击跳转到网站

建议先观看视频导读:https://www.bilibili.com/video/BV1nh411e7oG/

可根据知识点前的符号按需选学,并获取知识点描述和学习资源。

  • ⭐️ 必学(追求速成)
  • ✅ 建议学(重要知识)
  • ❗ 面试重点
  • ❌ 一般没必要学习
  • 💬 描述
  • 📚 资源
  • 🎯 目标

一、前端入门

⭐️ 开发工具

  • 💬 描述:工欲善其事,必先利其器。

浏览器

  • ⭐️ Chrome
  • ✅ Edge
  • ✅ Firefox
  • ❌ Opera
  • Safari

编辑器

  • ⭐️ VSCode
  • ✅ WebStorm
  • Atom
  • ⭐️ Sublime Text
  • HBuilder X
  • 记事本
  • 在线 IDE

文档笔记

  • ✅ Markdown 语法
  • ✅ Typora
  • 在线笔记
    • 语雀
    • 腾讯文档
    • 石墨文档
    • 印象笔记
  • Mdnice

⭐️ HTML

  • 💬 描述:用于定义一个网页结构的基本技术。
  • 📚 资源:https://developer.mozilla.org/zh-CN/docs/Learn/HTML
  • ⭐️ 基本语法
  • ⭐️ 标签
    • 分区 div
    • 标题 h1 ~ h6
    • 段落 p
    • 图像 img
    • 列表 ul /ol
    • 超链接 a
    • 表单 form
    • 表格 table
    • 框架 iframe
  • ⭐️ 属性
  • ✅ HTML5 特性
    • 语义化标签
    • 浏览器支持
    • 多媒体标签
    • Canvas 画布
    • ❌ 内联 SVG
    • 本地存储
      • localStorage
      • sessionStorage
      • ❌ Web SQL
    • Web Workers
    • 应用缓存(Cache Manifest)
    • 无障碍

⭐️ CSS

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

⭐️ JavaScript

  • 💬 描述:具有函数优先的轻量级,解释型或即时编译型的编程语言。
  • 📚 资源:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
  • ⭐️ 基本语法
  • ⭐️ 数据类型
    • 值类型
      • 字符串 String
      • 数组 Number
      • 布尔 Boolean
      • 空值 Null
      • 未定义 Undefined
      • Symbol
    • 引用类型
      • 对象 Object
      • 数组 Array
      • 函数 Function
  • ✅ 数据类型转换
  • ✅ 函数
    • ⭐️ 概念
    • ⭐️ 自定义函数
    • 调用方式
      • ⭐️ 全局调用
      • 构造函数调用
      • ⭐️ 函数方法调用
      • apply
      • call
    • ✅❗ 闭包
  • ✅ 对象
    • 概念
    • this
    • 原型链和继承
    • 常用对象
      • 数字 Number
      • 字符串 String 对象
      • 日期 Date 对象
      • 数组 Array
      • 布尔 Boolean
      • 算数 Math
    • 自定义对象
  • ✅❗ 作用域(作用域链)
  • ✅ BOM API
  • ⭐️ DOM API
  • ⭐️ JSON
  • ⭐️ Ajax
  • ✅ JavaScript 执行机制

✅ ES6+ 特性

  • 💬 描述:新引入的 JavaScript 语法特性。
  • 📚 资源:ES6 入门教程 https://es6.ruanyifeng.com/
  • let 和 const
  • 变量解构赋值
  • 对象扩展和新增方法
  • Symbol
  • Set 和 Map 数据结构
  • ⭐️❗ Promise & async /await 异步编程
  • Generator 函数异步编程

二、巩固基础

前端基础知识

  • ✅ 互联网
  • ⭐️ 域名
  • ⭐️ 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 服务器

  • 常用命令

✅ 正则表达式

三、前端工程化

  • 💬 描述:前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化,其主要目的为了提高开发过程中的开发效率,减少不必要的重复工作时间。
  • 📚 资源
  • 🎯 目标:至少学会一门主流的前端开发框架(Vue / React),并配合脚手架、组件库、工具等从 0 开始独立搭建并开发一个完整的前端网站,可以试着仿一些知名站点。要求遵循企业开发规范,将项目代码提交到代码仓库中,并独立发布上线,供他人访问。此外,建议抓住机会参与一些团队项目,感受团队开发模式和前端工程化的优势。

⭐️ 研发流程

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

⭐️ 代码托管

  • 💬 描述:集中存储、备份你的代码,还能和团队成员协作开发。
  • ⭐️ GitHub
  • Gitee
  • GitLab

✅ Node.JS

⭐️ 包管理

  • 💬 描述:用于安装 Node.js 的扩展、工具等。
  • ⭐️ npm
  • ⭐️ yarn
  • ❌ bower
  • ✅ npx

开发框架

  • Express
  • Koa
  • Egg

开发框架

  • 💬 描述:解决特定的问题,提高开发效率、简化我们的代码复杂度。

⭐️ CSS 框架

  • ✅ BootStrap
  • ⭐️ Tailwind CSS

⭐️ JavaScript 框架

⭐️ Vue
  • Vue Router
  • Vuex
⭐️ React
  • React DOM
  • React Router
  • Redux
  • MobX
  • React Hooks
❌ Angular
  • RxJS
  • NgRx
✅ Svelte
✅ UmiJS

封装库

⭐️ 组件库

  • ✅ LayUI
  • ⭐️ ElementUI(Vue)
  • ✅ VantUI(Vue)
  • ⭐️ Ant Design(React)
  • Material UI

数据可视化

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

组件(插件)

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

工具库

  • ✅ jQuery
  • ✅ Lodash
  • ✅ Axios
  • 时间处理 Moment.js

动效库

  • ✅ Animate.css
  • Ant Motion

字体图标库

  • ⭐️ IconFont
  • IconPark
  • Font Awesome

⭐️ 脚手架

⭐️ 前端架构设计

  • 💬 描述:一系列工具和流程的集合,旨在提升前端代码的质量,并实现高效可持续的工作流。
  • 模块化
  • 组件化
  • ✅ MVVM
  • 设计原则
  • ⭐️ SPA 单页应用
  • ⭐️ 多页应用
  • ✅ 前端路由
  • PWA
  • 有损服务

✅ 服务端渲染

BFF

  • 💬 描述:Backend For Frontend(服务于前端的后端),就是服务器设计 API 时会考虑前端的使用,并在服务端直接进行业务逻辑的处理。
  • 📚 资源:https://www.jianshu.com/p/eb1875c62ad3
  • GraphQL

✅ 微前端

  • 💬 描述:将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块,从而解决庞大的一整块后端服务带来的变更与扩展方面的限制。
  • 📚 资源:https://zhuanlan.zhihu.com/p/96464401
  • qiankun
  • single-spa

CSS in JS

⭐️ 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

✅ 代码质量

开发规范

类型校验

  • TypeScript

代码检查

  • ESLint
  • StyleLint

代码风格

  • 💬 描述:根据配置自动格式化代码,统一格式。
  • Prettier

提交规范

  • 约定式提交

提交检查

  • 💬 描述:在提交代码时触发一些操作,比如检查代码的风格等。
  • pre-commit
  • husky

构建工具

自动化构建

  • 💬 描述:按照配置好的流程自动打包构建项目,提高团队的开发效率,降低项目的维护难度。
  • Gulp
  • ✅ npm script
  • Grunt

打包工具

  • 💬 描述:将各种零散的📚 资源文件打包为可在浏览器等环境运行的代码。
  • ⭐️ Webpack
  • ✅ Rollup
  • ✅ Vite
  • Parcel
  • Snowpack

CI / CD

  • 💬 描述:通过在应用开发阶段引入自动化来频繁向客户交付应用。
  • GitLab CI
  • ✅ Jenkins

部署

⭐️ Web 服务器

⭐️ Nginx
✅ Apache

容器

✅ Docker
  • 💬 描述:容器是一个标准化的软件单元,它将代码及其所有依赖关系打包,以便应用程序从一个计算环境可靠快速地运行到另一个计算环境。Docker 容器镜像是一个轻量的独立的可执行的软件包。包含程序运行的时候所需的一切:代码,运行时间,系统工具,系统库和设置。
  • 📚 资源:Docker 从入门到实践 https://vuepress.mirror.docker-practice.com/
  • Dockerfile
Kubernetes

部署策略

  • 全量发布
  • 蓝绿部署
  • 滚动发布
  • 灰度发布

监控告警

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

四、前端优化

  • 💬 描述:通过分析和优化手段,提高网站的性能和用户体验。
  • 🎯 目标:实践前端优化方法,从多个方面优化自己做过的项目,最好能将优化后的网站与原网站进行对比,得到一些数据和体验上的明显提升。

✅ 性能优化

性能指标

  • 💬 描述:用于衡量一个 Web 页面的性能。
  • 📚 资源:https://juejin.cn/post/6844904153869713416
  • FP(First Paint)
    • 💬 描述:从开始加载到浏览器首次绘制像素到屏幕上的时间,也就是页面在屏幕上首次发生视觉变化的时间。
  • FCP(First Contentful Paint)
    • 💬 描述:浏览器首次绘制来自 DOM 的内容的时间。
  • FMP(First Meaningful Paint)
    • 💬 描述:页面的主要内容绘制到屏幕上的时间。
  • FSP(First Screen Paint)
    • 💬 描述:页面从开始加载到首屏内容全部绘制完成的时间,用户可以看到首屏的全部内容。
  • TTI(Time to Interactive)
    • 💬 描述:表示网页第一次完全达到可交互状态的时间点,浏览器已经可以持续性的响应用户的输入。

优化手段

  • 性能监控
    • Performance API
  • 样式优化
  • JavaScript 优化
    • 防抖
    • 节流
  • 代码分割
  • 📚 资源压缩
  • 打包优化
  • 服务器优化
  • 缓存优化
    • Service Worker
  • 动画性能
  • dns-prefetch
  • Lazy loading
  • 优化启动性能
    • 异步化
  • 渲染优化
  • 网络优化
  • 移动端性能优化
  • ✅ CDN
    • 💬 描述:内容分发网络,是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。
    • 📚 资源:BootCDN https://www.bootcdn.cn/

用户体验

  • 设计系统
  • 骨架屏

✅ 兼容性

浏览器兼容性

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

屏幕分辨率兼容性

跨平台兼容性

SEO

  • 💬 描述:搜索引擎优化,利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。
  • 📚 资源:百度搜索📚 资源平台 https://ziyuan.baidu.com/cooperateresource/index
  • robots.txt
  • description
  • keywords
  • SiteMap
  • HTML 标签优化
  • 站内链接建设
  • 友情链接

✅ 安全

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

五、前端生态

  • 💬 描述:如今,前端领域的范围越来越广,出现了更多前端工程师需要了解和关注的技术。
  • 🎯 目标:能用学到的前端技术去做更多的事情,比如开发个人博客、文档网站、小程序、APP 等。

⭐️ 静态站点构建

开发

  • React Static

博客

  • ✅ Gatsby.js
  • ✅ Docusaurus
  • Hugo
  • Hexo

文档

  • JekyII
  • ⭐️ Docsify
  • VuePress
  • ✅ Dumi

✅ 大前端

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

移动应用

  • Hybrid
  • WebView
  • React Native
  • Flutter

移动应用打包

  • Weex
  • Cordova
  • Phonegap
  • Ionic

桌面应用

  • Electron
  • NW.js
  • Proton Native

小程序

  • 原生
  • WebView

跨端开发框架

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

移动端调试

  • Chrome Dev Tools
  • Android Simulator
  • IOS Simulator

✅ Serverless

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

✅ 云开发

  • 💬 描述:云端一体化的后端云服务 ,采用 Serverless 架构,免去了移动应用构建中繁琐的服务器搭建和运维。同时云开发提供的静态托管、命令行工具(CLI)、Flutter SDK 等能力降低了应用开发的门槛。使用云开发可以构建完整的小程序 / 小游戏、H5、Web、移动 App 等应用。
  • ✅ 腾讯云云开发
  • 阿里云云开发

低代码

  • 💬 描述:无需编码(零代码)或通过少量代码就可以快速生成应用程序的开发平台。通过可视化进行应用程序开发的方法,使具有不同经验水平的开发人员可以通过图形化的用户界面,使用拖拽组件和模型驱动的逻辑来创建网页和移动应用程序。
  • 腾讯云低码
  • 阿里宜搭

六、前端求职

  • 💬 描述:求职是一个漫长的过程,建议拉长战线,尽早准备。
  • 🎯 目标:找到理想的工作。

流程

简历

  • 超级简历

面试题库

面经

面试实战

七、前端未来

  • 💬 描述:前端未来可能的发展趋势和热门技术。
  • 🎯 目标:关注前沿,持续进步。
  • WebAssembly
  • 智能 UI
  • React Server Component
  • CSS Houdini

WebComponents

  • HTML templates(HTML 模板)
  • Custom elements(自定义元素)
  • Shadow DOM(影子 DOM)

优秀前端人的特质

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

学习资源

前端资讯

技术博客

学习要点

  • 前期学习以培养兴趣为主,不要过于追求深层理解。
  • 前端学习不能靠死记硬背,要多敲代码、多做项目实践。
  • 不要急于求成,踏实积累才是硬道理。

本文章转自网络(原作者: 海拥)