国内外网站建设2017,美瞳网站建设,油画网站模板,临邑建设局官方网站[css]你有使用过preload、preconnect、prefetch这些属性吗#xff1f;说说它们都有什么作用#xff1f;
preload
元素的 rel 属性的属性值preload能够让你在你的HTML页面中元素内部书写一些声明式的资源获取请求#xff0c;可以指明哪些资源是在页面加载完成后即刻需要的。…[css]你有使用过preload、preconnect、prefetch这些属性吗说说它们都有什么作用
preload
元素的 rel 属性的属性值preload能够让你在你的HTML页面中元素内部书写一些声明式的资源获取请求可以指明哪些资源是在页面加载完成后即刻需要的。 试想我们网站使用了一种特殊字体我们在css里面定义了字体的url。那么直到浏览器开始解析CSS了才会识别出来需要加载这个资源。 如果我们提前让浏览器下载好这个资源呢那么执行CSS的时候就可以直接用了。就像这样 如上所示我们使用这样的语法
relpreolad声明这是一个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 relpreconnect href//example.com
link relpreconnect href//cdn.example.com crossorigin浏览器会进行以下步骤解释href的属性值如果是合法的URL然后继续判断URL的协议是否是http或者https否则就结束处理
如果当前页面host不同于href属性中的host,crossorigin其实被设置为anonymous(就是不带cookie了)如果希望带上cookie等信息可以加上crossorign属性,corssorign就等同于设置为use-credentials个人简介
我是歌谣欢迎和大家一起交流前后端知识。放弃很容易 但坚持一定很酷。欢迎大家一起讨论
主目录
与歌谣一起通关前端面试题
