HTML - 资源提示符

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 这篇文章介绍了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 文件

相关文章
HTML 统一资源定位器(Uniform Resource Locators)3
URL字符编码是指将URL中非ASCII字符转换为有效的ASCII格式的过程。URL只能使用ASCII字符集,因此需要对超出该集合的字符进行编码。URL编码使用“%”加上两位十六进制数来表示非ASCII字符,空格通常被编码为“+”。例如,€编码为%80,£编码为%A3。更多信息可参见URL编码参考手册。
|
1月前
|
安全 数据安全/隐私保护
HTML 统一资源定位器(Uniform Resource Locators)2
常见的URL Scheme包括:http(超文本传输协议,用于普通网页,不加密)、https(安全超文本传输协议,用于安全网页,加密信息交换)、ftp(文件传输协议,用于文件的上传和下载)、file(用于访问本地计算机上的文件)。
HTML 统一资源定位器(Uniform Resource Locators)1
统一资源定位器(URL)是用于标识互联网上资源位置的标准格式。URL通常由方案、主机、域名、端口、路径和文件名组成,如 `http://www.runoob.com/html/html-tutorial.html`。大多数用户通过域名访问网站,因为域名比IP地址更容易记忆。URL在Web浏览器中用于请求页面,通过 `&lt;a&gt;` 标签实现链接跳转。
|
3月前
|
移动开发 HTML5
响应式精品资源导航源码html5
一款响应式精品网站推荐导航源码,可以自己修改代码替换图标图片和指向网址。背景图支持自动替换,背景图可以在images中修改,本地双击html即可查看效果
43 2
响应式精品资源导航源码html5
|
7月前
适合各大资源网投稿html源码
适合各大资源网投稿html源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
106 1
适合各大资源网投稿html源码
webpack打包图片资源,图片不显示和index.html,HtmlWebpackPlugin
webpack打包图片资源,图片不显示和index.html,HtmlWebpackPlugin
307 0
webpack打包图片资源,图片不显示和index.html,HtmlWebpackPlugin
2022跨年代码(HTML·资源都是网上的可以直接使用)
2022跨年代码(HTML·资源都是网上的可以直接使用)
1497 1
2022跨年代码(HTML·资源都是网上的可以直接使用)
|
XML Java 应用服务中间件
动态资源技术JSP|Java与Html的美好相遇
前言JSP可以用简单易懂的方式表示为:Html+Java=JSP,JSP技术使用Java编程语言编写类XML的tags和scriptlets,来封装产生动态网页的处理逻辑。网页还能通过t...
412 0
|
Linux iOS开发 MacOS
HTML基础——资源路径
相对路径 绝对路径
166 0
|
前端开发
前端解决第三方图片防盗链的办法 - html referrer 访问图片资源403问题
前端解决第三方图片防盗链的办法 - html referrer 访问图片资源403问题
648 0