前端往往不注意的h5标签细节

原创已于 2022-06-09 18:33:29 修改 · 99 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

于 2021-02-18 10:06:30 首次发布

h5 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了HTML中meta标签实现页面自动刷新和跳转的方法，以及利用JavaScript实现消息提示的Hack手段。同时探讨了script标签的async和defer属性对JavaScript加载顺序的影响，以优化前端渲染性能。

前端

一、html标签

<1>meta 标签：自动刷新/跳转;

<meta http-equiv="Refresh" content="5; URL=page2.html">  //5秒之后跳转page2.html页面：


<meta http-equiv="Refresh" content="60">   //60秒之后刷新本页面

<2>title 标签与 Hack 手段：消息提醒

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);

<3>script 标签：调整加载顺序提升渲染速度

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