码迷,mamicode.com
首页 > 其他好文 > 详细

<head>标签中的奥秘

时间:2020-01-13 23:59:01      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:google   wrap   end   索引   点击   列表   href   follow   sub   

作为一名前端开发,我竟一直不知道<head></head>标签中的秘密。

有幸接触到这个知识点,觉得不能自己独享这份喜悦,特此分享给大家。

举几个例子:

京东金融的<head>部分剖析

技术图片

1、 <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame。

详解:

  • http-equiv相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确地显示网页内容,与之对应的属性值为contentcontent中的内容其实就是各个参数的变量值。
  • X-UA-Compatible是IE8以上版本的一个专有<meta>属性,IE8以下的浏览器是不识别的,它告诉浏览器(IE8+)采用何种版本渲染网页。
  • IE=Edge告诉浏览器使用最新的引擎渲染网页,而chrome=1则告诉浏览器激活Chrome
    Frame(谷歌浏览器内嵌框架”,是Google推出的一款免费的IE专用插件。用户可以通过IE的用户界
    面,以Chrome内核的渲染方式浏览网页。)

2、<meta name="renderer" content="webkit"/>
在双核浏览器中,让Webkit内核优先渲染。

详解:

国内主流浏览器,比如360浏览器、搜狗浏览器、QQ浏览器都是双核浏览器,一方面为了兼容IE浏览器,另一方面Webkit内核的非IE浏览器有着更高的性能和用户体验。可以使用以上方法,让双核浏览器优先以Webkit内核渲染,


3、<link rel="dns-prefetch" href="//static.360buyimg.com">
DNS预获取,可以提升网站性能

详解:

DNS Prefetching 是让具有此属性的域名不需要用户点击链接就在后台解析。

B站的<head>部分剖析

技术图片

1、<meta name="description" content="bilibili是国内知名的视频弹幕网站,这里有最及时的动漫新番,最棒的ACG氛围,最有创意的Up主。大家可以在这里找到许多欢乐。">
<meta name="keywords" content="B站,弹幕,字幕,AMV,MAD,MTV,ANIME,动漫,动漫音乐,游戏,游戏解说,ACG,galgame,动画,番组,新番,初音,洛天依,vocaloid">

详解:name是描述网页的,对应content(网页内容),以便于搜索引擎机器人查找分类。

  • 1、keywords关键词,是为搜索引擎提供的关键字列表,各关键词之间是用英文‘,‘隔开,能够提高搜索质量。
  • 2、desciption简介,用来告诉搜索引擎你的网站的主要内容。

2、<link rel="search" type="application/opensearchdescription+xml" href="//static.hdslb.com/opensearch.xml" title="哔哩哔哩">
把搜索功能放到浏览器的快捷工具上,如下图左下角
技术图片

3、<link rel="preload" href="//s1.hdslb.com/bfs/static/jinkela/subchannel/manifest.a339fd28.js" as="script">
通过rel="preload"进行内容预加载, preload属性可以指明哪些资源是在页面加载完之后即刻需要的

对于这种即刻需要的资源,你可能希望在页面加载的生命周期的早期阶段就开始获取,在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的被加载并可用,更不易阻塞页面的初步渲染,进而提升性能。

参考链接:
http://blog.csdn.net/maoxunxi...
https://www.cnblogs.com/lhm16...

<head>标签中的奥秘

标签:google   wrap   end   索引   点击   列表   href   follow   sub   

原文地址:https://www.cnblogs.com/homehtml/p/12189873.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!