网站前端和后台性能优化的34条宝贵经验和方法

本篇攻略旨在为网站前端和后台性能的优化提供宝贵经验和方法，包括从前端和后台两方面出发的优化方法。

前端性能优化

1. 启用缓存

对于静态资源，以及一些不常变更的动态资源，可以启用浏览器缓存，减少对于服务器的请求，加快页面加载速度。

2. 压缩资源

对于CSS和JavaScript等资源，可以使用压缩工具进行压缩，减小文件体积，提高加载速度。

示例说明：

使用webpack打包工具，通过配置实现对JavaScript和CSS文件的压缩。

const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        extractComments: false,
        terserOptions: {
          compress: {
            drop_console: true,
          },
        },
      }),
    ],
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: ["babel-loader"],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "css/[name].[contenthash].css",
      chunkFilename: "css/[id].[contenthash].css",
    }),
  ],
};

3. 延迟加载

对于页面中不必要立刻加载的资源，可以使用懒加载的方法，延迟加载，以减少页面的初始加载时间。

4. 图片优化

对于图片，可以使用压缩、CDN加速等方式进行优化。

示例说明：

使用WebP格式优化图片，提高图片加载速度，同时为了兼容性，同时提供JPEG格式的备选。

<picture>
  <source type="image/webp" srcset="img/image.webp">
  <img src="img/image.jpg" alt="Some alternate text">
</picture>

5. 减少HTTP请求数量

对于一些小的图片和文件资源，可以将它们打包成一张精灵图，减少HTTP请求数量。

6. 减少DOM操作

尽可能减少DOM操作，可以提高页面性能，避免重复执行造成的影响。

7. CSS选择器优化

尽可能减少CSS选择器的复杂度，选择器过于复杂会降低页面性能。

8. 减少重排和重绘

避免频繁的重排和重绘，可以减少页面性能的消耗。

后台性能优化

1. 数据库优化

对于数据库的读写操作，可以优化SQL语句和建立索引，减少查询时间。

2. 代码优化

对于一些重要的代码块，可以对其进行优化，减少无意义的计算。

3. 避免重复计算

对于一些计算量较大的操作，尽可能减少重复计算，例如进行缓存。

4. 使用缓存组件

对于一些需要频繁访问的资源，可以使用缓存组件，减少服务器负担。

5. 运行时优化

对于一些较为复杂的计算，可以使用分布式计算等方式进行运行时优化。

6. 异步处理

对于一些耗时较长的操作，可以使用异步处理的方式，避免阻塞服务器运行。

7. 服务器配置优化

对于服务器的配置，可以根据实际业务需求进行调整，提升性能。

8. 负载均衡

对于大型网站或者高并发的业务场景，可以使用负载均衡的方式实现分流，提升整体性能。

总结：

本篇攻略为前端和后台性能优化提供了多种经验和方法，在实际开发中可以根据实际业务需求进行选择，实现性能的最大化优化，例如：压缩JS和CSS代码，优化SQL查询等。同时，开发人员可以在不断的实践中总结出更多的优化方法，提升工作效率。