前端进阶笔记之核心基础知识---那些HTML标签你熟悉吗？

tandaxia

发布于 2020-06-30 10:36:43

6860

发布于 2020-06-30 10:36:43

文章被收录于专栏：谈补锅谈补锅

提到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"。