盘点那些看不见的“HTMl”标签

vlambda
2020-08-08

盘点那些看不见的“HTMl”标签

作者:TDX

出处:http://www.cnblogs.com/tandaxia

提及到HTML标签，作为前端工程师会非常的熟悉，因为在开发页面的过程中我们会经常使用，但是往往关注的更多的是页面渲染的效果和交互效果，也就是对用户可见可操作的部分，比如表单，菜单栏，列表，图文等。

其实还又一些非常重要却容易被忽视的标签，这些标签大多数用在页面head标签内，虽然对用户不可见，但如果在某些场景下，比如交互实现、性能优化、搜索优化、合理利用他们就可以达到事倍功半的效果。

交互实现

在实现一个功能的时候，我们编写的代码越多，不仅开发成本越高，而且代码的健壮性也越差，我们要提倡编码简约 Less code,Less bug。

下面介绍几个标签，来看看如何帮助我么更简单的是实现一些页面交互效果

meta 标签:自动刷新/跳转

假设要实现一个类似PPT自动播放的效果，你很可能会想到使用JavaScript定时器控制页面跳转来实现，但其实有更加简洁的实现方式，比如通过 meta 标签来实现:
```
<meta http-equiv="Refresh" content="5;URL=page2.html">
```

另外一种场景，比如每隔一分钟就需要刷新页面的大屏幕监控，也可以通过 meta 标签来实现，只需要去掉后面的 URL 就可以了

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

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Refresh" content="3">
    <title>Document</title>
    <style>
 .bg{
 width:200px;
 height:300px;
 background: cornflowerblue;
 }
 </style>
</head>
<body >
    <div class="bg">
        111
    </div>
    <script>
 console.log(22);
 setTimeout(function(){
 console.log("刷新了");
 },2900)
 </script>
</body>
</html>

既然这么做又方便又快捷，为什么这种用法比较少见呢？

一方面是因为对meta标签的不熟悉，另一方面是这么使用它刷新或者跳转是不可取消的，所以对刷新或者需要手动取消的还是推荐使用Javascript的定时器来实现，但是，如果只是实现页面的定时刷新和跳转(比如某些页面缺乏访问权限，再 x 秒后返回首页这样的需求时)，就可以实践一下meta标签的用法

性能优化

性能优化是前端开发中避不开的问题，性能优化主要有两方面：渲染速度慢，请求时间长。虽然哦我们性能优化是一个很大的话题，涉及的内容也很多，但是合理利用标签就可以在一定程度上提升渲染速度和减少请求时间

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”标签

所以这也就是为什么构建工具会把编译好的引用 JavaScript 代码的 script 标签放入到 body 标签底部。因为当渲染引擎执行到 body 底部时，会先将已解析的内容渲染出来，然后再去请求相应的 JavaScript 文件。

如果是内联脚本（即不通过 src 属性引用外部脚本文件直接在 HTML 中编写 JavaScript 代码的形式），渲染引擎则不会渲染，先执行脚本代码再渲染页面

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, 预渲染页面。然后判断预渲染是否成功。没有预渲染成功则进行渲染，预渲染成功则呈现给用户看。