当前位置: 首页 > news >正文

21天掌握javaweb-->第11天:前端性能优化与响应式设计

前端性能优化与响应式设计

1. 前端性能优化技巧
1.1 代码分割(Code Splitting)

代码分割是一种将代码拆分成多个较小的包,并在需要时按需加载的技术,这有助于减少初始加载时间,并提高应用程序的响应速度。

实现方法:

  • 动态 import() 语法:使用动态 import() 语法可以实现代码分割。示例代码如下:
    async function loadComponent() {const component = await import('./MyComponent.js');// 使用 component
    }
  • Webpack:使用Webpack配置文件实现代码分割。示例代码如下:
    // 使用 require.ensure 确保加载的代码块在需要时才会被下载
    require.ensure(['./MyComponent.js'], (require) => {const component = require('./MyComponent.js');// 使用 component
    });
  • 使用 <script> 标签:在HTML中使用多个 <script> 标签加载不同的代码块。示例代码如下:
    <!-- 加载代码块1 -->
    <script src="codeblock1.js"></script>
    <!-- 加载代码块2 -->
    <script src="codeblock2.js"></script>
1.2 懒加载(Lazy Loading)

懒加载是一种优化策略,用于延迟加载非关键资源或代码,直到需要时才进行加载。

实现方法:

  • 图片懒加载:只预先加载可视区内的图片,当滚动到其他位置时,才去加载这块区域的图片。示例代码如下:
    // 使用Intersection Observer API实现图片懒加载
    document.querySelectorAll('img[data-src]').forEach(img => {let io = new IntersectionObserver((entries, observer) => {entries.forEach(entry => {if (entry.isIntersecting) {img.src = img.getAttribute('data-src');observer.unobserve(img);}});});io.observe(img);
    });
  • 组件懒加载:在React等框架中,使用动态导入语法实现组件的懒加载。示例代码如下:
    // React组件懒加载
    const LazyComponent = React.lazy(() => import('./LazyComponent'));
2. 响应式设计基础与实战
2.1 响应式概述

响应式设计是指根据不同设备浏览器分辨率或尺寸来展示不同页面结构、行为、表现的设计方式。

实现方法:

  • 流体网格布局:利用百分比和弹性单位来定义网页元素的大小和位置。
  • 响应式媒体:使用媒体查询来根据不同屏幕尺寸应用不同的样式。
  • 响应式图片与视频:根据设备分辨率加载适合的图像,避免在大屏幕设备上加载过大的图像文件。

示例代码:

  • 响应式图片
    <img src="image.jpg" class="w-full h-auto" alt="Responsive image">
  • 响应式布局
    <div class="grid grid-cols-3 gap-4"><div class="bg-red-500">Column 1</div><div class="bg-green-500">Column 2</div><div class="bg-blue-500">Column 3</div>
    </div>
3. 总结

前端性能优化与响应式设计是现代Web开发中不可或缺的部分。通过代码分割和懒加载技术,我们可以显著减少应用的初始加载时间,提高页面响应速度。响应式设计则确保了在不同设备上都能提供良好的用户体验。掌握这些技术,可以帮助我们构建更快、更灵活的Web应用。

相关文章:

21天掌握javaweb-->第11天:前端性能优化与响应式设计

前端性能优化与响应式设计 1. 前端性能优化技巧 1.1 代码分割&#xff08;Code Splitting&#xff09; 代码分割是一种将代码拆分成多个较小的包&#xff0c;并在需要时按需加载的技术&#xff0c;这有助于减少初始加载时间&#xff0c;并提高应用程序的响应速度。 实现方法…...

java+ssm+mysql校园物品租赁网

项目介绍&#xff1a; 使用javassmmysql开发的校园物品租赁网&#xff0c;系统包含管理员、用户角色&#xff0c;功能如下&#xff1a; 管理员&#xff1a;用户管理&#xff1b;物品管理&#xff08;物品种类、物品信息、评论信息&#xff09;&#xff1b;订单管理&#xff1…...

C#常见错误—空对象错误

System.NullReferenceException&#xff1a;未将对象引用设置到对象的实例 在C#编程中&#xff0c;System.NullReferenceException是一个常见的运行时异常&#xff0c;其错误信息“未将对象引用设置到对象的实例”意味着代码试图访问一个未被初始化或已被设置为null的对象的成…...

GPT系列模型简要概述

