js阻塞

最新推荐文章于 2024-03-06 16:44:54 发布
最新推荐文章于 2024-03-06 16:44:54 发布
阅读量968 收藏
点赞数
分类专栏： Jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45140694/article/details/116305840
版权
本文深入探讨JavaScript的单线程特性及其导致的阻塞问题。异步编程是关键，允许任务在不干扰主线程的情况下执行。当JS执行时间过长，渲染线程会等待，造成页面阻塞。解决方法包括采用异步处理，如setTimeout，以避免长时间运行的脚本阻碍页面渲染。将任务分解并适时使用异步操作，能有效提高网页性能。
摘要由CSDN通过智能技术生成

js阻塞

介绍

本文将介绍 js 阻塞的相关知识，以及解决办法

需了解的东西

1. 异步编程概念

异步是什么？
图片来自runoob.com
简单来说就是把要执行的东西在某个时间段内一块执行。

2. Js 单线程

众所周知Js 的执行是从上至下的，Js同一个时间只能做一件事。所有任务需要排队，前一个任务结束，才会执行后一个任务。 如果前一个任务耗时很长，后一个任务就会等着前面的任务执行完成再执行。

渲染线程和JS线程

两个任意一个在运行的时候，另一个都是处于等待状态。倘若不是的话，假如js修改了一个元素的属性，但是渲染进程还没渲染到该元素，那js修改属性就会失败。所以把他们定为互斥是很有必要的。

所以也就有了上面所说的页面阻塞问题，因为js线程一直卡死未结束，那渲染线程将会一直等待，所以为了避免阻塞，js代码一定要避免执行时间长，而且也推荐将js代码放在html代码之后，以防止阻塞渲染。

解决Js 阻塞问题

将一个任务分成多个任务执行。使用异步处理；

推荐使用
setTimeout(function () {
这里写要执行的代码
}, 3000);

