历史搜索

前端技术中的常见优化技巧有哪些?

游客2024-09-03 09:30:01
目录文章目录
  1. 一. 减少 HTTP 请求的数量和大小,合并、压缩、缓存静态资源,避免重复请求和无用请求。
  2. 二. 减少 JavaScript 和 CSS 文件的大小和数量,避免不必要的代码
  3. 三. 使用浏览器缓存避免重复请求。可以使用强缓存和协商缓存配合使用。
  4. 四. 延迟加载图片和视频,使用图片和视频懒加载技术,只在需要时加载文件。
  5. 五. 优化 JavaScript 代码执行效率,尽可能避免长任务阻塞和 JavaScript 异常。
  6. 六. 使用图片和视频的 WebP 和 AVIF 等新型图片格式,以优化文件大小和质量。
  7. 七. 压缩和合并 HTML、CSS 和 JavaScript 的代码,以减少文件大小和网络请求次数。
  8. 八. 使用浏览器缓存技术来减少服务器请求,例如使用 CDN 技术将静态资源部署到全球各地的服务器上。
  9. 九. 优化网页布局和页面结构,避免重排和重绘。
  10. 十. 使用性能检测工具来发现并修复网站中的性能瓶颈,例如 Google 的 PageSpeed Insights 和 WebPage Test 等。
  11. 结语

前端技术中的常见优化技巧有哪些? 1

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,还可以使用 setTimeoutrequestAnimationFrame 等方法,把长时间执行的任务分解成更短的时间段执行,以避免阻塞页面。此外,可以通过 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 来检测页面性能和发现瓶颈的示例:

  1. 进入 PageSpeed Insights 的网站,输入待检测的页面链接,选择对应的设备类型和网络速度。
  2. 点击 “分析” 按钮,等待测试结果和分析报告的返回。
  3. 在分析报告中,查找对应的性能瓶颈和优化建议,例如页面加载速度、资源优化、缓存策略等方面。
  4. 根据分析报告中的建议和指引,采取相应的优化措施来提高页面性能和用户体验。

以下是一些针对页面性能优化的常用技术和方案:

  • 图片优化:使用 WebP、压缩图片大小、懒加载和延迟加载等技术;
  • CSS 和 JavaScript 优化:压缩和合并文件、降低 HTTP 请求次数、使用缓存和减小资源文件大小等;
  • 服务器端优化:采用 Gzip 压缩协议、启用 HTTP2 多路复用、使用 CDN 加速和负载均衡等;
  • 尽可能少使用第三方库和组件,减少页面的代码量和依赖关系。

通过使用性能检测工具如 PageSpeed Insights 和 WebPage Test,可以发现页面性能瓶颈和优化建议,快速识别问题并采取相应的措施来提高页面的性能和用户体验。

结语

前端优化是条漫长的路,不是说一天两天就能全部做完的。我们可以参考上面的方法去把我们目前能做的都给优化了,剩下的更加小的一些细节点不用太过着急,毕竟也是要考虑优化性价比的。