页面中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日

相关文章

  • 前端HTTP发POST请求携带参数与后端接口接收参数的实现

    下面是详细讲解“前端HTTP发POST请求携带参数与后端接口接收参数的实现”的完整攻略。 一、前端HTTP发POST请求携带参数的实现 1. 使用XMLHttpRequest XMLHttpRequest是前端与服务器进行数据交互最常用的方式。要发送带有参数的POST请求,需要设置请求头和请求体。请求体是以字符串形式发送给服务器的,一般将参数转换成JSON或…

    JavaScript 2023年5月19日
    00
  • javascript 判断中文字符长度的函数代码

    下面是详细的攻略。 1. 需求说明 在实际开发中,有时候需要限制输入框中的字符长度,尤其是中英文混合的情况下,一个中文字符长度应该算比一个英文字符长度大。 因此,需要编写一个 Javascript 函数用来判断字符串中的中文字符长度。 比如,字符串 “Hello,世界!” 中包含了一个英文逗号和两个中文字符,因此总长度应该为 8。 2. 代码实现 下面是一个…

    JavaScript 2023年5月19日
    00
  • JavaScript判断数组是否存在key的简单实例

    下面是详细讲解JavaScript判断数组是否存在key的简单实例的完整攻略。 问题背景 在JavaScript开发过程中,有时候需要判断一个数组中是否存在某个指定的key,那么该怎么做呢? 解决方案 我们可以采用JavaScript内置的Array对象的includes()方法或数组的indexOf()方法来判断数组中是否存在某个指定的key。 使用inc…

    JavaScript 2023年5月27日
    00
  • Vue中使用import进行路由懒加载的原理分析

    Vue是一款非常流行的前端框架,Vue-router是Vue框架提供的一个非常重要的路由管理插件。在Vue中使用import进行路由懒加载是Vue-router提供的一种路由懒加载方式,其原理分析如下: 1. import引入组件 在Vue项目中,我们通常使用import语法引入各种组件。 示例: import Vue from ‘vue’ import A…

    JavaScript 2023年6月11日
    00
  • Chrome调试折腾记之JS断点调试技巧

    Chrome调试折腾记之JS断点调试技巧 介绍 Web开发中调试是必不可少的环节之一,Chrome提供了丰富的调试工具来帮助我们定位问题。本文将着重介绍Chrome的JS断点调试技巧。 步骤 步骤一:打开调试工具 打开需要调试的页面,按下 F12 或右键选择 审查元素 ,即可打开 Chrome 的调试工具。 步骤二:在JS代码中插入断点 在需要调试的代码行左…

    JavaScript 2023年6月10日
    00
  • AngularJS通过$location获取及改变当前页面的URL

    AngularJS是一个前端MVVM框架,通过它可以方便地进行网页开发。在网页开发中,经常需要获取或改变当前页面的URL,AngularJS提供了$location服务实现这一功能。下面是一份简要的攻略: 1. $location服务的概述 AngularJS中的$location服务用于获取和改变URL。通过$location服务,可以获取当前页面的URL…

    JavaScript 2023年6月11日
    00
  • javascript HTML5文件上传FileReader API

    下面是关于JavaScript HTML5文件上传FileReader API的详细攻略: 什么是FileReader API? FileReader API 是 HTML5 中的一款文件读取 API,使得客户端的 web 应用程序能够异步读取文件(即用户计算机中的本地文件,而不是通过网络获取的文件)。可以使用 FileReader 读取文本文件、二进制文件…

    JavaScript 2023年5月27日
    00
  • 原生JS实现数码表特效

    原生 JS 实现数码表特效攻略 概述 该攻略是使用原生 JS 实现数码表特效的完整教程。该特效是指数字从 0 变化到目标数字,即数码表翻滚特效。 实现步骤 首先,我们需要在 HTML 中创建一个数码表的结构,包括外层容器和数字容器。HTML 结构如下: <div class="counter"> <div class=&…

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