Amazon Translator
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
js阻塞问题
qq_41801117的博客
04-06 5446
今天来聊聊前端性能问题中的js阻塞问题。 浏览器渲染机制 首先先来看看浏览器渲染机制，大致分为以下几步 1、浏览器根据服务器响应回来的html，进行解析后构建一颗DOM节点树； 2、根据css文件，构建得到CSSOM树； 3、将DOM树与CSSOM树结合，精确计算每个节点的位置、尺寸等等属性，构建出渲染树； 4、渲染至用户页面 结论：从这个我们可以看出，css不会影响DOM的解析，但是会影响DOM的渲染过程。 浏览器引擎 浏览器引擎分为渲染引擎以及js引擎，其实之前是区分这2个概念的，但是慢慢地大家发现有
js常见问题总结-阻塞渲染
nahedan的博客
08-23 1308
阻塞渲染问题 文章目录阻塞渲染问题1.测试2.head中css是否阻塞DOM渲染？3.body中的css是否阻塞DOM渲染？4.js会阻塞DOM解析和渲染吗?5.css会阻塞js的执行？6.JS 是否会触发页面渲染？7.如何引用script来缓解DOM渲染阻塞?8.一个问题：内联式script标签应该放到body标签之前或者之后是否可行？9.总结 浏览器渲染机制：解析DOM生成DOM Tree，解析CSS生成CSSOM Tree，两者结合生成render tree渲染树，最后浏览器根据渲染树渲染至页面。 1
JavaScript阻塞
bin1813的博客
09-29 4692
一、阻塞特性 《高性能JavaScript》一书中，关于第一章“Loading and Execution”，提到了无阻塞加载JavaScript技术，目的是为了提高页面呈现速度。 说到无阻塞加载JavaScript要点，我们就有必要知道，为什么在html中不管是内联JavaScript还是外联，会影响到页面的性能？ 原因是：JavaScript是单线程，在JavaS
javascript怎么成功实现阻塞
最新发布
男神的专栏
03-06 992
　　本篇内容介绍了“javascript怎么实现阻塞”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ 　　使用 setTimeout 实现 JavaScript 的阻塞 　　当我们需要在 JavaScript 中实现阻塞时，setTimeout 是一个非常常用的方法。setTimeout 可以创建一个定时器，用来在一段时间后执行指定的任务。通过设置定时器的时间参数为0，我们可以让
JavaScript阻塞及解决方法
LV0720的博客
06-29 2676
一、阻塞 出现原因是：JavaScript是单线程。 二、改善方法 1.简单但不治本的方法 将script加载放在body的最后面，这样即使脚本之间阻塞了也不影响其他资源的加载，页面已经呈现出来，不至于显得很慢。将多个相关的JavaScript文件合并为一个JavaScript文件，减少脚本之间的阻塞。 2.无阻塞技术 使用defer和async <script src="" async> <script src="" defer> async是异步执行，defer是延迟加
Javascript无阻塞加载具体方式
10-27
### JavaScript无阻塞加载具体方式 #### 概述 JavaScript是一种广泛使用的编程语言，尤其在网页开发中扮演着至关重要的角色。然而，随着网站功能的不断丰富与复杂化，JavaScript文件的数量与大小也在逐渐增加，这...
js防阻塞加载的实现方法
10-21
在传统的JavaScript加载方式中，脚本会阻塞页面的渲染，直到脚本下载并执行完成。为了避免这种情况，我们可以采取一些策略来实现JavaScript的非阻塞加载，以下是一些主要的实现方法： 1. 动态脚本标签（Dynamic ...
setInterval阻塞解决方案完整代码
03-03
前端开发中，我们会会经常使用定时器setinterval setTimeout等，但当我们离开页面时，定时器会被阻塞，导致我们再回到页面的时候定时任务会混乱运行，为些我的解决方案写了个简单demo,希望对你有所帮助
完美解决JS文件页面加载时的阻塞问题
10-20
JS文件页面加载阻塞问题指的是在HTML文档加载过程中，如果遇到同步的JavaScript脚本文件，浏览器会等待该脚本执行完成后才会继续渲染页面，这个过程会阻塞页面的渲染，从而降低用户体验。为了解决这个问题，文章介绍...
浅谈css动画是否会被js阻塞
11-19
文档中用图表清晰地展示了在JavaScript执行期间，动画的确出现了停滞，说明了在JavaScript阻塞主线程时，依赖于主线程的CSS动画会受到影响。 然而，文档中也提到使用`transform`属性实现的动画能够较好地避免这一...
JS单线程引起的阻塞和解决办法
qq_41684071的博客
07-14 2194
对于这段代码 for(var i = 0; i < 3; i++) { setTimeout(function(){ console.log(i); }, 1000); } 输出的结果是3 3 3；那么为什么是3 3 3，而不是0 1 2呢？ 原因是 js 是单线程，js引擎会维护一个执行栈（用来保存同步任务）和一个消息队列（用来保存异步任务），只有当执行栈为空时才会执行消息队列里的任务，for循环保存在执行栈里，setTimeout保存在消息队列里，在for的时候，js引擎在消息队列
js阻塞线程方法
诚实可靠小郎君的博客
08-07 4625
var timeOutFunc = () => { return new Promise((a, b) => { setTimeout(async () => { console.log(2) await timeOutFunc() console.log(1) }, 1000); }); } await timeOutFunc() console.log(3) 执.
js进线程 同异步 阻塞
wyzqhhhh的博客
04-08 56
在编程语言中，有的语言是多线程的，有的是单线程的，比如的。也就是说js就像一条流水线，只能在这仅仅一条流水线上干活，不能开辟多个线程；而Java可以通过类继承在开辟个进程。
关于 js 阻塞
Luckyzhoufangbing的博客
09-12 1355
1. 阻塞后续DOM的解析 如果后续DOM节点加载完了，结果这个js执行一大堆把这个DOM节点删除了，js 就白解析了，做了无用功，所以 js 会阻塞后续DOM的解析 2. 阻塞后续js的执行 依赖关系，一个依赖一个 3. 阻塞页面渲染 js 也可以更改DOM的样式、值等等，所以避免做无用功，阻塞DOM渲染 这个场合经常遇见，如果js报错了，页面白屏了 ...
Js中for循环的阻塞机制
weixin_30415113的博客
12-15 936
Js阻塞机制，跟Js引擎的单线程处理方式有关，每个window一个JS线程。所谓单线程，在某个特定的时刻只有特定的代码能够被执行，并阻塞其它的代码。 由于浏览器是事件驱动的（Event driven），因此浏览器中很多行为是异步（Asynchronized）的，很容易有事件被同时或者连续触发。当异步事件发生时，会创建事件并放入执 行队列中，等待当前代码执行完成之后再执行这些代码，如鼠标...
JS以及CSS对页面的阻塞
weixin_34248118的博客
06-22 169
一、JS阻塞 所有的浏览器在下载JS文件的时候，会阻塞页面上的其他活动，包括其他资源的下载以及页面内容的呈现等等，只有当JS下载、解析、执行完，才会进行后面的 操作。在现代的浏览器中CSS资源和图片p_w_picpath资源是并行下载的，在IE6中默认的并行的加载数目是2个，在IE6以后以及其他的浏览器中的默认的并行加载数目是6个。在浏览器从服务器接收到HTML文档后，并...
jQuery 复制文本内容到剪贴板
罗小文
04-01 6326
jQuery 实现将文本复制到剪贴板
js 阻塞封装
05-24
在 JavaScript 中，阻塞指的是代码执行时，当前的任务没有完成，导致后续的任务无法执行。为了解决这个问题，可以使用异步编程来避免阻塞。在封装时，可以使用 Promise 或者 async/await 等方式来实现异步编程。 下面是一个使用 Promise 封装的阻塞代码示例： ```javascript function fetchData() { return new Promise((resolve, reject) => { // 模拟数据请求延迟 setTimeout(() => { const data = { name: "John", age: 30 }; resolve(data); }, 1000); }); } fetchData().then((data) => { console.log(data); }); ``` 在上述示例中，fetchData 函数返回一个 Promise 对象，其中包含了异步操作的结果。通过 then 方法，可以获取异步操作返回的数据，而不会阻塞后续代码的执行。 另外，也可以使用 async/await 封装异步代码。下面是一个使用 async/await 封装的示例： ```javascript async function fetchData() { return new Promise((resolve, reject) => { // 模拟数据请求延迟 setTimeout(() => { const data = { name: "John", age: 30 }; resolve(data); }, 1000); }); } async function fetchAndLogData() { const data = await fetchData(); console.log(data); } fetchAndLogData(); ``` 在上述示例中，fetchData 函数返回一个 Promise 对象，在 fetchAndLogData 函数中使用 await 关键字等待异步操作的结果。通过这种方式，可以实现非阻塞的异步编程。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值