GPT-1&#xff1a;&#xff08;0.117B参数量&#xff0c;0.8B words预训练数据) 动机&#xff1a; 在RNN和Transformer之间&#xff0c;选择了后者。 和《All your need is Attention》翻译模型的Encoder-Decoder架构相比&#xff0c;只保留Decoder&#xff0c;因此去掉了Cross…...

关于睡懒觉

我们经常听到一个词&#xff1a;睡懒觉。 我认为&#xff0c;睡懒觉这个词&#xff0c;是错误的。 人&#xff0c;是需要睡眠的&#xff0c;睡不够&#xff0c;就不会醒。睡够了&#xff0c;自然会醒&#xff0c;也不想继续睡。不信你试试&#xff0c;睡够了&#xff0c;你…...

Spring Data JPA 入门

文章目录 前言、Spring Data JPA 是什么&#xff1f;1、背景2、优势3、Spring Data JPA 和 MyBatis-Plus 对比4、Spring Data JPA 与 JPA 的关系是什么&#xff1f; 一、准备1、依赖引入Spring Boot 框架依赖引入&#xff1a;非 Spring Boot 框架依赖引入&#xff1a; 2、定义实…...

操作系统用户界面

实验目的&#xff1a; LINUX操作系统提供了图形用户界面和命令行界面&#xff0c;本实验主要熟悉命令行界面&#xff0c;为后续的实验编程做准备。 二、实验内容&#xff1a; 写出每个命令的功能及格式 1、有关目录和文件操作的命令 1.1cat 功能&#xff1a; 1.一次显示整…...

区块链dapp 开发详解(VUE3.0)

1、安装metamask 插件。 2、使用封装的工具包: wagmi . 3、 wagmi 操作手册地址:connect | Wagmi 4、注意事项&#xff1a; 因为最初是react 版本&#xff0c;所以在VUE版的官方文档有很多地方在 import 用的是 wagmi,需要改为 wagmi/vue 。 连接成功后打印的内容如下&…...

BTC密码学原理

文章目录 比特币的密码学基础哈希函数&#xff08;Hash Function&#xff09;非对称加密&#xff08;Asymmetric Cryptography&#xff09;数字签名&#xff08;Digital Signature&#xff09; 工作量证明&#xff08;Proof of Work&#xff09;区块链技术的密码学保障区块链的…...

【NLP 9、实践 ① 五维随机向量交叉熵多分类】

目录 五维向量交叉熵多分类 规律&#xff1a; 实现&#xff1a; 1.设计模型 2.生成数据集 3.模型测试 4.模型训练 5.对训练的模型进行验证 调用模型 你的平静&#xff0c;是你最强的力量 —— 24.12.6 五维向量交叉熵多分类 规律&#xff1a; x是一个五维(索引)向量&#xff…...

Linux -文件系统的备份

本文为Ubuntu Linux操作系统- 第九弹~~ 今天接着上文的内容&#xff0c;讲Linux磁盘存储管理最后一部分内容~ 上期回顾&#xff1a;Linux 图形界面工具管理磁盘分区和文件系统 &#x1f60e;黑犀铠甲合体&#xff0c;流星枪之狂瀑扎帖&#xff0c;碎魔伏暴&#xff0c;灭于狂瀑…...

【Linux基础五】Linux开发工具—上(apt和vim)

【Linux基础五】Linux开发工具—上&#xff08;apt和vim&#xff09; 1.apt包管理工具2.Linux中的编辑器vim2.1命令模式2.2插入模式2.3底行模式2.4替换模式2.5视图模式2.6多线程操作2.7配置vim 1.apt包管理工具 在 Linux 系统中&#xff0c;软件包管理工具是用户安装、更新和管…...

力扣--LCR 134.Pow(x,n)

题目 实现 pow(x, n) &#xff0c;即计算 x 的 n 次幂函数&#xff08;即&#xff0c;xn&#xff09;。 示例 1&#xff1a; 输入&#xff1a;x 2.00000, n 10 输出&#xff1a;1024.00000 示例 2&#xff1a; 输入&#xff1a;x 2.10000, n 3 输出&#xff1a;9.2610…...

java抽奖系统(一)2.0

1. 项⽬介绍 1.1 背景 随着数字营销的兴起&#xff0c;企业越来越重视通过在线活动来吸引和留住客⼾。抽奖活动作为⼀种有效的营 销⼿段&#xff0c;能够显著提升⽤⼾参与度和品牌曝光率。于是我们就开发了以抽奖活动作为背景的Spring Boot项⽬&#xff0c;通过这个项⽬提供⼀…...

读取电视剧MP4视频的每一帧,检测出现的每一个人脸并保存

