0
点赞
收藏
分享

微信扫一扫

加载缓慢?揭秘前端性能提升的关键策略

前端性能优化一直是大家非常关注的问题,在日常的开发中也是经常会被用到的点。所以今天我们就花一点时间来了解一下前端性能优化方案

一:页面渲染相关

1:减少页面重绘和回流

回流(reflow):是指由于DOM结构或样式发生改变,浏览器需要重新计算元素的几何属性,然后重新布局页面的过程

重绘(repaint):是指当元素样式发生改变,但不影响布局时,浏览器只需要重新绘制受影响的部分,而不需要重新计算布局

  • 尽量减少使用 CSS 属性的快捷方式:例如,使用 border-width、border-style 和 border-color 而不是 border。CSS 属性的快捷方式会将所有值初始化为“初始值”,因此避免使用它们可以最小化重绘和回流(在实际工作中,CSS 快捷方式的性能影响微乎其微,并且使用快捷方式可以简化样式并解决一些样式覆盖问题)。
  • 在 GPU 上渲染动画:浏览器已经优化了 CSS 动画,使其适用于触发动画属性的重绘(因此也包括回流)。为了提高性能,将具有动画效果的元素移动到 GPU 上。可以触发 GPU 硬件加速的 CSS 属性包括 transform、filter、will-change 和 position:fixed。动画将在 GPU 上处理,提高性能,特别是在移动设备上(但避免过度使用,因为可能会导致性能问题)。
  • 使用 will-change CSS 属性来提高性能:它通知浏览器元素需要修改的属性,使浏览器能够在实际更改之前进行优化(但避免过度使用 will-change;在动画中遇到性能问题时考虑使用它)。
  • 通过更改 className 批量修改元素样式。
  • 将复杂的动画元素定位为 fixed 或 absolute 以防止回流。
  • 避免使用表格布局:因为在表格元素上触发回流会导致其中所有其他元素的回流。
  • 使用 translate 而不是修改 top 属性来上下移动 DOM 元素。
  • 创建多个 DOM 节点时,使用 DocumentFragment 进行一次性创建。
  • 必要时为元素定义高度或最小高度:没有显式高度,动态内容加载可能会导致页面元素移动或跳动,从而导致回流(例如,为图像定义宽度和高度以防止布局变化并减少回流)。
  • 尽量减少深度嵌套或复杂选择器的使用,以提高 CSS 渲染效率。
  • 对元素进行重大样式更改时,暂时使用 display:none 隐藏它们,进行更改,然后将它们设置回 display:block。这样可以最小化回流,只需两次即可。
  • 使用 contain CSS 属性将元素及其内容与文档流隔离,防止其边界框外意外副作用的发生。

2:图像压缩、切片和精灵

  • 图像压缩: 图像压缩至关重要。许多图像托管工具提供内置的压缩功能。如果需要手动压缩图像,可以使用像TinyPNG这样的工具来帮助。
  • 图像切片: 当显示大型图像,例如实时渲染,并且UI设计师不允许压缩时,考虑将图像切片并使用CSS布局将其拼合在一起。
  • 精灵图: 与图像切片不同,精灵图涉及将许多小图像合并成一个大图像。这样,在加载页面时,只需要获取一个图像来显示多个页面元素。这可以显著提高页面加载速度。然而,当调整页面布局时,精灵图可能难以维护。

3:字体文件压缩

在开发诸如特定活动的移动网页等项目时,通常会使用@font-face接口来导入字体文件以实现更丰富的排版效果。然而,完整的字体文件往往有 几M 大小。加载这样的文件可能会阻塞页面渲染,导致文字显示延迟。

解决方案: 可以使用Font-spider从字体文件中提取出只有必要的字符。

4:延迟加载/预加载资源

  • 懒加载: 懒加载是指仅在图像进入浏览器视口时加载图像。图像最初设置为占位符(通常是 1x1px 图像)。加载图像的决定基于图像的 offsetTop 减去页面的 scrollTop 是否小于或等于浏览器视口的 innerHeight。
  • 预加载: 资源提示,包括预连接、预加载、预获取等,允许您指定要提前加载的资源。这可以基于当前页面或应用程序状态、用户行为或会话数据。这些资源提示方法可以通过预加载必要的资源来增强性能。实现选项包括使用链接标签进行 DNS 预取、子资源、预加载、预获取、预连接、预渲染,以及使用本地存储进行本地存储。

二:捆绑优化

1:Webpack 用于 resolve.alias 的优化(同样适用于 Vite)

resolve.alias配置将原始导入路径映射到新的导入路径,具有两个目的:

  1. 创建别名
  2. 减少查找时间。

例如:

