JS - ＜script＞加载顺序

最新推荐文章于 2024-08-01 14:32:35 发布

cjn.

最新推荐文章于 2024-08-01 14:32:35 发布

阅读量794

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/chenjineng/article/details/108066747

版权

本文探讨了在HTML中<script>标签的async和defer属性对脚本加载和执行顺序的影响。默认情况下，脚本会阻塞HTML解析，而async属性使得脚本并行加载，执行时不阻塞HTML。defer属性则确保脚本在HTML解析完成后执行，与脚本位置在<body>底部相同效果。

摘要由CSDN通过智能技术生成

!async !defer

在<head>中，<script>不加async defer属性值时，浏览器至上而下加载html文档，遇到script引用，暂停html加载，等待script脚本加载&执行完，再加载之后的html

// index.html
<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="./main.js"></script>
</head>
<body>
  <div class="box"></div>
</body>
</html>

// main.js
const box = document.querySelector('.box')
console.log(box)

执行main.js中的代码时，<div class="box"></div>还没有加载，打印的结果为null

async

在<head>中，<script async>，html至上而下加载，遇到script引用，加载script脚本的同时加载html，

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

cjn.

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Javascript-基础篇<Script></script>的基础使用

a15935403204的博客

04-07

840

1.属性：　　1.1.async:可选，表示立即加载该脚本，但不妨碍页面中其他的操作，比如下载其他的脚本。　　　实例：　　 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title...

如何保证script标签的加载顺序

李卓书

06-21

2103

本章博文主要解决script标签的加载顺序问题。

参与评论您还未登录，请先登录后发表或查看评论

script标签加载顺序(defer & async)

zm_miner的博客

10-11

1万+

script 拥有的属性 async：可选，表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。 charset：可选。表示通过 src 属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少有人用。 defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。IE7 及更早版本对嵌入脚本也支持...

script 加载的三种方式详解

最新发布

chenyajundd的博客

08-01

849

这三种方式各有优势，在首屏优化方面不能直接说哪一种就是最好的，可以结合起来进行使用，还要根据实际需求。总结就是：<script></script>：阻塞 HTML 解析，严格按照书写顺序执行脚本，适用于少量必须即时执行的脚本。defer：异步下载脚本，不阻塞 HTML 解析，按顺序执行，适用于大部分需要等待 HTML 解析完成的脚本。async：异步下载和执行脚本，不阻塞 HTML 解析，但无法保证执行顺序，适用于独立的或不依赖执行顺序的脚本。如果脚本需要在 DOM 准备好之前执行，使用直接加载。

script 代码块的加载顺序

m0_46512929的博客

06-01

2724

script 代码块的默认加载和执行顺序：从上到下依次边加载边解释执行。如果设计到了引入外部的js代码，那么该代码必须加载完成并解释执行完毕之后才能继续解析后面的HTML 和 js代码。默认加载执行的顺序的问题：如果加载的外部的js代码比较大，而且是网络js代码，可能会引起页面的假死状态。一般的解决方案： 1：将这些js代码放到 body 的末尾。 2：给script标签添加性。让该引入的外部的js代码，实现异步...

深究Javascript的加载与执行顺序

疑问搜索动手解决记录

11-16

799

1. 按块加载并执行对于一个HTML文档，浏览器的解析顺序为：按照文档流，从上到下逐步解析页面的结构。JavaScript代码作为通过标签嵌入或引入的脚本，也HTML文档的组成部分。因此，JavaScript代码在装载时的执行顺序也是根据脚本标签但是，浏览器加载JavaScript时有个特点，那就是载入之后立即就会执行（先编译后执行），因为JavaScript可能会影响DOM树的结构，所以浏览器在执行完后才能继续加载下面的HTML内容。也就是说，浏览器下载并执行JavaScript的过程会阻塞DOM树的继

JavaScript 文件加载执行顺序

LvLin_60的博客

01-18

2552