检测效果还不错,就是追踪有点难做 import cv2 import mediapipe as mp import os from collections import defaultdict# pip install msvc-runtime# 初始化OpenCV的MultiTracker # multi_tracker = cv2.MultiTracker_create() # multi_tracker = cv2.legacy.MultiTracker_cre…...

【MySQL 进阶之路】事务并发情况分析

MySQL事务并发控制分析笔记 在数据库系统中&#xff0c;事务并发控制至关重要&#xff0c;能够确保多个事务并发执行时的数据一致性、隔离性和正确性。MySQL通过不同的锁机制控制并发操作&#xff0c;以确保事务的隔离性。以下是对事务A和事务B并发行为的详细分析&#xff0c;…...

基于SSM的线上考试系统的设计与实现(计算机毕业设计)+万字说明文档

系统合集跳转 源码获取链接 一、系统环境 运行环境: 最好是java jdk 1.8&#xff0c;我们在这个平台上运行的。其他版本理论上也可以。 IDE环境&#xff1a; Eclipse,Myeclipse,IDEA或者Spring Tool Suite都可以 tomcat环境&#xff1a; Tomcat 7.x,8.x,9.x版本均可 操作系统…...

redis击穿,穿透,雪崩以及解决方案

目录 击穿 解决方案一 解决方案二 穿透 解决方案 雪崩 解决方案 击穿 指的是单个key在缓存中查不到&#xff0c;去数据库查询&#xff0c;这样如果并发不大或者数据库数据量不大的话是没有什么问题的。 如果数据库数据量大并且是高并发的情况下那么就可能会造成数据库压…...

Flask返回中文Unicode编码(乱码)解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…...

EasyExcel改名为FastExce做了那些改变呢

回到&#xff1a;github原作者地址&#xff1a;https://github.com/CodePhiliaX/fastexcel 中文 |English | 什么是 FastExcel FastExcel 是由原 EasyExcel 作者创建的新项目。2023 年我已从阿里离职&#xff0c;近期阿里宣布停止更新 EasyExcel&#xff0c;作者他本人决定继…...

数据结构之初始二叉树(1)

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a;数据结构&#xff08;Java版&#xff09; 目录 树型结构 树的概念 与树的有关概念 树的表示形式 树的应用 二叉树 概念 两种特殊的…...

利用Python爬虫按图搜索淘宝商品(拍立淘)

在当今数字化时代&#xff0c;能够通过图片搜索商品的功能&#xff08;如淘宝的“拍立淘”&#xff09;为用户提供了极大的便利。本文将详细介绍如何利用Python爬虫技术实现按图搜索淘宝商品&#xff0c;并提供相应的代码示例。 1. 拍立淘功能简介 “拍立淘”是淘宝提供的一项…...

微信小程序中使用miniprogram-sm-crypto实现SM4加密攻略

在微信小程序开发过程中&#xff0c;数据安全至关重要。本文将为大家介绍如何在微信小程序中使用miniprogram-sm-crypto插件进行SM4加密&#xff0c;确保数据传输的安全性。 一、SM4加密简介 SM4是一种对称加密算法&#xff0c;由国家密码管理局发布&#xff0c;适用于商密领…...

基于注解的方式实现分布式锁的AOP功能

使用场景&#xff1a; 在分布式项目中&#xff0c;涉及到事务&#xff0c;且会操作多张表&#xff0c;那么涉及到并发场景&#xff0c;应当避免同一时间有多个用户并发操作同一份数据&#xff0c;例如&#xff1a;商品秒杀。 解决方案&#xff1a; 使用Around注解实现在方法…...

22. 五子棋小游戏

文章目录 概要整体架构流程技术名词解释技术细节小结 1. 概要 &#x1f50a; JackQiao 对 米粒 说&#xff1a;“今天咱们玩个五子棋小游戏&#xff0c;电脑与你轮流在一个 nn 的网格上放置棋子&#xff08;X 或 O&#xff09;&#xff0c;网格由你输入的正整数n决定&#xff0…...

import是如何“占领满屏“

import是如何“占领满屏“的&#xff1f; 《拒绝使用模块重导&#xff08;Re-export&#xff09;》 模块重导是一种通用的技术。在腾讯、字节、阿里等各大厂的组件库中都有大量使用。 如&#xff1a;字节的arco-design组件库中的组件&#xff1a;github.com/arco-design… …...

传奇996_53——后端ui窗口局部刷新

