JS学习笔记（一）——JavaScript的同步和异步执行

最新推荐文章于 2024-09-10 20:56:12 发布

NeWive

最新推荐文章于 2024-09-10 20:56:12 发布

阅读量400

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/qq_40609325/article/details/83960529

版权

本文探讨JavaScript的同步与异步执行，分析如何通过async、defer、window.onload、动态创建DOM和script放置位置等方式实现异步加载，以避免阻塞HTML解析并提高页面性能。

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

如有错误欢迎指正
JavaScript的装载和执行有两种特性：1.载入后马上执行 2.载入的时候会阻塞后面的js的载入和html文档的加载，可以理解为串行地加载。
因此，当要通过JS对DOM树进行操作的时候往往会发生查询不到某一个元素的情况。下面是一个例子：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="JS.css">
    <script src = "OperationOfForm.js" type="text/javascript"></script>
</head>

这一片代码是将script标签写进了head标签内，也就是说在执行到script标签、加载js代码的时候下面对body的读取会被阻塞，因此在用js代码操作DOM树的时候会发生无法获取对象的情况。这种使用加载js的方式被叫做同步加载。

因此我们需要一种方法来实现js代码的异步加载。
使用异步加载js的方式，就不会影响后续的html的渲染。

方法一：使用async和defer标签

    <script async src = "OperationOfForm.js" type="text/javascript"></script>
    <script defer src = "Op

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

NeWive

关注关注

1
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

JS的同步与异步编程

MT_Leen的博客

05-06

1558

对于JS同步与异步编程编程的一些学习笔记与理解，包括： -JS单线程 -同步与异步任务 -异步任务的执行机制 -Event Loop -定时器 -异步编程方法

Node.js学习笔记——内置模块

qq_46304554的博客

01-18

509

Node.js内置模块1.Path 模块2.file system模块在 Node.js 模块库中有很多好用的模块。 1.Path 模块提供了处理和转换文件路径的工具。 path模块提供了parse方法：将完整路径中各个部分解析出来。root是当前模块根路径，dir是当前模块的文件夹位置，base是模块名字，ext是模块后缀 const path = require("path"); console.log(path.parse(__filename)); //控制端显示 { root: 'D:\

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

js的同步执行

本作者：想花

07-28

5788

几个知识点代码中的异步、同步概念异步是代码中的多个代码块同时执行，没有先后顺序。同步是按照代码的上下左右顺序，从上往下执行，从左往右执行。执行完上一行的代码才会执行下一行。异步同步的命名方式貌似是根据cpu的时钟顺序来命名的。线程b的执行依赖于线程a执行结束，就是说线程a结束时间和线程b开始时间是一样的即同步时间。线程a和b若没有先后那么线程a和b的执行时间也没必要一致，即异步时间浏览器或者nodejs执行js代码机制因为前端页面的大部分动作依赖于js代码，通常我们使用Goo

同步和异步是两种不同的程序执行方式

最新发布

qq_35915504的博客

09-10

615

同步和异步各有其适用场景。同步操作简单直观，适合需要即时结果的简单任务。异步操作虽然可能增加代码复杂性，但能显著提高程序的效率和响应性，特别是在处理可能耗时的操作时。在现代web开发中，异步编程已成为处理网络请求、文件I/O等操作的标准方式。同步和异步是两种不同的程序执行方式，它们在处理任务时有很大的区别。

JavaScript系列——同步与异步

01-05

1831

如果此时消息队列，前面还有消息，那么会将点击事件的消息排在后面，等待前面消息处理完成才处理这个消息，并调用相应的回调函数。，等待接口getData 函数执行完resolve语句，代码才会继续往下执行，如果一直没有调用resolve或者reject，那么，就会一直等待，不会执行下面的语句。上面的代码中，getData 函数里面，我们返回一个Promise 的实例对象，其中传入一个回调函数，参数为resolve, reject，当我们接口。因为cb()，也是延迟0秒，因此先被添加到消息队列。

js中的同步执行

qq3892997的博客

05-17

5847

