《你不知道的HTML标签》- 部门分享~

《你不知道的HTML标签》

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

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

那么这些被称为“看不见的”HTML标签但却很重的标签,包含哪些呢?

一、 交互实现

下面介绍几个标签,来看看如何帮助我们更简单地实现一些页面交互效果。

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

假设要实现一个类似 PPT 自动播放的效果,你很可能会想到使用 JavaScript 定时器控制页面跳转来实现。但其实有更加简洁的实现方法,比如通过 meta 标签来实现:

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

上面的代码会在 5s 之后自动跳转到同域下的 page2.html 页面。我们要实现 PPT 自动播放的功能,只需要在每个页面的 meta 标签内设置好下一个页面的地址即可。

现在大多数单页面应用这种用法也使用的比较少了。

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

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

细心的你可能会好奇,既然这样做又方便又快捷,为什么这种用法比较少见呢?

一方面可能是我们对meta标签用法缺乏深入了解,另一方面也是因为在使用它的时候,刷新和跳转操作是不可取消的,所以对刷新时间间隔或者需要手动取消的,还是推荐使用 JavaScript 定时器来实现。

但是,如果你只是想实现页面的定时刷新或跳转(比如某些页面缺乏访问权限,在 x 秒后跳回首页这样的场景)建议你可以实践下 meta 标签的用法。

1.2 title 标签与 Hack 手段:消息提醒

作为前端工程师的你对 B/S 架构肯定不陌生,它有很多的优点,比如版本更新方便、跨平台、跨终端,但在处理某些场景,比如即时通信场景时,就会变得比较麻烦。

因为前后端通信深度依赖 HTTP 协议,而 HTTP 协议采用“请求-响应”模式,这就决定了服务端也只能被动地发送数据。一种低效的解决方案是客户端通过轮询机制获取最新消息(HTML5 下可使用 WebSocket 协议)。

消息提醒功能实现则比较困难,HTML5 标准发布之前,浏览器没有开放图标闪烁、弹出系统消息之类的接口,只能借助一些 Hack 的手段,比如修改 title 标签来达到类似的效果(HTML5 下可使用 Web Notifications API 弹出系统消息)。

下面这段代码中,通过定时修改 title 标签内容,模拟了类似消息提醒的闪烁效果:

// title demo2 模拟消息提醒
    function titleInfoDemo2(){
     let msgNum = 2; //消息条数
     let cnt = 0; //计数器

     const inerval = setInterval(() => {
         cnt = (cnt +1) %2;
         if(msgNum === 0){
             //通过DOM修改title
             document.title += '聊天页面';
             clearInterval(inerval);
             return
         }
         const prefix = cnt% 2 ? `新消息(${msgNum})`:'';
         const imageUrl =  cnt% 2 ? `./static/image/info.jpg`:`./static/image/head.jpg`;

         document.getElementById("icon").href = imageUrl;
         document.title = `${prefix}聊天页面`
     },1000)
 }
titleInfoDemo2();

通过模拟消息闪烁,可以让用户在浏览其他页面的时候,及时得知服务端返回的消息。

定时修改 title 标签内容,除了用来实现闪烁效果之外,还可以制作其他动画效果,比如文字滚动,但需要注意浏览器会对 title 标签文本进行去空格操作。

文字滚动效果 遇到的问题就是,当title标签中文字过长时,如何实现文字的滚动效果?

function titleInfoDemo3(){
  //动态的设置title标签中的内容
  let str = '今天天气真真好,处处好风光,浪里个浪~'
  document.title = str;
  setInterval(()=>{
      let start = str.substring(0,1);
      let end = str.substring(1);
      //更新str,更新title中的text
      str = end + start;
      document.title = str;
  },400)
}
titleInfoDemo3();

动态修改 title 标签的用途不仅在于消息提醒,你还可以将一些关键信息显示到标签上(比如下载时的进度、当前操作步骤),从而提升用户体验。

下载时候的进度

enter code here

页面失活时候funny demo 当页面失活时候的有趣的小玩法: 利用js监听 visibilitychange事件

