front-end-notes

前端学习笔记

md-1：前端 JavaScript 基础知识

1. 介绍
2. 基础知识、原型和原型链
3. 作用域和闭包、执行上下文
4. 异步和单线程、日期和 math
5. JS-Web-API、DOM、BOM
6. 事件、ajax、跨域、存储
7. 开发环境、模块化、上线和回滚
8. 运行环境、性能优化、安全性

md-2：前端必备技巧

1. 介绍
2. 准备
3. 页面布局
4. CSS 盒模型
5. DOM 事件
6. HTTP 协议
7. 原型链
8. 面向对象
9. 通信
10. 安全
11. 算法
12. 浏览器页面相关
13. JS 运行机制
14. 页面性能
15. 错误监控
16. 业务能力
17. 职业竞争力

md-3：前端 JavaScript 知识总结

1. 目标
2. ES6
3. 原型
4. 异步
5. 虚拟 DOM
6. MVVM 和 vue
7. 组件化和 React
8. Hybrid
9. 总结
10. 附：微信 url schema

md-4：CSS 必备知识

1. 介绍
2. HTML 基础
3. CSS 基础
4. CSS 布局
5. CSS 效果
6. CSS 动画
7. CSS 预处理器
8. Bootstrap
9. CSS 工程化
10. 框架中的 CSS
11. 总结
12. Grid

md-5：Web 前端性能优化

1. web 前端性能优化
2. 资源的合并与压缩
3. 图片相关的优化
4. css 和 js 的装载与执行
5. 懒加载与预加载
6. 重绘与回流
7. 浏览器存储
8. 缓存
9. 服务端性能优化

md-6：Web 前后端漏洞分析与防御技巧

1. web 安全
2. 环境准备
3. XSS
4. CSRF
5. Cookies 问题
6. 点击劫持
7. 传输安全
8. 密码安全
9. 接入层注入问题
10. 接入层上传问题
11. 社会工程学和信息泄露
12. 其他安全问题
13. 总结

md-7：前端必备基础

1. 介绍
2. 前置准备
3. CSS
4. JS 基础 - 变量类型和计算
5. JS 基础 - 原型和原型链
6. JS 基础 - 作用域和闭包
7. JS 基础 - 异步
8. JS 异步进阶
9. JS-Web-API-DOM
10. JS-Web-API-BOM
11. JS-Web-API-事件
12. JS-Web-API-Ajax
13. JS-Web-API-存储
14. HTTP
15. 开发环境
16. 运行环境
17. 题目

md-8：前端全链路性能优化

1. 静态资源优化
2. 页面渲染架构设计与性能优化
3. 原生 App 优化
4. 服务端和网络优化
5. 研发开发流程优化
6. 全链路质量监控体系建设

ocss-1：CSS 基础架构知识

1. 介绍
2. CSS 架构搭建
3. 首页
4. 商城页
5. 时快抢页
6. 直播列表页
7. 直播详情页
8. 经典框架之 CSS 源码分析
9. CSS 奇淫巧计
10. 打造高性能 CSS 动画
11. 总结

ocss-2：前端主流 CSS 布局

1. 介绍
2. CSS 还原 UI 设计
3. 布局中的尺寸与位置
4. flex 弹性布局
5. grid 网格布局
6. 移动端适配布局
7. 响应式布局
8. 实战 Ant Design Pro 管理系统
9. 其他布局

xmind

oz-1：前端性能优化

1. 介绍
2. 性能优化的指标和工具
3. 渲染优化
4. 代码优化
5. 资源优化
6. 构建优化
7. 传输加载优化
8. 前沿优化解决方案
9. 性能优化问题
10. 总结
11. 附1：如何本地部署 WebpageTest 工具
12. 附2：性能 APIs 实例

oz-2：前端性能优化

1. 前端性能优化介绍
2. RAIL 性能模型
3. 基于用户体验的性能指标
4. Web Vitals
5. 使用灯塔 Lighthouse 测试性能
6. 使用 WebPageTest 测试性能
7. 使用 Chrome DevTools 测试性能
8. 前端页面的生命周期
9. DNS 解析
10. HTTP 长连接
11. HTTP 2
12. HTTP 缓存

More links

• GitHub Home
• Blog Home
• About Me