前端进阶学习路

基础

1. Javascript(js)
2. CSS(css)
3. HTML(html)
4. 了解 浏览器渲染流程，知道如何优化 页面渲染效率
5. 熟练使用 Webpack，Vite 等 前端 开发构建工具
6. 熟练使用 Vue 3.0，Vue Router，Vuex 等 Vue 全家桶
7. 熟练 进行 Vue 2.0 向 Vue 3.0 进行迁移

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

版本工具

1. 熟练 git 进行版本 控制
2. SVN 进行版本 控制

必备技能

1. HTML 5.0 和 CSS 3.0 和 JS （ES5，ES6，ES7，...）
2. 精通一个MVVM框架
3. web性能优化
4. webpack进阶
5. Nodejs
6. 混合开发
7. PWA 和 AMP 和 BMP
8. Linux shell、Nginx

后端语言 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. 合适的图片格式

常见问题

1. 视觉稿/交互稿未按时提供
2. 需求变更
3. 工作量评估不足
4. 后台接口未按时、按质完成
5. bug有好多，但修改不及时

总结

要得出一个靠谱的完成时间，至少需要明确以下内容

1. 前端、后台 各自的工作量
2. 前端、后台 投入研发的时间点
3. 前端、后台 联调的工作量、时间点
4. 需求提交测试的时间
5. 需求测试的工作量

明确需求

1. 关键时间点
2. 责任到人
3. 严控开发、自测、提测质量、工作包可检查
4. 及时暴露风险
5. 做好沟通，主动推动解决问题
6. 关注线上质量（责任意识）

产品发布过程

1. 提出需求
2. 前后端 开发
3. 前后端 连调
4. QA 和 测试
5. 发布版本

需求确认

1. 评论最大支持输入多少个字？（非常重要，关乎后台存储方案的设计）
2. 1个中文算1个字，多少个英文字母算1个字（产品语言、技术语言 之间的沟通转换）
3. 输入内容过长，如何进行错误提示？（交互细节）
4. 内容过长，是否允许提交评论？如允许，是对评论内容进行截断后提交？（容错）
5. 用户未输入内容的情况下，评论框内默认提示文案是什么？（交互细节）

注意：需求确认后，要形成文档

需要具备的思维

1. 架构思维
2. 领导思维
3. 产品化思维
4. 组件化思维