// title demo1 页面失活小玩法
function titleInfo() {
   const OriginTitle = document.title;
   // 监听页面可见性改变事件
   document.addEventListener('visibilitychange', ()=> {
       if (document.hidden) {
           document.title = '哎呀,浏览器崩溃啦!';
           document.getElementById("icon").href = "./static/image//o.ico";
       } else {
           document.title = '又好了嘻嘻:)';
           document.getElementById("icon").href = "./static/image/f.ico";
           setTimeout(function() {
               document.title = "Hecate.info";
           }, 3000);
           setTimeout(function() {
               document.getElementById("icon").href = "./static/image/icon.jpg";
           }, 3000);
       }
   });
}
titleInfo();

二、性能优化

性能优化是前端开发中避不开的问题,性能问题无外乎两方面原因:渲染速度慢、请求时间长。性能优化虽然涉及很多复杂的原因和解决方案,但其实只要通过合理地使用标签,就可以在一定程度上提升渲染速度以及减少请求时间。

2.1 script 标签:调整加载顺序提升渲染速度

由于浏览器的底层运行机制,渲染引擎在解析 HTML 时,若遇到 script 标签引用文件,则会暂停解析过程,同时通知网络线程加载文件,文件加载后会切换至 JavaScript 引擎来执行对应代码,代码执行完成之后切换至渲染引擎继续渲染页面。

在这一过程中可以看到,页面渲染过程中包含了请求文件以及执行文件的时间,但页面的首次渲染可能并不依赖这些文件,这些请求和执行文件的动作反而延长了用户看到页面的时间,从而降低了用户体验。

为了减少这些时间损耗,可以借助 script 标签的 3 个属性来实现。

  • async属性 立即请求文件,但不阻塞渲染引擎,而是文件加载完毕后阻塞渲染引擎并立即执行文件内容。
  • defer属性立即请求文件,但不阻塞渲染引擎,等到解析完HTML之后再执行文件内容。
  • HTML5 标准 type属性 对应值为:“module”。让浏览器按照ECMA Script 6 标准文件当做模块进行解析,默认阻塞效果同defer,也可以配合async在请求完成后立即执行。

Alt text

绿色:表示执行解析HTML,蓝色:表示请求文件,红色:表示执行文件。

从图中可以知道,采用3种属性都能减少请求文件引起的阻塞时间,只有defer属性及 type="module" 情况下能保证渲染引擎的优先执行,从而减少执行文件内容消耗的时间,让用户更快地看见页面(即使这些页面内容可能并没有完全显示)。

除此之外还应该注意,当渲染引擎解析HTML遇到script标签引入文件时,会立即执行一次渲染。所以这也就是为什么构建工具会把编译好的引用JavaScript代码的script标签放入到body标签底部。

因为当渲染引擎执行到 body 底部时会先将已解析的内容渲染出来,然后再去请求相应的 JavaScript 文件。如果是内联脚本(即不通过 src 属性引用外部脚本文件直接在 HTML 编写 JavaScript 代码的形式),渲染引擎则不会渲染。

defer和as

2.2 link标签:通过预处理提升渲染速度

在我们对大型单页应用进行性能优化时,也许会用到按需懒加载的方式,来加载对应的模块,但如果能合理利用 link 标签的 rel 属性值来进行预加载,就能进一步提升渲染速度。

  • dns-prefetch 当 link 标签的 rel 属性值为“dns-prefetch”时,浏览器会对某个域名预先进行 DNS 解析并缓存。这样,当浏览器在请求同域名资源的时候,能省去从域名查询 IP 的过程,从而减少时间损耗。下图是淘宝网设置的 DNS 预解析。 Alt text
  • preconnect 让浏览器在一个 HTTP 请求正式发给服务器前预先执行一些操作,这包括 DNS 解析、TLS 协商、TCP 握手,通过消除往返延迟来为用户节省时间。
  • prefetch/preload 两个值都是让浏览器预先下载并缓存某个资源,但不同的是,prefetch 可能会在浏览器忙时被忽略,而 preload 则是一定会被预先下载。
  • prerender 浏览器不仅会加载资源,还会解析执行页面,进行预渲染。

这几个属性值恰好反映了浏览器获取资源文件的过程,下面的流程简图,可以更方便记忆

