前端发开的性能优化 请求级:请求前(资源预加载和预读取)

news2024/9/21 11:06:08

预加载

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

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

如何实现预加载: 预加载资源的常见方法是使用<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 属性指定资源的类型,浏览器将会在当前页面加载完成后开始预读取这些资源。 

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1366005.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ArkTS - 数据持久化

一、概述 应用数据持久化&#xff0c;是指应用将内存中的数据通过文件或数据库的形式保存到设备上。内存中的数据形态通常是任意的数据结构或数据对象&#xff0c;存储介质上的数据形态可能是文本、数据库、二进制文件等。 持久&#xff08;Persistence&#xff09;&#xff0…

如何查看崩溃日志

​ 目录 描述 思路 查看ipa包崩溃日志 简单查看手机崩溃信息几种方式 方式1:手机设置查看崩溃日志 方式2: Xocde工具 方式3: 第三方软件克魔助手 环境配置 实时日志 奔溃日志分析 方式四&#xff1a;控制台资源库 线上崩溃日志 线上监听crash的几种方式 方式1: 三…

GEC6818科大讯飞离线语音识别

GEC6818科大讯飞离线语音识别 文章目录 GEC6818科大讯飞离线语音识别一、 下载科大讯飞离线语音SDK二、 解压文件夹后三、与GEC6818开发板一起使用3.1 使用科大讯飞的离线语音在ubantu中运行&#xff0c;作为服务端进行关键字的识别3.2 call.bnf-->hehe.bnf3.3 asr_offine_s…

JavaWeb基础(1)- Html与JavaScript(JavaScript基础语法、变量、数据类型、运算符、函数、对象、事件监听、正则表达式)

JavaWeb基础&#xff08;1&#xff09;- Html与JavaScript(JavaScript基础语法、变量、数据类型、运算符、函数、对象、事件监听、正则表达式) 文章目录 JavaWeb基础&#xff08;1&#xff09;- Html与JavaScript(JavaScript基础语法、变量、数据类型、运算符、函数、对象、事件…

什么是软件安全性测试?如何进行安全测试?

一、什么是软件安全性测试&#xff1f; 软件安全性测试是指对软件系统中的安全漏洞进行检测和评估的过程。其目的是为了确保软件系统在面对各种安全威胁时能够保持其功能的完整性、可用性和机密性。 二、软件安全性测试可以通过以下几个步骤来进行&#xff1a; 1. 需求分析&a…

强化学习8——在冰壶环境中使用策略迭代和价值迭代算法

冰壶环境 环境介绍 OpenAI Gym库中包含了很多有名的环境&#xff0c;冰湖是 OpenAI Gym 库中的一个环境&#xff0c;和悬崖漫步环境相似&#xff0c;大小为44的网格&#xff0c;每个网格是一个状态&#xff0c;智能体起点状态S在左上角&#xff0c;目标状G态在右下角&#xf…

计算机毕业设计----SSM BBS论坛

项目介绍 本项目包含前后台&#xff0c;前台为普通用户登录&#xff0c;后台为管理员登录&#xff1b; 管理员角色包含以下功能&#xff1a; 管理员登录,删除或者编辑用户的帖子,后台管理,友情链接管理,用户管理,版块管理,网站设置,用户设置,版块主题管理等功能。 用户角色…

fpmarkets盘点成功交易者的十个习惯(一)

在交易中能够盈利一次&#xff0c;fpmarkets认为这种情况100%的交易者都会做到&#xff0c;但是要做到每次交易都能盈利&#xff0c;即使是巴菲特也做到&#xff0c;我们只需要做到整体盈利就可以了&#xff0c;那么如何做到呢&#xff1f;今天fpmarkets就总结一下成功交易者的…

斑马斑马跳

欢迎来到程序小院 斑马斑马跳 玩法&#xff1a;行走的斑马&#xff0c;点击鼠标左键斑马左右跳动&#xff0c;左右两侧有大树&#xff0c;和移动的小鸟&#xff0c; 撞到大树和小鸟游戏结束&#xff0c;统计分数&#xff0c;快去斑马跳吧^^。开始游戏https://www.ormcc.com/pl…

