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

前端发开的性能优化 请求级：请求前（资源预加载和预读取）

news 2026/5/13 19:22:25

预加载

预加载：是优化网页性能的重要技术，其目的就是在页面加载过程中先提前请求和获取相关的资源信息，减少用户的等待时间，提高用户的体验性。预加载的操作可以尝试去解决一些类似于减少首次内容渲染的时间，提升关键资源的加载速度。

也可以控制资源加载的优先级，让浏览器去明确那些资源是重要的，去进行一个预加载。预加载可以确保关键资源在需要的时候就已经准备好了，从而去避免因网络延迟或资源的阻塞导致页面的延迟渲染，这样导致用户的体验性不是很好。 

如何实现预加载: 预加载资源的常见方法是使用<link>标签，并设置 rel 属性为“preload”，并指定资源的类型和路径。以下是一个使用<1ink>标签进行预加载的示例:

<!DOCTYPE html>
<html>
<head><title>网页预加载示例</title><link rel="preload" href="styles.css" as="style"><link rel="preload" href="script.js" as="script"><link rel="preload" as="image" type="image/jpeg" href="./permance.jpeg" />
</head>
<body><div><!-- styles.css只是预加载，并没有样式加载，所以并不起作用 --><button class="btn btn-primary" id="btn">show Image</button></div>
</body>
</html>

在上述代码中，我们使用了两个<link>标签来预加载样式表 (styles.css)和脚本文件(script.js) 。通过设置 rel 属性为"preload”，并使用 as 属性指定资源的类型 ("style"和script")，浏览器将会在加载网页时提前加载这些资源。如果预加载的资源为图片，那么as则为"image"。

打开网页我们可以进行查看，将网络设置为3G

可以写一个点击操作，控制图片的渲染显示(当点击的时候，图片会立马渲染处理，没有等待时间)

<script>document.getElementById('btn').onclick = function() {var img = document.createElement("img");img.src = "./permance.jpeg";document.body.appendChild(img)}</script>

注意：预加载只是加载，并不能直接去使用。所以我们需要写两个，因为这两个并不冲突。

//预加载
<link rel="preload" href="styles.css" as="style">
//普通写法
<link rel="stylesheet" href="styles.css">

预读取

预读取：预读取也是优化网页性能和用户体验的技术，主要目的就是预测用户可能需要的资源，并且在后台提前去加载这些资源。目标就是减少未来页面或者是资源的一个加载时间，从而提升用户的导航体验，特别是多页面应用或者是前后关联的页面当中。利用浏览器的空闲时间和网络带宽提高整体网站的性能。

通过预读取可以预先将需要的资源存储到浏览器当中，当用户访问相关页面或触发相关操作的时候，这些资源就能够快速的进行一个呈现。

在网页中，可以使用<link>标签来实现预读取。以下是一个使用<link>标签进行预读取的示例: 

<!DOCTYPE html>
<html>
<head><title>网页预读取示例</title><link rel="prefetch" href="next-page.html"><link rel="prefetch" href="next-page.css" as="style"><link rel="prefetch" href="next-page.js" as="script">
</head>
<body><!-- 网页内容 --><h1>这是一个网页预读取示例</h1><p>网页内容...</p><!-- 加载预读取的资源 --><link rel="stylesheet" href="styles.css"><script src="script.js"></script>
</body>
</html>

在上述代码中，我们使用了三个<link>标签来预读取下一个页面可能需要使用的资源( next-page.html 、 next-page.css 和 next-page.js )。通过设置 rel 属性为"prefetch"，并使用 as 属性指定资源的类型，浏览器将会在当前页面加载完成后开始预读取这些资源。 

预读取的资源并不会阻塞页面的渲染，或者是影响当前页面的一个加载速度，因为浏览器会根据自身的一个策略决定什么时候开始预读取以及如何进行预读取的资源操作

在进行预读取操作的时候，还需要注意，预读取的读取效果取决于用户需求的准确预测，如果预读取的资源最终没有被使用，就会导致资源的浪费。

相关文章：

前端发开的性能优化 请求级：请求前（资源预加载和预读取）

预加载 预加载&#xff1a;是优化网页性能的重要技术&#xff0c;其目的就是在页面加载过程中先提前请求和获取相关的资源信息&#xff0c;减少用户的等待时间&#xff0c;提高用户的体验性。预加载的操作可以尝试去解决一些类似于减少首次内容渲染的时间&#xff0c;提升关键资…...

