前端学习路线
这份学习路线并不完美，也不会有最终形态，正如前端不可预见、永无止境的未来。
转自鱼皮
💂 + 💻 = 👴🏽
建议先观看视频导读：https://www.bilibili.com/video/BV1nh411e7oG/
大纲
- 前言 - 学编程需要的特质
- 前端学习七阶段
- 前端入门
- 巩固基础
- 前端工程化
- 前端优化
- 前端生态
- 前端求职
- 前端未来
- 尾声 - 持续学习
- 我的前端学习路线
前言 - 学编程需要的特质
相信自己有能力，那么你就真的会有！
- 兴趣
- 坚持
- 付出
- 心态
一、前端入门
开发工具
-
VSCode
-
WebStorm
-
Atom
-
Sublime Text
-
HBuilder X
-
记事本
-
在线 IDE
HTML
- 基本语法
CSS
- 盒子模型
- 内联元素/块状元素
- 文档流
- 浮动 float
- 元素堆叠
- 块格式化上下文(BFC)
- 响应式布局
- Flex 布局
- Grid 布局
- CSS 动画
- 瀑布流
JavaScript
- 基本语法
- 基本类型
- Javascript 对象
- 原型和继承
- 作用域
- 闭包
- this
- ES6+
- 单线程与异步 Javascript
- DOM/BOM API
二、巩固基础
前端基础知识
-
互联网
-
域名
-
DNS
-
服务器
-
浏览器
- 浏览器 DOM 事件流/事件委托
- 浏览器加载顺序
- 浏览器渲染过程
- 浏览器 EventLoop
- 浏览器同源策略
- 跨域方案/CORS
- 浏览器缓存
- 常见调试技巧
-
HTTP
- HTTP 请求过程
- 常见 HTTP 协议
- HTTP 1.0/HTTP 1.1/HTTP2/HTTP3
- Ajax
- WebSocket
计算机基础
算法和数据结构
计算机网络
操作系统
软件开发基础
设计模式
Git 版本控制
Linux 服务器
三、前端工程化
研发流程
- 技术选型
- 初始化
- 开发
- 本地测试
- 代码提交
- 编译、打包、构建
- 部署
- 集成测试
- 发布上线
代码托管
- GitHub
- Gitee
- GitLab
Node.JS
包管理
- npm
- yarn
- bower
- npx
开发框架
JavaScript 框架
Vue
- Vue Router
React
- React DOM
- React Router
- Redux
- MobX
- React Hooks
Angular
- RxJS
- NgRx
Svelte
CSS 框架
- BootStrap
- Tailwind CSS
封装库
组件库
- LayUI
- ElementUI
- VantUI
- Ant Design
数据可视化
- EChart
- HighChart
- D3.js
- AntV
工具库
- jQuery
- moment
- lodash
- axios
字体图标库
- IconFont
- IconPark
- Font Awesome
脚手架
-
vue-cli
-
create-react-app
-
Yeoman
前端架构
- 前端模块化
- SPA
- 多页应用
- 前端路由
- PWA
服务端渲染
- Next.js（React）
- Nuxt.js（Vue）
- Universal（Angular）
BFF
- GraphQL
前端微服务
- qiankun
CSS in JS
- 内联样式
- 声明样式
- 引入样式
CSS 模块化
- CSS Modules
- styled-components
- Styled JSX
- Emotion
开发调试
- webpack-dev-server
- serve
内网穿透
- Ngrok
- NATAPP
CSS 预编译
- SASS
- PostCSS
- Stylus
- LESS
测试
测试分类
- 单元测试
- 集成测试
- E2E 测试
Mock
测试框架
-
Jest
-
Enzyme
-
Puppeteer
-
Mocha
-
Chai
-
Jasmine
-
Headless Browser
代码质量
开发规范
- Style Guide
类型校验
- TypeScript
代码检查
- ESLint
- StyleLint
代码风格
- Prettier
提交规范
- pre-commit
提交检查
- hosky
构建工具
自动化构建
- Gulp
- npm script
- grant
打包工具
- Webpack
- Rollup
- Vite
- Parcel
- Snowpack
CI / CD
- GitLab CI
- Jenkins
部署
Web 服务器
- Nginx
- Apache
容器
- Docker
- K8s
部署策略
- 全量发布
- 蓝绿部署
- 滚动发布
- 灰度发布
监控告警
- 前端埋点
- 错误监控
- 性能监控
- 行为监控
四、前端优化
性能优化
性能指标
- FP
- FCP
- FMP
- TTI
优化手段
-
性能监控
- Performance API
-
样式优化
-
JavaScript 优化
-
代码分割
-
资源压缩
-
打包优化
-
服务器优化
-
缓存优化
- Service Worker
-
动画性能
-
dns-prefetch
-
Lazy loading
-
优化启动性能
- 异步化
-
渲染优化
-
网络优化
-
移动端性能优化
用户体验
- 骨架屏
兼容性
浏览器兼容性
- normalize.css
- html5shiv.js
- respond.js
- Babel
- Polyfill
屏幕分辨率兼容性
跨平台兼容性
SEO
安全
- XSS
- CSRF
- 反爬虫
- SQL 注入
- DDoS
五、前端生态
静态站点构建
开发
- react-static
博客
- Gatsby.js
- Docusaurus
- Hugo
- Hexo
文档
- JekyII
- Docsify
- VuePress
- Dumi
大前端
移动应用
- Hybrid
- WebView
- React Native
- Flutter
移动应用打包
- Week
- Cordova
- Phonegap
- Ionic
桌面应用
- Electron
- NW.js
- Proton Native
小程序
- 原生
- WebView
跨端开发框架
- uni-app
- Taro
- Flutter
- Chameleon
- Wepy
- Rax
移动端调试
- Chrome Dev Tools
- Android Simulator
- IOS Simulator
Serverless
云开发
- 腾讯云云开发
- 阿里云云开发
低代码
零代码
- 腾讯云低码
- 阿里宜搭
六、前端求职
流程
简历
面试题库
面经
面试实战
（模拟面试）
七、前端未来
-
WebAssembly
-
智能 UI
-
React Server Component
-
CSS Houdini
WebComponents
- HTML templates（HTML模板）
- Custom elements（自定义元素）
- Shadow DOM（影子DOM）
尾声 - 持续学习
优秀前端人的特质
学习资源
前端资讯
技术博客
我的前端学习路线
找项目：searchCode
todo
优化 html、css、js 内容
补充尾声内容
描述和链接文章来源：https://www.toymoban.com/news/detail-520417.html
写一条线文章来源地址https://www.toymoban.com/news/detail-520417.html
到了这里，关于【前端学习路线】你一定需要掌握的热门前端技术栈的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
