HTML - 资源提示符

本文涉及的产品
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
简介: 这篇文章介绍了HTML中的一些优化技术,包括async、defer、preload、prefetch和moudle等标签的使用方法和作用。其中,async和defer标签可以异步加载脚本资源,不会阻止DOM解析,但执行时机不同;preload标签可以预加载指定资源,但不会立即执行;prefetch标签告诉浏览器,未来可能会用到某个资源,浏览器会在空闲时下载;moudle标签可以用于兼容不同浏览器。

前言

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

async

<script src="./index.js" async></script>

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

defer

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

preload

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

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

prefetch

<link rel="prefetch" href="demo.html">

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

module

<script type="module" src="./index.js"></script>

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

相关文章
|
Web App开发 Shell Perl
通过shell抓取html数据
最近看一些网站的时候,发现有些数据很有意思,想把数据截取出来,但是想把数据抽取出来很是困难。因为如下的小方框的数字都是上下两行排列,想要把数据抽取到一行是很难实现的。
938 0
|
Linux iOS开发 MacOS
HTML基础——资源路径
相对路径 绝对路径
181 0
|
10月前
|
存储 JavaScript 前端开发
HTML 脚本
HTML 脚本
118 0
|
4月前
|
JavaScript 前端开发
HTML 脚本1
JavaScript 通过 `&lt;script&gt;` 标签嵌入 HTML,增强页面的动态和交互性。它可以包含内联脚本或引用外部脚本文件,常用于图片操作、表单验证和内容动态更新。
如何防止Joomla编辑器删除HTML代码
最近有很多问题:为什么Joomla在保存构建的文章时删除了HTML代码。我花了很多时间研究此问题,发现该问题来自“全局配置”中的“文本过滤器设置”。
如何防止Joomla编辑器删除HTML代码
|
5月前
|
Web App开发 前端开发 搜索推荐
创建HTML文件
【10月更文挑战第14天】创建HTML文件
114 4

相关实验场景

更多