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

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

news 2026/3/27 22:12: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

基于模糊PID的水下航行器运动控制系统研究——Matlab 2016b及以上软件应用、课程报告...

基于模糊PID的水下航行器运动控制系统研究 1.适用软件Matlab 2016b及以上 2.课程报告6500字左右共16页 3.课程报告小报告仿真仿真视频 4.请结合以下图片水下航行器的运动控制一直是海洋工程领域的热门课题。面对复杂多变的洋流扰动和强非线性的水动力特性&#xff0c;传统PID控…...

编程新知 2026/3/27 21:31:55

LazyLLM架构设计揭秘：低代码如何支撑复杂多Agent系统

LazyLLM架构设计揭秘&#xff1a;低代码如何支撑复杂多Agent系统 【免费下载链接】LazyLLM 项目地址: https://gitcode.com/gh_mirrors/la/LazyLLM 在当今AI应用开发领域&#xff0c;构建复杂的多Agent系统往往需要大量的工程投入和专业知识。然而&#xff0c;LazyLLM框…...

编程新知 2026/3/27 21:19:48

【JavaWeb开发】从零构建前后端交互实战指南

1. JavaWeb前后端交互基础入门 第一次接触JavaWeb开发时&#xff0c;最让我困惑的就是前后端如何传递数据。记得刚开始做项目时&#xff0c;我傻乎乎地用字符串拼接HTML代码返回给前端&#xff0c;结果遇到中文乱码问题折腾了一整天。后来才发现&#xff0c;现代JavaWeb开发早已…...

编程新知 2026/3/27 21:13:47

2026年上海网站建设市场分析：企业官网从展示到增长的演进路径

2026年&#xff0c;上海企业数字化服务市场迎来结构性变革。据2026年上半年上海企业数字化服务市场调研数据显示&#xff0c;上海地区企业官网新建与升级需求同比增长45%&#xff0c;中大型企业对官网的核心诉求已从基础信息展示转向AI智能赋能、全球化跨境适配、全链路营销转化…...

编程新知 2026/3/27 20:53:39

终极指南：如何使用LeetDown轻松降级A6/A7苹果设备系统

终极指南&#xff1a;如何使用LeetDown轻松降级A6/A7苹果设备系统 【免费下载链接】LeetDown a GUI macOS Downgrade Tool for A6 and A7 iDevices 项目地址: https://gitcode.com/gh_mirrors/le/LeetDown LeetDown是一款专为macOS设计的图形化降级工具&#xff0c;能够…...

编程新知 2026/3/27 20:05:06

OpCore-Simplify：零基础黑苹果配置终极指南，5分钟搞定复杂EFI

OpCore-Simplify&#xff1a;零基础黑苹果配置终极指南&#xff0c;5分钟搞定复杂EFI 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 还在为黑苹果配置…...

编程新知 2026/3/27 19:46:59

Hutool CronUtil实战：5分钟搞定Spring Boot定时任务（含动态任务配置）

Hutool CronUtil实战&#xff1a;5分钟搞定Spring Boot定时任务&#xff08;含动态任务配置&#xff09; 在Java开发领域&#xff0c;定时任务几乎是每个项目都绕不开的基础需求。传统方案如Spring Scheduler虽然简单易用&#xff0c;但在动态任务管理和细粒度控制方面往往力不…...

编程新知 2026/3/27 19:40:59

ScanTailor Advanced：3步让你的扫描文档焕然一新

ScanTailor Advanced&#xff1a;3步让你的扫描文档焕然一新 【免费下载链接】scantailor-advanced ScanTailor Advanced is the version that merges the features of the ScanTailor Featured and ScanTailor Enhanced versions, brings new ones and fixes. 项目地址: htt…...

编程新知 2026/3/27 18:44:37

全球蛋白质组学数据共享核心平台升级

摘要 ProteomeXchange蛋白质组学资源联盟&#xff08;http://www.proteomexchange.org&#xff09;的建立旨在标准化基于质谱&#xff08;MS&#xff09;的蛋白质组学领域开放数据实践。本文介绍了ProteomeXchange在过去3年的主要进展。该联盟的6个成员数据库分布于&#xff1…...

编程新知 2026/3/27 18:30:32

Llama-3.2V-11B-cot惊艳案例：电影截图角色关系推演与剧情发展预测展示

Llama-3.2V-11B-cot惊艳案例&#xff1a;电影截图角色关系推演与剧情发展预测展示 1. 视觉推理工具简介 Llama-3.2V-11B-cot是基于Meta多模态大模型开发的高性能视觉推理工具&#xff0c;专为双卡4090环境深度优化。该工具不仅修复了视觉权重加载的关键问题&#xff0c;还支持…...

编程新知 2026/3/27 17:54:05