前端优化：首屏加载速度的实践

原创

三掌柜

发布于 2024-06-24 11:18:10

1151

发布于 2024-06-24 11:18:10

前言

随着互联网技术的飞速发展，前端网页逐渐取代了传统客户端成为用户获取信息、进行交互的重要渠道，但是网页也有常见的弊端，比如网页首屏加载速度的快慢直接影响着用户体验，那么如何提升网页的首屏加载速度，成为了前端开发者必须面对的问题。本文将从多图片懒加载、避免用户多次点击请求以及骨架屏原理等方面，简单分享一下前端优化首屏加载速度的策略优化。欢迎大家在评论区留言交流。

多图片的懒加载

用户对网页体验要求越来越高的时候，再加上网页设计的丰富和多媒体内容的增加，图片成为了网页中不可或缺的元素。实际开发中可以看到过多的图片会导致网页加载速度变慢，影响用户体验，为了解决这个问题，前端开发者可以采用懒加载。

其实懒加载是一种只在需要时才加载图片，它通过在用户滚动到图片位置之前，不加载图片或只加载低分辨率的图片占位符，来减少首屏加载时的网络请求和带宽占用。当用户滚动到图片位置时，再加载实际的高清图片。这样可以在保证用户体验的前提下，有效减少首屏加载时间。

还有就是实现懒加载的方式有多种，比如使用JavaScript监听滚动事件，判断图片是否进入视口；或者使用Intersection Observer API，更加精确地判断图片与视口的交集情况，这些方式都可以根据实际需求进行选择和调整。那么接下来就分享一个简单的示例，以使用JavaScript和Intersection Observer API实现图片懒加载的简单示例，具体的示例代码如下所示：

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>图片懒加载示例</title>  
<style>  
  .lazy-image {  
    /* 初始状态下使用低分辨率图片或占位符 */  
    background: url('placeholder.jpg') no-repeat center center;  
    background-size: cover;  
    width: 300px;  
    height: 200px;  
  }  
</style>  
</head>  
<body>  
  
<img src="placeholder.jpg" data-src="real-image1.jpg" class="lazy-image" alt="Image 1">  
<img src="placeholder.jpg" data-src="real-image2.jpg" class="lazy-image" alt="Image 2">  
<!-- 更多图片... -->  
  
<script>  
// 监听图片与视口的交集情况  
const observer = new IntersectionObserver((entries, observer) => {  
  entries.forEach(entry => {  
    if (entry.isIntersecting) {  
      // 当图片进入视口时，加载真实图片  
      const lazyImage = entry.target;  
      const realSrc = lazyImage.dataset.src;  
      lazyImage.src = realSrc;  
      // 停止观察当前图片  
      observer.unobserve(lazyImage);  
    }  
  });  
});  
  
// 获取所有需要懒加载的图片  
const lazyImages = document.querySelectorAll('.lazy-image');  
  
// 对每张图片应用观察器  
lazyImages.forEach(image => {  
  observer.observe(image);  
});  
</script>  
  
</body>  
</html>

在上面的示例代码中，把需要懒加载的图片的src属性替换为data-src属性，并使用一个占位符作为背景图，然后使用Intersection Observer API来监听图片是否进入视口，一旦进入视口，就将data-src的值赋给src属性，从而触发图片的加载。

避免用户多次点击请求

还有一种情况在前端开发中经常遇到，那就是在网页中有些功能可能需要用户进行多次点击或输入操作才能触发，但是如果这些操作会导致额外的网络请求或数据处理，那么就会增加首屏加载的时间，为了避免这种情况，我们前端开发者可以采取以下措施：

使用防抖和节流：防抖是在一定时间内只触发一次函数，节流是在一定时间内只触发有限次数的函数，这两种技术都可以有效减少用户连续点击或输入导致的额外请求。
合并请求：将多个相关的网络请求合并成一个请求发送，可以减少网络传输的时间和带宽占用，比如可以将多个图片的URL合并成一个数组，一次性发送给后端进行处理。
缓存数据：对于不需要实时更新的数据，可以将其缓存在前端或后端，避免重复请求，也可以通过设置合理的缓存策略来减少不必要的网络请求。

这里也来分享一个简单的使用示例，以使用防抖技术实现避免用户多次点击请求的示例，具体代码如下所示：

function debounce(func, wait) {  
  let timeout;  
  return function executedFunction(...args) {  
    const context = this;  
    clearTimeout(timeout);  
    timeout = setTimeout(() => func.apply(context, args), wait);  
  };  
}  
  
