• 你真的精通HTML吗？——那些“看不见”的HTML标签及其使用场景

    提到HTML，前端工程师的第一反应肯定是这么简单的语言，有什么不会的？如果你还抱有上述看法，建议你接着看下去。

    meta标签：自动刷新/跳转

    你应该不止到meta标签还可以控制页面自动跳转吧？在同一目录下新建两个文件index.html和page2.html

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="refresh" content="5; URL=page2.html">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <h1>Indexh1>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <h1>page 2h1>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    通过这短短一行代码

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

    • 1

    就可以实现五秒后自动跳转至page2.html。

    另一种场景，每隔六十秒自动刷新页面，也可以通过一行代码实现

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

    • 1

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

    相信你也曾经有过这种好奇，切至其它页面后，之前打开的页面还可以通过标签页显示新的消息通知或者闪烁。接下来我就告诉你该如何实现这些效果。

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <script>
        let msgNum = 1
        let cnt = 0
        const interval = setInterval(() => {
            cnt = (cnt+1) % 2
            if (msgNum === 0) {
                document.title += '聊天页面'
                clearInterval(interval)
                return
            }
            const prefix = cnt % 2 ? `新消息(${msgNum})` : ''
            document.title = `${prefix}聊天页面`
        }, 1000)
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

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


    性能优化

    性能问题无外乎两方面原因：渲染速度慢、请求时间长。通过合理使用标签，就可以在一定程度上提升渲染速度以及减少请求时间。

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

    由于浏览器的架构设计，当渲染页面时，如果遇到js文件则会暂停当前页面渲染（因为js可以操作DOM来改变页面结构），但页面的首次渲染可能并不需要这些文件，所以此时js的异步加载就显得尤为重要。有一位大佬曾经说过，100ms的延迟就会让人眼感到明显的卡顿。

    为了减少首次渲染时间，加载js文件可以借助这三个属性来实现。

    • async属性。 立即请求文件，但不阻塞渲染引擎，而是文件加载完毕后阻塞渲染引擎并立即执行文件内容。
      <script src="./main.js" async>script>

      • 1
    • defer属性。立即请求文件，但不阻塞渲染引擎，等到解析完 HTML 之后再执行文件内容。
      <script src="./main.js" defer>script>

      • 1
    • module属性。让浏览器按照 ECMA Script 6 标准将文件当作模块进行解析。
      <script src="./main.js" type="module">script>

      • 1

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

    • **dns-prefetch。**浏览器会对该域名预先进行 DNS 解析并缓存。
    • **preconnect。**提前进行TCP连接。
    • **prefetch/preload。**提前下载并缓存某个资源。不同的是，prefetch 可能会在浏览器忙时被忽略，而 preload 则是一定会被预先下载。
    • **prerender。**浏览器不仅会加载资源，还会解析执行页面，进行预渲染。

    搜索优化

    meta 标签：提取关键信息

    这里以CSDN官网为例。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fJb398Hi-1659008971763)(attachment:09520b6c97305e702a156178b4390fb7)]

    link 标签：减少重复

    有时候为了用户访问方便或者出于历史原因，对于同一个页面会有多个网址，又或者存在某些重定向页面。那么可以在这些页面中这样设置

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

    • 1
  • 相关阅读:
    gofly框架接口入参验证使用介绍
    [maven] 实现&使用 plugin 及 properties 简述
    react immutable
    不锈钢企业如何获客？
    #MySQL#运行结果#代码
    全球电梯空气消毒机行业调研及趋势分析报告
    统计学习第一章
    第八章---IO及对象序列化
    仅30行代码，实现一个搜索引擎(1.0版)
    python责任链模式
  • 原文地址：https://blog.csdn.net/weixin_49172439/article/details/126042548