大前端知识点概览

前端知识图谱

• 知识图谱
• MDN

工程必备技能

深入前端，服务端也有了解

1. 代码逻辑梳理
2. 前端需求排期
3. 开发完成一个需求的基本过程（包含git的基本使用）
4. 前端代码调试

   1. 新手向：前端程序员必学基本技能——调试JS代码
   2. debug-----debugger语句

5. 放量
6. 使用Postman模拟后端接口

一、html+css

• html，css和js相关认识：

  前端页面由结构层HTML，表示层CSS，行为层JS这三层构成

  网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”

  网页的表示层（presentation layer） 由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。

  网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

1. html基础

2. css基础
   

3. html+css基础面试题

二、javascript + typescript

1. BOM / DOM相关知识点

2. js进阶知识点

   扩展：

   1. Math.round()，Math.ceil()，Math.floor()的区别
   2. JavaScript 实用工具函数
   3. javascript从编译到执行
      参考资料
   4. JavaScript中的内置对象，本地对象，宿主对象分别是什么

3. es6知识点

4. js模块化

5. es7~es11知识点

6. typescript

7. 设计模式

javascript ⇒ ‘三座大山’：设计模式、数据结构、基础算法 ⇒ 开发框架的设计思想、核心原理、最佳实践 ⇒ 项目工程化

三、前端基础

1. 客户端存储

   客户端存储

   cookie详解

   前端用户登录

2. 客户端发送请求的技术 ---- ajax&axios / fetch&umi-request

3. 跨域问题

   跨域解读

4. 计算机网络

5. 浏览器工作原理

   * 图解 Google V8

   * V8基础学习一

   * V8基础学习二

   * 浏览器工作原理与实践

四、前端框架

1. vue2.0指南

2. vue3.0指南

3. react指北

4. 微信小程序

五、前端工程化

前端工程化体系包括：

1. 技术架构 — 开发项目所用到的技术栈，比如vue + element、react + antd等
2. 统一规范 — 编码规范、提交代码规范等等，比如eslint、husky等
3. 测试、部署、监控 — 单元测试、自动化测试、自动化部署、埋点与监控
4. 性能优化
5. 模块化重构 — 方便后期需求迭代

webpack不等于前端工程化，webpack只是一种实现前端工程化的途径，前端构建工具的演变顺序：grunt->gulp->webpack->vite

0. webpack与vite

1. webpack5

   * 《深入浅出的webpack》

   * 滴滴webpack系列总览

   * webpack常见面试题

   * webpack构建流程

2. vite
   vite官网
   什么是vite？—— 是Vue团队打造的新一代前端构建工具。

   vite对比webpack的优势如下：

   1. 开发环境中，无需打包操作，可快速的冷启动。
   2. 轻量快速的热重载（HMR）。
   3. 真正的按需编译，不再等待整个应用编译完成。

   webpack构建 与 vite构建对比图
   
   webpack构建，是将所有资源都打包好，再上线
   
   而Vite有点按需加载的意思

脚手架

vue-cli等等

1. 单元测试

2. 自动化测试

3. 自动化部署

4. 埋点与监控

5. 前端性能优化

• 前端性能优化原理与实践

• 前端性能优化之雅虎35条军规

• 微信小程序性能优化

• 微信小游戏客户端逻辑层性能优化

• 写给中高级前端关于性能优化的9大策略和6大指标 | 网易四年实践

• 工作中如何进行前端性能优化(21种优化+7种定位方式)

六、其他

1. 低代码搭建

aPaaS

2. 微前端

微前端

3. 跨端

跨端 ： 【2万字长文】深入浅出主流的几款小程序跨端框架原理 — taro2和taro3、uni-app…

跨端能力建设

Electron

flutter

5. serverless

serverless

6. 前端智行化

前端智行化

阿里前端智行化

7. node

node基础与相关框架
bff

七. 前端经典书籍

《javascript高级程序设计》第四版
《es 6 标准入门》
《JavaScript 函数式编程指南》
《JavaScript 设计模式》
《深入理解 TypeScript》
极客时间的专栏《浏览器的工作原理》(进阶)
Webpack 相关：
《深入浅出 Webpack》
《Webpack 实战：入门、进阶与调优》
React 相关：
《深入 React 技术栈》
《深入浅出 React 和 Redux》
《Redux 实战》
《React 设计模式与最佳实践》
Vue 相关：
《Vue.js设计与实现》
Node.js 相关：
《狼书卷1》
《狼书卷2》
《深入浅出 Node.js》
《Node.js 实战》
性能相关：
《Web 性能权威指南》
《高性能网站建设指南》
PWA 相关：
《PWA 开发实战》
《PWA 实战：面向下一代的 Progressive Web APP》
计算机网络：
《图解 HTTP》
《图解 TCP/IP》
《Wireshark 网络分析就这么简单》
《计算机网络：自顶向下方法》
《计算机网络》
操作系统：
《操作系统》
编译原理：
《编译原理》

八. 个人提升

1. 现代 JavaScript 教程
2. 字节大佬笔记
3. 阿里P7大佬笔记

前端开发中有什么经典的轮子值得自己去实现一遍？答：Virtual-DOM

可以做性能优化、读源码、项目脚手架、CI/CD 自动化部署等，这些基本上一个人就可以整起来。
复杂一点可以做监控、运营配置平台、跨端研发、自动化测试、低代码搭建等，这些就会复杂些，需要团队作战，可以和同事一起共建。

九、技能欠缺：

1. 正则表达式
2. css动画

---

3. 函数式编程

4. underscore源码

5. Lodash 源码

6. 前端加密

7. 服务端渲染
   Vue----Nuxt.js入门
   React----Next.js入门

8. 提升篇
   小程序启动过程
   浅析原理
   微信小程序运行流程看这篇就够了
   支付宝nebula方案
   小程序底层实现原理及一些思考
   原理
   原理
   基于vue的小程序引擎：
   浅析微信小程序 App() 和 Page() 函数的内部实现
   解剖小程序的 setData
   揭秘：支付宝小程序 V8 Worker 技术演进
   小程序的相关知识点

9. Nginx—高性能的HTTP和反向代理web 服务器