你不知道的关于众所周知，<script>标签是用于将JavaScript代码插入到HTML的主要方法。它具有内联和外部形式两种使用方式。内联代码是将JavaScript代码直接写在标签里，外部形式则是通过标签的src属性引入外部的JavaScript文件。当<script>标签具有src属性的时候，标签内的代码会被忽略，如下所示: <!DOCTYPE html> <html> <head> <title>Example HTML

JS的一点问题——加载顺序

我要，我要，我还要

06-27

1723

关于JavaScript的加载顺序以以下一段程序开始： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jquery-3.3.1.js" type="text/javascript" char...

JavaScript简介-＜script＞、document.getElementById、JavaScript事件、JavaScript字符串、JavaScript数据类型

weixin_45876795的博客

09-13

414

JavaScript简介 JavaScript是脚本语言。 JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。 JavaScript：直接写入HTML输出流 document.write("<h1>这是一个标题</h1>"); 只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。

＜script＞标签使用

never_33的博客

02-17

1562

标签使用

动态加载script文件的两种方法

12-09

这种方法可以解决跨域问题，因为`<script>`标签可以加载跨域的JavaScript资源，而Ajax请求受到同源策略的限制。此外，如果脚本文件中定义了函数，你可以确保在脚本加载完成后调用它们。在某些情况下，你可能希望在...

一文搞定script脚本加载顺序，说说defer和async

MartinChange

03-30

1128

我们先来看一段代码，html中使用script标签引入了script1.js、script1.js和script3.js三个文件。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>TEST HTML</title> </head> <script src="script1.js"></sc

让JavaScript代码在页面加载完毕后再执行的方法

weixin_47559326的博客

06-30

2701

方法一：window.onload = function(){} 方法二：利用script元素的defer 属性 defer属性只对外部脚本文件有效可以延迟到文档完全被解析和显示之后再执行如：<script src="./j.js" defer></script>

Vue笔记——在Vue项目中引入外部js文件

热门推荐

fengzhen8023

10-09

1万+

在普通的项目中，我们可以通过<script src="index.js"></script>来引入外部的js文件，但是在Vue项目中，就不可以使用这种方式了，需要使用ES6语法来引入，同时还要对已有的js文件做相应的修改。一般情况下，我们引入外部js文件，是要调用js文件中的函数。在Vue项目中，我们首先要使用export命令将这个函数抛出，然后才能在其他的Vue组件中...

谈谈＜script＞标签以及其加载顺序问题，包含 defer & async

赶路人儿

08-12

2798

<script>标签出现的很早，其作用：引入JavaScrit代码。这个元素是由 Netscape 创造，并在 Netscape Navigator 2中首先实现。后来，这个元素被加入到正式的 HTML 规范中。属性包括： async：可选，表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。 charset：可选。表示通过 src 属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少有人用。 defer：可选。..

Script标签和脚本执行顺序

MR_LP的博客

12-01

1万+

0.前言估计所有读者也慢慢适应我每次讲东西之前先墨迹一段的习惯了。那么我今天就来个转换，我！不！墨！迹！了！正文开始。1.script标签的默认行为首先我们先来看一下 <script> 标签的几个重要特性： script标签的会阻止文档渲染。相关脚本会立即下载并执行。注意：（不带defer或async属性） document.currentScript 可以获得当前正在运行的脚本(Chrome

＜script＞元素属性详解及html引入js执行顺序[defer][async]

weixin_44339178的博客

07-08

984

元素属性详解 defer、async

JavaScript引入方法

weixin_66109724的博客

09-22

5065

看过的都说好，看了又好像没看（一点用没有，并成功浪费你两分钟）。

JavaScript异步加载：理解<script>标签与优化策略

此外，还可以利用动态创建<script>元素的方式来异步加载脚本，通过JavaScript动态插入<script>标签，并设置其src属性，这种方法同样是非阻塞的，但提供了更多的控制能力，比如添加回调函数来处理脚本加载成功或失败...