web前端性能优化方法

如果会御剑

于 2023-05-20 12:11:08 发布

阅读量303

点赞数

文章标签：前端性能优化 javascript

本文链接：https://blog.csdn.net/weixin_44694389/article/details/130779628

版权

前端性能优化是常见的问题，以下是一些需要性能优化的地方以及优化方法：

1.图片优化：图片占用网页加载时间的比例很大，因此要尽量减小图片的大小。一些常用的优化方法包括选择适当的图片格式（如 PNG、JPEG 等）、使用图片压缩工具、使用 CSS Sprites 组合多个图片等。

//使用 CSS Sprites 组合多个图片
.icon {
  background-image: url('sprites.png');//一张大图，里面有很多小图
  background-repeat: no-repeat;
}

.icon-home {
  width: 32px;
  height: 32px;
  background-position: -10px -20px;//通过x,y坐标定位显示具体那张图片，大图的左上角坐标是（0，0）
}

.icon-user {
  width: 32px;
  height: 32px;
  background-position: -50px -20px;//通过x,y坐标定位显示具体那张图片，大图的左上角坐标是（0，0）
}

2.代码压缩和合并：将多个 CSS 或 JavaScript 文件压缩和合并成一个文件，可以减少文件的数量和大小，从而提高页面加载速度。

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: {
    app: './src/app.js',
    styles: './src/styles.scss'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('styles.css'),
    new UglifyPlugin()
  ]
};

3.减少 HTTP 请求：每个 HTTP 请求都会导致额外的服务器延迟和页面加载时间。因此，尽可能减少 HTTP 请求的数量可以改善网页性能。合并样式表和脚本，使用图像映射和数据 URI 等技术可以有效减少请求次数。

对HTML进行优化（包括上面1，2点都属于减少http请求）

<!--使用inline-resource插件将CSS或JavaScript（或一些小的图像）
代码内联到HTML页面中，通过减少HTTP请求来提高页面性能。-->

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
    <style>
      .box { width: 100px; height: 100px; background: red; }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <script>
      console.log('Hello, world!');
    </script>
  </body>
</html>

4.延迟加载：页面中某些元素（如图片、视频等）可能并不是页面首次加载时就必须显示的，因此可以将这些元素设置为延迟加载，等到用户快速滚动到它们附近时再加载这些元素。

图片延迟加载

图像延迟加载是网页性能优化的常用方法，这是因为大多数网站包含多张图片，而图片文件通常是 HTML 页面中最大的占用空间的内容之一。图片延迟加载可以通过让网站仅在页面被滚动到图片显示位置上时，才加载这些图片来降低网页相关内容的加载速度。比如，使用 jQuery Lazyload 插件就可以实现图片的延迟加载。下面是一个例子：

<img class="lazy" data-original="img/example.jpg" src="img/placeholder.jpg" />

<script src="js/jquery.min.js"></script>
<script src="js/jquery.lazyload.min.js"></script>

<script>
$(function() {
  $("img.lazy").lazyload();
});
</script>

2.延迟加载Iframe

在许多网站上，会包含iframe标签，主要作用就是将另一张网页嵌入到主页中。如果你需要显示的IFrame网页很大，那么实现延迟加载是非常有必要的。可以使用第三方JS库(如:Lazyframe.js等)或自行编写脚本来实现延迟加载。即在iframe源路径为空或仅包含占位符的情况下，使用JS监听滚动事件，当IFrame元素进入视口区域时，再设置iframe的 src 属性为真正的源路径。

<div class="iframe-wrap">
  <iframe src="" data-src="http://example.com"></iframe>
</div>

<script>
var lazyIframes = [].slice.call(document.querySelectorAll('iframe[data-src]'));

if ('IntersectionObserver' in window) {
  let lazyIframeObserver = new IntersectionObserver(function(entries, observer) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting) {
        let lazyIframe = entry.target;
        lazyIframe.src = lazyIframe.dataset.src;
        lazyIframeObserver.unobserve(lazyIframe);
      }
    });
  });

  lazyIframes.forEach(function(lazyIframe) {
    lazyIframeObserver.observe(lazyIframe);
  });
}

</script>

5.使用缓存：浏览器缓存可以加快页面加载速度，减少网络请求次数。使用缓存的方法包括在服务器响应头中添加缓存控制头、在代码中使用自定义缓存控制等。

可以使用响应头进行缓存
也可以使用server worker进行缓存

6.减少 DOM 操作：DOM 操作是昂贵的，可以减少 DOM 操作的次数来提高网页性能。可以将多个 DOM 操作延迟到一个延迟加载的回调函数中，或者使用虚拟 DOM 技术减少 DOM 操作次数。

总之，通过以上的优化方法，可以减少页面加载时间、提高用户体验和优化页面性能，使页面更加高效和快速。

如果会御剑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端性能优化方法

图像延迟加载是网页性能优化的常用方法，这是因为大多数网站包含多张图片，而图片文件通常是 HTML 页面中最大的占用空间的内容之一。图片延迟加载可以通过让网站仅在页面被滚动到图片显示位置上时，才加载这些图片来降低网页相关内容的加载速度。4.延迟加载：页面中某些元素（如图片、视频等）可能并不是页面首次加载时就必须显示的，因此可以将这些元素设置为延迟加载，等到用户快速滚动到它们附近时再加载这些元素。总之，通过以上的优化方法，可以减少页面加载时间、提高用户体验和优化页面性能，使页面更加高效和快速。
复制链接

扫一扫