HTML - 资源提示符

简介: 这篇文章介绍了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 文件

相关文章
|
1月前
适合各大资源网投稿html源码
适合各大资源网投稿html源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
32 1
适合各大资源网投稿html源码
webpack打包图片资源,图片不显示和index.html,HtmlWebpackPlugin
webpack打包图片资源,图片不显示和index.html,HtmlWebpackPlugin
258 0
webpack打包图片资源,图片不显示和index.html,HtmlWebpackPlugin
2022跨年代码(HTML·资源都是网上的可以直接使用)
2022跨年代码(HTML·资源都是网上的可以直接使用)
1451 1
2022跨年代码(HTML·资源都是网上的可以直接使用)
|
XML Java 应用服务中间件
动态资源技术JSP|Java与Html的美好相遇
前言JSP可以用简单易懂的方式表示为:Html+Java=JSP,JSP技术使用Java编程语言编写类XML的tags和scriptlets,来封装产生动态网页的处理逻辑。网页还能通过t...
384 0
|
Linux iOS开发 MacOS
HTML基础——资源路径
相对路径 绝对路径
139 0
|
前端开发
前端解决第三方图片防盗链的办法 - html referrer 访问图片资源403问题
前端解决第三方图片防盗链的办法 - html referrer 访问图片资源403问题
554 0
|
Web App开发 移动开发 HTML5
HTML5和CSS3参考资源与教程
导读:作者Paul Andrew是Speckyboy设计杂志的创始人和编辑。他写了一篇文章《HTML5 and CSS3 Form References, Resources and Tutorials》,在文中汇总几个HTML5和CSS3资源教程网站, 为Web开发人员提供了详细参考指南。
1049 0
|
移动开发 前端开发 测试技术