前端性能优化总结

性能优化的指标和工具
渲染优化
资源压缩与合并
构建优化
传输加载优化

性能优化的指标和工具

Created: April 24, 2022 6:07 PM

性能指标，多块才算快

性能指标和优化目标

【加载瀑布图】谷歌调试工具 NetWord，Waterfall；TTFB，http请求从发起到返回的时间；
【速度指数】Lighthouse测试网站评分，100满分；
【帧率FPS】查询网站帧率；
【页面加载时间】异步请求完成时间在一秒钟内，无法完成加loading动画；
【首次渲染】懒加载、预加载优化；
【交互】交互动作反馈时间足够短；

RAIL测量模型

什么是RAIL

Respose(响应)：网站给用户的响应体验
Animation(动画): 网站加的动效给用户的体验
Idle(空闲): 网站响应时，页面卡顿，主线程繁忙的情况下，要考虑如何加大主线程空闲的时间
Load(加载): 资源加载时，白屏等待时间

RAIL评估标准

Respose(响应)：处理事件应在50ms内完成
Animation(动画)：每10ms产生一帧
Idle(空闲)：尽可能增加空闲时间
Load(加载)：在5s内完成内容加载并可以交互

利用测量工具和APIs

Chrome DevTools 开发调试、性能评测
1. Audit(Lighthouse)
2. Throttling调整网络吞吐
3. Performance性能分析
4. Network网络加载分析
Lighthouse 网站整体质量评估
1. **npm install -g lighthouse lighthouse [https://www.baidu.com](https://www.baidu.com/)**
2. Chrome DevTools 中使用 lighthouse
WebPageTest多测试地点、全面性能报告

WebPageTest - Website Performance and Optimization Test
- waterfall chart 请求瀑布图
- first view 首次访问，First Byte、Start Render
- repeat view 访问
- 如何本地部署WebpageTest，docker镜像部署

优化问题，重新测量（迭代）

渲染优化

Created: April 24, 2022 6:07 PM

问我Chrome浏览器的渲染原理（6000字长文）

浏览器渲染原理，关键渲染路径

浏览器的渲染流程

Untitled

js引起页面变化
样式修改
布局，绘制到页面上
绘制
合成，多个图层组合

Untitled

资源压缩与合并

减少http请求数量
减少请求资源的大小
- html压缩，html-minifier npm工具
- css压缩
- js文件合并
- 图片压缩
- 字体优化

构建优化

Created: April 26, 2022 5:59 PM

webpack4优化

webpack4的模式

// 用于开发的配置文件，配置热更新、跨域配置、端口设置等
"dev": "webpack --mode development",
// 用于生产的配置文件，配置 js 压缩、代码拆分等
"build": "webpack --mode production"

Tree-shaking

上下文未用到的代码；
基于ESM，es6的模块化；
可能会有副作用，不希望被shaking的文件
1
2
3
4
// package.json
"slideEffects": [
"*.css"
]

注意babel配置的影响

// babel预设
"@babel/preset-env",
      {
        "modules": false,

JS压缩

webpack4后引入 uglifyjs-webpack-plugin
支持ES6替换为 terser-webpack-glugin （效率更好，生产默认，支持es6）
减小js文件体积

作用域提升

生产模式自动启用，代码体积减小
提高执行效率
注意babel配置的影响，仅支持esm

babel7优化配置

在需要的地方引入polyfill

"presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "67"
        },
        "useBuiltIns": "usage", // 需要的地方引入polyfill
      }

辅助函数的按需引入, @babel/plugin-transform-runtime
1
2
"plugins": [
"@babel/plugin-transform-runtime",

设置目标浏览器，

"presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": [">0.25%"] // 大于使用率0.25的浏览器
        },
      }

提高构建速度

noParse，告诉webpack哪些库不进行解析

1
2
3

// webpack.common
module: {
    noParse: /jquery｜lodash/, //忽略对部分没采用模块化的文件的递归解析处理

DLLPlugin(动态链接库)
- 避免打包时对不变的库重复构建
- 提高构建速度

资源压缩

Terser压缩JS
mini-css-extract-plugin压缩css
HtmlWebpackPlugin-minify 压缩HTML

基于webpack的资源持久化缓存

缓存资源没有更新，或者更新不及时。访问旧缓存容易导致问题，解决方案是每个打包资源文件有唯一的hash值，做增量式的更新。

增量式更新
只有变化的文件hash才会改变
充分利用浏览器缓存

检测与分析

Stats分析与可视化

Webpack Chart

1 2	// Generate stats.json for your project with this command: $ webpack --profile --json > stats.json

Untitled

webpack-bundle-analyzer 进行体积分析

Untitled

speed-measure-webpack-plugin速度分析

Untitled

React 按需加载

React router基于webpack动态引入
使用Reloadable高级组件

fallback：在未加载器代替的组件

# 传输加载优化

Created: April 27, 2022 10:21 AM

Gzip压缩

对传输资源进行体积压缩，高达90%
利用nginx启用 Gzip

启用http keep-alive

http 协议默认开启的 keep-alive

Untitled

HTTP缓存

Nginx配置：

图片等静态资源，可以更长时间

Untitled

Cache-Control/Expires
Last-Modified + If-Modified-Since
Etag + If-None-Match

Service Workers作用

加速重复访问
离线支持

service workers 配置

create-react-app自带；
webpack引入两个插件实现

注意点

延长了首屏时间，但页面总加载时间减少；
兼容性问题；
只能在localhost或https下使用；

原理

Untitled

http/2 性能提升

二进制传输，1.1基于文本，h2是基于二进制编码，提高安全性，头部压缩
请求响应多路复用；
Server push，提前将资源推送到浏览器

nginx配置

先开启https

Untitled

开启h2

Untitled

h2的多路复用

Untitled

SSR的好处

加速首屏加载速度
更好的SEO

前端性能优化总结

性能优化的指标和工具

性能指标，多块才算快

性能指标和优化目标

RAIL测量模型

什么是RAIL

RAIL评估标准

利用测量工具和APIs

优化问题，重新测量（迭代 ）

渲染优化

浏览器渲染原理，关键渲染路径

资源压缩与合并

构建优化

webpack4优化

webpack4的模式

Tree-shaking

JS压缩

作用域提升

babel7优化配置

提高构建速度

资源压缩

基于webpack的资源持久化缓存

检测与分析

React 按需加载

Gzip压缩

启用http keep-alive

HTTP缓存

Service Workers作用

service workers 配置

注意点

原理

http/2 性能提升

nginx配置

h2的多路复用

SSR的好处

基于Next.js实现服务端渲染

优化问题，重新测量（迭代）