2024农历新年是什么时候?电脑如何设置农历新年提醒

元旦的钟声已经远去&#xff0c;2024年的阳历新年就这样悄无声息地开始了。但对于我们很多人来说&#xff0c;真正的“过年”氛围&#xff0c;还得等到农历新年的到来。那么&#xff0c;今年的农历新年究竟是什么时候呢&#xff1f;答案是2月10日。 每当想到农历新年&#xff…

浅析进程优先级(上)

什么是进程优先级&#xff1f; 进程优先级&#xff1a;将处理器资源分配给进程的先后顺序 Linux 中每个进程都有相应的优先级 (优先级可能动态改变) 进程优先级决定进程 何时执行 和 获得处理器的时间 进程优先级通常表现为一个整数值 (数值大小决定优先级高低) Linux 中的…

寻找两个相交链表的相交节点

分析&#xff1a; 如图所示&#xff0c; A 长度为mkB长度为nk张三&#xff0c;李四两人分别从A和B的起始点相同速度出发&#xff0c;无论谁到达终点时&#xff0c;都从另一条队列的起点再次出发。假定起始&#xff0c;张三沿着A走&#xff0c;李四沿着B走。当李四到达终点后&a…

计算机毕业设计选题分享-node.js旅游景点分享网站03796(赠送源码数据库)JAVA、PHP,node.js,C++、python,大屏数据可视化等

node.js旅游景点分享网站 摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。旅游景点分享网站设计&#xff0c;主要的模块包括查看后台首页、轮播图&#xff08;轮播图管理&#xff09;、网站公告…

list-watch和节点亲和性和node亲和性

k8s的集群调度 scheduler:负责调度资源&#xff0c;把pod调度到node节点 预算策略 优先策略 1、list-watch k8s集群当中&#xff0c;通过list-watch的机制进行每个组件的协作&#xff0c;保持数据同步&#xff0c;每个组件之间解耦 kubectl配置文件&#xff0c;向APIserv…

城堡世界定制

城堡世界是一款移动应用程序&#xff0c;通常在手机上使用。 该游戏的主要功能丰富多样&#xff0c;用户可以通过购买不同的城堡卡来开启自己的城堡&#xff0c;这不仅可以满足玩家对个性化的追求&#xff0c;还可以让玩家在游戏中获得更多的乐趣。 作为一家专注于互联网领域的…

Linux进程通信——system V进程间通信

目录 system V共享内存 共享内存的原理 共享内存的建立与释放 共享内存的创建 shmget 共享内存的释放 shmctl 共享内存的关联 shmat 共享内存的去关联 shmdt 用共享内存实现serve和client的简单通信 共享内存区是最快的IPC形式。一旦这样的内存映射到共享它的进程的…

分治法:分而治之

排序算法中的快速排序&#xff0c;归并排序都用了分治思想 题目描述&#xff1a; 题目地址&#xff1a;LeetCode 50 数组中的第K个最大元素 题目描述&#xff1a; 题目地址&#xff1a;LeetCode 215

基于ssm的高校智能培训管理系统分析与设计论文

摘 要 如今的年代&#xff0c;已经是步入信息社会了&#xff0c;不仅信息更新速度频繁&#xff0c;信息量也大&#xff0c;在信息时代必须有相应的处理信息的方法&#xff0c;如果还采用以前的结绳记事或者笔写纸记&#xff0c;不仅是信息录入效率上赶不上节奏&#xff0c;在信…

Superset二次开发之提高Charts下载图片分辨率

需求:图片变高清 现状:Charts下载图片功能,下载的图片分辨率太差,用户体验不友好 源码分析 路径1:superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx接口1:DOWNLOAD_AS_IMAGE路径2:superset-frontend/src/utils/downloadAsImage.ts接口2:d…

VmWare虚拟机的安装

VmWare官方最新版下载地址 vmware官方下载地址 安装流程 安装成功验证 安装完成之后&#xff0c;打开网络中心&#xff0c;一定要确认这里多出两个网络连接&#xff0c;才证明Vmware已经安装成功