网站性能不佳?试试这十大前端性能优化技巧!
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 = `
Hello, World!
This is a simple web page.
`;
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 模板文件：
My Web Page
<%- content>
4. 运行 Node.js 服务器：
$ node app.js
5. 访问 http://localhost:3000，页面内容会被缓存，除非 ETag 发生变化，否则客户端会从缓存中加载。
通过使用强缓存和 ETag 缓存协商机制，可以在服务器端避免不必要的请求，减少带宽消耗和页面加载时间，优化网页性能和用户体验。
4. 延迟加载图片和视频，使用图片和视频懒加载技术，只在需要时加载文件。
好的，以下是一个使用 Intersection Observer API 实现图片懒加载的示例：
1. 在 HTML 中标记需要延迟加载的图片，使用 data-src 属性替代 src 属性：
![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 实现图片懒加载，可以延迟加载页面中的图片和视频，提高页面加载速度和用户体验，减少带宽消耗和服务器负载。
5. 优化 JavaScript 代码执行效率，尽可能避免长任务阻塞和 JavaScript 异常。
以下是一个使用 Web Worker 分离长任务的示例：
1. 在 JavaScript 中检查浏览器是否支持 Web Worker：
if (typeof(Worker) !== 'undefined') {
// 浏览器支持 Web Worker
} else {
// 浏览器不支持 Web Worker
}
2. 创建一个 worker.js 文件，包含长时间执行的任务逻辑：
console.log('Worker started');
const doSomething = () => {
const now = performance.now();
while (performance.now() - now < 2000 console.loglong task completed> {
if (event.data === 'start') {
doSomething();
postMessage('completed');
}
};
3. 在主 JavaScript 中，通过 new Worker() 创建一个 Web Worker：
if (typeof(Worker) !== 'undefined') {
const worker = new Worker('worker.js');
// 当 Web Worker 发送消息时，处理返回结果
worker.onmessage = (event) => {
console.log(event.data);
};
// 向 Web Worker 发送一个消息，并开始长时间执行的任务
worker.postMessage('start');
console.log('Main task continues');
} else {
console.log('Web Worker not supported');
}
4. 运行代码时，长时间执行的任务将会在 Web Worker 中执行，主 JavaScript 不会阻塞，长时间执行的任务执行完成后，Web Worker 会将结果发送回主 JavaScript。
通过使用 Web Worker 把长时间执行的任务分离出来，主 JavaScript 可以继续执行其他的代码逻辑，提高 JavaScript 代码的执行效率。除了使用 Web Worker，还可以使用 setTimeout 和 requestAnimationFrame 等方法，把长时间执行的任务分解成更短的时间段执行，以避免阻塞页面。此外，可以通过 try-catch 合理地捕获 JavaScript 异常，以避免错误中断代码的执行。
6. 使用图片和视频的 WebP 和 AVIF 等新型图片格式，以优化文件大小和质量。
好的，以下是一个使用
1. 准备好 WebP 和 AVIF 格式的图片文件，并使用 WebP 和 AVIF 兼容性检查工具确认浏览器是否支持新格式。
2. 在 HTML 中使用 元素，增加 WebP 和 AVIF 格式图片的支持：
3. 运行页面时，如果浏览器支持 WebP 或 AVIF，将加载对应格式的图片，否则加载默认格式的图片。
通过使用新型图片格式如 WebP 和 AVIF，可以优化图片文件的大小和质量，从而提高页面加载速度和用户体验，减少带宽消耗和服务器负载。同时，为了让尽可能多的用户受益于新型图片格式，应该在保证用户体验的前提下，为不支持新格式的浏览器提供默认格式的图片。
7. 压缩和合并 HTML、CSS 和 JavaScript 的代码，以减少文件大小和网络请求次数。
好的，以下是一个使用 Gulp 自动化构建工具压缩和合并文件的示例：
1. 安装 Gulp：
$ npm install gulp
2. 安装 HTML、CSS 和 JavaScript 压缩和合并插件：
$ npm install gulp-htmlmin gulp-csso gulp-uglify gulp-concat --save-dev
3. 在项目目录下创建 gulpfile.js 文件，开始配置：
const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const csso = require('gulp-csso');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
gulp.task('minify-html', () => {
return gulp.src('src/*.html')
.pipe(htmlmin({ minifyCSS: true, minifyJS: true }))
.pipe(gulp.dest('dist'));
});
gulp.task('minify-css', () => {
return gulp.src('src/*.css')
.pipe(csso())
.pipe(gulp.dest('dist'));
});
gulp.task('minify-js', () => {
return gulp.src('src/*.js')
.pipe(uglify())
.pipe(concat('app.min.js'))
.pipe(gulp.dest('dist'));
});
gulp.task('default', gulp.parallel('minify-html', 'minify-css', 'minify-js'));
4. 在命令行中运行 gulp 命令，执行自动化构建：
$ gulp
- 在 dist 目录下查看压缩和合并后的文件。
通过使用自动化构建工具如 Gulp，可以大大减少手工优化代码的工作量，提高工作效率和质量。除了上述插件，还可以使用其他的压缩和合并插件如 CleanCSS 和 Babel，进一步优化代码的大小和质量。在实际应用中，需要根据项目特点和实际需求，选择合适的插件和自动化构建工具，采取合理的工作流程，以达到最佳的代码优化和效益。
8. 使用浏览器缓存技术来减少服务器请求，例如使用 CDN 技术将静态资源部署到全球各地的服务器上。
以下是一个使用浏览器缓存技术来优化静态资源加载的示例：
1. 部署静态资源到 CDN 上，确保 CDN 的访问速度比本地服务器更快：
<script src="https://cdn.example.com/app.js"></script>
2. 在服务器上配置静态资源的缓存策略，通过设置 Cache-Control 和 Expires 等 HTTP 响应头来控制资源如何被缓存和过期：
app.use(express.static('public', {
maxAge: '1d',
setHeaders: (res, path, stat) => {
res.set('Cache-Control', 'public, max-age=86400');
res.set('Expires', new Date(Date.now() + 86400000).toUTCString());
}
}));
3. 在 HTML 页面中添加版本号或时间戳等辅助信息，以确保每个版本的静态资源都有唯一的标识，以避免缓存冲突和混淆。
通过使用浏览器缓存技术和 CDN，可以大大减少服务器请求和带宽消耗，提高静态资源的加载速度和用户体验，同时还可以降低服务器的负载和成本。在实际应用中，需要根据项目特点和实际需求，选择合适的缓存策略和 CDN 服务提供商，采取合理的方案和措施，以达到最佳的效果和效益。
9. 优化网页布局和页面结构，避免重排和重绘。
好的，以下是一个优化网页布局和页面结构的示例，避免重排和重绘：
1. 使用 --tt-darkmode-color: #C7254E;">position: fixed 定位元素，避免在文档流中移动和调整元素位置。
.wrapper {
position: relative;
}
.sidebar {
position: absolute;
top: 0;
left: 0;
width: 200px;
}
.main {
margin-left: 200px;
}
2. 使用 display: none 隐藏元素，而不是设置 visibility: hidden，避免影响布局和排版。
Hello, World!
const btn = document.querySelector('#btn');
const content = document.querySelector('#content');
btn.addEventListener('click', () => {
if (content.style.display === 'none') {
content.style.display = 'block';
} else {
content.style.display = 'none';
}
});
3. 在 CSS 中使用 transform 和 opacity 等属性进行动画效果的实现，而不是改变元素的位置和大小等属性。
.box {
width: 100px;
height: 100px;
background-color: red;
transition: all 0.3s ease;
}
.box:hover {
transform: scale(1.2);
opacity: 0.8;
}
通过优化网页布局和页面结构，尽可能避免重排和重绘操作，可以提高页面的性能和体验，减少浏览器的负载和资源消耗。同时，还可以采用其他的优化措施如懒加载、CDN 加速、使用 WebP 等新型图片格式等，进一步提高页面的加载速度和用户体验。
10. 使用性能检测工具来发现并修复网站中的性能瓶颈，例如 Google 的 PageSpeed Insights 和 WebPage Test 等。
以下是一个使用 Google 的 PageSpeed Insights 来检测页面性能和发现瓶颈的示例：
- 进入 PageSpeed Insights 的网站，输入待检测的页面链接，选择对应的设备类型和网络速度。
- 点击 “分析” 按钮，等待测试结果和分析报告的返回。
- 在分析报告中，查找对应的性能瓶颈和优化建议，例如页面加载速度、资源优化、缓存策略等方面。
- 根据分析报告中的建议和指引，采取相应的优化措施来提高页面性能和用户体验。
以下是一些针对页面性能优化的常用技术和方案：
- 图片优化：使用 WebP、压缩图片大小、懒加载和延迟加载等技术；
- CSS 和 JavaScript 优化：压缩和合并文件、降低 HTTP 请求次数、使用缓存和减小资源文件大小等；
- 服务器端优化：采用 Gzip 压缩协议、启用 HTTP2 多路复用、使用 CDN 加速和负载均衡等；
- 尽可能少使用第三方库和组件，减少页面的代码量和依赖关系。
通过使用性能检测工具如 PageSpeed Insights 和 WebPage Test，可以发现页面性能瓶颈和优化建议，快速识别问题并采取相应的措施来提高页面的性能和用户体验。
通过上述的优化措施，可以有效地提升 web 应用的性能和用户体验。