async function aaa(xxx){ 如果aaa方法返回的不是一个promise对象那么就需要在使用then方法的调用方法定义上加上 async使它返回一个promise默认，这样就可以使用then了，否则会报错 } aaa(xxx).then(function(data){ data是aaa方法的返回值，也就是这个方法体一定会等aaa这个方法执行完毕之后再执行 }); ...

js代码同步执行

w19981225的博客

04-18

4152

【代码】js代码同步执行。

js 同步与异步

Tianxiaoxixi的博客

04-17

4083

js 同步与异步

JavaScript 系列笔记——BOM（叄）

浮幻的博客

08-13

1192

JavaScript 系列笔记——BOM，确定不点进来瞧瞧？

JavaScript学习笔记(一) JS基础+DOM+BOM

kianagrow的博客

05-04

372

1. JavaScript简介 1.1 JavaScript 是什么 JavaScript 是一种运行在客户端的脚本语言（Script 是脚本的意思）脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行现在也可以基于 Node.js 技术进行服务器端编程 1.2 JavaScript 的作用 ① 表单动态校验（密码强度检测）（ JS 产生最初的目的） ② 网页特效 ③ 服务端开发(Node.js) ④ 桌面程序(Electron) ⑤ App(Cordova).

计算机组成原理学习笔记——控制器

2401_84435555的博客

05-04

966

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】`，又称隐式编码。可进一步缩短微指令字长，但因为削弱了微指令的并行控制能力，因此通常作为字段直接编码方式的一种辅助手段。

js中的同步和异步

josonho

11-26

313

单线程的概念如果大家熟悉java，应该都知道，java是一门多线程语言，我们常常可以利用java的多线程处理各种各样的事，比如说文件上传，下载等，而JavaScript是否也可以支持多线程呢？答案是否定的，JavaScript是一门单线程语言，因此，JavaScript在同一个时间只能做一件事，单线程意味着，如果在同个时间有多个任务的话，这些任务就需要进行排队，前一个任务执行完，才会执行下一个...

Javascript同步与异步

醒醒只想醒醒

05-31

932

Javascript同步与异步 JS是单线程 JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为Javascript这门脚本语言诞生的使命所致——JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个务。这样所导致的问题是∶如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

JS 同步执行

wtnu200的专栏

12-19

669

$.ajax({ type: "POST", async: false, url: "../Ashx/GetWXInfo.ashx", data: { "action": "getwxuserinfo", "wxusername":

代码的同步和异步执行

gaofen100

11-06

225

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> </head> &am

JavaScript 同步和异步

bleeding_sky的博客

02-06

176

前言 When we learn a new technology,we need to know what it is,why we learn it and how to use it best JavaScript的异步问题，是一个老生常谈的问题了。无论是在我们的面试中，还是在我们的实际开发中，如果你要使用JavaScript这门语言，那么你就无法避免JavaScript的异步。对...

js同步执行、异步执行和同步中的异步执行

神zhi殇的博客

01-22

1945

参考： https://blog.csdn.net/qq_36117508/article/details/81609913 1.JS 执行机制是单线程。 2.JS的Event loop（事件循环）是JS的执行机制，我们先了解到JS任务的执行分类为：同步任务和异步任务。按照这种的分类方式JS的执行机制是：首先，判断JS是同步还是异步，同步进入主线程，异步进入Event table。其次，...

深入理解 JS 引擎执行机制（同步执行、异步执行以及同步中的异步执行）

01-22

1649

首先明确两点： 1.JS 执行机制是单线程。 2.JS的Event loop是JS的执行机制，深入了解Event loop，就等于深入了解JS引擎的执行。单线程执行带来什么问题？在JS执行中都是单线程执行，所以代码的执行可以说是自上而下，如果前一段的代码出现问题，就会导致下一段代码无法执行，对于用户而言就是卡死现象，所以在JS执行机制引出了异步执行操作。那异步能解决...

尚硅谷：封捷 JavaScript 学习笔记详解与实战

"《尚硅谷》封捷编著的《JavaScript学习笔记》是一本针对JavaScript初学者和进阶者的重要参考资料。该书首先介绍了JavaScript的基本概念，强调了它作为一种客户端脚本语言的重要性，特点是动态、弱类型和基于原型，...