网站LOGO
白雾茫茫丶
页面加载中
6月25日
网站LOGO 白雾茫茫丶
记录学习、生活和有趣的事
菜单
  • 热评
    用户的头像
    首次访问
    上次留言
    累计留言
    我的等级
    我的角色
    打赏二维码
    打赏博主
    HTML - 资源提示符
    点击复制本页信息
    微信扫一扫
    文章二维码
    文章图片 文章标题
    创建时间
  • 一 言
    确认删除此评论么? 确认
  • 本弹窗介绍内容来自,本网站不对其中内容负责。
    • 复制图片
    • 复制图片地址
    • 百度识图
    按住ctrl可打开默认菜单

    HTML - 资源提示符

    谢明伟 · 原创 ·
    前端开发 · HTML
    共 1020 字 · 约 1 分钟 · 418
    本文最后更新于2024年02月22日,已经过了124天没有更新,若内容或图片失效,请留言反馈

    前言

    由于 js 是单线程,DOM 解析是自上而下的,遇到 linkscript 标签,去暂停主线程去下载资源,然后再继续解析,主线程在等待网络线程下载的这个时间段就会造成浪费,而 HTML资源提示符 就能很好解决这个问题。

    async

    html 代码:
    <script src="./index.js" async></script>

    异步下载 js 资源,不会阻止 DOM 解析,会在下载完成后立即执行 js 脚本。

    defer

    html 代码:
    <script src="./index.js" defer></script>
    1. 异步下载 js 资源,不会阻止 DOM 解析,在 DOM 解析完后才执行 js 脚本,js 文件会在 DOMContentLoaded 事件调用前执行。
    2. 如果有多个设置了 deferscript 标签存在,则会按照顺序执行所有的 script
    3. 如果 asyncdefer 同时存在,async 优先级更高。

    preload

    html 代码:
    <link rel="preload" as="script" href="foo.js">
    <link rel="preload" as="style" href="bar.css">

    预加载,让浏览器提前加载指定资源(加载后并不执行) ,需要执行时再执行,一旦启用后便会告知浏览器应该尽快的加载某个资源,如果提取的资源3s内未在当前使用,在谷歌开发工具将会触发警告消息。

    prefetch

    html 代码:
    <link rel="prefetch" href="demo.html">

    告诉浏览器,这个资源将会在未来的某个时刻用到,浏览器会在空闲时下载它。

    module

    html 代码:
    <script type="module" src="./index.js"></script>

    可以做浏览器兼容,一般高版本的浏览器才会加载 type=module 文件

    声明:本文由 谢明伟(博主)原创,依据 CC-BY-NC-SA 4.0 许可协议 授权,转载请注明出处。

    还没有人喜爱这篇文章呢

    现在已有

    3

    条评论
    我要发表评论
    1. · · 北京-北京
      • 等级:Lv.1
      • 角色:访客
      • 在线:很久之前
      头像
      板凳

      ai自动生成文章简介挺有意思!

      评论
    2. 头像
      · · 辽宁-沈阳
      • 等级:Lv.3
      • 角色:访客
      • 在线:本月
      头像
      沙发

      这个挺实用的,我可以转载吗?

      评论
      1. · · 广东-深圳
        • 角色:博主
        • 在线:本周
        头像

        可以呀

        评论
    博客logo 白雾茫茫丶 记录学习、生活和有趣的事 51统计 百度统计
    MOEICP 萌ICP备20236860号 ICP 粤ICP备2023007649号 ICP 粤公网安备44030402006402号

    💻️ 谢明伟 4小时前 在线

    🕛

    本站已运行 2 年 176 天 11 小时 5 分

    🌳

    自豪地使用 Typecho 建站,并搭配 MyLife 主题
    白雾茫茫丶. © 2022 ~ 2024.
    网站logo

    白雾茫茫丶 记录学习、生活和有趣的事