描述&#xff1a;一个大窗口&#xff0c;点击某个键&#xff0c;弹出小窗口。 小窗口中将msg存进变量中 大窗口中判断一个参数是否为null&#xff0c;如果不为null&#xff0c;说明界面不是第一次打开&#xff0c;而是被刷新了。就加上小窗口的那个变量 有时小窗口中还有其他…...

云原生API网关:2024年的性能与智能化突破

API网关已经成为现代应用世界的流量控制器&#xff0c;并正在成为现代应用架构的重要组成部分。然而&#xff0c;自成立以来&#xff0c;他们的角色发生了巨大变化。它们正在减轻重量&#xff0c;变得更加可编程&#xff0c;并与云原生环境携手合作。 让我们来探索这一激动人心…...

专题二十五_动态规划_两个数组的 dp (含字符串数组)_算法专题详细总结

目录 动态规划_两个数组的 dp &#xff08;含字符串数组&#xff09; 1. 最⻓公共⼦序列&#xff08;medium&#xff09; 解析&#xff1a; 1. 状态表⽰&#xff1a; 2. 状态转移⽅程&#xff1a; 3. 初始化&#xff1a;​编辑 4. 填表顺序&#xff1a;​编辑 5. 返回值…...

day09 接口测试(5)——使用postman 完成项目实战

【没有所谓的运气&#x1f36c;&#xff0c;只有绝对的努力✊】 目录 1、项目简介 2、技术栈 2.1 技术栈 2.2 技术架构图 3、初始化项目环境&#xff01;&#xff01;&#xff01; 3.1 新建用例集 3.2 创建环境变量 3.3 登录模块 3.3.1 从测试用例文档提取数据 3.3.2…...

【Solidity】变量详解:类型、作用域与最佳实践

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 Solidity变量详解&#xff1a;类型、作用域与最佳实践引言1. 变量的类型与声明1…...

知识图谱9:知识图谱的展示

1、知识图谱的展示有很多工具 Neo4j Browser - - - - 浏览器版本 Neo4j Desktop - - - - 桌面版本 graphX - - - - 可以集成到Neo4j Desktop Neo4j 提供的 Neo4j Bloom 是用户友好的可视化工具&#xff0c;适合非技术用户直观地浏览图数据。Cypher 是其核心查询语言&#x…...

scss文件内引入其他scss文件报错

1、今天在编译一些老项目的时候&#xff0c;老是提示下面信息 2、而且有很多Sass import rules are deprecated and will be removed in Dart Sass 3.0.0.警告 3、用npm view sass versions看&#xff0c;其中sass的最新版本是1.82.0 4、经过测试"sass": "1.75…...

使用 ASP.NET Core HttpLoggingMiddleware 记录 http 请求/响应

我们发布了一个应用程序&#xff0c;该应用程序运行在一个相当隐蔽的 WAF 后面。他们向我们保证&#xff0c;他们的产品不会以任何方式干扰我们的应用程序。这是错误的。他们删除了我们几乎所有的“自定义”标头。为了“证明”这一点&#xff0c;我构建了一个中间件&#xff0c…...

沃丰科技智能客服在跨境电商独立站中的核心角色

随着全球化进程的加速和互联网技术的不断发展&#xff0c;跨境电商行业蓬勃兴起&#xff0c;为消费者提供了更广阔、更便捷的购物选择。在这样一个竞争激烈的市场环境中&#xff0c;优质的客户服务成为了企业脱颖而出的关键。沃丰科技智能客服凭借其先进的技术和人性化的设计理…...

基于Springboot滑雪物品在线租赁网站设计与实现(作品+论文+开题报告)

博主介绍&#xff1a;黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者&#xff0c;CSDN博客专家&#xff0c;在线教育专家&#xff0c;CSDN钻石讲师&#xff1b;专注大学生毕业设计教育、辅导。 所有项目都配有从入门到精通的基础知识视频课程&#xff…...

android 富文本及展示更多组件

模拟微博 #热贴 和 用户 的这种 富文本形式组件&#xff0c;不说了&#xff0c; 直接上代码 package com.tongtong.feat_watch.viewimport android.content.Context import android.graphics.Color import android.util.AttributeSet import android.view.LayoutInflater impo…...

Java-JMX 组件架构即详解

JMX架构由三个主要组件构成&#xff1a; ‌MBeans&#xff08;Managed Beans&#xff09;‌&#xff1a;代表可管理的资源&#xff0c;是JMX的核心。MBean可以是Java类或接口&#xff0c;提供了管理操作的接口&#xff0c;如获取系统信息、设置参数等。‌MBeanServer‌&#x…...

