前端性能优化-实测
PageSpeed Insights 性能测试
今天测试网站性能的时候发现一个问题，一个h2标签内容为什么会占据这么长的渲染时间，甚至有阶段测到占据了7000多毫秒，使用了很多方法都不能解决，包括了修改标签，样式大小等，当我把它彻底删掉才没有出现这个问题，但是这个地方是不能删除这个标题的，以至于一直卡在这个地方并将我的性能评分卡在30-40内。
最后是怎么解决的呢。
首先这个网站字体样式使用了字体包，在未下载完字体包时阻碍了页面的显示，这就是为什么单这个标签的内容就渲染了这么久。解决方式也很简单，在使用字体包的引入中使用 font-display 属性，这个属性特别适用于自定义字体加载时的用户体验。
@font-face {font-family: "Inter";src: url("./fonts/Inter.ttf");font-display: swap;
}这个属性在自定义字体下载完成之前，使用后备字体显示文本，确保用户可以阅读页面内容，而不是看到无样式的文本或乱码。
相关文章：
前端性能优化-实测
PageSpeed Insights 性能测试 今天测试网站性能的时候发现一个问题，一个h2标签内容为什么会占据这么长的渲染时间，甚至有阶段测到占据了7000多毫秒，使用了很多方法都不能解决，包括了修改标签，样式大小等，当…...
【Linux】初识操作系统
一、冯•诺依曼体系结构 在学习操作系统之前，我们先来认识一下冯•诺依曼体系结构，我们常见的计算机，如笔记本。我们不常见的计算机，如服务器，大部分都遵守冯诺依曼体系。 截至目前，我们所认识的计算机&am…...
等保2.0中，如何确保云服务提供商的数据主权合规？
等保2.0中云服务提供商的数据主权合规措施 等保2.0（网络安全等级保护2.0）是中国的网络安全标准，旨在确保云服务提供商的数据主权合规。以下是一些关键措施和要求： 数据地理位置要求：云服务提供商必须保证所有基础设施位…...
【AI大模型】Transformers大模型库（十四）：Datasets Viewer
目录 一、引言 二、Datasets Viewer数据查看器 2.1 概述 2.2 示例 三、总结 一、引言 这里的Transformers指的是huggingface开发的大模型库，为huggingface上数以万计的预训练大模型提供预测、训练等服务。 🤗 Transformers 提供了数以千计的预训练…...
一个例子理解傅里叶变换的计算过程
假设我们有一个简单的信号，由两个不同频率的正弦波组成，我们希望通过傅里叶变换来分析其频谱。 示例信号 假设我们有一个信号 ： 这个信号由两个频率成分组成：一个50 Hz的正弦波和一个120 Hz的正弦波，后者的振幅是前者…...
2-2到2-4
计算出所有人的平均年龄： val lines sc.textFile("/root/data/scala/people/page.txt") val count lines.count() val total lines.map(line > line.split(" ")(1)).map(t>t.trim.toInt).collect().reduce((a,b)>ab) val avgAge …...
Vatee万腾平台：一站式智慧服务，让生活更美好
在数字化浪潮席卷全球的今天，我们生活的方方面面都在经历着前所未有的变革。Vatee万腾平台凭借其一站式智慧服务，正成为推动这场变革的重要力量，让我们的生活变得更加美好。 Vatee万腾平台，作为一家专注于提供智慧服务的领军企业&…...
如何选择一个好的汽车油封制造商?
汽车的每一个零部件都至关重要，其中，油封的作用更是不可忽视。它们确保了液体和气体在汽车内部的正确流动，防止了泄漏。因此，选择一个可靠的汽车油封制造商就显得尤为重要。那么，我们应该如何做出明智的选择呢? 首先…...
构建高效的电商返利系统：架构设计与实现
构建高效的电商返利系统：架构设计与实现 大家好，我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编，也是冬天不穿秋裤，天冷也要风度的程序猿！ 电商返利系统作为连接消费者和商家的桥梁，能够…...
如何使用 Python 交互式解释器？
1. 什么是Python交互式解释器？ Python交互式解释器是一种REPL（Read-Eval-Print Loop）环境。它会读取用户输入的代码，执行代码，并输出结果，随后等待下一个用户输入。这种交互方式使得Python非常适合快速原型…...
C++日期类的完整实现，以及this指针的const修饰等的介绍
文章目录 前言一、日期类的实现二、this指针的const修饰总结 前言 C日期类的完整实现，以及this指针的const修饰等的介绍 一、日期类的实现 // Date.h #pragma once#include <iostream> using namespace std;#include <assert.h>class Date {// 友元函…...
缓冲区溢出
本文作者：杉木涂鸦智能安全实验室 前置知识点 栈 栈（Stack）是计算机中的一种数据结构，用于存储临时数据。它的特点是后入先出（LIFO），只能在栈顶添加或删除数据。在程序中，栈被用于…...
step7：“模拟量界面”逻辑
文章目录 文章介绍效果图AnalogPage.qml结构图调用 SerialPortHandler.sendData(message); serialporthandler.cpp 文章介绍 之前的6步实现了案例MF的界面设计和串口界面的逻辑设计，本文将实现模拟量界面的逻辑设计 新增功能： 1）弹出提示框 …...
Arduino - 继电器
Arduino - 继电器 In a previous tutorial, we have learned how to turn on/off an LED. In this tutorial, we are going to learn how to turn on/off some kind of devices that use the high voltage power supply(such as a light bulb, fan, electromagnetic lock, lin…...
状态压缩DP——AcWing 327. 玉米田
状态压缩DP 定义 状态压缩 DP 是一种通过二进制压缩状态的动态规划算法。它通过使用位运算来加速状态的转移和计算，从而提高算法的效率。 注意事项 数据范围：状态压缩 DP 通常适用于数据范围较小的问题，因为它需要使用二进制来表示状态&a…...
kafka（二）安装部署（2）windows
目录 一、前提 1、jdk 2、Zookeeper 2.1、解压 2.2、创建data文件夹 2.3、配置文件 2.4、添加环境变量 2.5、启动zk：zkServer 2.6、客户端 3、Scala 3.1、下载安装 3.2、配置环境变量 3.3、验证是否安装成功 二、kafka下载安装 1、下载 2、安装 2.1…...
)
aliplayer Server returned 403 Forbidden (access denied)
最近在接入阿里云播放器的sdk,项目的播放地址是m3u8的,h265的url 输入播放源以后播放报错,提示403,拒绝访问,起初以为是crt路径问题和key的问题,然后检查了以后没问题,后来又看了一下是不是白名单的问题,但是项目资源没通过阿里云平台存储 AVPUrlSource *source [[AVPUrlSou…...
单例模式（下）
文章目录 文章介绍步骤安排及单例讲解step1：注册单例类型（main.cpp）step2：定义类和私有构造函数（keyboardinputmanager.h）step3:（keyboardinputmanager.cpp）step4：在qml中…...
合约期VS优惠期，搞明白他们的区别才能避免很多坑！
在购买流量卡时，相信大家也都发现了，市面上的不少套餐都是有合约期和优惠期的，尤其是联通和移动，那么，什么是合约期？什么又是优惠期呢？ 其实，目前很多在网上办理的大流量卡都是有…...
函数式反应式编程（FRP）在Scala中的实践与探索
函数式反应式编程（Functional Reactive Programming，简称FRP）是一种编程范式，它结合了函数式编程（Functional Programming，FP）的声明式特性和反应式编程（Reactive Programming&#…...
在软件开发中正确使用MySQL日期时间类型的深度解析
在日常软件开发场景中，时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志，到供应链系统的物流节点时间戳，时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库，其日期时间类型的…...
Vue记事本应用实现教程
文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展：显示创建时间8. 功能扩展：记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...
高等数学（下）题型笔记（八）空间解析几何与向量代数
目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...
反射获取方法和属性
Java反射获取方法 在Java中，反射（Reflection）是一种强大的机制，允许程序在运行时访问和操作类的内部属性和方法。通过反射，可以动态地创建对象、调用方法、改变属性值，这在很多Java框架中如Spring和Hiberna…...
2025盘古石杯决赛【手机取证】
前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来，实在找不到，希望有大佬教一下我。 还有就会议时间，我感觉不是图片时间，因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...
实现弹窗随键盘上移居中
实现弹窗随键盘上移的核心思路 在Android中，可以通过监听键盘的显示和隐藏事件，动态调整弹窗的位置。关键点在于获取键盘高度，并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中，新增了一个本地验证码接口 /code，使用函数式路由（RouterFunction）和 Hutool 的 Circle…...
视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...
Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战
说明：这是一个机器学习实战项目（附带数据代码文档），如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下，风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...
MySQL 主从同步异常处理
阅读原文：https://www.xiaozaoshu.top/articles/mysql-m-s-update-pk MySQL 做双主，遇到的这个错误： Could not execute Update_rows event on table ... Error_code: 1032是 MySQL 主从复制时的经典错误之一，通常表示ÿ…...