编程日记 2024/1/4 7:47:07

B01、类加载子系统-02

JVM架构图-英文版 中文版见下图&#xff1a; 1、概述类的加载器及类加载过程 1.1、类加载子系统的作用 类加载器子系统负责从文件系统或者网络中加载Class文件,class文件在文件开头有特定的文件标识。ClassLoader只负责class文件的加载,至于它是否可以运行,则由Execution Engi…...

编程日记 2024/1/4 7:46:06

用PHP搭建一个绘画API

【腾讯云AI绘画】用PHP搭建一个绘画API 大家好&#xff01;今天我要给大家推荐的是如何用PHP搭建一个绘画API&#xff0c;让你的网站或应用瞬间拥有强大的绘画能力&#xff01;无论你是想要让用户在网页上绘制自己的创意&#xff0c;还是想要实现自动绘画生成特效&#xff0c;这…...

编程日记 2024/1/4 7:45:05

西安人民检察院 | OLED翻页查询一体机

产品&#xff1a;55寸OLED柔性屏 项目时间&#xff1a;2023年12月 项目地点&#xff1a;西安 在2023年12月&#xff0c;西安人民检察院引入了OLED翻页查询一体机&#xff0c;为来访者提供了一种全新的信息查询方式。 这款一体机采用55寸OLED柔性屏&#xff0c;具有高清晰度、…...

编程日记 2024/1/4 7:44:04

superset利用mysql物化视图解决不同数据授权需要写好几次中文别名的问题

背景 在使用superset时&#xff0c;给不同的人授权不同的数据&#xff0c;需要不同的数据源&#xff0c;可视化字段希望是中文&#xff0c;所以导致不同的人需要都需要去改表的字段&#xff0c;因此引入视图&#xff0c;将视图中字段名称设置为中文 原表数据 select * from …...

编程日记 2024/1/4 7:41:01

输入输出流

1.输入输出流 输入/输出流类&#xff1a;iostream---------i input&#xff08;输入&#xff09; o output&#xff08;输出&#xff09; stream&#xff1a;流 iostream&#xff1a; istream类&#xff1a;输入流类-------------cin&#xff1a;输入流类的对象 ostream类…...

编程日记 2024/1/4 7:38:59

IOS：Safari无法播放MP4（H.264编码）

一、问题描述 MP4使用H.264编码通常具有良好的兼容性&#xff0c;因为H.264是一种广泛支持的视频编码标准。它可以在许多设备和平台上播放&#xff0c;包括电脑、移动设备和流媒体设备。 使用caniuse查询H.264兼容性&#xff0c;看似确实具有良好的兼容性&#xff1a; 然而…...

编程日记 2024/1/4 7:35:56

Pycharm恢复默认设置

window 系统 找到下方目录-->删除. 再重新打开Pycharm C:\Users\Administrator\.PyCharm2023.3 你的不一定和我名称一样 只要是.PyCharm*因为版本不同后缀可能不一样 mac 系统 请根据需要删除下方目录 # Configuration rm -rf ~/Library/Preferences/PyCharm* # Caches …...

编程日记 2024/1/4 7:34:54

简单计算器实现，包括两个数

正在加载中... 简单计算器实现&#xff0c;包括两个数 ❤ 厾罗 简单计算器实现&#xff0c;包括两个数 以下代码用于实现简单计算器实现&#xff0c;包括两个数基本的加减乘除运算&#xff1a; 实例(Python 3.0) # Filename : test.py # author by : www.dida100.com …...

编程日记 2024/1/4 7:33:53

竞赛保研 基于机器视觉的手势检测和识别算法

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于深度学习的手势检测与识别算法 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f9ff; 更多资料, 项目分享&#xff1a; https://gitee.com/dancheng…...

编程日记 2024/1/4 7:30:50

Android App从备案到上架全过程

不知道大家注意没有，最近几年来，新的移动App想要上架是会非常困难的，并且对于个人开发者和小企业几乎是难如登天，各种备案和审核。但是到底有多难，或许只有上架过的才会有所体会。 首先是目前各大应用市场陆续推出新的声明，各种备案截止日期到12月就要到最后期限责令整改…...

编程日记 2024/1/4 7:27:48