Alt text

【图:浏览器获取资源文件的流程】

PS:关于<link>预加载功能详细可参考:https://shimo.im/docs/MD4Pl3F0eS0YIigM/read

PS:文章推荐:浏览器渲染<link>标签和<script>标签对页面的影响:https://juejin.im/post/5d283da66fb9a07ed2249a7f

三、搜索优化

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

meta标签:提取关键信息

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

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

Alt text

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

Alt text

再例如当我们搜索关键字“专业的一站式旅游预订平台”的时候搜索结果会显示我们同程以及携程的信息。这时候因为网站meta标签使用中包含 keywords和description内都有包含其中的一站式,旅游预定平台等相关字眼。

有时候搜索关键词,出来的网页中并不包含可见的这个关键词,但是却能搜索到该网站的原因是,因为在meta标签 的keywords中包含了该搜索的关键词。

在实际工作中,推荐使用一些关键字工具来挑选,比如 Google Trends站长工具

下图我们使用站长工具搜索 “旅行”关键字得到的结果,可以看到得到了相关关键字的一些信息。比如全网搜索指数、关键词特点。

Alt text

link 标签:减少重复

有时候为了用户访问方便或者出于历史原因,对于同一个页面会有多个网址,又或者存在某些重定向页面,比如:

https://xx.com/a.html https://xx.com/detail?id=”abcd”

那么在这些页面中可以这样设置:

<link href="https://xx.com/a.html" rel="canonical">

这样可以让搜索引擎避免花费时间抓取重复网页。不过需要注意的是,它还有一个限制条件,那就是指向的网站不允许跨域。

当然,要合并网址还有其他的方式,比如使用站点地图,或者再HTTP请求响应头部添加rel=”canonical”。这里,我们就不展开介绍了,道理是相同的,link的很多属性我们平时可以多去探索和实践。

四、延伸内容:OGP(开放图标协议)

Alt text

前面说了HTML5标准的一些标签和属性,在延伸说一下基于meta标签扩展属性值实现的第三方协议— OGP(Open Graph Protocal,开放图标协议)。

OGP是Facebook公司在2010年提出的,目的是通过增加文档信息来提升社交网页在被分享时的预览效果。你只需要在一些分享页面中添加一些meta标签及属性,支持OGP协议的社交网站就会在解析页面时生成丰富的预览信息,比如站点名称,网页作者、预览图片。具体预览效果会因为各个网站而有所变化。

简介 OGP(The Open Graph protocol)协议是一种新的HTTP头部标记,即Open Graph Protocol,即这种协议可以让网页成为一个“富媒体对象”。由于现在社交类网站大行其道,在HTML头部添加引用此类协议标注有助于被社交网站识别。

OG协议META标签

  • og:title 标题
  • og:type 类型
  • og:image 略缩图地址
  • og:url 页面地址
  • og:description 页面的简单描述
  • og:site_name 页面所在网站名
  • og:videosrc 视频或者Flash地址
  • og:audiosrc 音频地址

Alt text

Alt text

现在百度已经宣布支持,微信文章的不少页面上也添加了相关标签属性,有兴趣的话你可以查看官方网站:https://ogp.me/相关文章

五、总结

以上从,交互实现、性能优化、搜索优化场景出发,分别介绍了 meta标签、title标签、link标签,以及script标签在这些场景中的重要作用,希望通过本次的分享大家能有效的应用到工作场景中,不再仅仅是了解,而是能够熟练运用~。

思考:还以哪些是“看不见”的标签及其用法?

  • 比如有一些 为特殊人群而设置的,如img标签的alt属性,input标签的aira-label属性等。
    • img标签的alt属性,用来显示网络显示不出来图片等时显示alt中的内容,也了让盲人读到,讲话人模式下可以读到。
    • input标签的aria-label属性用于焦点落到该输入框时读屏软件读取这是aria-label属性的内容,用于盲人。for属性也是用于盲人,当没有label的时候可以使用。
    • 一些HTML5的语义化标签,如<nav><main ><article>section等等

发表评论

电子邮件地址不会被公开。 必填项已用*标注