resolve: {
 alias: {alias: {
   ‘vue$’: ‘vue/dist/vue.esm.js’,
   ‘@’: resolve(‘src’),
 }
}

2:Webpack对解决方案的优化(也适用于 Vite)

resolve.extensions 表示要尝试的文件扩展名列表。它还会影响构建性能,并默认为:

extensions: ['.js', '.json']'.js', '.json']

例如,当遇到像 require('./data') 这样的导入语句时,Webpack 首先会查找 ./data.js。如果未找到,它将搜索 ./data.json,如果仍未找到,它将抛出错误。

因此,建议尽量保持扩展名列表尽可能简洁,省略不太可能出现的情况。将最常用的文件扩展名放在最前面,以加快搜索过程。

resolve: {
 extensions: ['.js', '.vue', '.json'],'.js', '.vue', '.json'],
}

3:webpack 限定 loader 的加载范围(不适用于 Vite)

加载器(loader)可能会消耗大量性能,因此在配置加载器时,可以使用 include 和 exclude 来限制范围,从而优化性能。

例如:

{
 test: /\.svg$/,test: /\.svg$/,
 loader: ‘svg-sprite-loader’,
 include: [resolve(‘src/icons’)],
}

4:使用 webpack || Vite 拆分代码

在没有任何配置的情况下,Webpack 4会自动处理代码拆分。入口文件的依赖项被捆绑到main.js中,而大于30kb的第三方包(例如echarts、xlsx、dropzone)被单独捆绑到独立的包中。其他异步加载的页面或组件成为单独的块。

Webpack内置的代码拆分策略:

  • 新块是否来自共享或node_modules。
  • 新块在压缩前的大小是否大于30kb。
  • 异步加载块的并发请求计数是否小于或等于5。
  • 初始页面加载的并发请求计数是否小于或等于3。

我们可以根据项目的需要调整配置。以下是Webpack代码拆分的示例配置:

splitChunks({
   cacheGroups: {
     vendors: {
       name: `chunk-vendors`,
       test: /[\\/]node_modules[\\/]/,
       priority: -10,
       chunks: ‘initial’,
     },
     dll: {
       name: `chunk-dll`,
       test: /[\\/]bizcharts|[\\/]\@antv[\\/]data-set/,
       priority: 15,
       chunks: ‘all’,
       reuseExistingChunk: true
     },
     common: {
       name: `chunk-common`,
       minChunks: 2,
       priority: -20,
       chunks: ‘all’,
       reuseExistingChunk: true
     },
   }
})

对于 Vite 同样可以执行对应拆分操作:

build: {
   rollupOptions: {
     output: {
       chunkFileNames: ‘js/[name]-[hash].js’,
       entryFileNames: ‘js/[name]-[hash].js’,
       assetFileNames: ‘[ext]/[name]-[hash].[ext]’
     }
   }
}

5:Tree Shaking(摇树优化)

Tree shaking 是一种从项目中删除未使用代码的技术。它依赖于 ES 模块语法。例如,当使用 lodash 时:

// Bad: This imports the entire lodash library
import _ from 'lodash';
// Good: This imports only the 'isEmpty' function from lodash
import _isEmpty from 'lodash/isEmpty';

Tree Shaking 在很大程度上减少了捆绑包的大小,是性能优化的重要部分。 Vite 和 Webpack 4.x 默认情况下都启用了 Tree Shaking。

6:在 Vite 中禁用不必要的构建配置

Vite 还提供了优化构建配置的选项。以下是禁用某些构建功能的示例:

build: { 
 terserOptions: {
   compress: {
     // Remove console in production// Remove console in production
     drop_console: true,
     drop_debugger: true,
   },
 },

 // Disable file size reporting
 reportCompressedSize: false,
 // Disable source map generation to reduce bundle size (important for production)
 sourcemap: false, // Disable this for production to minimize bundle size

}

三:整体优化

1:服务端渲染(SSR)

服务器端渲染(SSR)是指在服务器上完成的渲染过程。最终渲染的HTML页面通过HTTP协议发送到客户端。在SEO和首次加载速度方面,SSR提供了显著的好处。

  • Vue:可以通过 Nuxt.js 实现
  • React:可以通过 Next.js 实现

2:启用GZIP压缩

Gzip压缩通过压缩文件显着提高了首次加载速度。使用Gzip可以将文本文件压缩至原始大小的至少40%。不过,需要注意的是图像文件不应该使用Gzip压缩。

在构建过程中设置Gzip压缩的步骤如下:

  1. 在Vue项目中安装Gzip压缩所需的依赖,并将productionGzip设置为true以启用Gzip压缩。

npm install --save-dev compression-webpack-plugin--save-dev compression-webpack-plugin

  1. 修改构建命令以使用Gzip压缩。不过需要注意,这可能会遇到错误“ValidationError: Compression Plugin Invalid Options”。为了解决这个问题,根据官方文档将设置从“asset”更改为“filename”。
  2. 再次运行构建命令 npm run build,你将生成 .gz 文件,表示成功压缩。

