目录文章目录一. 减少 HTTP 请求的数量和大小，合并、压缩、缓存静态资源，避免重复请求和无用请求。二. 减少 JavaScript 和 CSS 文件的大小和数量，避免不必要的代码三. 使用浏览器缓存避免重复请求。可以使用强缓存和协商缓存配合使用。四. 延迟加载图片和视频，使用图片和视频懒加载技术，只在需要时加载文件。五. 优化 JavaScript 代码执行效率，尽可能避免长任务阻塞和 JavaScript 异常。六. 使用图片和视频的 WebP 和 AVIF 等新型图片格式，以优化文件大小和质量。七. 压缩和合并 HTML、CSS 和 JavaScript 的代码，以减少文件大小和网络请求次数。八. 使用浏览器缓存技术来减少服务器请求，例如使用 CDN 技术将静态资源部署到全球各地的服务器上。九. 优化网页布局和页面结构，避免重排和重绘。十. 使用性能检测工具来发现并修复网站中的性能瓶颈，例如 Google 的 PageSpeed Insights 和 WebPage Test 等。结语 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 实现图片懒加载，可以延迟加载页面中的图片和视频，提高页面加载速度和用户体验，减少带宽消耗和服务器负载。 五. 优化 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.log('Long task completed'); }; onmessage = (event) => { 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 异常，以避免错误中断代码的执行。 六. 使用图片和视频的 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> 3. 运行页面时，如果浏览器支持 WebP 或 AVIF，将加载对应格式的图片，否则加载默认格式的图片。 通过使用新型图片格式如 WebP 和 AVIF，可以优化图片文件的大小和质量，从而提高页面加载速度和用户体验，减少带宽消耗和服务器负载。同时，为了让尽可能多的用户受益于新型图片格式，应该在保证用户体验的前提下，为不支持新格式的浏览器提供默认格式的图片。 七. 压缩和合并 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 5. 在 dist 目录下查看压缩和合并后的文件。 通过使用自动化构建工具如 Gulp，可以大大减少手工优化代码的工作量，提高工作效率和质量。除了上述插件，还可以使用其他的压缩和合并插件如 CleanCSS 和 Babel，进一步优化代码的大小和质量。在实际应用中，需要根据项目特点和实际需求，选择合适的插件和自动化构建工具，采取合理的工作流程，以达到最佳的代码优化和效益。 八. 使用浏览器缓存技术来减少服务器请求，例如使用 CDN 技术将静态资源部署到全球各地的服务器上。 以下是一个使用浏览器缓存技术来优化静态资源加载的示例： 1. 部署静态资源到 CDN 上，确保 CDN 的访问速度比本地服务器更快： <link rel="stylesheet" rel="nofollow" href="/links?url=aHR0cHM6Ly9jZG4uZXhhbXBsZS5jb20vYXBwLmNzcw=="> <script src="https://cdn.example.com/app.js"></script> <img src="https://cdn.example.com/image.jpg" alt="My Image"> 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 服务提供商，采取合理的方案和措施，以达到最佳的效果和效益。 九. 优化网页布局和页面结构，避免重排和重绘。 以下是一个优化网页布局和页面结构的示例，避免重排和重绘： 1. 使用 position: absolute 或 position: fixed 定位元素，避免在文档流中移动和调整元素位置。 <div > <div ></div> <div ></div> </div> .wrapper { position: relative; } .sidebar { position: absolute; top: 0; left: 0; width: 200px; } .main { margin-left: 200px; } 2. 使用 display: none 隐藏元素，而不是设置 visibility: hidden，避免影响布局和排版。 <button id="btn">Toggle</button> <div id="content"> <p>Hello, World!</p> </div> 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 等新型图片格式等，进一步提高页面的加载速度和用户体验。 十. 使用性能检测工具来发现并修复网站中的性能瓶颈，例如 Google 的 PageSpeed Insights 和 WebPage Test 等。 以下是一个使用 Google 的 PageSpeed Insights 来检测页面性能和发现瓶颈的示例： 进入 PageSpeed Insights 的网站，输入待检测的页面链接，选择对应的设备类型和网络速度。 点击 “分析” 按钮，等待测试结果和分析报告的返回。 在分析报告中，查找对应的性能瓶颈和优化建议，例如页面加载速度、资源优化、缓存策略等方面。 根据分析报告中的建议和指引，采取相应的优化措施来提高页面性能和用户体验。 以下是一些针对页面性能优化的常用技术和方案： 图片优化：使用 WebP、压缩图片大小、懒加载和延迟加载等技术； CSS 和 JavaScript 优化：压缩和合并文件、降低 HTTP 请求次数、使用缓存和减小资源文件大小等； 服务器端优化：采用 Gzip 压缩协议、启用 HTTP2 多路复用、使用 CDN 加速和负载均衡等； 尽可能少使用第三方库和组件，减少页面的代码量和依赖关系。 通过使用性能检测工具如 PageSpeed Insights 和 WebPage Test，可以发现页面性能瓶颈和优化建议，快速识别问题并采取相应的措施来提高页面的性能和用户体验。 结语 前端优化是条漫长的路，不是说一天两天就能全部做完的。我们可以参考上面的方法去把我们目前能做的都给优化了，剩下的更加小的一些细节点不用太过着急，毕竟也是要考虑优化性价比的。
