javaScript代码何时执行

最新推荐文章于 2023-02-21 17:45:41 发布
最新推荐文章于 2023-02-21 17:45:41 发布
阅读量832 收藏 1
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/armwind/article/details/114456476
版权

javaScript引入位置

  • 一般在Head标签中引入css
  • 在body最后引入js文件

好久没用JavaScript了，这里开始学习下。在学习WEUI时(http://www.jqweui.cn/download)，下面的注释引起了我的注意。这里看着他们引入的位置还是有区别的。

<!-- head 中 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">

<!-- body 最后 -->
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>

<!-- 如果使用了某些拓展插件还需要额外的JS -->
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/city-picker.min.js"></script>

为此特意百度了一下,加上自己实验,才有了一些理解。

  • javacript是根据 <script>顺序来执行的,写在前面的标签中的代码会被先执行。

上面的注释告诉我们导入js代码写在body的最后，为什么会这样?
因为一般情况下，在文档标签中包含js脚本或者导入的js文件。这意味着必须等到全部js代码都被执行完以后才能继续解析后面的HTML部分。

下面是实验时的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>armwind</title>
    <link rel="stylesheet" href="jquery-weui.min.css">
    <link rel="stylesheet" href="weui.min.css">
    <script>
        alert("armwind1")
    </script>
</head>
<body>
<a href="javascript:;" class="weui-btn weui-btn_primary">按钮</a>

<script src="jquery-weui.min.js"></script>
<script src="jquery.min.js"></script>

<script>
  alert("armwind2");
</script>
<script>
  alert("armwind3");
</script>
</body>
</html>

执行结果:
下面能够看到在先显示armwind1，然后在显示armwind2的时候，绿色按钮已经被渲染到浏览器中了。这说明解析JavaScript和解析body的html标签是同时进行的。所以在上面的注释中说要把js文件放到body标签的最后。
在这里插入图片描述
上面测测试例子，我把JavaScript放到body标签内部了。这在正式开发时，代码会显示有点乱。一般会在外面body外面在加一个<scritp>标签.

<body>
<script>
    console.log("this is body");
</script>
</body>
<script>
  console.log("hello world1")

  (function() {
    console.log('this is armwind');
  })();

运行结果：
这里运行结果能在最后面看到一个错误，这个需要在console.log("hello world1")后面加一个;就可以解决了。
在这里插入图片描述
正确的结果
在这里插入图片描述

上面能看到body中的<script>比下面的<script>要提前运行。此外在在body下面的script可以执行，所以我目前总结2条JavaScript执行顺序

  • 直接调用：
    不言而喻，直接调用JavaScript方法执行
  • 方法定义时调用
    这个是在定义函数时直接调用,形如下面的定义和调用。
  (function() {
    console.log('this is armwind');
  })();
armwind
关注
专栏目录
JS的执行时机（探究6个6问题）
zymtasd0_的博客
08-01 312
大家好，这里是阿凉，今天给大家讲一下JS的执行时机。以及6个6问题。
一段JavaScript代码是如何执行的
01-08
一段JavaScript是如何执行的js事件循环异步任务异步任务队列测试代码结果调试执行结果 js事件循环 当我们执行一行js代码时,如果是同步任务,就把它直接放到执行栈里面去执行,如果是异步任务,会把它放到一个异步的任务...
javascript代码的执行时间？
Mr. David 专栏
12-22 1003
function 里面的代码 , 你什么时候调用function 就什么时候执行.function外的代码, 默认是window.onload时执行.另外，里面的代码提前于里面的代码。利用window.onload=function(){}可以让代码加载时执行。
javascript脚本何时被执行
forchance1的专栏
11-07 478
javascript脚本可以嵌入在内的任意地方，但它何时被调用呢？当浏览器打开HTML文件后，会直接运行不是声明函数的脚本或通过事件调用脚本函数，下面分析这几种情况。 1 浏览器在打开页面时执行脚本   当浏览器打开一个HTML文件时，它会从头开始解释整个文件，包括html标签和脚本。如果脚本中有可以直接执行的语句，则会在遇到的时候马上解释执行。 2 利用onLoad事件执行脚本
页面动态加入<script>标签并执行代码
aigenglong0649的博客
01-27 1272
　　在页面中动态追加html片段的时候，有时候动态添加的代码会含有<script>标签，比如用了一些模板引擎，或者你的代码有些复杂的时候。然而我们用DOM提供的innerHTML方式来添加代码的时候，<script>标签中的代码并不能执行，如果有src属性，指向的外联文件也不会被加载，这并不是浏览器的bug，因为w3c文档就是这么规定的。 那我们有什么...
写了这么久js，你知道js代码是在什么时候执行的么？
weixin_46351593的博客
09-05 3198
文章目录关于执行js程序延迟执行js文件异步加载js文件js代码块 关于执行js程序 浏览器在解析HTML文档时，将根据文档流从上到下逐行解析和显示。Javascript代码也是HTML文档的组成部分，因此Javascript脚本的执行顺序也是根据<script>标签位置来确定的。 提示：对于导入的js文件，也将按照<script>标签在文档中出现的顺序来执行，而执行过程是文档解析的一部分，不会单独解析或者延期执行。 注意： 一般情况下，在文档<head>标签中包含j
Java执行JavaScript代码
10-22
Java执行JavaScript代码是一种常见的跨语言交互场景，尤其是在服务器端应用中，例如集成第三方JavaScript库或者在Java应用中利用JavaScript的灵活性。以下将详细介绍如何在Java中执行JavaScript代码，并结合提供的...
JavaScript代码执行的先后顺序问题
10-19
函数作用域是理解JavaScript代码执行顺序的另一个关键点。在JavaScript中，函数创建了自己的作用域，函数内部声明的变量只能在函数内部访问，外部无法访问，这就是局部变量。当在函数作用域中访问一个变量时，...
Javascript代码在页面加载时的执行顺序介绍
10-27
1. 直接将JavaScript代码放置在`<script>`和`</script>`标签之间。这是最直接也是最常用的方式，所有的代码在页面加载到相应位置时直接执行。 2. 使用`<script>`标签的`src`属性指定外部JavaScript文件。这种方式...
C#执行Javascript代码的几种方法总结
12-31
一、开源项目 Javascript .NET ...示例代码： 代码如下:using Noesis.Javascript; using System; using System.Collections.Generic; namespace JsCSharp { class Program { static void Main(string
Javascript何时执行
weixin_30421525的博客
01-24 82
分以下两种情况: 1.HTML head部分的Javascript会在被调用的时候执行 需要调用才执行的脚本或事件触发执行的脚本放在head部分，这可以保证脚本在任何调用之前被预先加载，在页面加载完之前就已经运行。 2.HTML body部分的Javascript会在页面加载的时候执行 页面加载时就执行，一般用于生成页面内容 转载于:https://www.cnblogs.com/y...
JavaScript（浏览器）执行的时间线
张印的博客
06-06 1704
JavaScript（浏览器）执行的时间线 （创建document对象=>文档解析完=>文档解析玩加载完执行完） 创建Document对象，开始解析web页面。这个阶段document.readyState=‘loading’; 遇到link外部css，创建线程，进行异步加载，并继续解析文档； 遇到script外部js，并且没有设置async、defer，浏览器同步加载，并...
JavaScript的执行顺序
最新发布
前端学习笔记
02-21 340
在说JavaScript的执行顺序之前，我们先回答一下以下几组程序的输出结果第 1 组} , 0);output(2);// 2 3 1第 2 组resolve();resolve();resolve();resolve();});});});resolve();});});看完上面两组案例，是不是会产生这样的疑惑，为什么输出的结果是这样的，别着急，下面我们来详细分析。
JavaScript 代码的执行流程
key_3_feng的博客
02-15 118
JavaScript 的执行机制：先编译，再执行。
JS中script脚本的执行顺序
qq_38446108的博客
08-11 1316
JS中script脚本的执行顺序 在HTML中引入script脚本时，最普通的用法是直接引用，此时浏览器按顺序解析HTML，当解析到script的位置时，加载脚本并在加载完毕时立即执行脚本，在加载和执行的过程中会暂停HTML的解析。此种方法的问题是一旦因为某些原因导致脚本的加载时间过长，会影响页面的渲染，降低用户体验。所以在script标签中存在两个参数async和defer，可以控制脚本的加载和执行时间。 async async表示异步，script标签中有async参数时，浏览器会在解析到此处时异步加载
javascript学习笔记四---javascript代码什么时候被执行
weixin_30482181的博客
08-07 202
当页面载入时，会执行位于 body 部分的 JavaScript。 当被调用时，位于 head 部分的 JavaScript 才会被执行。 当页面载入时执行，如：<html><head></head><body><scripttype="text/javascript">document.write("该消息在页面加载时输出。")&l...
JS函数的执行时机
baidulixueqin的博客
12-25 502
函数的要素,每个函数都有以下这些东西： 1.调用时机 2.作用域 3.闭包 4.形式参数 5.返回值 6.调用栈 7.函数提示 8.arguments (除了箭头函数) 9.this (除了箭头函数) 今天主要讲解 调用时机。 一.调用时机 时机不同结果不同 fn不加()永远不会调用 例1 let a=1 function fn(){ console.log(a) } a=2 //a更新到2了 fn() 问打印出多少？ 2 例2 let a=1 function fn(){ cons.
JavaScript 执行机制
Y.Cheng的博客
11-26 590
这一次，彻底弄懂 JavaScript 执行机制 本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，可以揍我。 不论你是javascript新手还是老鸟，不论是面试求职，还是日常开发工作，我们经常会遇到这样的情况：给定的几行代码，我们需要知道其输出内容和顺序。因为javascript是一门单线程语言，所以我们可以得出结论： javascript是按
JavaScript代码执行顺序解析
JavaScript代码在HTML文档中的执行顺序是由脚本标签`<script>`出现的位置决定的，从上到下依次执行。外部JavaScript文件也会按照引入的顺序进行加载和执行，且不中断文档的加载过程。此外，JavaScript引擎在执行前会...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值