1. 减少 HTTP 请求的数量和大小，合并、压缩、缓存静态资源，避免重复请求和无用请求。
以下是一个使用 Node.js 和 Gulp 自动化构建工具来合并、压缩和缓存静态资源的示例：
1. 安装 Gulp 和相关依赖：
$ npm install gulp gulp-concat gulp-uglify gulp-rename gulp-cache
2. 在项目目录下创建 gulpfile.js 文件，开始配置：
const gulp = require('gulp'); const concat = require('gulp-concat'); const uglify = require('gulp-uglify'); const rename = require('gulp-rename'); const cache = require('gulp-cache'); // 合并、压缩、重命名 js gulp.task('scripts', function () { return gulp.src('src/js/*.js') .pipe(concat('main.js')) .pipe(gulp.dest('dist/js')) .pipe(rename({suffix: '.min'})) .pipe(uglify()) .pipe(gulp.dest('dist/js')) }); // 缓存静态资源 gulp.task('cache', function() { return gulp.src('src/**/*.{js,css,png,jpeg,gif,svg}') .pipe(cache()) .pipe(gulp.dest('dist')) }); // 监听文件变化 gulp.task('watch', function () { gulp.watch('src/js/*.js', gulp.series('scripts')); gulp.watch('src/**/*.{js,css,png,jpeg,gif,svg}', gulp.series('cache')); }); // 执行所有任务 gulp.task('default', gulp.parallel(['scripts', 'cache', 'watch']));
3. 运行 Gulp 自动化构建工具：
$ gulp
4. 完成后，合并、压缩、重命名后的静态资源将会保存到 dist 目录下，可以直接通过 HTML 中引用来使用它们。
通过上述代码案例，我们可以使用 Gulp 自动化构建工具对静态资源进行合并、压缩和缓存，有效地减少 HTTP 请求的数量和大小，避免重复请求和无用请求，优化网页性能和用户体验。
2. 减少 JavaScript 和 CSS 文件的大小和数量，避免不必要的代码。
以下是一个使用 Webpack 和 Babel 来减少 JavaScript 文件大小和数量的示例：
1. 安装 Webpack 和相关依赖：
$ npm install webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env
2. 创建一个 src 目录并添加 index.js 文件和 styles.css 文件：
// index.js const sum = (a, b) => a + b; console.log(sum(2, 2)); // styles.css body { background-color: #f0f0f0; }
3. 在项目目录下创建 webpack.config.js 文件，开始配置：
const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } }, { test: /\.css$/, use: ['style-loader', 'css-loader'], }, ], }, };
4. 在 package.json 中添加命令：
"scripts": { "build": "webpack", "dev": "webpack-dev-server --open" },
5. 运行构建命令：
$ npm run build
6. 完成后，输出的 main.js 文件大小将会更小，不必要的代码已经被自动去除。
通过使用 Webpack 和 Babel 实现 JavaScript 文件的压缩和精简，可以有效减少文件大小和数量，提升网页性能和用户体验。类似的，使用类似 CSS Nano 的工具可以对 CSS 文件进行压缩和精简，也可以进一步减少文件大小和数量。
3. 使用浏览器缓存避免重复请求。可以使用强缓存和协商缓存配合使用。
以下是一个使用 Express.js 和 ETag 缓存协商来减少不必要的请求的示例：
1. 安装 Express.js 和相关依赖：
$ npm install express ejs
2. 在项目目录下创建 app.js 文件，开始配置：
const express = require('express'); const ejs = require('ejs'); const app = express(); // 设置 EJS 模板引擎 app.set('views', './views'); app.set('view engine', 'ejs'); // 定义路由 app.get('/', (req, res) => { // 设置强缓存 res.setHeader('Cache-Control', 'public, max-age=60, immutable'); // 生成 ETag const content = ` <h1>Hello, World!</h1> <p>This is a simple web page.</p> `; const hash = require('crypto').createHash('md5').update(content).digest('base64'); const etag = `"${hash}"`; // 判断 ETag 是否匹配 if (etag === req.headers['if-none-match']) { // 返回 304 Not Modified res.status(304).end(); } else { // 返回页面内容和 ETag res.setHeader('ETag', etag); res.render('index', { content }); } }); // 启动服务器 app.listen(3000, () => { console.log('Server is running at http://localhost:3000'); });
3. 在 views 目录下创建一个 index.ejs 模板文件：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>My Web Page</title> </head> <body> <%- content %> </body> </html>
4. 运行 Node.js 服务器：
$ node app.js
5. 访问 http://localhost:3000，页面内容会被缓存，除非 ETag 发生变化，否则客户端会从缓存中加载。
通过使用强缓存和 ETag 缓存协商机制，可以在服务器端避免不必要的请求，减少带宽消耗和页面加载时间，优化网页性能和用户体验。
4. 延迟加载图片和视频，使用图片和视频懒加载技术，只在需要时加载文件。
好的，以下是一个使用 Intersection Observer API 实现图片懒加载的示例：
1. 在 HTML 中标记需要延迟加载的图片，使用 data-src 属性替代 src 属性：
<img data-src="image.jpg" alt="My Image">
2. 在 CSS 中定义占位符样式，确保页面布局不会因未加载的图片而发生变化：
img { width: 100%; height: 100%; object-fit: cover; background-color: #f0f0f0; }
3. 在 JavaScript 中使用 Intersection Observer API 监视图片元素是否进入视口：
const images = document.querySelectorAll('img[data-src]'); const options = { rootMargin: '0px', threshold: 0.1 }; const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; const src = img.getAttribute('data-src'); img.setAttribute('src', src); img.removeAttribute('data-src'); observer.unobserve(img); } }); }, options); images.forEach(img => { observer.observe(img); });
4. 运行页面，当图片元素进入视口时，data-src 属性将会被替换成真正的 src 属性，图片将会被加载。
通过使用 Intersection Observer API 实现图片懒加载，可以延迟加载页面中的图片和视频，提高页面加载速度和用户体验，减少带宽消耗和服务器负载。
网站性能不佳？试试这十大前端性能优化技巧！（二）https://developer.aliyun.com/article/1426477
