前端学习笔记之看不见的HTML标签

此笔记主要从交互时间、性能优化、搜索优化场景出发，分别记录meta标签、title标签、link标签，以及script标签在这些场景中的重要作用。

交互实现

有些时候，我们为了实现某些效果，需要去写过多的代码，这会导致开发成本变高，代码健壮性差，且越来越难维护，而通过meta和title等一些隐藏标签则也能实现相同的交互效果。

meta标签：自动刷新/跳转

在实现页面自动刷新或跳转功能时，类似PPT自动播放的效果，大家首先想到使用JavaScript定时器控制跳转来实现。但通过meta标签却能以更简洁的方式实现。

1. 自动跳转

<meta http-equiv="Refresh" content="5; URL=page2.html">

上面的代码即能实现5s之后自动跳转到同域下的page2.html。

2. 间隔时间刷新页面

<meta http-equiv="Refresh" content="60">

上面的代码即能实现每个一分钟刷新一次页面。可用于大屏展示。

3. 总结

• 使用meta标签的刷新和跳转操作是不可取消的，需要对刷新时间内间隔或者需要手动取消的，还是推荐使用JavaScrict定时器来实现。
• 想实现页面的定时刷新或跳转（比如某些页面缺乏访问权限，在 x 秒后跳回首页这样的场景）建议你可以实践下 meta 标签的用法。

title 标签与 Hack 手段：消息提醒

通过修改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 标签内容，模拟了类似消息提醒的闪烁效果。
当然以上只是实例，在html5标准发布之后，前后端的通信已经可以使用WebSocket 协议，而浏览器也已经开放了图标闪烁、弹出系统消息之类的接口。
通过修改标签，除了可用于消息提醒，还可将一些关键信息显示到标签上（比如下载时的进度、当前操作步骤），从而提升用户体验。

性能优化

性能问题的两个主要原因：

• 渲染速度满
• 请求时间长

性能优化虽然涉及很多复杂的原因和解决方案，但其实只要通过合理地使用标签，就可以在一定程度上提升渲染速度以及减少请求时间。

script 标签：调整加载顺序提升渲染速度

由于浏览器的底层运行机制，渲染引擎在解析html时，若遇到script标签应用文件，会按如下执行：

1. 暂停解析过程，通知网络线程加载文件；
2. 切换只JavaScript引擎来执行对应代码；
3. 代码执行完成之后切换至渲染引擎继续渲染页面。

借助script标签的3个属性来减少页面加载时间损耗：

• async 属性。立即请求文件，但不阻塞渲染引擎，而是文件加载完毕后阻塞渲染引擎并立即执行文件内容。
• defer属性。立即请求文件，但不阻塞渲染引擎，等到解析完 HTML 之后再执行文件内容。
• HTML5 标准 type属性，对应值为“module”。让浏览器按照 ECMA Script 6 标准将文件当作模块进行解析，默认阻塞效果同defer，也可以配合 async 在请求完成后立即执行。

link 标签：通过预处理提升渲染速度

合理利用 link 标签的 rel 属性值来进行预加载，进一步提升渲染速度。

link标签的rel属性值描述：

• dns-prefetch。当 link 标签的 rel 属性值为“dns-prefetch”时，浏览器会对某个域名预先进行 DNS 解析并缓存。这样，当浏览器在请求同域名资源的时候，能省去从域名查询 IP 的过程，从而减少时间损耗。下图是淘宝网设置的 DNS 预解析。
• preconnect。让浏览器在一个 HTTP 请求正式发给服务器前预先执行一些操作，这包括 DNS 解析、TLS 协商、TCP 握手，通过消除往返延迟来为用户节省时间。
• prefetch/preload。两个值都是让浏览器预先下载并缓存某个资源，但不同的是，prefetch 可能会在浏览器忙时被忽略，而 preload 则是一定会被预先下载。
• prerender。浏览器不仅会加载资源，还会解析执行页面，进行预渲染。
  

搜索优化

合理地使用 meta 标签和 link 标签，搜索引擎更好地理解和收录我们的页面。

meta 标签：提取关键信息

通过 meta 标签可以设置页面的描述信息，从而让搜索引擎更好地展示搜索结果。

<meta content="此处填写一些关键字，用英文逗号隔开" name="keywords">

link 标签：减少重复

对于同一个页面有多个网址或者某些重定向的情况，我们可以进行合并，比如：

https://xx.com/a.html
https://xx.com/detail?id="abcd"

那么在这些页面中可以这样设置：

<link href="https://xx.com/a.html" rel="canonical">

这样可以让搜索引擎避免花费时间抓取重复网页。不过需要注意的是，它还有个限制条件，那就是指向的网站不允许跨域。

笔记内容来自拉勾教育朱德龙讲师讲解的 前端高手进阶 第一讲