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

1、交互实现

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

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

meta标签妙用场景一：假如每隔一分钟就需要刷新页面，这个时候就可以用到meta标签：

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

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

  1. <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标签内容，模拟了类似消息提醒的闪烁效果：

  1. let msgNum = 1 // 消息条数
  2. let cnt = 0 // 计数器
  3. const inerval = setInterval(() => {
  4.   cnt = (cnt + 1) % 2
  5.   if(msgNum===0) {
  6.     // 通过DOM修改title
  7.     document.title += `聊天页面`
  8.     clearInterval(interval)
  9.     return
  10.   }
  11.   const prefix = cnt % 2 ? `新消息(${msgNum})` : ''
  12.   document.title = `${prefix}聊天页面`
  13. }, 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文件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head><meta charset="UTF-8"><title>引用js脚本</title></head>
  4.     <body>
  5.         <br/><br/><br/><br/><br/>
  6.         <h3>古人学问无遗力，少壮工夫老始成；</h3>
  7.         <script type="text/javascript" src="./test.js"></script>
  8.         <h3>纸上得来终觉浅，绝知此事要躬行。</h3>
  9.     </body>
  10. </html>

引用外部js脚本test.js：alert('男儿何不带吴钩，收取关山五十州');

效果图：

第二个测试：在HTML页面中间内联js脚本

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head><meta charset="UTF-8"><title>内联js脚本</title></head>
  4.     <body>
  5.         <br/><br/><br/><br/><br/>
  6.         <h3>古人学问无遗力，少壮工夫老始成；</h3>
  7.         <script type="text/javascript">
  8.             alert('男儿何不带吴钩，收取关山五十州');
  9.         </script>
  10.         <h3>纸上得来终觉浅，绝知此事要躬行。</h3>
  11.     </body>
  12. </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：浏览器不仅会加载资源，还会解析执行页面，进行预渲染。

这几个属性值恰好反映了浏览器获取文件的过程，它们获取文件的流程：

  1. 设置dns-prefetch, 然后判断是否有对dns进行预解析。没有则进行dns解析，有则执行下一步preconnect；
  2. 执行preconnect, 对ddns、TLS、TCP进行预连接，然后判断是否已经TCP连接。没有则进行TCP连接，有则执行下一步prefetch/preload；
  3. 执行prefetch/preload，加载资源文件。然后判断资源文件是否已经预加载。没有则进行http进行资源请求下载，有则进行下一步prerender；
  4. 执行prerender, 预渲染页面。然后判断预渲染是否成功。没有预渲染成功则进行渲染，预渲染成功则呈现给用户看。

流程图如下：

3、搜索优化

我们写的前端代码，除了要让浏览器更好的执行，有时候也要考虑更方便其他程序（如搜索引擎）理解。合理地使用meta标签和link标签，恰好能让搜索引擎更好的理解和收录我们的页面。

3.1 meta标签：提取关键信息

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

比如在百度中搜索“拉勾”，就会发现网站的描述，这些描述信息就是通过meta标签专门为搜索引擎设置的，目的是方便用户预览搜索到的结果。

为了让搜索引擎更好的识别页面，除了描述信息之外还可以使用关键字，这样即使页面其他地方没有包含搜索内容，也可以被搜索到（当然搜索引擎有自己的权重和算法，如果滥用关键字是会被降权的，比如Google引擎会对堆砌大量相同关键词的网页进行惩罚，降低它被搜索的权重）。

当我们搜索关键字“垂直互联网招聘”的时候搜索结果会显示拉勾网的信息，虽然显示的搜索内容上并没有看到“垂直互联网招聘”字样，实际上因为拉勾网页面中设置了这个关键字。

对应代码如下：

  1. <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标签在这些场景中的重要作用，希望这些内容你都能应用到工作场景中，不再只是了解，而是能够熟练运用。

最后在思考一下：你还知道哪些“看不见”的标签及用法？

前端进阶笔记之核心基础知识---那些HTML标签你熟悉吗？的更多相关文章

  1. 〖前端开发〗HTML/CSS基础知识学习笔记

    经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...

  2. Spring笔记01（基础知识）

    1.基础知识 01.Spring:轻量级Java EE开源框架,它是由Rod Johnson为了解决企业应用程序开发的复杂性而创建. 02.目标:实现一个全方位的整合框架,实现“一站式”的企业应用开发 ...

  3. [terry笔记]data guard基础知识

    如下介绍了data guard的基础知识,整理自网络: Data Gurad 通过冗余数据来提供数据保护,Data Gurad 通过日志同步机制保证冗余数据和主数据之前的同步,这种同步可以是实时,延时 ...

  4. FreeRTOS学习笔记——FreeRTOS 任务基础知识

    RTOS 系统的核心就是任务管理,FreeRTOS 也不例外,而且大多数学习RTOS 系统的工程师或者学生主要就是为了使用RTOS 的多任务处理功能,初步上手RTOS 系统首先必须掌握的也是任务的创建 ...

  5. iOS 阶段学习第11天笔记（OC基础知识）

    iOS学习(OC语言)知识点整理 一.OC基础知识 1)#import  用于导入头文件,预处理阶段加载引用,只加载一次. 2)OC 依赖于Foundation框架下的头文件Foundation.h, ...

  6. 网站开发进阶(十五)JS基础知识充电站

    JS基础知识充电站 1.javascript alert弹出对话框时确定和取消两个按钮返回值? 用的不是alert对话框,是confirm confirm(str); 参数str:你要说的话或问题: ...

  7. ios开发学习笔记001-C语言基础知识

    先来学习一下C语言基础知识,总结如下: 在xcode下编写代码. 1.编写代码 2.编译:cc –c 文件名.c 编译成功会生成一个 .o的目标文件 3.链接:把目标文件.o和系统自带的库合并在一起, ...

  8. Java 8实战之读书笔记二：基础知识

    好记性不如烂笔头,整理一些个人觉得比较重要的东西. 一.基础知识 第1章 为什么要关心Java 8 Java 8提供了一个新的API(称为"流", Stream),它支持许多处理数 ...

  9. MySQL必知必会笔记——查询的基础知识

    查询基础知识 第七章 数据过滤 组合where子句 MySQL允许给出多个WHERE子句.这些子 句可以两种方式使用:以AND子句的方式或OR子句的方式使用. AND操作符 可使用AND操作符给WHE ...

