前端进阶笔记之核心基础知识---那些HTML标签你熟悉吗？
提到HTML标签，我们会非常熟悉，开发中经常使用。但我们往往关注更多的是页面渲染效果及交互逻辑，也就是对用户可见可操作的部分，比如表单、菜单栏、列表、图文等。其实还有一些非常重要却容易忽视的标签，这些标签大多数用在页面头部head标签内，虽然对用户不可见，但如果在某些场景下，比如交互实现、性能优化、搜索优化，合理利用它们可以让我们在开发中达到事半功倍的效果。
1、交互实现
在实现一个功能的时候，我们编写的代码越多，不仅开发成本越高，而且代码的健壮性也越差。因此我们在开发中提倡编码简约原则：Less code, less bug
1.1 meta标签：自动刷新/跳转
meta标签妙用场景一：假如每隔一分钟就需要刷新页面，这个时候就可以用到meta标签：
<meta http-equiv="Refresh" content="60">
meta标签妙用场景二：假如想让某个页面在对用户展示一段时间后，然后跳转到其他页面去，也可用到meta标签：
<meta http-equiv="Refresh" content="5; URL=page2.html">
上面这行代码的意思是当前页面展示5s之后，跳转到page2.html页面去。
1.2 title标签：消息提醒
B/S架构有很多优点，比如版本更新方便、跨平台、跨终端，但在处理某些场景时，比如即时通信时，会变得有点麻烦。
因为前后端通信深度依赖HTTP协议，而HTTP协议采用“请求-响应”模式，这就决定了服务端也只能被动地发送数据。一种低效的解决方案是客户端通过轮询机制获取最新消息（HTML5下可使用WebSocket协议）。
另外在HTML5标准发布之前，浏览器没有开放图标闪烁、弹出系统消息之类的接口，因此消息提醒功能实现比较困难。但是我们可以通过修改title标签来达到类似的效果（HTML5下可使用Web Notifications API弹出系统消息）。
下面这段代码，通过定时修改title标签内容，模拟了类似消息提醒的闪烁效果：
let msgNum = 1 // 消息条数
let cnt = 0 // 计数器
const inerval = setInterval(() => {
cnt = (cnt + 1) % 2
if(msgNum===0) {
// 通过DOM修改title
document.title += `聊天页面`
clearInterval(interval)
return
}
const prefix = cnt % 2 ? `新消息(${msgNum})` : ''
document.title = `${prefix}聊天页面`
}, 1000)
实现效果如下图所示，可以看到title标签名称上有提示文字在闪烁。
通过模拟消息闪烁，可以让用户在浏览其他页面的时候，及时得知服务端返回的消息。
通过定时修改title标签内容，除了用来实现闪烁效果之外，还可以制作其他动画效果，比如文字滚动，但需要注意浏览器会对title标签文本进行去空格操作；还可以将一些关键信息显示到标签上（比如下载时的进度、当前操作步骤），从而提升用户体验。
2、性能优化
性能优化是前端开发中避不开的问题，性能问题无外乎两方面原因：渲染速度慢、请求时间长。性能优化虽然涉及很多复杂的原因和解决方案，但其实只要通过合理地使用标签，就可以在一定程度上提升渲染速度，以及减少请求时间。
2.1 script标签：调整加载顺序提升渲染速度
由于浏览器的底层运行机制，一般情况下，渲染引擎在解析HTML时从上往下执行，若遇到script标签引用文件，则会暂停解析过程，同时通知网络线程加载引用文件。
文件加载完成后，再切换至JavaScript引擎来执行对应代码，代码执行完成之后，再切换至渲染引擎继续渲染页面。
即默认情况下，加载HTML的过程主要有四个步骤：
- 从上往下解析HTML;
- 碰到script标签引用文件，暂停解析，同时通知网络线程加载引用文件；
- 文件加载完成，切换至JavaScript引擎来执行对应代码；
- 代码执行完成后，再切换至渲染页面，继续渲染HTML。
从这一过程可以看出，页面渲染过程包含了请求文件以及执行文件的时间，但页面的首次渲染可能并不依赖这些文件。这些请求和执行文件的动作反而延长了用户看到页面的时间，从而降低了用户体验。
为了减少这些时间损耗，可以借助script标签的三个属性来实现：
- async属性：立即请求文件，但不阻塞渲染引擎，而是文件加载完成后，再阻塞渲染引擎并立即执行文件内容。
- defer属性：立即请求文件，但不阻塞渲染引擎，等到解析完HTML之后再执行文件内容。
- HTML5标准type属性，对应值为“module”：让浏览器按照ECMA Script6标准将文件当作模块进行解析，默认阻塞效果同defer，也可以配合async在请求完成后立即执行。
通过对比，我们看出，设置defer和type="module"最推荐，都是在HTML渲染完成后才执行script引用的文件代码。
效果图比较见下面：
另外注意，当渲染引擎解析HTML遇到script标签引入文件时，会立即进行一次渲染。
所以这也就是为什么构建工具会把编译好的引用JavaScript代码的script标签放入到body标签底部。因为当渲染引擎执行到body底部时，会先将已解析的内容渲染出来，然后再去请求相应的JavaScript文件。
如果是内联脚本（即不通过src属性引用外部脚本文件直接在HTML中编写JavaScript代码的形式），渲染引擎则不会渲染，先执行脚本代码再渲染页面。
我们可以来做个试验验证下，第一个测试：在HTML页面中间引用外部js文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>引用js脚本</title></head>
<body>
<br/><br/><br/><br/><br/>
<h3>古人学问无遗力，少壮工夫老始成；</h3>
<script type="text/javascript" src="./test.js"></script>
<h3>纸上得来终觉浅，绝知此事要躬行。</h3>
</body>
</html>
引用外部js脚本test.js：alert('男儿何不带吴钩，收取关山五十州');
效果图：
第二个测试：在HTML页面中间内联js脚本
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内联js脚本</title></head>
<body>
<br/><br/><br/><br/><br/>
<h3>古人学问无遗力，少壮工夫老始成；</h3>
<script type="text/javascript">
alert('男儿何不带吴钩，收取关山五十州');
</script>
<h3>纸上得来终觉浅，绝知此事要躬行。</h3>
</body>
</html>
效果图：
2.2 link标签：通过预处理提升渲染速度
在大型单页应用进行性能优化时，也许会用到按需赖加载的方式来加载对应的模块。但是如果能合理利用link标签的rel属性值来进行预加载，就能进一步提升渲染速度。
- dns-prefetch：当link标签的rel属性值为“dns-prefetch”时，浏览器会对某个域名预先进行dsn解析并缓存。这样，当浏览器在请求同域名资源的时候，能省去从域名查询IP的过程，从而减少时间损耗。下图是淘宝网设置的dns预解析。
- preconnect：让浏览器在一个HTTP请求正式发给服务器前预先执行一些操作，这包括dns解析、TLS协商、TCP握手，通过消除往返延迟来为用户节省时间。
- prefetch/preload：两个值都是让浏览器预先下载并缓存某个资源，但不同的是，prefetch可能会在浏览器忙时被忽略，而preload则是一定会被预先下载。
- prerender：浏览器不仅会加载资源，还会解析执行页面，进行预渲染。
这几个属性值恰好反映了浏览器获取文件的过程，它们获取文件的流程：
- 设置dns-prefetch, 然后判断是否有对dns进行预解析。没有则进行dns解析，有则执行下一步preconnect；
- 执行preconnect, 对ddns、TLS、TCP进行预连接，然后判断是否已经TCP连接。没有则进行TCP连接，有则执行下一步prefetch/preload；
- 执行prefetch/preload，加载资源文件。然后判断资源文件是否已经预加载。没有则进行http进行资源请求下载，有则进行下一步prerender；
- 执行prerender, 预渲染页面。然后判断预渲染是否成功。没有预渲染成功则进行渲染，预渲染成功则呈现给用户看。
流程图如下：
3、搜索优化
我们写的前端代码，除了要让浏览器更好的执行，有时候也要考虑更方便其他程序（如搜索引擎）理解。合理地使用meta标签和link标签，恰好能让搜索引擎更好的理解和收录我们的页面。
3.1 meta标签：提取关键信息
通过meta标签可以设置页面的描述信息，从而让搜索引擎更好的展示搜索结果。
比如在百度中搜索“拉勾”，就会发现网站的描述，这些描述信息就是通过meta标签专门为搜索引擎设置的，目的是方便用户预览搜索到的结果。
为了让搜索引擎更好的识别页面，除了描述信息之外还可以使用关键字，这样即使页面其他地方没有包含搜索内容，也可以被搜索到（当然搜索引擎有自己的权重和算法，如果滥用关键字是会被降权的，比如Google引擎会对堆砌大量相同关键词的网页进行惩罚，降低它被搜索的权重）。
当我们搜索关键字“垂直互联网招聘”的时候搜索结果会显示拉勾网的信息，虽然显示的搜索内容上并没有看到“垂直互联网招聘”字样，实际上因为拉勾网页面中设置了这个关键字。
对应代码如下：
<meta content="拉勾,拉勾网,拉勾招聘,拉钩, 拉钩网 ,互联网招聘,拉勾互联网招聘, 移动互联网招聘, 垂直互联网招聘, 微信招聘, 微博招聘, 拉勾官网, 拉勾百科,跳槽, 高薪职位, 互联网圈子, IT招聘, 职场招聘, 猎头招聘,O2O招聘, LBS招聘, 社交招聘, 校园招聘, 校招,社会招聘,社招" name="keywords">
3.2 link标签：减少重复
有时候为了用户访问方便或者出于历史原因，对于同一个页面会有多个网址，又或者在某些重定向页面，比如：https://xx.com/a.html、 https://xx.com/detail?id=abcd，那么在这些页面中可以设置：<link href="https://xx.com/a.html" rel="canonical">这样可以让搜索引擎避免花费时间抓取重复网页。不过需要注意的是，它还有个限制条件，那就是指向的网站不允许跨域。
当然，要合并网址还有其他的方式，比如使用站点地图，或者在http请求响应头部添加rel="canonical"。
3.3 延伸内容：OGP(开放图表协议)
前面说的是HTML5标准的一些标签和属性，下面再延伸说一说基于meta标签扩展属性值实现的第三方协议---OGP(open graph protocal, 开放图表协议)。
OGP是Facebook公司在2010年提出的，目的是通过增加文档信息来提升社交网页在被分享时的预览效果。你只需要在一些分享页面中添加一些meta标签及属性，支持OGP协议的社交网站就会在解析页面时生成丰富的预览信息，比如站点名称、网页作者、预览图片。具体预览效果会因各个网站而有所变化。
下面是微信文章支持OGP协议的代码，可以看到通过meta标签属性值声明了：标题、网址、预览图片、描述信息、站点名称、网页类型和作者信息。
总结
本篇从交互实现、性能优化、搜索优化场景触发，分别讲解了meta标签、title标签、link标签，一级script标签在这些场景中的重要作用，希望这些内容你都能应用到工作场景中，不再只是了解，而是能够熟练运用。
最后在思考一下：你还知道哪些“看不见”的标签及用法？
