前言
根据 什么?你还不知道浏览器渲染流程?这篇文章可以知道,页面从浏览器解析到
的起始标签开始渲染,如果我们将
都放在了
中,那么浏览器将会在页面渲染前将所有的
JS
下载、解析和解释完毕后才开始渲染页面,这么做就有一个问题是用户不能接受的:页面白屏。所以我们通常会将放在
后面,这样可以使得在页面渲染完毕后执行
JS
,减少用户等待白屏的时间。
是用于加载JS脚本的标签,通常用于引入JS文件。在项目庞大到一定程度时,我们通常会使用多个
标签来引入多个JS文件,包括第三方库cdn和内部JS,以防止JS内容过大阻塞页面加载进程,导致页面白屏。为了解决这个问题,我们可以对需要引入的JS文件进行优先级排序,将需要优先加载的JS文件放在前面(
默认是顺序加载)。看到这里,你心里肯定会想:就这???别急,接下来我们来看看高阶用法。
defer
HTML4 为 定义了defer属性,
defer
--- 推迟,延迟。和名字一样,在中使用这个属性会先下载
JS
文件等到页面渲染后再执行下载的JS
脚本内容。也就说:先下载,渲染后在执行
。
eg:
html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script defer src="xxxx1.js">script>
<script defer src="xxxx2.js">script>
<title>Documenttitle>
head>
<body>
<div id="app">div>
body>
html>
尽管这个案例中的 放在了
中,但是浏览器在解析的时候只会将其下载到本地,跳过执行继续向下解析,等到页面渲染完成后再开始按顺序执行这里的
文件,另外需要说明的是尽管
defer
加载方式是推迟加载,但是执行的时候其顺序和出现顺序相同(这一点和默认的一样~)。需要注意的是:在MDN文档中提到,加载的script
不能是module
模块,否则将不起作用。
async
HTML5 为定义了async属性,该属性和
async
类似,但略有不同。它和defer
都只适用于加载外部JS
,都会让浏览器立即下载。不同点在于async
不能保证按照出现的次序进行执行且是下载完就执行。
eg:
html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script async src="xxxx1.js">script>
<script async src="xxxx2.js">script>
<title>Documenttitle>
head>
<body>
<div id="app">div>
body>
html>
另外,使用在使用async
的时候可以使用module
来引入外部模块。
总结
属性名 | 加载JS限制 | 加载JS方式 | 加载顺序 | 执行时期 | 白屏产生时期 | 使用moduel时是否会失效 |
---|---|---|---|---|---|---|
默认 | 无 | 同步 | 同出现顺序 | 下载完执行 | 下载和执行时 | 否 |
defer | 限外部 | 异步 | 同出现顺序 | 渲染后执行 | 不产生白屏 | 是 |
async | 限外部 | 异步 | 无法保证 | 下载完执行 | 执行时产生 | 否 |
更清晰的图示:
图源
1、本站所有资源均从互联网上收集整理而来,仅供学习交流之用,因此不包含技术服务请大家谅解!
2、本站不提供任何实质性的付费和支付资源,所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用!
3、本站所有资源仅用于学习及研究使用,您必须在下载后的24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担!
4、本站站内提供的所有可下载资源,本站保证未做任何负面改动(不包含修复bug和完善功能等正面优化或二次开发),但本站不保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug!如有链接无法下载、失效或广告,请联系客服处理!
5、本站资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您的合法权益,请立即告知本站,本站将及时予与删除并致以最深的歉意!
6、如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
7、如果您喜欢该资源,请支持官方正版资源,以得到更好的正版服务!
8、请您认真阅读上述内容,注册本站用户或下载本站资源即您同意上述内容!
原文链接:https://www.shuli.cc/?p=21332,转载请注明出处。
评论0