[css]你有使用过preload、preconnect、prefetch这些属性吗？说说它们都有什么作用？

preload
元素的 rel 属性的属性值preload能够让你在你的HTML页面中元素内部书写一些声明式的资源获取请求，可以指明哪些资源是在页面加载完成后即刻需要的。 试想我们网站使用了一种特殊字体，我们在css里面定义了字体的url。那么直到浏览器开始解析CSS了才会识别出来需要加载这个资源。 如果我们提前让浏览器下载好这个资源呢？那么执行CSS的时候就可以直接用了。就像这样： ``如上所示，我们使用这样的语法：
rel="preolad"声明这是一个preload
href指明资源的位置
as指明资源类型（这是为了让浏览器精确设置优先级，设置正确的CSP、Accept头部）
crossorigin 指明使用的跨域设置
preload和onload事件
添加preload声明之后，浏览器初次加载的资源变多了，但preload并不会阻塞onload事件的触发
prefetch
prefetch是对浏览器的暗示，暗示将来可能需要某些资源，但由代理决定是否加载以及什么时候加载这些资源。
efetch跟preload不同在于，用户从A页面进入B页面，preload的会失效，而prefetch的内容可以在B页面使用。preconnet
浏览器要建立一个连接，一般需要经过DNS查找，TCP三次握手和TLS协商（如果是https的话），这些过程都是需要相当的耗时的，所以preconnet，就是一项使浏览器能够预先建立一个连接，等真正需要加载资源的时候就能够直接请求了。
而一般形式就是<link rel="preconnect" href="//example.com">
<link rel="preconnect" href="//cdn.example.com" crossorigin>浏览器会进行以下步骤：解释href的属性值，如果是合法的URL，然后继续判断URL的协议是否是http或者https否则就结束处理
如果当前页面host不同于href属性中的host,crossorigin其实被设置为anonymous(就是不带cookie了)，如果希望带上cookie等信息可以加上crossorign属性,corssorign就等同于设置为use-credentials

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

[css]你有使用过preload、preconnect、prefetch这些属性吗？说说它们都有什么作用？相关推荐

做前端性能优化，还不知道什么是Preload、Prefetch、Preconnect、Prerendering，你就out了？
做前端性能优化,还不知道什么是Preload.Prefetch.Preconnect? 今天,我们将探讨当前的资源提示和指令,这是提高网站或 Web 应用程序性能的另一种好方法.您可能听说过Prelo ...
Web性能优化之preload、prefetch
基本用法在网络请求中,我们在使用到某些资源比如:图片,JS,CSS 等等,在执行之前总需要等待资源的下载,如果我们能做到预先加载资源,那在资源执行的时候就不必等待网络的开销,这时候就轮到 prelo ...
预加载属性 preload 与 prefetch 区别
原文链接:https://waynegong.cn/posts/40528.html TLDR: preload 告诉浏览器立即加载资源; prefetch 告诉浏览器在空闲时才开始加载资源: pre ...
学会preload和prefetch
preload和prefetch是什么? 我们常说的preload和prefetch,是link标签rel里新增的两种值,用于让浏览器提前加载指定的资源,它们会先被缓存(属于http cache缓存) ...
preload与prefetch对比
前言在preload和prefetch之前,我们一般根据编码需求通过link或者script标签引入页面渲染和交互所依赖的js和css等:然后这些资源由浏览器决定优先级进行加载.解析.渲染等. 然而 ...
webpack系统学习（六）打包分析，Preload和Prefetch
1. 打包分析我们需要在使用webpack的时候添加一些配置: webpack --profile --json > stats.json 这个配置会在打包完成之后生成一个stats.json ...
[css] inline、block、inline-block这三个属性值有什么区别？
[css] inline.block.inline-block这三个属性值有什么区别? inline: 行内元素,元素不独占一行,不可以修改宽高 block: 块级元素,元素独占一行,可以修改宽高 i ...
[css] box-sizing常用的属性有哪些？分别有什么作用？
[css] box-sizing常用的属性有哪些?分别有什么作用? box-sizing常用的属性有 content-box 和 border-box.content-box 盒子的宽度不包含 bor ...
[css] 你有用过IE css的expression表达式吗？说说你对它的理解和它有什么作用呢？
[css] 你有用过IE css的expression表达式吗?说说你对它的理解和它有什么作用呢? 主要用来解决IE 低版本样式自适应的问题. 比如:height:expression(this.of ...

[css]你有使用过preload、preconnect、prefetch这些属性吗？说说它们都有什么作用？

[css]你有使用过preload、preconnect、prefetch这些属性吗？说说它们都有什么作用？

个人简介

主目录

[css]你有使用过preload、preconnect、prefetch这些属性吗？说说它们都有什么作用？相关推荐

最新文章

热门文章