<head>标签中的奥秘

Thanatos 发布于2019-08-02 15:58 / 1763人阅读

摘要：作为一名前端开发，我竟一直不知道标签中的秘密。告诉浏览器使用最新的引擎渲染网页，而则告诉浏览器激活谷歌浏览器内嵌框架，是推出的一款免费的专用插件。这一机制使得资源可以更早的被加载并可用，更不易阻塞页面的初步渲染，进而提升性能。

作为一名前端开发，我竟一直不知道标签中的秘密。

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

举几个例子：

京东金融的部分剖析

1、
IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame。

详解：

http-equiv相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

X-UA-Compatible是IE8以上版本的一个专有属性，IE8以下的浏览器是不识别的,它告诉浏览器（IE8+）采用何种版本渲染网页。

IE=Edge告诉浏览器使用最新的引擎渲染网页，而chrome=1则告诉浏览器激活Chrome
Frame（谷歌浏览器内嵌框架”，是Google推出的一款免费的IE专用插件。用户可以通过IE的用户界
面，以Chrome内核的渲染方式浏览网页。）

2、
在双核浏览器中，让Webkit内核优先渲染。

详解：

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

3、
DNS预获取，可以提升网站性能

详解：

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

B站的部分剖析

1、

详解：name是描述网页的，对应content（网页内容），以便于搜索引擎机器人查找分类。

1、keywords关键词，是为搜索引擎提供的关键字列表，各关键词之间是用英文","隔开，能够提高搜索质量。

2、desciption简介，用来告诉搜索引擎你的网站的主要内容。

2、
把搜索功能放到浏览器的快捷工具上,如下图左下角

3、
通过rel="preload"进行内容预加载， preload属性可以指明哪些资源是在页面加载完之后即刻需要的

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

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

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

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

html之css选择器学习

相关内容：什么是css选择器标签选择器类选择器id选择器并集选择器（分组选择器）交集选择器后代选择器子标签选择器属性选择器相邻兄弟选择器伪类选择器伪元素选择器（伪对象选择器）首发时间：2018-03-02 修改：2018-04-30：修改了排版，增加了伪类选择器，伪元素选择器，在原本简略的介绍的基础上增加了描述并修改了某些术语描述。2018-05-05：修改了部分伪类选择器的注解，由于之前发生了小...

番茄西红柿 2019-04-23 13:46 评论0 收藏0
前端技术之_CSS详解第一天

摘要：前端技术之详解第一天一部分略。。。。中国主要城市北京上海广州美国主要城市纽约洛杉矶华盛顿西雅图在浏览器中，默认是不会增加任何的效果改变的，但是语义变了，中的所有元素是一个小区域。前端技术之_CSS详解第一天一html部分略。。。。二、列表列表有3种2.1 无序列表无序列表，用来表示一个列表的语义，并且每个项目和每个项目之间，是不分先后的。ul就是英语unordered list，无序列表的意...

番茄西红柿 2019-04-23 13:46 评论0 收藏0
前端基础-CSS的属性相关设置

摘要：值描述左边对齐默认值右对齐居中对齐两端对齐文本装饰为重点值描述默认。继承父元素的属性的值。具体的像素一定要加单位例如，等等第一个值是水平位置，第二个值是垂直位置。单位是像素或任何其他的单位。一字体属性二文本属性三背景属性四盒子模型五盒子模型各部分详解一、字体属性1、font-weight：文字粗细（表格中*为重点）取值描述normal默认值，标准粗细bord粗体 *border...

番茄西红柿 2019-04-23 13:41 评论0 收藏0
01-html介绍和head标签

摘要：三开发工具的使用使用技巧编辑器四介绍的概述全称，翻译为超文本标记语言，它不是一种编程语言，是一种描述性的标记语言，用于描述超文本内容的显示方式。【转】01-html介绍和head标签主要内容web标准浏览器介绍开发工具介绍HTML介绍HTML颜色介绍HTML规范HTML结构详解一、web标准web准备介绍：w3c：万维网联盟组织，用来制定web标准的机构（组织）web标准：制作网页遵循的规范...

番茄西红柿 2019-04-23 11:51 评论0 收藏0
web前端（10）—— 浮动，清除默认样式

如果在一行内写文字，文字过多，那么浏览器会自动换行去显示我们的文字文档流还有其他现象底部对齐，高矮不管文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐例：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>t...

番茄西红柿 2019-04-23 13:11 评论0 收藏0