# e-performance **Repository Path**: ymcdhr/e-performance ## Basic Information - **Project Name**: e-performance - **Description**: 前端性能优化：性能指标、性能监控、性能优化操作 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 2 - **Forks**: 4 - **Created**: 2021-08-01 - **Last Updated**: 2025-07-10 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 1. 为什么要做性能优化？ 1. 用户留存 2. 网站转化率 3. 体验与传播 4. 搜索排名 5. 客户投诉 6. 工作绩效 # 2. 如何进行性能优化？ 1. 知道有哪些性能指标 2. 使用专业工具量化性能表现 3. 根据网页生命周期，分析性能差的原因 4. 进行技术改造，可行性分析 5. 迭代优化 ### 1. 通过一些指标对网站性能进行衡量 #### 1.1 RAIL 性能模型 1. RAIL 模型的理念是“以用户为中心，最终目标不是让您的网站在任何特定设备上都能运行很快，而是使用户满意”。 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0801/104225_7e7fb895_9130428.png "屏幕截图.png") 2. RAIL 性能模型核心概念： - **响应：Response，应该尽可能快速响应用户，应该在100ms以内响应用户输入。** - **动画：Animation，在展示动画的时候，每一帧应该以16ms、60帧/s进行渲染；这样可以保持动画效果的一致性，并且避免卡顿** （如果屏幕刷新率为60fps，一帧图像生成时间为16ms（1000ms/60=16.66ms），除去浏览器绘制新帧的时间，留给代码执行的时间仅为10ms左右；[测试网站](https://googlechrome.github.io/devtools-samples/jank/)）。 - **空闲：Idle，当使用JS主线程的时候，应该把任务划分到执行时间小于50ms的片段中去，这样可以释放线程以进行用户交互** （在js中，超过50ms的任务称为“常任务”）。 - **加载：Load，首屏加载h5小于3s，pc小于5s；后续加载小于2s，并可以进行用户交互。** #### 1.2 基于用户体验的性能指标 1. FCP 首次内容绘制： - 优化方案：[Google优化方案：how-to-improve-fcp](https://web.dev/fcp/#how-to-improve-fcp) - 性能标准： ![输入图片说明](https://images.gitee.com/uploads/images/2021/0801/113241_51f9796c_9130428.png "屏幕截图.png") 2. LCP 最大内容绘制： - 优化方案：[Google优化方案：optimize-lcp](https://web.dev/optimize-lcp/) - 性能标准： ![输入图片说明](https://images.gitee.com/uploads/images/2021/0801/113211_557101b9_9130428.png "屏幕截图.png") 3. FID 首次输入延迟： - 场景说明：select 下拉框数据很多的时候，点击下拉框造成反应很慢无法其余操作； - 优化方案：[Google优化方案：optimize-fid](https://web.dev/optimize-fid/)、[Google优化方案：how-to-improve-fid](https://web.dev/fid/#how-to-improve-fid) - 性能标准： ![输入图片说明](https://images.gitee.com/uploads/images/2021/0801/113142_1c88216c_9130428.png "屏幕截图.png") 4. TTI 首次达到完全可交互状态： - 场景说明：首次加载完成后，不再执行长任务； - 优化方案：[Google优化方案：how-to-improve-tti](https://web.dev/tti/#how-to-improve-tti) - 性能标准： ![输入图片说明](https://images.gitee.com/uploads/images/2021/0801/113419_aa848b81_9130428.png "屏幕截图.png") 5. TBT 总阻塞时间： - 优化方案：[Google优化方案：how-to-improve-tbt](https://web.dev/tbt/#how-to-improve-tbt) - 性能标准： ![输入图片说明](https://images.gitee.com/uploads/images/2021/0801/113609_7b233196_9130428.png "屏幕截图.png") 6. CLS 累计布局偏移： - 优化方案：[Google优化方案：how-to-improve-cls](https://web.dev/cls/#how-to-improve-cls)、[Google优化方案：optimize-cls](https://web.dev/optimize-cls) - 场景说明： ![输入图片说明](https://images.gitee.com/uploads/images/2021/0801/112807_88ea1545_9130428.png "屏幕截图.png") - 性能标准： ![输入图片说明](https://images.gitee.com/uploads/images/2021/0801/113726_2fa41763_9130428.png "屏幕截图.png") #### 1.3 WebVitals 1. 简化核心指标 - LCP，最大内容绘制： - FID，首次输入延迟： - CLS，累计布局偏移： 2. 测量核心指标 - 性能测试工具：Lighthouse - 使用 web-vitals 库 - 使用浏览器插件 Web Vitals（有chrome插件） ### 2. 使用专业工具量化性能表现 #### 2.1 devtools 1. 浏览器任务管理器 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0801/133952_8896705a_9130428.png "屏幕截图.png") 2. 开发者调试工具-network - **network面板增强设置** ![输入图片说明](https://images.gitee.com/uploads/images/2021/0801/134240_62642b96_9130428.png "屏幕截图.png") - **network面板完整信息数据** ![输入图片说明](https://images.gitee.com/uploads/images/2021/0801/134735_2918d74b_9130428.png "屏幕截图.png") - **network面板瀑布图，查看服务器响应时间：TTFB；查看DNS解析时间；** ![输入图片说明](https://images.gitee.com/uploads/images/2021/0801/134421_c2c07357_9130428.png "屏幕截图.png") - **network面板开启无缓存测试** ![输入图片说明](https://images.gitee.com/uploads/images/2021/0801/134625_fdc7a233_9130428.png "屏幕截图.png") - **network面板网络类型选择**
![输入图片说明](https://images.gitee.com/uploads/images/2021/0801/134650_b731282f_9130428.png "屏幕截图.png") - **network面板网络请求阻止** ，Ctrl+Shift+P，搜索block：可以添加阻止规则，也可以右键选中某个请求进行block； ![输入图片说明](https://images.gitee.com/uploads/images/2021/0801/135255_38b899e3_9130428.png "屏幕截图.png") ![输入图片说明](https://images.gitee.com/uploads/images/2021/0801/135332_d685dddd_9130428.png "屏幕截图.png") ![输入图片说明](https://images.gitee.com/uploads/images/2021/0801/140227_df4adf40_9130428.png "屏幕截图.png") 3. 开发者调试工具-coverage面板：用于查看代码执行覆盖率； - 打开coverage面板，Ctrl+Shift+P，搜索coverage ![输入图片说明](https://images.gitee.com/uploads/images/2021/0801/140547_53cd45e2_9130428.png "屏幕截图.png") ![输入图片说明](https://images.gitee.com/uploads/images/2021/0801/140715_dab29588_9130428.png "屏幕截图.png") - coverage面板问题存在场景：打包进去了多余的文件模块？是否可以路由懒加载，或者删掉未使用的模块； 4. 开发者调试工具-memory面板：用于分析内存占用情况，是否存在内存泄漏； - 打开memory面板，Ctrl+Shift+P，搜索memory ![输入图片说明](https://images.gitee.com/uploads/images/2021/0801/141049_9a071195_9130428.png "屏幕截图.png") ![输入图片说明](https://images.gitee.com/uploads/images/2021/0801/141113_69ad42cf_9130428.png "屏幕截图.png") - memory面板面板说明： - （1）堆快照：Heap snapshot - （2）时间线上的分配检测：Allocation instrumentation on timeline（主要用这个，有起伏才正常；） - （3）分配采样：Allocation sampling ![输入图片说明](https://images.gitee.com/uploads/images/2021/0801/141724_00f2bca4_9130428.png "屏幕截图.png") 5. 开发者调试工具-performance面板：对运行中网站进行性能监测 - **测试网站：** https://googlechrome.github.io/devtools-samples/jank/ - **查看到动画是否丢帧：Frames，** 如下红色部分可以查看到18fps，已经丢帧；绿色的没有丢帧；还能查看到是否存在长任务（超过50ms），如下图中第一个红色的部分为56.8ms； ![输入图片说明](https://images.gitee.com/uploads/images/2021/0801/143416_57d5b399_9130428.png "屏幕截图.png") - **查看哪里有重排：Main，** 如下Main里面火焰图最下面一层紫色的表示调用方法；右上方红色的小标表示进了重排，比较危险；点击下方 Call Stack 调用栈会跳转到对应代码段。 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0801/143816_6f5cc128_9130428.png "屏幕截图.png") ![输入图片说明](https://images.gitee.com/uploads/images/2021/0801/144314_f5602634_9130428.png "屏幕截图.png") ![输入图片说明](https://images.gitee.com/uploads/images/2021/0801/144221_63786f52_9130428.png "屏幕截图.png") - **查看渲染统计数据：Main，** 点击Main后查看下面的统计数据 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0801/144554_bc5e9ee7_9130428.png "屏幕截图.png") ![输入图片说明](https://images.gitee.com/uploads/images/2021/0801/144603_67dc9a2c_9130428.png "屏幕截图.png") 6. 开发者调试工具-fps：用于监测动画时的帧率 - 打开fps面板，Ctrl+Shift+P，搜索fps； - 打开performance monitor面板，Ctrl+Shift+P，搜索performance，另外一个面板 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0801/145147_a7e124cd_9130428.png "屏幕截图.png") ![输入图片说明](https://images.gitee.com/uploads/images/2021/0801/145546_efa28c70_9130428.png "屏幕截图.png") - fps面板作用：用于监测动画时的帧率 - 如何优化动画帧率？减少重排重绘；具体做法： #### 2.2 Lighthouse（灯塔，有chrome插件） 1. 安装/使用 - 安装 - 使用，以今日头条为例：https://www.toutiao.com/ ![输入图片说明](https://images.gitee.com/uploads/images/2021/0801/132140_b348a2f7_9130428.png "屏幕截图.png") 2. 主要指标： ``` - First Contentful Paint => FCP => 首次渲染白屏时间 => 1.8s以内优 - Time to Interactive => TTI => 变成可交互时间 => - Total Blocking Time => TBT => 总阻塞时间 - Speed Index => SPI => 速度指数 => 4s以内才是ok的 - Largest Contentful Paint => LCP => 最大内容 - Cumulative Layout Shift => CLS => 布局偏移 ``` 3. 点击See calculator查看指标积分规则 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0801/125831_b377ddc6_9130428.png "屏幕截图.png") ![输入图片说明](https://images.gitee.com/uploads/images/2021/0801/125758_aee0e33a_9130428.png "屏幕截图.png") #### 2.3 WebPageTest（[访问网站](https://www.webpagetest.org/)，需要在线测试和 Scientific Internet access） #### 2.4 性能监控API #### 2.5 持续性的性能监控方案 ### 3. 网页生命周期流程；参考文档：[网页打开的完整过程](https://gitee.com/ymcdhr/e-task/wikis?sort_id=4052329) **1. 请求资源阶段：输入url：** - 开启网络请求线程 => - 解析URL => - 域名解析 => - 建立tcp链接 => - 经过反向代理服务器 => - 请求到服务器 **2. 响应资源阶段：服务器处理：** - 服务器经过一系列处理 => - 返回页面文件 => **3. 浏览器渲染阶段：** - dom tree + css tree => - render tree => - 重绘、重排、js执行、渲染结束 ### 4. 进行技术改造总体方案 #### 1. 请求和响应阶段优化 **1. 优化DNS解析：** - 减少DNS查找：域名规划、域名散列（提高并发数，其实不算DNS优化） - DMS预取：dns-prefetch **2. HTTP请求优化：** - 并行处理和响应：域名散列； - 减少http重定向？ - 减少http请求次数：js/css文件合并、图片合并、图片映射、小图片转base64、删除无用请求资源；利用HTTP1.1长连接来重用tcp链接； - 减少http带宽：请求数据压缩（gzip压缩算法实现）、响应数据压缩（gzip）、静态资源文件压缩（图片、代码、Webpack生产模式等） **3. 使用HTTP2：** 利用多工，数据流，头信息压缩等特性； **4. 使用缓存：** - 客户端缓存：浏览器缓存与http缓存配置 - Service Worker缓存； - 使用CDN缓存（CDN分发也是优化点）； - 使用缓存涉及到版本发布的问题，例如静态资源的chunck号； #### 2. 页面渲染阶段优化 1. script 放底部（或者使用defer、async；淘宝用的async） 2. js 渲染动画优化，使用requestAnimationFrame 3. Web Worker 4. css 计算样式优化，使用 BEM 规范 5. 重绘重排优化：避免频繁改动DOM和样式，使用类名合并样式等 #### 3. 用户体验优化 1. 资源加载：DOM、图片懒加载；视频代替GIF； 2. 骨架屏： 3. 预渲染：服务端渲染、静态页面生成 4. 图片优化：icon-font、svg、渐进式jpeg等 ### 5. 进行技术改造详细方案 ### 6. 前端性能涉及到的问题 #### 1. 如何针对前端页面进行性能优化? 如何定位性能问题。 1. 首先，要知道有哪些性能指标； 2. 其次，使用专业工具量化性能表现；例如：性能监控平台； 3. 然后，根据网页生命周期，分析性能差的原因； 4. 进行技术改造，可行性分析； 5. 迭代优化，继续监控；