前端进阶学习路

基础

• Javascript(js)
• CSS(css)
• HTML(html)

Javascript(js)

1. ES5
2. ES6
3. ES7
4. ES8
5. ES...

浏览器（DOM）的对 javascript 兼容问题

CSS(css)

1. CSS 2.0（非主流，不建议深入）
2. CSS 3.0（主流）

浏览器（DOM）的对 css 兼容问题

HTML(html)

1. HTML 4.0（非主流，不建议深入）
2. HTML 5.0（主流）

浏览器（DOM）的对 html 兼容问题

CSS 必备技能

1. 基于css的扩展语言，如：sass、less等
2. postcss (css代码转换工具)
3. 编程式css, 如：styled-components
4. 移动端适配（百分比、rem、vw）
5. PC端浏览器兼容方案
6. 响应式布局
7. 优化策略

前端框架

1. Vue（推荐）
2. React
3. Angular

前端项目（以 vue 3.0 为例）

1. 打包工具 webpack，vite（推荐）
2. 脚手架 vue-cli，vite（推荐）
3. 复杂数据管理 vuex，pinia（推荐）
4. UI库 Element，Naive

掌握一门后端语言

1. Node.js（推荐）
2. Java
3. PHP
4. C/C++
5. Go

后端语言 Node.js

• 脚手架 express

技术和技巧同样关键

1. 基础 javascript 和 使用 javascript 技巧
2. 基础 css 和 使用 css 技巧
3. 基础 html 页面布局 和 html 页面布局 技巧

一精多专

• 先广博，后专精
• 精通 javascript 语言，了解（或熟悉）多门语言

构建领域生态

• 将所掌握的知识反复揉捏，形成自己的技术闭环

技术攻坚

1. 知道自己缺什么，应该去学什么
2. 对所掌握要有深度
3. 先广博，而后精

尝试了解产品背后的价值

1. 对比整个行业和你所做的事情，发现我们行业的共性，以及不同公司对同一问题的不同解决方案
2. 梳理清楚整个行业的技术方案，做一个横向的对比，有了这个行业以后呢，你就知道整个行业的技术痛点
3. 完全不需要别人，知道自己缺什么，应该去学什么

编程思维

1. 强化 编程思维
2. 训练 逻辑思维
3. 总结 问题及解决方法

学习方式

1. 确定技术领域
2. 不要局限于技术，要跳出来技术圈了解产品，了解产品背后的价值了解不同公司的同类产品、技术上的优势、劣势，而不是在被动的执行中中学习
3. 技术学习要与时俱进，不要吃老本

前端架构

1. 架构需要从需求的角度出发去考虑
2. 根据项目功能需求选择前端架构
3. 只有合适的架构，没有最准的架构
4. 架构要与时俱进
5. 架构要不断积累

技术选型必须考虑的因素

1. PC端还是手机端
2. [toB]()，还是[toC]()
3. 用户规模
4. 浏览器支持（兼容）情况
5. 项目是否需要支持SEO
6. 团队成员对该技术（或框架）的掌握情况：是否有人可以全局把控、学习成本是否可以接受
7. 该技术能否可以满足业务需求
8. 该技术（框架）本身的稳定性，它的社区、维护者等

进阶 - 网站性能优化

javascript 性能优化

1. 按需加载
2. PWA（渐进式增强策略）
3. 使用外部链接方式
4. 多线程
5. 减少、合并DOM访问
6. 压缩 javascript 代码

图片优化

1. 使用响应式图像和 WebP（图片 有损压缩 格式）
2. 逐步加载图片
3. 压缩图片
4. CSS Spirte（精灵图，雪碧图），减少服务器请求
5. data:URL模式（url scheme data）
6. 懒加载
7. 字体图标
8. 合适的图片格式