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

时间 2020-06-29

标签前端进阶笔记核心基础知识那些 html 标签熟悉栏目 HTML 繁體版

原文原文链接

提到HTML标签，咱们会很是熟悉，开发中常用。但咱们每每关注更多的是页面渲染效果及交互逻辑，也就是对用户可见可操做的部分，好比表单、菜单栏、列表、图文等。其实还有一些很是重要却容易忽视的标签，这些标签大多数用在页面头部head标签内，虽然对用户不可见，但若是在某些场景下，好比交互实现、性能优化、搜索优化，合理利用它们可让咱们在开发中达到事半功倍的效果。

一、交互实现

在实现一个功能的时候，咱们编写的代码越多，不只开发成本越高，并且代码的健壮性也越差。所以咱们在开发中提倡编码简约原则：Less code, less bugjavascript

1.1 meta标签：自动刷新/跳转

meta标签妙用场景一：假如每隔一分钟就须要刷新页面，这个时候就能够用到meta标签：html

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

meta标签妙用场景二：假如想让某个页面在对用户展现一段时间后，而后跳转到其余页面去，也可用到meta标签：前端

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

上面这行代码的意思是当前页面展现5s以后，跳转到page2.html页面去。

java

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

流程图以下：

三、搜索优化

咱们写的前端代码，除了要让浏览器更好的执行，有时候也要考虑更方便其余程序（如搜索引擎）理解。合理地使用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标签在这些场景中的重要做用，但愿这些内容你都能应用到工做场景中，再也不只是了解，而是可以熟练运用。最后在思考一下：你还知道哪些“看不见”的标签及用法？