Web性能优化：实践和技巧，如代码切割、懒加载、预加载、预渲染等来提高页面加载速度和优化用户体验

最新推荐文章于 2024-05-14 11:19:40 发布

哎你看

最新推荐文章于 2024-05-14 11:19:40 发布

阅读量434

点赞数 16

文章标签：前端 ux 用户体验性能实战

本文链接：https://blog.csdn.net/weixin_37954941/article/details/138394400

版权

代码切割（Code Splitting）：这是一种将你的代码拆分为多个较小的包的技术，然后按需加载或并行加载这些包。这可以显著减少首次页面加载时所需的时间。
延迟加载（Lazy Loading）：这种技术是指只当内容需要被展示时，才去加载它。比如，可以延迟载入图片直到用户滚动到它们的位置。这也可以减少首次页面加载的时间。
预加载（Preloading）：预加载允许浏览器预先获取你指定的资源，这可以加快你的页面加载速度。关键资源（如关键CSS、关键图片）可以在 link 标签使用 rel-prepend 属性进行预加载。
预渲染（Prerendering）：通过预渲染，浏览器可以在用户需求之前，静默地预先加载页面。这样当用户点击页面链接时，页面能即刻展示，而无需等待加载。
避免不必要的重流和重绘：DOM的改变会导致浏览器重新渲染部分或全部的UI，尽量通过改变class而非直接操作样式，合理使用documentFragment，避免频繁的DOM操作。
压缩和优化你的图片：用适合的格式保存图片，并确保每张图片都已经压缩。使用新的图片格式，例如 WebP，可以进一步减少图片的大小。
利用 CDN（内容分发网络）：CDN将你的内容分发到全球的服务器网络，无论用户位于何处，都可以从最接近他们的服务器获取内容，从而减少延迟。

代码示例：

1）代码切割
实例配置 Webpack，使其将代码分割到不同的包中。只有在用户实际需要特定功能的时候，才会加载对应的包。

// 例如在一个React项目中
// 不使用代码切割，所有代码都在一个包中
import DetailPage from './DetailPage';

// 使用代码切割，当用户访问DetailPage时，才加载对应的代码
const DetailPage = React.lazy(() => import('./DetailPage'));

2）懒加载

对于网页中不立即需要的资源（如图像），你可以延迟加载这些资源。

// 例如在一个图片滚动列表中
// 同样也适用于异步数据段，比如用户需要滚动到底部才加载的评论等
window.addEventListener('scroll', lazyload);
function lazyload() {
  var images = document.querySelectorAll('.lazy');
  images.forEach(img => {
    if(img.getBoundingClientRect().top < window.innerHeight) {
      let src = img.getAttribute('data-src');
      img.setAttribute('src', src);
      img.classList.remove('lazy');
    }
  });
}

3）预加载
对于你知道用户将需要的资源（如特定的JS模块或CSS文件），可以提前加载。

<head>
  <!-- 为主要的CSS文件和JavaScript文件添加preload属性 -->
  <link rel="preload" href="main.css" as="style">
  <link rel="preload" href="main.js" as="script">
</head>