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

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

目录

  • 前言
  • 多图片的懒加载
  • 避免用户多次点击请求
  • 骨架屏原理
  • 结束语

前言

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

多图片的懒加载

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

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

还有就是实现懒加载的方式有多种,比如使用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属性,从而触发图片的加载。

image.png

避免用户多次点击请求

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

  • 使用防抖和节流:防抖是在一定时间内只触发一次函数,节流是在一定时间内只触发有限次数的函数,这两种技术都可以有效减少用户连续点击或输入导致的额外请求。
  • 合并请求:将多个相关的网络请求合并成一个请求发送,可以减少网络传输的时间和带宽占用,比如可以将多个图片的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来延迟执行原函数,并在每次调用防抖函数时清除上一次的定时器,然后只有在最后一次调用防抖函数后等待指定的时间,才会执行原函数。

image.png

骨架屏原理

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

实现骨架屏的方式有多种,比如使用CSS动画和SVG等技术绘制一个简单的页面框架;或者使用专门的骨架屏库来快速生成,但是无论使用哪种方式,我们都需要注意以下几点:
1.保持与真实页面的结构和布局一致,让用户能够快速识别和理解;
2.加载完成后要及时隐藏骨架屏,避免影响用户体验;
3.根据不同的页面和场景选择合适的骨架屏样式和动画效果。
所以这里也来分享一个简单的使用示例,以一个简单的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类名来隐藏骨架屏并显示真实内容。通过这种方式,我们可以在用户等待真实内容加载时,展示一个与页面结构相似的骨架屏,提升用户体验,而且我们也可以根据实际需求调整骨架屏的样式和动画效果,使其更加符合页面的整体风格。

image.png

结束语

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

相关文章
|
4月前
|
存储 消息中间件 前端开发
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
校园圈子系统校园论坛小程序采用uni-app前端框架,支持多端运行,结合PHP后端(如ThinkPHP/Laravel),实现用户认证、社交关系管理、动态发布与实时聊天功能。前端通过组件化开发和uni.request与后端交互,后端提供RESTful API处理业务逻辑并存储数据于MySQL。同时引入Redis缓存热点数据,RabbitMQ处理异步任务,优化系统性能。核心功能包括JWT身份验证、好友系统、WebSocket实时聊天及活动管理,确保高效稳定的用户体验。
221 4
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
|
10月前
|
缓存 前端开发 JavaScript
利用代码分割优化前端性能:策略与实践
在现代Web开发中,代码分割是提升页面加载性能的有效手段。本文介绍代码分割的概念、重要性及其实现策略,包括动态导入、路由分割等方法,并探讨在React、Vue、Angular等前端框架中的具体应用。
|
7月前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
266 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
9月前
|
编解码 前端开发 开发者
探索无界:前端开发中的响应式设计深度实践与思考###
本文将带你领略响应式设计的精髓,一种超越传统页面布局限制的设计策略,它要求开发者以灵活多变的思维,打造能够无缝适应各种设备与屏幕尺寸的Web体验。通过深入浅出的讲解、实际案例分析以及技术实现细节的探讨,本文目的是激发读者对于响应式设计深层次的理解与兴趣,鼓励在实际应用中不断创新与优化。 ###
289 10
|
10月前
|
编解码 前端开发 开发者
前端开发中的响应式设计实践
前端开发中的响应式设计实践
|
10月前
|
编解码 前端开发 UED
探索无界:前端开发中的响应式设计深度解析与实践####
【10月更文挑战第29天】 本文深入探讨了响应式设计的核心理念,即通过灵活的布局、媒体查询及弹性图片等技术手段,使网站能够在不同设备上提供一致且优质的用户体验。不同于传统摘要概述,本文将以一次具体项目实践为引,逐步剖析响应式设计的关键技术点,分享实战经验与避坑指南,旨在为前端开发者提供一套实用的响应式设计方法论。 ####
229 4
|
12月前
|
缓存 前端开发 JavaScript
优化前端性能:关键策略与实践
随着互联网技术的发展,用户对网页加载速度和交互体验的要求日益提高,前端性能优化成为提升用户体验和网站竞争力的关键。本文探讨了前端性能优化的重要性和七大关键策略,包括压缩资源文件、利用浏览器缓存、减少HTTP请求、异步加载、使用CDN、优化CSS和JavaScript执行及第三方脚本优化,并提供了实践案例,帮助开发者构建更快、更高效的网站。
|
11月前
|
人工智能 资源调度 数据可视化
【AI应用落地实战】智能文档处理本地部署——可视化文档解析前端TextIn ParseX实践
2024长沙·中国1024程序员节以“智能应用新生态”为主题,吸引了众多技术大咖。合合信息展示了“智能文档处理百宝箱”的三大工具:可视化文档解析前端TextIn ParseX、向量化acge-embedding模型和文档解析测评工具markdown_tester,助力智能文档处理与知识管理。
|
11月前
|
前端开发 JavaScript 开发者
构建工具对比:Webpack与Rollup的前端工程化实践
【10月更文挑战第11天】本文对比了前端构建工具Webpack和Rollup,探讨了它们在模块打包、资源配置、构建速度等方面的异同。通过具体示例,展示了两者的基本配置和使用方法,帮助开发者根据项目需求选择合适的工具。
203 3
|
11月前
|
JavaScript 前端开发 Docker
拿下奇怪的前端报错(二):nvm不可用报错`GLIBC_2.27‘‘GLIBCXX_3.4.20‘not Found?+ 使用docker构建多个前端项目实践
本文介绍了在多版本Node.js环境中使用nvm进行版本管理和遇到的问题,以及通过Docker化构建流程来解决兼容性问题的方法。文中详细描述了构建Docker镜像、启动临时容器复制构建产物的具体步骤,有效解决了不同项目对Node.js版本的不同需求。
427 1

热门文章

最新文章