使用 Ctrl+D 可将网站添加到书签
 
当前位置：码云笔记 > 前端开发 > 前端技术中的常见优化技巧有哪些？
码云码云 前端开发

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

目录
文章目录隐藏
  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. 结语

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

前端项目的性能优化是一个综合性的问题，如果要面面俱到的说的话，估计三天三夜说不完。所以我们就从实际的工程应用角度出发，聊我们最常遇见的前端优化问题，以下是前端技术中一些常见的优化方案：

一. 减少 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 请求的数量和大小，避免重复请求和无用请求，优化网页性能和用户体验。

二. 减少 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 文件进行压缩和精简，也可以进一步减少文件大小和数量。

三. 使用浏览器缓存避免重复请求。可以使用强缓存和协商缓存配合使用。

以下是一个使用 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 缓存协商机制，可以在服务器端避免不必要的请求，减少带宽消耗和页面加载时间，优化网页性能和用户体验。

四. 延迟加载图片和视频，使用图片和视频懒加载技术，只在需要时加载文件。

好的，以下是一个使用 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 实现图片懒加载，可以延迟加载页面中的图片和视频，提高页面加载速度和用户体验，减少带宽消耗和服务器负载。

五. 优化 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="https://mybj123.com/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 class="wrapper">
  <div class="sidebar"></div>
  <div class="main"></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，可以发现页面性能瓶颈和优化建议，快速识别问题并采取相应的措施来提高页面的性能和用户体验。

结语

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

「点点赞赏，手留余香」

赞 2 赏

给作者打赏，鼓励TA抓紧创作！

微信微信 支付宝支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
码云笔记 » 前端技术中的常见优化技巧有哪些？

码云 会员

分享到：

相关推荐

发表回复