用邮件及时获取变更的公网IP--------python爬虫+打包成exe文件

参考获取PC机公网IP并发送至邮箱 零、找一个发送邮件的邮箱 本文用QQ邮箱为发送邮箱&#xff0c;网易等邮箱一般也有这个功能&#xff0c;代码也是通用的。 第一步&#xff1a;在设置中找到账户&#xff0c;找到POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务&#xff0c;点击获…...

编程日记 2024/1/4 7:22:43

c++学习：函数模板+实战

目录 函数模板 思考 如果两个参数的类型不一样可以下面这么写 如果有指定返回参数可以下面这么写 实战 找出三个数中最大的一个 函数模板 实际上就是建立一个通用函数&#xff0c;其函数返回值类型和形参类型不具体指定&#xff0c;用一个虚拟的类型来代表template 是一个…...

编程日记 2024/1/4 7:19:40

three.js gltf后处理颜色异常(伽马校正)

效果&#xff1a; 应用了伽马校正&#xff0c;好像效果不明显 代码&#xff1a; <template><div><el-container><el-main><div class"box-card-left"><div id"threejs" style"border: 1px solid red"><…...

编程日记 2024/1/4 7:17:38

面试经典150题(55-58)

leetcode 150道题 计划花两个月时候刷完&#xff0c;今天&#xff08;第二十四天&#xff09;完成了4道(55-58)150&#xff1a; 55.&#xff08;19. 删除链表的倒数第 N 个结点&#xff09;题目描述&#xff1a; 给你一个链表&#xff0c;删除链表的倒数第 n 个结点&#xff…...

编程日记 2024/1/4 7:15:36

如果一个n位正整数等于其各位数字的n次方之和

❤ 厾罗 如果一个n位正整数等于其各位数字的n次方之和 如果一个n位正整数等于其各位数字的n次方之和,则称该数为阿姆斯特朗数。 例如1^3 5^3 3^3 153。 1000以内的阿姆斯特朗数&#xff1a; 1, 2, 3, 4, 5, 6, 7, 8, 9, 153, 370, 371, 407。 以下代码用于检测用户输…...

编程日记 2024/1/4 7:13:33

solidity显示以太坊美元价格

看过以太坊白皮书的都知道&#xff0c;以太坊比较比特币而言所提升的地方中&#xff0c;我认为最重要的一点就是能够访问外部的数据&#xff0c;这一点在赌博、金融领域应用会很广泛&#xff0c;但是区块链是一个确定的系统&#xff0c;包括里面的所有数值包括交易ID等都是确定…...

编程日记 2024/1/4 7:12:32

ChatGPT学习笔记——大模型基础理论体系

1、ChatGPT的背景与意义 近期，ChatGPT表现出了非常惊艳的语言理解、生成、知识推理能力， 它可以极好的理解用户意图，真正做到多轮沟通，并且回答内容完整、重点清晰、有概括、有条理。 ChatGPT 是继数据库和搜索引擎之后的全新一代的 “知识表示和调用方式”如下表所示。 …...

编程日记 2024/1/4 7:10:30

Termius for Mac/Win：一款功能强大的终端模拟器、SSH 和 SFTP 客户端软件

随着远程工作和云技术的普及&#xff0c;对于高效安全的远程访问和管理服务器变得至关重要。Termius&#xff0c;一款强大且易用的终端模拟器、SSH 和 SFTP 客户端软件&#xff0c;正是满足这一需求的理想选择。 Termius 提供了一站式的解决方案&#xff0c;允许用户通过单一平…...

编程日记 2024/1/4 7:08:28

python如何读取被压缩的图像

读取压缩的图像数据&#xff1a; PackBits 压缩介绍&#xff1a; CCITT T.3 压缩介绍&#xff1a; 读取压缩的图像数据&#xff1a; 在做图像处理的时候&#xff0c;平时都是使用 函数io.imread() 或者是 函数cv2.imread( ) 函数来读取图像数据&#xff0c;很少用PIL.Image…...

编程日记 2024/1/4 7:07:26

码农的职业天花板：30岁前必须突破的5个瓶颈

在软件行业的快速迭代浪潮中&#xff0c;软件测试从业者作为质量保障的核心力量&#xff0c;正面临着愈发严峻的职业挑战。30岁&#xff0c;不仅是人生的重要分水岭&#xff0c;更是测试人职业发展的关键节点。如果不能在这个阶段突破潜藏的瓶颈&#xff0c;很可能会陷入“经验…...

