首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

网站性能优化(四)利用setTimeout延迟代码执行

一般,可以通过控制JavaScript执行时间(不超过100毫秒)来尽快更新UI,但是,总是有可能需要处理比较复杂的JavaScript程序,这时,可以采用定时器安排代码延迟执行,其能够帮助你把长时间运行的脚步分解成一系列的小任务...多个异步事件是无序执行的的,除了setTimeout/setInterval可以指定延迟时间,其他异步事件都无法确定何时被加入到“任务队列”中。 下面我们专门研究下setTimeout。...根据延迟时间的不同,以及执行setTimeout的时间点,会确定异步事件的“任务队列”中的排队顺序。...小结 根据event loop原理,利用setTimeout可以延迟代码执行,并且不阻塞UI更新。...如果一个JavaScript执行时间非常长,那么我们可以考虑用定时器分解任务,不过,必须满足下面两个条件才适合用setTimeout: 处理过程不需要同步 数据不需要按顺序处理 伪代码如下: function

1.1K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    iOS dispatch_after延迟执行导致延迟dealloc

    我们新建一个NewViewController,在开始的ViewController写如下代码 - (void)viewDidLoad { [super viewDidLoad];...image.png 结果说明我们dismiss的时候,newVC还没有被释放,dealloc方法在dispatch_after延迟方法执行之后才会走,原因就是dispatch_after强引用了self...image.png 当我们用weak修饰self时,dispatch_after并没有强引用self,所以我们dissmiss时,dealloc立马就会走,然后10s后,dispatch_after的执行函数还是会执行...使用注意 虽然dispatch_after里直接调用self不会造成循环引用,但当我们dispatch_after延迟时间过长的时候,需要考虑是否要及时释放当前对象,如果需要,尽量使用weakSelf这种方式...,如果真有需要用到self完成一些操作再释放的需求,可以按需编写代码

    2K20

    Vue.js中的延迟加载和代码拆分

    在本系列中,我将深入研究我们在实践中使用的Vue性能优化技术,并且您可以在Vue.js应用程序中使用它们,使应用程序快速加载并顺利执行。...有关案例统计,延迟2秒导致每位访客的收入损失4.3%。 延迟加载 那么当我们仍然需要添加新功能并改进我们的应用程序时,我们如何削减budle包大小?答案很简单 - 延迟加载和代码分割。...顾名思义,延迟加载是一个懒惰地加载应用程序的部分(块)的过程。换句话说 - 只有在我们真正需要它们时加载它们。代码拆分只是将应用程序拆分为多个延迟加载的代码块的一种处理方式。 ?...当只需要几个部分时,在每个页面加载时下载,解析和执行整个包的所有内容都是浪费。 延迟加载允许我们拆分捆绑包并仅提供所需的部分,这样用户就不会浪费时间下载和解析不会使用的代码。...例如这段代码: ? 在DOM中需要渲染组件之前,组件将不会加载。想要加载,只要v-if值更改为true即可。 总结 延迟加载,是使您的Web应用程序更高效并减少js bundle大小的最佳方法之一。

    7.8K10

    JS代码是怎么被执行

    JS代码是怎么被执行的 我们看到的JS都是在浏览器中或者在Node环境中运行的对吧,那不论是浏览器还是Node,负责编译并且解释执行JS代码的都是一个叫做V8的东西,所以这个问题其实就是V8引擎是怎么去运行...JavaScript的,而js和C/C++/Go/Rust这类静态编译的语言不同,这些静态编译的语言通过编译器把代码变成机器码,然后在机器上运行,js呢在编译后会生成字节码,然后在v8的虚拟机上运行字节码...字节码是介于AST和机器码的一种代码,需要通过解释器转换成机器码后执行。...在执行字节码的过程中,如果发现有热点代码(HotSpot),比如一段代码被重复执行多次,这种就称为热点代码,那么后台的编译器 TurboFan 就会把该段热点的字节码编译为高效的机器码,然后当再次执行这段被优化的代码时...,只需要执行编译后的机器码就可以了,这样就大大提升了代码执行效率。

    3.1K40

    使用lambda编程之延迟执行

    使用lambda表达式的主要原因是,将代码执行延迟到一个合适的时间点。 所有的lambda表达式都是延迟执行的。毕竟,如果你希望立即执行一段代码,那就没有必要使用lambda表达式了。...延迟执行代码的原因有很多,例如: 在另一个线程中运行代码 多次运行代码 在某个算法的正确时间点上运行代码(例如排序中的比较操作) 当某些情况发生时运行代码(按钮点击,数据到达等) 当你使用lambda进行编程时...只有再需要的时候才运行代码,这是使用lambda表达式的一种情况。惯用的方法式将这段代码包装成一个无参数的lambda表达式:()->”x:”+x+”,y:”+y。...封装成一个方法,来执行延迟记录日志就是下面这样了。...原文出自:https://www.fastmeteor.com/2017/12/20/使用lambda编程之延迟执行

    1.7K80

    【iOS 开发】延迟执行方法小总结

    当需要实现类似“轮询”这种操作的时候,我们可能会希望有一个“被放缓了的” for 循环 —— 即当某次操作执行后,稍等一下再去执行下一次操作。...open func cancelPerformSelectors(withTarget target: Any) } 这是系统提供的 API,其中最简单的第 2 个方法可以通过指定方法、参数、延迟时间来实现延迟调用...优点:使用简单、自带根据 target 取消调用的机制 并且可以指定对象、方法来取消延迟调用 使得这个方法可以完成一些复杂的延迟调用机制 缺点:系统帮你自动完成了很多操作,使得它不像定时器(NSTimer...(closure) 执行代码 ---- asyncAfter(deadline: DispatchTime, qos: DispatchQoS = default, flags: DispatchWorkItemFlags...,可以在 1 秒之后,通过主线程执行 print。

    1.3K20

    Linq基础知识之延迟执行

    Linq中的绝大多数查询运算符都有延迟执行的特性,查询并不是在查询创建的时候执行,而是在遍历的时候执行,也就是在enumerator的MoveNext()方法被调用的时候执行,大说数Linq查询操作实例方法返回的都是...输出结果一目了然,当创建完查询之后添加的元素也包含到了结果集中,说明查询并没有立即执行,而是在使用foreach遍历之后才执行,这种特性就是Linq的延迟执行....重复执行 使用导致延迟执行的查询操作符进行查询操作,并且两次或者两次以上的使用foreach,会导致查询重复执行,重复执行在以下两种情况下,绝对是不好的: 1、当需要在一个确定点保存查询的结果时,因为延迟执行并不会在创建查询之后马上得到查询结果集...,所以必须使用上面提到的ToArray、ToList等方法使查询立即执行得到结果集并进行存储,代码如下: List list=new List(); list.AddRange(new...延迟执行的实现原理 查询运算符通过返回装饰者sequence(decorator sequence)来支持延迟执行

    1.8K100

    JS --- 延迟加载的几种方式

    标题:JS延迟加载,也就是等页面加载完成之后再加载 JavaScript 文件。    JS延迟加载有助于提高页面加载速度。...用途:表明脚本在执行时不会影响页面的构造。也就是说,脚本会被延迟到整个页面都解析完毕之后再执行。   在 元素中设置 defer 属性,等于告诉浏览器立即下载,但延迟执行。 <!...HTML5 规范要求脚本按照它们出现的先后顺序执行。在现实当中,延迟脚本并不一定会按照顺序执行。 defer属性只适用于外部脚本文件。支持 HTML5 的实现会忽略嵌入脚本设置的 defer属性。...缺点:不能控制加载的顺序 3.动态创建DOM方式 //这些代码应被放置在标签前(接近HTML文件底部) function...",function(){//回调函数,成功获取文件后执行的函数 console.log("脚本加载完成") }); 5.使用setTimeout延迟方法 6.让JS最后加载

    4.8K20

    js --- 执行机制

    JS为什么是单线程的?  JS最初被设计用在浏览器中,那么想象一下,如果浏览器中的JS是多线程的。...process1 删除了该dom,而process2 编辑了该dom,同时下达2个矛盾的命令,浏览器究竟该如何执行呢? 2 JS为什么需要异步?...如果JS中不存在异步,只能自上而下执行,如果上一行解析时间很长,那么下面的代码就会被阻塞。 对于用户而言,阻塞就意味着"卡死",这样就导致了很差的用户体验 3 JS单线程又是如何实现异步的呢?   ...是通过的事件循环(event loop),理解了event loop机制,就理解了JS执行机制。...,而是延迟了一段时间,满足一定条件后才去执行的,这类代码,我们叫异步代码

    6.3K20

    JS执行机制

    JS执行机制 以下代码执行的结果是什么?...console.log(1); setTimeout(function () { console.log(3); }, 1000); console.log(2);  以下代码执行的结果是什么...单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。这样所导致的问题是: 如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。...于是,JS 中出现了同步任务和异步任务。 同步 ​   前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。...他们的本质区别: 这条流水线上各个流程的执行顺序不同。 1.3 JS执行机制(事件循环) 1. 先执行执行栈中的同步任务。 2. 异步任务(回调函数)放入任务队列中。 3.

    7.4K20
    领券