你真的熟悉HTML标签吗?--“看不见”却有用的标签
HTML标签，前端工程师在开发页面时经常使用。但往往关注更多的是页面渲染效果及交互逻辑，比如表单、菜单栏、列表、图文。还有一些非常重要却容易被忽视的标签，这些标签大多数用在页面头部head标签内，在某些场景下，比如交互实现、性能优化、搜索优化。合理利用它们可以达到事半功倍的效果。
交互实现
提倡一个编码原则：Less code,less bug,提倡编码简约。
meta标签
自动刷新/跳转
在使用它的时候，刷新和跳转操作是不可取消的，对刷新时间间隔或者需要手动取消的，推荐使用JavaScript定时器来实现
如果只是想实现页面的定时刷新或跳转。(比如某些页面缺乏访问权限，在X秒后跳回首页这样的场景)，建议实践下meta标签的用法
PPT自动播放
要实现PPT自动播放的功能，只需要在每个页面的meta标签内设置好下一个页面的地址即可
<!-->五秒后自动跳转到page2.html页面<-->
<meta http-equiv="Refresh" content="5;URL=page2.html">
刷新大屏
比如：每隔一分钟就需要刷新页面的大屏幕监控，也可以通过meta标签来实现，只需去掉后面的URL即可
<meta http-equiv="Refresh" content="60">
title标签与Hack手段
B/S架构的优点：版本更新方便、跨平台、跨终端。但在处理某些场景，比如即时通信场景时，会变得比较麻烦。因为前后端通信深度依赖HTTP协议，而HTTP协议采用“请求-响应”模式。一种低效的解决方案是客户端通过轮询机制获取最新消息 (HTML5下可使用WebSocket协议）
消息提醒
消息提醒功能实现比较困难。HTML5标准发布之前，浏览器没有开放图标闪烁、弹出系统消息之类的接口，只能借助一些Hack的手段，比如修改title标签来达到类似的效果，(HTML5下可使用
Web Notifications API弹出系统消息)
// 通过定时修改title内容 模拟了消息提醒闪烁
let msgNum = 1 //消息条数
let cnt = 0 //计数器
const inerval = setInterval(() => {
cnt = (cnt + 1) % 2
if (msgNum === 0) {
document.title += `聊天页面` //通过DOM修改title
clearlnterval(inerval)
return
}
const prefix = cnt % 2 ? `新消息(${msgNum}` ''
document.title = `${prefix}聊天页面`
}, 1000)
定时修改title标签内容，可以制作其他动画效果，比如文字滚动，但需要注意浏览器会对title标签文本进行去空格操作。动态修改title标签可以将一些关键信息显示到标签上(比如下载时的进度、当前操作步骤)
性能优化
性能问题的两方面原因：渲染速度慢、请求时间长。合理地使用标签，可以在一定程度上提升渲染速度以及减少请求时间
script标签
调整加载顺序提升渲染速度。
浏览器的底层渲染机制中：当渲染引擎在解析HTML时，若遇到script标签引用文件，则会暂停解析过程，同时通知网络线程加载文件，文件加载后会切换至
JavaScript引擎来执行对应代码，代码执行完成之后切换至渲染引擎继续渲染页面。可以看出页面渲染过程中包含了，请求文件以及执行文件的时间。但页面的首次渲染可能并不依赖这些文件，所以请求文件和执行文件的动作反而延长了页面渲染的时间。为了减少这些损耗，可以借助script的属性来实现
asyc属性
立即请求文件，但不阻塞渲染引擎，文件加载完毕后阻塞渲染引擎并立即执行文件内容
defer属性
立即请求文件，但不阻塞渲染引擎，等到解析完HTML之后再执行文件内容
HTML5标准type属性--对应值为“module”
让浏览器按照ECMA Script6标准将文件当作模块进行解析，默认阻塞效果同defer，也可以配合async在请求完成后立即执行
从图中得知：采用三种属性都能减少请求文件引起的阻塞时间，只有defer、type=“module”属性能保证渲染引擎优先执行，从而减少执行文件内容消耗的时间。
当渲染引擎解析HTML遇到script标签引入文件时，会立即进行一次渲染
这也是为什么script放在底部的原因：构建工具会把编译好的引用JavaScript代码的script标签放入到body标签底部 当渲染引擎执行到body底部时会先将已解析的内容渲染出来，然后再去请求相应的JavaScript文件，如果是内联脚本(即不通过src属性引用外部脚本文件直接在HTML编写JavaScript代码的形式)，渲染引擎则不会渲染
link标签
通过预处理提升渲染速度。在对大型单页应用进行性能优化时，会用到按需、懒加载的方式来加载对应的模块。但如果能使用link标签的预加载，就能进一步的提升加载速度。
rel = “dns-prefetch”
当link标签的rel属性值为“dns-prefetch”时，浏览器会对某个域名预先进行DNS解析并缓存。如此当浏览器在请求同域名资源时，能省去从域名查询IP的过程从而减少时间消耗
<!-->淘宝网的DNS解析<-->
<link rel="dns-prefetch" href="//g.alicdn.com">
<link rel="dns-prefetch" href-"L/img.alicdn.com">
<link rels"dns-prefetch" href="_/tce.alicdn.com">
<link rel="dns-prefetch" href="L/gm.mmstat.com">
<link ref="dns-prefetch" href="//tce.taobao.com">
<link "dns-prefetch" href="//log.mmstat.com">
<link rel="dns-prefetch" href="L/tui.taobao.com">
<link rel="dns-prefetch" href="//ald.taobao.com">
<link rel="dns-prefetch" href="L/gw.alicdn.com">
<link rel="dns-prefetch" href="L/atanx.alicdn.com">
<link "dns-prefetch" hrefs"_/dfhs.tanx.com">
<link rel="dns-prefetch" href="L/ecpm.tanx.com">
<link rel="dns-prefetch" href="//res.mmstat.com">
preconnect
让浏览器在一个HTTP请求正式发给服务器前预先执行一些操作 包括DNS解析、TLS协商、TCP握手，通过消除往返延迟来为用户节省时间
prefetch/preload
两个值都是让浏览器预先下载并缓存某个资源，但不同的是，
prefetch可能会在浏览器忙时被忽略，而preload则是一定会被预先下载
prerender
浏览器不仅会加载资源，还会解析执行页面，进行预渲染
<link rel="preconnect" href="L/atanx.alicdn.com">
<link rel-"prefetch" hrefs"_/dfhs.tanx.com">
<link rel="preload" href="L/ecpm.tanx.com">
<link rel="prerender" href="//res.mmstat.com">
搜索优化
meta标签
提取关键信息。
这些描述信息是通过meta标签专门为搜索引擎设置的。目的是方便用户预览搜索到的结果
<meta content="拉勾，拉勾网，拉勾招聘，拉钩，拉钩网，互联网招聘，拉勾互联网招聘，移动互联网招聘，垂直互联网招聘，微信招聘，微博招聘，拉勾官网，拉勾百科，跳槽，高薪职位，互联网圈子，T招聘，职场招聘，猎头招聘，O2O招聘，LBS招聘，社交招聘，校园招聘，校招，社会招聘，社招"name="keywords">
在实际工作中推荐使用一些关键字工具来挑选，比如Google Trends、站长工具
link标
减少重复
对于同一个页面会有多个网址，又或者存在某些重定向页面，比如：`xx.com/a.html、xx.com/detail?id="abcd"
合并网址的方式：比如使用站点地图，或者在HTTP请求响应头部添加rel="canonical"
<link href="https://xx.com/a.html"rel="canonical">
知识支撑
浏览器获取资源过程
OGP(Open Graph Protocal,开放图表协议)
OGP是Facebook公司在2010年提出的，目的是通过增加文档信息来提升社交网页在被分享时的预览效果，只需要在一些分享页面中添加一些meta标签及属性，支持OGP协议的社交网站就会在解析页面时生成丰富的预览信息，比如站点名称、网页作者、预览图片
微信文章支持OPG协议代码
通过mate标签属性值，声明了网址、预览图片、描述信息、站点名称、网页类型、作者等一系列信息
最后一句: 说一说你还知道哪些“看不见”的标签及用法？
学习心得！若有不正，还望斧正。
来源：juejin.cn/post/7246280283556380709
