HTML拾遗

September 01, 2021

使用 meta 标签实现自动刷新/跳转
使用 meta 标签进行 SEO
使用 title 标签实现通知提醒功能
通过 script 标签优化 JS 文件的请求/执行时机
通过 link 标签进行预加载来加快渲染
开放图表协议(OGP)

使用 meta 标签实现自动刷新/跳转

当 meta 标签的 http-equiv 属性值为 Refresh 时, 可通过 content 属性实现自动刷新和跳转功能:

content 属性为一个正整数 n 时, 表示 n 秒后刷新页面;
content 属性为一个正整数 n 加 ;url= 且后跟一个合法的 URL 时, 表示 n 秒后跳转到指定 URL.

<meta http-equiv="Refresh" content="3" />
<meta http-equiv="Refresh" content="5;url=Page2.html" />
<meta http-equiv="Refresh" content="5;url=http://xxx.com" />

应用场景:

无法取消的页面跳转, 如当前页面无权限、表单提交完毕跳转到指定页面等;
类似 PPT 的自动播放效果, 将 URL 指向下一个页面即可.

使用 meta 标签进行 SEO

将 meta 元素的 name 属性值设为 keywords 时, 可在 content 属性中添加逗号分隔的关键词列表: <meta name="keywords" content="keyword1,keyword2,keyword3" >

具体关键词可通过 GoogleTrends 或站长工具查询相关关键词的搜索量、搜索特点和竞争度等信息, 以达到更好的 SEO 效果.

要注意的是, 搜索引擎对于关键词有着自己的权重算法, 对于滥用关键词、堆砌重复关键词的网页可能会进行降低权重的惩罚.

使用 title 标签实现通知提醒功能

注: HTML5 可通过 Notifications API 实现系统级消息提醒.

在 HTML5 之前, 可通过修改 title 标签内容来实现信息展示、消息提醒等功能:

通过更新 title 内容来显示下载进度、当前状态、文字滚动等信息;
通过设置定时器周期性地添加删除删除“新消息(1)”这样的文字, 达到消息提醒闪烁的效果:

通过 script 标签优化 JS 文件的请求/执行时机

默认情况下, 浏览器渲染引擎在解析 HTML 时, 若遇到 script 标签引入脚本文件, 会立即进行一次渲染, 并暂停解析 HTML, 通知网络线程加载脚本文件, 并在加载完毕后执行脚本, 执行完毕后切换回渲染引擎继续渲染页面.

通过 script 标签的 defer 、 async 和 type 属性可以控制这一过程:

defer 属性表示不阻塞渲染引擎, 异步请求脚本文件, 并在解析完 HTML 后再执行脚本;
async 属性表示先不阻塞渲染引擎, 异步请求脚本文件, 当文件加载完毕后阻塞渲染引擎执行脚本, 在执行完毕后继续解析 HTML;
type 属性设为 module 后, 浏览器按照 ES6 标准将文件作为模块解析, 阻塞效果同 defer 属性.
- 添加 async 属性可以使模块加载完毕后立即执行.

执行效果如下: 解析 HTML → 遇到 script 标签 →

<script> : 暂停解析 HTML → 请求文件 → 执行脚本 → 继续解析 HTML
<script defer> : 继续解析 HTML 并异步请求文件 → HTML 解析完毕 → 执行脚本
<script async> : 继续解析 HTML 并异步请求文件 → 文件加载完毕暂停解析 HTML → 执行脚本 → 继续解析 HTML
<script type="module"> : 默认同 <script defer>, 添加 async 属性后同 <script async>

综上, 添加 defer 属性以及 type="module" 能保证渲染引擎优先执行, 让用户更快地看见(可能不完整的)页面.

同时由于遇到 script 标签引入脚本文件时会立即触发一次渲染, 将 script 元素放在 body 标签底部, 可以在请求脚本文件之前尽可能多的 HTML 渲染出来.

通过 link 标签进行预加载来加快渲染

通过设置 link 标签的 rel 属性值, 可以使浏览器触发预处理来提升网页速度:

dns-prefetch : 浏览器会对 href 中的 URL 预先进行 DNS 解析并缓存, 从而在真正需要请求资源时省去 DNS 解析过程, 提升网络请求速度: <link rel="dis-prefetch" href="https://fonts.googleapis.com/" >
preconnect : 浏览器预先进行 DNS 解析、TLS 协商、TCP 握手: <link rel="preconnect" href="http://example.com" >
prefetch/preload : 浏览器预先下载并缓存资源, 区别是 prefetch 可能会在浏览器忙时忽略, 而 preload 一定会被预先下载:
```
<link rel="preload" href="style.css" as="style" />
<link rel="preload" href="main.js" as="script" />
```
prerender : 浏览器预先加载资源, 并解析执行页面, 进行预渲染: <link rel="prerender" href="Page.html" >

开放图表协议(OGP)

由 Facebook 公司提出, 通过在分享页面中添加一些 meta 标签和属性, 支持 OGP 协议的社交网站就会在解析页面时生成丰富的预览信息, 如预览图片、站点名称、内容作者等, 具体效果因网站而异.

目前微信、百度等国内企业对于 OGP 都有着不同程度的支持.

<html prefix="og: https://ogp.me/ns#">
  <head>
    <title>The Rock (1996)</title>
    <meta property="og:title" content="The Rock" />
    <meta property="og:type" content="video.movie" />
    <meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
    <meta
      property="og:image"
      content="https://ia.media-imdb.com/images/rock.jpg"
    />
    ...
  </head>
  ...
</html>

详情参考 ogp.me.