3:Brotli 压缩

Brotli是开源的一种新型压缩算法(2015 年 Google 推出,Github 地址:https://github.com/google/brotli ),Brotli压缩比Gzip压缩性能更好。开启Brotli压缩功能后,CDN节点会对资源进行智能压缩后返回,缩小传输文件大小,提升文件传输效率,减少带宽消耗。

启用Brotli压缩可以将CDN流量额外减少20%,相较于Gzip。在各种情况下,Brotli的性能比Gzip高出17-25%,特别是当设置为级别1时,超过了Gzip级别9的压缩效果。(数据来自 Google 数据报告:https://quixdb.github.io/squash-benchmark/unstable/

大多数主流浏览器都支持Brotli压缩,除了Internet Explorer和Opera Mini。

要在Vite项目中启用Brotli压缩,可以使用vite-plugin-compression插件。修改您的.env.production文件,相应地设置VITE_COMPRESSION全局变量。

# 默认情况下禁用压缩:#默认情况下禁用压缩:
   VITE_COMPRESSION = "none"

  # 以下配置支持在不删除原始文件的情况下进行压缩:
   Enable Gzip compression:
   VITE_COMPRESSION = "gzip"

   # 启用Brotli压缩:
   VITE_COMPRESSION = "brotli"

   # 同时启用GZIP和Brotli压缩:
   VITE_COMPRESSION = "both"

   # 以下配置启用压缩和删除原始文件:
   Enable Gzip compression:
   VITE_COMPRESSION = "gzip-clear"

   # 启用Brotli压缩:
   VITE_COMPRESSION = "brotli-clear"

   # 同时启用GZIP和Brotli压缩:
   VITE_COMPRESSION = "both-clear"

4:缓存问题

缓存是一种基本的优化技术,通过减少IO操作和CPU计算来提高性能。性能优化的第一条规则是优先考虑缓存。

缓存选项包括浏览器缓存、CDN缓存、反向代理、本地缓存、分布式缓存和数据库缓存。

5:Ajax 缓存

Ajax 缓存请求的 URL 和响应结果,以提高页面响应速度和用户体验。在进行 Ajax 请求时,尽量使用 GET 方法,以利用客户端缓存并增强请求速度。

6:组件导入

使用第三方组件库时,只导入必要的组件,例如

import { Button } from ‘vant’

7:动态加载

使用import()在需要时动态导入第三方库和组件。例如,在测试环境中,只有当主机域名不是生产域名时才启用VConsole调试。

if (location.host !== ‘production-domain’) {
 import(‘@/utils/vconsole’);import(‘@/utils/vconsole’);
}

8:异步组件加载

使用 import 或 require 方法异步加载组件:

() => import(‘@/pages/xxx.vue’)


resolve => require(['@/pages/xxx.vue'], resolve)

9:懒加载路由

懒加载路由是在路由配置中应用异步组件加载的一种方式:

{
 path: '/index','/index',
 name: 'index',
 component: () => import('@view/xxx.vue'),
 meta: { title: 'Homepage' }
}

10:CDN(内容分发)

内容传送网络(CDN)将静态文件、音频、视频、JavaScript 资源、图片等分发到全球各地的服务器。通过从附近的 CDN 服务器提供资源,可以减少延迟并提高加载速度。

11:域名分片(Domain sharding)

由于浏览器限制了每个域(domain)的活动连接数。为了可以同时下载超过该限制数的资源,域名分片(domain sharding)会将内容拆分到多个子域中。当使用多个域来处理多个资源时,浏览器能够同时下载更多资源,从而缩短了页面加载时间并改善了用户体验。

12:DNA预取

DNS-prefetch 尝试在请求资源之前解析域名

当浏览器从(第三方)服务器请求资源时,必须先将该跨源域名解析为 IP 地址,然后浏览器才能发出请求。此过程称为 DNS 解析。虽然 DNS 缓存可以帮助减少此延迟,但 DNS 解析可能会给请求增加明显的延迟。对于打开了与许多第三方的连接的网站,此延迟可能会大大降低加载性能。

dns-prefetch 可帮助开发人员掩盖 DNS 解析延迟。

HTML 元素通过设置 rel 属性值为 dns-prefetch 提供此功能

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <!-- dns-prefetch -->
    <link rel="dns-prefetch" href="https://fonts.googleapis.com/" />
    <!-- 其他 head 元素 -->
  </head>
  <body>
    <!-- 页面内容 -->
  </body>
</html>

13:Web Workers

Web Workers 为 JavaScript 创建了一个多线程环境,允许任务在后台运行而不阻塞主线程。对于计算密集型任务,使用 Web Workers 可以优化性能。

源码附件:点此下载

举报

相关推荐

0 条评论