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

开心点啦.

已于 2024-01-03 14:40:17 修改

阅读量1.6k

点赞数 18

文章标签：前端

于 2024-01-03 11:58:15 首次发布

本文链接：https://blog.youkuaiyun.com/zxcvb0825/article/details/135355478

版权

预加载

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

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

如何实现预加载: 预加载资源的常见方法是使用<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只是预加载，并没有样式加载&#