# performance-optimization

**Repository Path**: qiaorunqiang/performance-optimization

## Basic Information

- **Project Name**: performance-optimization
- **Description**: 性能优化
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-02-14
- **Last Updated**: 2023-07-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## web-性能优化

### 介绍

- 参考书籍：

  * web性能实战

  * web性能权威指南

  * 高性能的javascript ✅

  * web前端性能优化

  * 高效前端
   

- 参考视频：

  * mksz448 - 前端性能优化，掌握行业实用、专业、前沿的解决方案

  * mksz130 让你页面速度飞起来 Web前端性能优化


### 模块学习方式

  1.通过参考对应书籍，及对应文章弄清楚相关模块的原理

  2.通过视频学习，学习优化手段，并用于实际项目（思考自己项目是否有类似的问题）

  3.总结自己实现的优化手段

### 课时学习计划安排

### 1.性能优化相关指标及工具 （2023/02/20 - 2023/02/24）

##### MKW-448 （02/20-02/21）

- 第2章 性能优化指标和工具 
    
    *  [x] 2.2 性能指标和优化目标
    
    *  [x] 2.3 RALL测量模型
    
    *  [x] 2.4 使用WebPageTest评估Web网站性能
    
    *  [x] 2.5 使用LightHouse分析性能
    
    *  [x] 2.6 使用Chrome DevTools分析性能
    
    *  [] 2.7 常用的性能测量APIs

##### web性能实战 （02/22-02/23）

- 第2章使用评估工具

    * [x] 2.1 使用Google PageSpeed Insights近行评估
    
    *  [] 2.2 使用基于浏览器的评估工具
    
    *  [] 2.3 检查网络请求
    
    *  [] 2.4 渲染性能检查工具
    
    *  [] 2.5 在Chrome中对javascript进行基准测试
    
    *  [] 2.6 模拟和监控设备
    
    *  [] 2.7 创建自定义网络节流配置

##### web前端性能优化

- 第11章性能检测 (02/24)

    *  [x] 11.1 性能检测概述
    
    *  [x] 11.2 Lighthouse

    *  [x] 11.3 performance面板使用 

---

### 2.渲染优化

##### MKW-448 

- 第3章 渲染优化
    
    *  [] 3.1 浏览器渲染原理和关键渲染路径【大厂前端面试必考】
    
    *  [] 3.2 回流与重绘, 如何避免布局抖动
    
    *  [] 3.3 使用FastDom【防止布局抖动的利器】
    
    *  [] 3.4 复合线程与图层【深入渲染流水线的最后一站】
    
    *  [] 3.5 避免重绘【必学，加速页面呈现】
    
    *  [] 3.6 高频事件防抖【解救页面卡顿的秘药】

    *  [] 3.7 React时间调度实现【中高级前端需要了解的React调度原理】


##### web前端性能优化

- 第7章渲染优化

    *  [] 7.1 页面渲染性能
    
    *  [] 7.2 javascript执行优化

    *  [] 7.3 计算样式优化

    *  [] 7.4 页面布局及重绘优化

    *  [] 7.5 合成处理

##### 高效前端

- 第3章页面优化

    *  [] Effective前端7: 避免页面卡顿
    
    *  [] Effective前端8: 加快打开速度

    *  [] Effective前端9: 增强用户体验

### 3.代码优化

#### 高性能javascript 

### 4.资源优化

### 5.构建优化

### 6.传输加载优化

### 7.缓存优化