随机推荐

  1. Attribute (XXX) is obsolete. Its use is discouraged in HTML5 documents.

    这种警告主要是因为这些属性在HTML5中过时了,并不影响代码运行,但是一些强迫症就会非常难受. 解决办法: 将程序的顶部的这句: !DOCTYPE 修改为: !DOCTYPE html PUBLIC ...

  2. Java实现 蓝桥杯 算法提高 数组求和

    试题 算法提高 数组求和 资源限制 时间限制:1.0s 内存限制:256.0MB 问题描述 输入n个数,围成一圈,求连续m(m<n)个数的和最大为多少? 输入格式 输入的第一行包含两个整数n, ...

  3. Java实现 蓝桥杯 历届真题 数字拆分

    正整数可以表示为若干正整数的累加和. 如,对于正整数n=6,可以分划为: 5+1 4+2 4+1+1 3+3 3+2+1 3+1+1+1 2+2+2 2+2+1+1 2+1+1+1+1 1+1+1+1 ...

  4. Java实现 洛谷 P1090 合并果子

    import java.io.BufferedInputStream; import java.util.Arrays; import java.util.Scanner; public class ...

  5. mysql基础之-mysql锁和事务(七)

    0x01 MySQL锁: 执行操作时施加锁的模式 读锁:用户在读的时候施加的锁,为防止别人修改,但是用户可以读,还被称为共享锁 不会对其他用户进行阻塞 理解: ----->(这里的不阻塞,是可以 ...

  6. xmake v2.3.4 发布, 更加完善的工具链支持

    为了让xmake更好得支持交叉编译,这个版本我重构了整个工具链,使得工具链的切换更加的方便快捷,并且现在用户可以很方便地在xmake.lua中扩展自己的工具链. 关于平台的支持上,我们新增了对*BSD ...

  7. Spring AOP学习笔记02：如何开启AOP

    上文简要总结了一些AOP的基本概念,并在此基础上叙述了Spring AOP的基本原理,并且辅以一个简单例子帮助理解.从本文开始,我们要开始深入到源码层面来一探Spring AOP魔法的原理了. 要使用 ...

  8. 关于mysql auto-increment

    创建表语句如下mysql> show create table Tautoincrement\G *************************** 1. row ************* ...

  9. 一个小小的即时显示当前时间的jqurey控件

    效果: <div class="nowTime"> <span></span>年 <span></span>月 < ...

  10. 最全面的SourceTree账号注册教程

    前言: 作为一个国内开发者而言使用Git操作神器SoureTree最大的问题就是账号注册问题,因为注册账号的链接在不翻墙的情况下基本上是打不开的(弄过的童鞋应该都体会过),所以有的时候我们需要借助一些 ...