网站性能不佳？试试这十大前端性能优化技巧！（一）https://developer.aliyun.com/article/1426475
5. 优化 JavaScript 代码执行效率，尽可能避免长任务阻塞和 JavaScript 异常。
以下是一个使用 Web Worker 分离长任务的示例：
1. 在 JavaScript 中检查浏览器是否支持 Web Worker：
if (typeof(Worker) !== 'undefined') { // 浏览器支持 Web Worker } else { // 浏览器不支持 Web Worker } • 1 • 2 • 3 • 4 • 5
2. 创建一个 worker.js 文件，包含长时间执行的任务逻辑：
console.log('Worker started'); const doSomething = () => { const now = performance.now(); while (performance.now() - now < 2000) {} console.log('Long task completed'); }; onmessage = (event) => { if (event.data === 'start') { doSomething(); postMessage('completed'); } }; • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • 10 • 11 • 12 • 13 • 14
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'); } • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • 10 • 11 • 12 • 13 • 14 • 15
4. 运行代码时，长时间执行的任务将会在 Web Worker 中执行，主 JavaScript 不会阻塞，长时间执行的任务执行完成后，Web Worker 会将结果发送回主 JavaScript。
通过使用 Web Worker 把长时间执行的任务分离出来，主 JavaScript 可以继续执行其他的代码逻辑，提高 JavaScript 代码的执行效率。除了使用 Web Worker，还可以使用 setTimeout 和 requestAnimationFrame 等方法，把长时间执行的任务分解成更短的时间段执行，以避免阻塞页面。此外，可以通过 try-catch 合理地捕获 JavaScript 异常，以避免错误中断代码的执行。
6. 使用图片和视频的 WebP 和 AVIF 等新型图片格式，以优化文件大小和质量。
好的，以下是一个使用 <picture> 和 <source> 元素支持 WebP 和 AVIF 等新型图片格式的示例：
1. 准备好 WebP 和 AVIF 格式的图片文件，并使用 WebP 和 AVIF 兼容性检查工具确认浏览器是否支持新格式。
2. 在 HTML 中使用 <picture> 和 <source> 元素替代 <img> 元素，增加 WebP 和 AVIF 格式图片的支持：
<picture> <!-- 使用 WebP 格式时，浏览器支持 WebP 时显示 --> <source srcset="image.webp" type="image/webp"> <!-- 使用 AVIF 格式时，浏览器支持 AVIF 时显示 --> <source srcset="image.avif" type="image/avif"> <!-- 当浏览器不支持 WebP 和 AVIF 时，显示默认格式 --> <img src="image.jpg" alt="My Image"> </picture> • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • 10
3. 运行页面时，如果浏览器支持 WebP 或 AVIF，将加载对应格式的图片，否则加载默认格式的图片。
通过使用新型图片格式如 WebP 和 AVIF，可以优化图片文件的大小和质量，从而提高页面加载速度和用户体验，减少带宽消耗和服务器负载。同时，为了让尽可能多的用户受益于新型图片格式，应该在保证用户体验的前提下，为不支持新格式的浏览器提供默认格式的图片。
7. 压缩和合并 HTML、CSS 和 JavaScript 的代码，以减少文件大小和网络请求次数。
好的，以下是一个使用 Gulp 自动化构建工具压缩和合并文件的示例：
1. 安装 Gulp：
$ npm install gulp • 1
2. 安装 HTML、CSS 和 JavaScript 压缩和合并插件：
$ npm install gulp-htmlmin gulp-csso gulp-uglify gulp-concat --save-dev • 1
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')); • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • 10 • 11 • 12 • 13 • 14 • 15 • 16 • 17 • 18 • 19 • 20 • 21 • 22 • 23 • 24 • 25 • 26
4. 在命令行中运行 gulp 命令，执行自动化构建：
$ gulp • 1
- 在
dist目录下查看压缩和合并后的文件。
通过使用自动化构建工具如 Gulp，可以大大减少手工优化代码的工作量，提高工作效率和质量。除了上述插件，还可以使用其他的压缩和合并插件如 CleanCSS 和 Babel，进一步优化代码的大小和质量。在实际应用中，需要根据项目特点和实际需求，选择合适的插件和自动化构建工具，采取合理的工作流程，以达到最佳的代码优化和效益。
8. 使用浏览器缓存技术来减少服务器请求，例如使用 CDN 技术将静态资源部署到全球各地的服务器上。
以下是一个使用浏览器缓存技术来优化静态资源加载的示例：
1. 部署静态资源到 CDN 上，确保 CDN 的访问速度比本地服务器更快：
<link rel="stylesheet" href="https://cdn.example.com/app.css"> <script src="https://cdn.example.com/app.js"></script> <img src="https://cdn.example.com/image.jpg" alt="My Image"> • 1 • 2 • 3
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()); } })); • 1 • 2 • 3 • 4 • 5 • 6 • 7
3. 在 HTML 页面中添加版本号或时间戳等辅助信息，以确保每个版本的静态资源都有唯一的标识，以避免缓存冲突和混淆。
通过使用浏览器缓存技术和 CDN，可以大大减少服务器请求和带宽消耗，提高静态资源的加载速度和用户体验，同时还可以降低服务器的负载和成本。在实际应用中，需要根据项目特点和实际需求，选择合适的缓存策略和 CDN 服务提供商，采取合理的方案和措施，以达到最佳的效果和效益。
9. 优化网页布局和页面结构，避免重排和重绘。
好的，以下是一个优化网页布局和页面结构的示例，避免重排和重绘：
1. 使用 position: absolute 或 position: fixed 定位元素，避免在文档流中移动和调整元素位置。
<div class="wrapper"> <div class="sidebar"></div> <div class="main"></div> </div> • 1 • 2 • 3 • 4
.wrapper { position: relative; } .sidebar { position: absolute; top: 0; left: 0; width: 200px; } .main { margin-left: 200px; } • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • 10 • 11 • 12 • 13 • 14
2. 使用 display: none 隐藏元素，而不是设置 visibility: hidden，避免影响布局和排版。
<button id="btn">Toggle</button> <div id="content"> <p>Hello, World!</p> </div> • 1 • 2 • 3 • 4
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'; } }); • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • 10
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; } • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • 10 • 11
通过优化网页布局和页面结构，尽可能避免重排和重绘操作，可以提高页面的性能和体验，减少浏览器的负载和资源消耗。同时，还可以采用其他的优化措施如懒加载、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 应用的性能和用户体验。
