重学 html の link标签

栏目: CSS · 发布时间: 5年前

内容简介:用于前端界面性能优化,rel 的属性值可以为preload、prefetch、dns-prefetch。用户在使用当前界面时,浏览器空闲时先把下个界面要使用的资源下载到本地缓存。浏览器下不下载不可知。

link 元素规定了外部资源与当前文档的关系。常用于链接样式表,创建网站图标,预加载资源等。

链接样式表

<link href="main.css" rel="stylesheet">

创建站点图标

<link rel="icon" type="image/png" href="myicon.png">

预加载

用于前端界面性能优化,rel 的属性值可以为preload、prefetch、dns-prefetch。

<link rel="preload" href="style.css" as="style">
<link rel="prefetch" href="/uploads/images/pic.png">
<link rel="dns-prefetch" href="//fonts.googleapis.com">

prefetch 预获取

用户在使用当前界面时,浏览器空闲时先把下个界面要使用的资源下载到本地缓存。浏览器下不下载不可知。

举个例子: 网站有A,B 两个界面。当用户访问界面 A 时有很大的概率会访问 B 界面(比如登录跳转)那么我们可以在用户访问界面 A 的时候,提前将 B 界面需要的某些资源下载到本地,性能会得到很大的提升。那么我们只需要在界面 A.html 文件中设置如下代码:

<link rel="prefetch" href="/uploads/images/pic.png">

preload

控制当前界面的资源下载优先级,浏览器必须下载资源。

举个例子: 网站的一个界面 A的 css 样式文件中使用了外部字体文件,正常情况下该字体的下载是在 css 解析的时候完成的。想想字体文件好像在 css 样式文件解析之前下载到本地比较好。那么我们就可以在head标签设置字体的 preload。

<link rel="preload" href="https://example.com/fonts/font.woff" as="font">

dns-prefetch

按照字面理解即可,先把要跳转的域名解析,减少时间。

prefetch & preload 对比

  • 关注的页面不同: prefetch 关注要使用的页面,preload 关注当前页面
  • 资源是否下载:prefetch 的资源下载情况未知(只在浏览器空闲时会下载),preload 肯定下载

media 属性

media 属性规定被链接文档将显示在什么设备上。

<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
<link rel="stylesheet" type="text/css" href="print.css" media="print"/>
</head>

注意: 当界面加载时,两个样式表都会下载到客户端,只是会根据场景不同使用不同的样式。

TODO

script 标签的 async 和 defer 属性的区别和目的?

引用


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

微信小程序入门指南

微信小程序入门指南

知晓程序 / 电子工业出版社 / 2017-6-1 / 49

《知晓程序:微信小程序入门指南》是一本分析小程序生态、解读小程序产品设计与开发的入门图书。全书共 9 章,全面讲解了小程序的基本知识、大家如何看待小程序、小程序对行业的影响、小程序对开发者的影响、小程序对用户的影响、开发小程序需要的准备工作等内容,并深入解读了小程序的官方文档。 读者在阅读《知晓程序:微信小程序入门指南》之后可以清楚小程序与订阅号、服务号的区别,了解小程序适用的场景,认识小程......一起来看看 《微信小程序入门指南》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具