资讯专栏INFORMATION COLUMN

重学 html の link标签

ruicbAndroid / 1976人阅读

摘要:元素规定了外部资源与当前文档的关系。常用于链接样式表,创建网站图标,预加载资源等。那么我们就可以在标签设置字体的。注意当界面加载时,两个样式表都会下载到客户端,只是会根据场景不同使用不同的样式。标签的和属性的区别和目的引用一步前端

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

链接样式表 

创建站点图标

预加载

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



prefetch 预获取

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

preload 

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

dns-prefetch

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

prefetch & preload 对比

关注的页面不同: prefetch 关注要使用的页面,preload 关注当前页面

资源是否下载:prefetch 的资源下载情况未知(只在浏览器空闲时会下载),preload 肯定下载

media 属性

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




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

TODO

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

引用

preload & prefetch
一步前端

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/54971.html

相关文章

  • 重学 html 标签语义化

    摘要:语义化是指仅仅从元素上就能看出页面的大致结构。表述类缩写表示整段话的引用表示一行文字的引用表示引述作品名两个标签结合使用,来定义图文。黄浦江上的的卢浦大桥元素可定义预格式化的文本。在语义上表达是段代码。 HTML语义化是指仅仅从 HTML 元素上就能看出页面的大致结构。我们比较习惯使用 div、span 来垒页面,视觉上没啥问题,文字既内容,html 标签只被 css 样式所用,单从 ...

    lk20150415 评论0 收藏0
  • 重学 html meta 标签

    摘要:标签的个属性。缓存所有响应,但并非必须。只为单个用户缓存,因此不允许任何中继进行缓存。比如说就不允许缓存的响应表示当前请求开始,该响应在多久内能被缓存和重用,而不去服务器重新请求。 meta简介 网页元数据,常用于定义网页的编码、说明、关键字、修改日期及其他信息。这些数据服务于浏览器、搜索引擎等。 meta 标签的2个属性name, http-equiv。 。 name 属性 ...

    guyan0319 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<