页面中js执行顺序

下面是页面中js执行顺序的完整攻略。

执行顺序

在页面中,JavaScript脚本可以通过多种方式嵌入到HTML文档中,如内联脚本、外部脚本和动态添加脚本等。JavaScript脚本的执行顺序有以下规则:

  1. 按照文档内的顺序解析脚本,在HTML文档中与JavaScript相关的所有元素按照它们在文档中的顺序来解析。因此,文档中后面出现的脚本无法使用文档前面定义的变量和函数。

  2. 按照异步加载的顺序执行脚本,当使用<script>标签引入外部脚本时,可以通过将asyncdefer属性设置为true来控制脚本的执行时间。async表示页面加载的同时异步加载脚本,而脚本的响应速度通常比页面快,所以脚本的执行顺序是不确定的;defer则表示该脚本将在页面解析完毕后执行,多个延迟执行的脚本会按照它们在文档顺序上的先后顺序依次执行。

  3. 在执行脚本时必须先加载执行所需的外部脚本、文件和图片等资源,否则浏览器会挂起执行,等待资源加载完成后再执行。

示例说明

下面举两个例子,来说明JavaScript脚本的执行顺序。

示例1

HTML代码:

<!DOCTYPE html>
<html>
<head>
  <script src="a.js"></script>
</head>
<body>
  <h1>Hello World!</h1>
  <script src="b.js"></script>
</body>
</html>

其中a.js内容如下:

console.log("a.js loaded");

b.js内容如下:

console.log("b.js loaded");

当浏览器解析这个页面时,先加载a.js,输出"a.js loaded",然后才是b.js,输出"b.js loaded"。

因此,这个例子说明了文档内的顺序和先后顺序两个规则。

示例2

HTML代码:

<!DOCTYPE html>
<html>
<head>
  <script src="a.js" defer></script>
  <script src="b.js" defer></script>
</head>
<body>
  <h1>Hello World!</h1>
  <script src="c.js"></script>
</body>
</html>

其中a.js和b.js的内容如下:

console.log("a.js loaded");
console.log("b.js loaded");

c.js的内容如下:

console.log("c.js loaded");

当浏览器解析这个页面时,先加载并解析a.js和b.js,但是它们不会立即执行,而是等待文档解析完成后,在文档元素按照顺序执行完毕后,按照它们在文档顺序上的先后顺序依次执行。所以在本例中,c.js会先于a.js和b.js执行,输出"c.js loaded",然后才是a.js和b.js,分别输出"a.js loaded"和"b.js loaded"。

因此,这个例子说明了延迟加载和异步加载两个规则。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:页面中js执行顺序 - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • Javascript调试脚本的经验之谈第2/2页

    下面是关于“JavaScript调试脚本的经验之谈”的完整攻略。 第一步:使用控制台 控制台是JavaScript调试中最重要的工具之一。可以通过在控制台中打印信息、执行代码、查看对象属性等方式来找到代码问题。 在控制台中可以使用以下方法进行调试: 1. console.log()方法 console.log()方法是JavaScript中使用最广泛的输出调…

    JavaScript 2023年6月1日
    00
  • json对象与数组以及转换成js对象的简单实现方法

    下面是关于“json对象与数组以及转换成js对象的简单实现方法”的完整攻略: 1. 什么是JSON JSON,全称是JavaScript Object Notation,是一种轻量级的数据交换格式。它基于JavaScript语法的子集,包括对象、数组、字符串、数字、布尔值和null。 JSON被广泛应用于Web应用程序和API中,是一种常用的数据交换格式。现…

    JavaScript 2023年5月27日
    00
  • javascript数组去重方法汇总

    JavaScript数组去重方法汇总 在JavaScript中,数组是一种非常重要的数据类型,经常在实际的开发中用来存储一系列数据。但是,有时候我们需要对数组进行去重操作,即只保留数组中的不重复元素。本文将介绍几种常用的JavaScript数组去重方法。 1.使用Set对象 使用ES6中新增的Set对象可以非常方便地对数组进行去重。Set对象中的所有元素都是…

    JavaScript 2023年5月27日
    00
  • JS原型对象操作实例分析

    JS原型对象是JS中非常重要的一个概念。它允许我们将一个或多个属性和方法赋值给一个函数,并允许其他对象通过继承这些属性和方法来共享它们。本文将从以下几个方面详细讲解JS原型对象的操作实例。 1. 什么是JS原型对象? JS原型对象是每个 JS 对象都具有的属性,它允许我们将对象的属性和方法共享到其他对象中。每个对象都有一个原型对象,并且它继承自其父对象的原型…

    JavaScript 2023年5月27日
    00
  • json2.js的初步学习与了解

    Json2.js的初步学习与了解 1. 什么是Json2.js? Json2.js是一个JS库,提供了一组非常方便的json解析和生成工具,可以用来编码和解码JSON数据。提供了两个核心方法 JSON.parse(str)和JSON.stringify(obj)。JSON.parse(str)方法可以把一个包含JSON格式的字符串转换为JavaScript对…

    JavaScript 2023年6月11日
    00
  • 零基础轻松学JavaScript闭包

    零基础轻松学JavaScript闭包 什么是闭包 闭包的定义 闭包是指那些能够访问自由变量的函数。自由变量是指在函数中使用,但既不是函数参数,也不是函数的局部变量的变量。 闭包 = 函数 + 函数能够访问的自由变量 闭包的作用 闭包主要有以下两个作用: 延长外部作用域中变量的声明周期。当一个函数返回了一个内部函数后,内部函数会继续保持对外部函数的作用域的引用…

    JavaScript 2023年6月10日
    00
  • 浅谈一下JavaScript与C++的差异

    关于JavaScript和C++的差异,我可以从以下几个方面进行讲解: 1. 语法差异 1.1 语言特性 JavaScript是一门脚本语言,它的特点是动态类型、解释执行、动态创建对象等,对于字符串拼接、数组操作、函数式编程等有较好的支持。而C++是一门编译型语言,它的特点是静态类型、编译执行、面向对象等,对于高效性、硬件操作等有较好的支持。 1.2 基本语…

    JavaScript 2023年5月27日
    00
  • AngularJS入门教程之表单校验用法示例

    AngularJS是一款非常流行的前端JavaScript框架,它为Web应用程序提供了许多现代化且强大的功能,其中包括表单校验。本文将介绍如何使用AngularJS来实现表单校验,并提供两个示例供参考。 目录 AngularJS表单校验介绍 AngularJS表单校验示例 自定义校验器 结论 AngularJS表单校验介绍 AngularJS提供了内置的表…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部