首页 > 其他分享 >前端性能优化必杀技:骨架屏让你快人一步

前端性能优化必杀技:骨架屏让你快人一步

时间:2023-09-21 23:13:25浏览次数:37  
标签:skeleton 前端 骨架 用户 必杀技 background 页面 加载

在现代前端开发中,用户体验和性能优化一直是小伙伴们追求的目标之一。骨架屏(Skeleton Screen)作为一种优化用户界面加载速度的方法,应用在各种(App/小程序/h5)应用里面。本文将深入探讨骨架屏的最佳实践,结合代码案例,介绍如何实现和优化骨架屏。

什么是骨架屏?

骨架屏是一种在页面加载过程中,以占位符形式展示页面结构的技术。它通过显示简单的灰色块和线条,让用户在等待内容加载时获得视觉反馈,提高了用户的满意度。

为什么需要骨架屏?

在移动设备和慢速网络环境下,页面加载速度变得尤为关键。用户不愿等待长时间才能看到页面内容。骨架屏能够在内容加载完全之前快速展示页面结构,让用户感受到页面加载的进度,从而提高了用户体验。

使用纯 CSS 实现骨架屏

实现骨架屏的方法有很多,可以使用纯CSS,也可以使用SVG,甚至还可以利用一些前端库。下面我们以一个简单的纯CSS实现为例。

1、实现简单的html骨架页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Skeleton Example</title>
</head>
<body>
 <div class="skeleton">
  <div class="skeleton-header"></div>
  <div class="skeleton-body">
    <div class="skeleton-line"></div>
    <div class="skeleton-line"></div>
    <div class="skeleton-line"></div>
  </div>
</div>
</body>
</html>

2、实现骨架屏样式

/* skeleton.css */
.skeleton {
  width: 300px;
  padding: 20px;
  background-color: #f6f7f8;
}
.skeleton-header {
  width: 100%;
  height: 200px;
  background-color: #e0e0e0;
}
.skeleton-body .skeleton-line {
  width: 100%;
  height: 20px;
  margin-top: 20px;
  background-color: #e0e0e0;
}


实现效果如图,骨架屏虽然简单,但要做得好,还可以进一步优化。

3、骨架屏优化

/* CSS */
@keyframes shimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}

.skeleton-header, .skeleton-body .skeleton-line {
  animation-duration: 1.25s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: #f6f7f8;
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  background-size: 800px 104px;
  position: relative;
}

以上代码为骨架屏添加了一个流动光影的动画效果,使得骨架屏看起来更有活力。

基于预渲染的骨架屏

基于预渲染的骨架屏技术通过服务器端渲染(SSR)或静态站点生成(SSG)提前生成页面的骨架,然后在客户端加载时填充内容,从而提高性能和SEO。

使用react-loading-skeleton创建骨架屏

import React from 'react';
import Skeleton from 'react-loading-skeleton';

function UserProfile() {
  return (
    <div>
      <h2>User Profile</h2>
      <div className="user-details">
        <Skeleton height={100} width={100} circle={true} />
        <div className="user-info">
          <Skeleton height={20} width={200} />
          <Skeleton height={20} width={200} />
          <Skeleton height={20} width={200} />
        </div>
      </div>
    </div>
  );
}

export default UserProfile;

骨架屏的最佳实践

保持骨架屏与实际内容的一致性

为了确保用户不会感知到内容的“跳动”,骨架屏的结构和样式应该与最终加载的内容一致。

使用占位符

占位符可以帮助页面保持稳定的布局,防止内容在加载完成前发生大的布局变化。

优化骨架屏的性能

为了提高性能,应该减小骨架屏的大小,并确保它们以最快的速度加载。

总结

骨架屏技术是提高前端性能和用户体验的有关键一环。通过在加载过程中提供视觉反馈,骨架屏能够减少用户等待时间,增加用户留存率,从而提升了用户满意度。

无论你是在开发单页应用、多页应用,还是移动应用,都可以考虑将骨架屏技术融入你的项目中,为用户带来更快速、更流畅的体验。

本文由mdnice多平台发布