开源轻量级文件分享服务Go File本地Docker部署与远程访问

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...

Rust快速入门(五)

生命周期 生命周期的主要作用是避免悬垂引用。 这里我们详细说说借用检查&#xff1a; {let r; // ----------- a// |{ // |let x 5; // --- b |r &x; // | |} /…...

租赁系统|租赁小程序|租赁小程序成品

租赁系统是现代企业管理中不可缺少的数字化工具&#xff0c;它通过高效的信息整合与流程管理&#xff0c;为企业带来极大的便利和效益。一个完善的租赁系统开发应具备以下必备功能&#xff1a; 一、用户管理 用户管理模块负责系统的访问控制&#xff0c;包括用户注册、登录验证…...

后端-pageHelp分页查询

在pom.xml文件中先导入分页的坐标 PageResult里面有两个后端返回给前端的参数&#xff0c;我们最后把PageResult再封装到Result中&#xff0c; PageResult和Result都是工具类 EmployeeDTO中是前端页面中的模糊查询字段和分页的两个值 注意&#xff01; 括号中的参数Employee…...

MySQL | 尚硅谷 | 第15章_存储过程与函数

MySQL笔记&#xff1a;第15章_存储过程与函数 文章目录 MySQL笔记&#xff1a;第15章_存储过程与函数第15章_存储过程与函数 1. 存储过程概述1.1 理解1.2 分类 2. 创建存储过程2.1 语法分析2.2 代码举例 3. 调用存储过程3.1 调用格式3.2 代码举例3.3 如何调试存储过程演示代码 …...

汽车零部件设计之——麦弗逊悬架KC特性分析仿真APP介绍

汽车零部件是汽车工业的基石&#xff0c;是构成车辆的基础元素。一辆汽车通常由上万件零部件组成&#xff0c;包括发动机系统、传动系统、制动系统、电子控制系统等&#xff0c;它们共同确保了汽车的安全、可靠性及高效运行。在汽车产业快速发展的今天&#xff0c;汽车零部件需…...

代码随想录-算法训练营day41(动态规划04:01背包,01背包滚动数组,分割等和子集)

第九章 动态规划part04● 01背包问题&#xff0c;你该了解这些&#xff01; ● 01背包问题&#xff0c;你该了解这些&#xff01; 滚动数组 ● 416. 分割等和子集 正式开始背包问题&#xff0c;背包问题还是挺难的&#xff0c;虽然大家可能看了很多背包问题模板代码&#xf…...

Vue Loader的作用

Vue Loader是一个专门用于处理Vue单文件组件&#xff08;SFCs&#xff0c;即Single File Components&#xff09;的webpack加载器&#xff08;loader&#xff09;。以下是Vue Loader的具体作用&#xff1a; 1、解析和转换Vue单文件组件 Vue Loader能够解析和转换.vue文件&…...

SRS 服务器入门:实时流媒体传输的理想选择

在当今视频流媒体需求爆炸式增长的时代&#xff0c;如何选择一款高效、稳定且功能强大的流媒体服务器成为了许多开发者和企业关注的焦点。而 SRS&#xff08;Simple Realtime Server&#xff09;作为一款开源的流媒体服务器&#xff0c;以其卓越的性能和灵活的功能&#xff0c;…...

4K高清壁纸网站推荐

1. Awesome Wallpapers 官网: https://4kwallpapers.com/ 主题: 创意、摄影、人物、动漫、绘画、视觉 分辨率: 4K Awesome Wallpapers 提供了丰富的高质量图片&#xff0c;分为通用、动漫、人物三大类&#xff0c;可以按屏幕比例和分辨率检索&#xff0c;满足你对壁纸的各种…...

如何保证数据库和缓存双写一致性?

数据库和缓存&#xff08;redis&#xff09;双写数据一致性问题再高并发的场景下&#xff0c;是一个很严重的问题&#xff0c;无论在工作中&#xff0c;还是面试&#xff0c;遇到的概率非常大&#xff0c;这里就聊一聊目前的常见解决方案以及最优方案。 常见方案 缓存的主要目…...

QT 多级嵌套结构体,遍历成员--半自动。<模板+宏定义>QTreeWidget树结构显示

Qt的QTreeWidget来显示嵌套结构体的成员&#xff0c;并以树形结构展示。 #include <QApplication> #include <QTreeWidget> #include <QTreeWidgetItem> #include <QString> #include <cstdint>// 假设这些是你的结构体定义 struct BaseMeterPa…...