// 假设有一个需要防抖的函数  
function fetchData() {  
  // 发送网络请求...  
  console.log('Fetching data...');  
}  
  
// 使用防抖技术包装函数  
const debouncedFetchData = debounce(fetchData, 500);  
  
// 用户点击事件绑定防抖后的函数  
document.getElementById('myButton').addEventListener('click', debouncedFetchData);

在上面的示例代码中，定义了一个debounce函数，它接受一个需要防抖的函数和一个等待时间作为参数。在防抖函数内部，使用setTimeout来延迟执行原函数，并在每次调用防抖函数时清除上一次的定时器，然后只有在最后一次调用防抖函数后等待指定的时间，才会执行原函数。

骨架屏原理

作为前端开发者，在日常开发中对于骨架屏的使用应该非常熟悉，骨架屏是一种在内容加载期间展示给用户的一种视觉占位符，尤其是在用户等待数据加载时，展示一个大致的页面框架和关键元素，让用户提前感知到页面的结构，从而减少用户等待的焦虑感，它可以让用户在等待过程中感知到页面的加载进度，提升用户体验。

实现骨架屏的方式有多种，比如使用CSS动画和SVG等技术绘制一个简单的页面框架；或者使用专门的骨架屏库来快速生成，但是无论使用哪种方式，我们都需要注意以下几点：

保持与真实页面的结构和布局一致，让用户能够快速识别和理解；
加载完成后要及时隐藏骨架屏，避免影响用户体验；
根据不同的页面和场景选择合适的骨架屏样式和动画效果。

所以这里也来分享一个简单的使用示例，以一个简单的CSS实现骨架屏的示例，具体代码如下所示：


<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>骨架屏示例</title>  
<style>  
  .skeleton {  
    /* 骨架屏样式 */  
    background: #f3f3f3;  
    border-radius: 4px;  
    height: 200px; /* 根据实际内容调整高度 */  
    width: 100%; /* 根据实际内容调整宽度 */  
    margin-bottom: 20px; /* 根据需要添加 */  
  }  
  
  /* 加载完成后隐藏骨架屏 */
.loaded .skeleton {
display: none;
}
</style>
</head> 
<body>
 <!-- 骨架屏容器 -->
 <div class="skeleton" id="skeleton"></div>
 <!-- 真实内容容器 --> 
<div class="content" id="content" style="display: none;"> 
<!-- 这里放置真实的内容，如图片、文本等 --> 
<h1>欢迎来到我的网站</h1> <p>这是一些示例内容...</p>
 <!-- 更多内容... --> </div> 
<script>
 // 假设这是一个模拟异步加载真实内容的函数 
function loadContent() { 
// 模拟异步加载过程（使用setTimeout）
 setTimeout(() => { 
// 隐藏骨架屏
 document.getElementById('skeleton').classList.add('loaded'); 
// 显示真实内容 
document.getElementById('content').style.display = 'block';
 }, 2000);
 // 假设加载需要2秒 
} 
// 页面加载完成后立即执行
 window.onload = loadContent; 
</script> 
</body> 
</html>

在上面的示例代码中，创建了一个骨架屏容器和一个真实内容容器，然后在页面加载完成后，通过loadContent函数模拟异步加载真实内容的过程，在这个加载过程中，骨架屏容器可见，真实内容容器隐藏，当真实内容加载完成后，通过修改CSS类名来隐藏骨架屏并显示真实内容。通过这种方式，我们可以在用户等待真实内容加载时，展示一个与页面结构相似的骨架屏，提升用户体验，而且我们也可以根据实际需求调整骨架屏的样式和动画效果，使其更加符合页面的整体风格。

结束语

通过本文的分享介绍，尤其是作为前端开发者来看，上述几个问题都是很有代表性的，也是日常开发中经常会遇到的，尤其是现在前端技术的不断发展和用户对网页加载速度的要求日益提高，骨架屏作为一种有效的用户体验优化手段，正逐渐受到开发者的青睐，通过为页面加载过程提供视觉反馈，骨架屏能够有效缓解用户的等待焦虑，提高用户的满意度。但是在设计和实现骨架屏时，我们需要注意保持其简洁明了，与页面整体风格相协调，因为合理的动画效果和过渡效果也能进一步提升用户体验。我个人觉得前端优化首屏加载速度需要从多个方面入手，借助通过采用多图片的懒加载、避免用户多次点击请求以及使用骨架屏等技术手段，可以有效提升网页的首屏加载速度提升用户体验，但是也需要注意在优化过程中保持代码的清晰和可维护性，为后续的维护和升级打下基础。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

前端

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

前端

登录后参与评论

0 条评论

热度