标签:skeleton,前端,骨架,用户,必杀技,background,页面,加载
From: https://www.cnblogs.com/dawnyu/p/17721208.html

相关文章

  • 记录一下前端缓存分类汇总(indexDB、localStorage、sessionStorage)
    什么是缓存?当我们第一次访问网站的时候,比如juejin.cn,电脑会把网站上的图片和数据下载到电脑上,当我们再次访问该网站的时候,网站就会从电脑中直接加载出来,这就是缓存。缓存的优点和应用场景Web缓存种类:indexDB、localStorage、sessionStorage。缓解服务器压力,不用每次都去请......
  • 前端大文件分片上传断点续传
     分片上传分片上传是将大文件分成多个小文件进行上传,每个小文件的大小通常为1MB到10MB。上传时,将每个小文件分别上传到服务器,服务器再将这些小文件合并成一个完整的大文件。这种方法可以提高上传速度,减少上传失败的可能性。断点续传断点续传是指在上传过程中,如果上传失败或者......
  • 浅入深出的微前端MicroApp
    前言:本文是由最近做的一个项目有感而发,因为之前做了一些技术栈的统一,为了用antDesign的pro-table,PC统一使用react,但是我们有一些老的项目是vue的,本次新页面较多,老页面的改动较少,除此之外老项目想换菜单,因此我们想借助本次机会用react开发,经过了几番思考,发现本次很适合用微前端来......
  • 前端中字体的使用
    前端中字体的使用字体是前端的基础,本文介绍常见的几种字体以及如何在工程中引入自定义的字体。字体的类型常见的字体类型有TTF/OTF,WOFF/WOFF2,SVG,EOT(这个是按照浏览器的支持率由高到底排序的)TTF(TrueTypeFont)由微软与苹果开发,广泛用于windows/Mac操作系统,浏览器支......
  • 从零开始学习Vue3路由,提升你的前端开发技能
    Vue3是当前最流行的前端框架之一,它提供了许多方便的功能和工具,其中路由(Router)就是其中之一。本文将介绍如何在Vue3中使用路由。安装和使用VueRouter首先,我们需要安装VueRouter。在终端中输入以下命令:npminstallvue-router@next--save接下来,我们需要创建一个路由实例。在......
  • 前端上传文件的基本方法
    前言处理用户选择的文件并将之上传至服务器,这属于是前端开发的基本功。虽然现在有各种框架和插件能够很简单地实现文件上传功能,但是作为一个有追求的前端,还是有必要了解以下前端文件上传的基本原理的。^-^使用FormData对象上传文件我们可以使用FormData对象来创建一个表......
  • 使用js开发一个快速打开前端项目的alfred插件
    使用js开发一个快速打开前端项目的插件目录前言使用的技术栈步骤问题发现待优化前言一直以来开发都是先打开vscode,然后选择项目,在项目多的情况下会觉得挺繁琐;如果同时打开了许多vscode窗口,寻找目标窗口也比较麻烦,于是萌生了开发一个alfred的工作流插件的想法,目标是在alf......
  • 前端的 几个技巧
    1:明智地选择在我们深入研究DOM操作的咒语之前,我们必须掌握选择的艺术。通向DOM的门户是通过选择元素打开的,和querySelector是querySelectorAll您值得信赖的魔杖。利用CSS选择器,这些方法允许您优雅地从DOM中提取元素。2:与事件共舞现在您已经掌握了这些元素,是时候为它们注......
  • 前端笔记
    JS代码初始化加载问题对象初始化器-JavaScript|MDNJavaScript初始化加载的3种方式_js初始化加载方法_——潇洒走一回——的博客-CSDN博客页面初始化时执行js方法_51CTO博客_js页面加载后执行<script>//只能有一个window.onload=function(){alert("JS初始化加载")......
  • 微前端启动子应用出现的eslint提示
    前言在管理较大的多人协同开发项目时,为了规范大家的代码书写习惯,我们往往都会用eslint来约束,但这也导致我们在拉项目时以及开发时都增加了不少麻烦,本文着重讲解微服务启动不同子项目时常规报错的解决方式。步骤一:在package.json将 "lint":"vue-cli-servicelint"......