关于前端:前端进阶学习路

根底

• 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. 适合的图片格式