编程新知 2026/5/13 18:25:31

代码骨架生成器：从原理到实践，打造高效项目脚手架

1. 项目概述&#xff1a;从零到一的代码骨架生成器在软件开发领域&#xff0c;尤其是团队协作或个人快速启动新项目时&#xff0c;我们常常会陷入一种重复性的“仪式感”中&#xff1a;创建项目目录结构、初始化版本控制、配置构建工具、设置代码规范、编写基础配置文件……这些…...

编程新知 2026/5/13 18:08:31

Carla 启动卡在75%并报“Fatal error”：从崩溃日志到资源缺失的排查实录

1. 当Carla卡在75%&#xff1a;从崩溃现象到问题定位 那天我正在Windows环境下调试Carla仿真平台&#xff0c;编译过程一切顺利&#xff0c;但执行make launch命令后&#xff0c;进度条就像被施了定身咒——永远停在了75%的位置。紧接着弹出的"Fatal error"对话框让我…...

编程新知 2026/5/13 17:36:30

1k Star的p-retry，让异步操作失败自动重试

文章目录1k Star的p-retry&#xff0c;让异步操作失败自动重试核心功能适用场景注意事项1k Star的p-retry&#xff0c;让异步操作失败自动重试 sindresorhus开源的p-retry项目&#xff0c;目前在GitHub上获得1009个Star。这个库的核心功能是为异步操作添加重试机制&#xff0c…...

编程新知 2026/5/13 17:34:27

【仿真实战】AnyLogic地铁站客流仿真：从零搭建带安检与限流的多层车站模型

1. 从零开始搭建地铁站仿真模型 第一次接触AnyLogic做地铁站客流仿真时&#xff0c;我完全被各种模块和参数搞晕了。后来在几个实际项目中摸爬滚打&#xff0c;终于总结出一套小白也能快速上手的方法。这次我们就来搭建一个包含安检区和限流措施的多层地铁站模型&#xff0c;整…...

编程新知 2026/5/13 17:00:42

Realme Q3 5G刷Pixel Experience GSI保姆级教程（附问题修复与救砖指南）

Realme Q3 5G刷入Pixel Experience GSI全流程实战手册 在ColorOS与类原生Android之间&#xff0c;总有一群追求极简体验的玩家。Realme Q3 5G作为一款性价比突出的设备&#xff0c;其官方系统预装的应用和服务未必符合所有用户的期待。本文将带你完整走过从解锁到问题修复的全过…...

编程新知 2026/5/13 16:25:13

WordPress站点AI友好化：LLMs.txt插件配置与Markdown输出实战

1. 项目概述&#xff1a;为你的WordPress站点打造AI友好的内容接口如果你运营着一个WordPress网站&#xff0c;并且希望你的内容能被当下最前沿的大型语言模型&#xff08;LLMs&#xff09;——比如ChatGPT、Claude、Gemini等——更好地发现、理解和利用&#xff0c;那么你很可…...

编程新知 2026/5/13 13:18:30

物联网超低功耗设计：从睡眠优先到能量自治的十年续航之道

1. 项目概述&#xff1a;让物联网节点运行数十年的设计哲学如果你正在部署一个大规模的物联网网络&#xff0c;无论是智慧城市的数千个路灯传感器&#xff0c;还是遍布数公里农田的环境监测节点&#xff0c;最让你头疼的问题恐怕不是通信协议&#xff0c;也不是数据处理&#x…...

编程新知 2026/5/13 13:05:08

3个步骤让你在Windows上轻松安装安卓应用：APK安装器完全指南

3个步骤让你在Windows上轻松安装安卓应用&#xff1a;APK安装器完全指南 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 你是否曾经想过&#xff0c;如果能在Windows电…...

编程新知 2026/5/13 12:42:33

5分钟完全指南：roop-unleashed AI换脸神器从入门到精通

5分钟完全指南&#xff1a;roop-unleashed AI换脸神器从入门到精通 【免费下载链接】roop-unleashed Evolved Fork of roop with Web Server and lots of additions 项目地址: https://gitcode.com/gh_mirrors/ro/roop-unleashed 想要在几分钟内制作专业级的AI换脸视频吗…...

编程新知 2026/5/13 11:43:14