js是单线程的，所以有些大量计算的操作会占用线程资源，导致页面卡住。

今天遇到这样一个场景，选择一个下拉框之后，对数据进行筛选，这个过程中有大量计算，点了selecte的option之后，option不隐藏，一直卡在那里，直到筛选计算完成。

这个体验非常差，于是想，能不能接触当前线程的占用，让交互看起来流畅些？

试着用刚刚触发的时候显示一个loading，然后用   setTimeout(func,0),  把计算的操作放到线程任务队列末尾，这样做果然页面操作不再卡顿了

通过setTimeout来取消因大量计算造成的网页卡顿的更多相关文章

  1. 手机页面或是APP中减少使用setTimeout和setInterval，因为他们会导致页面卡顿

    1.setTimeout致使页面的卡顿或是不流畅,打乱模块的生命周期 ,还有setTimeout其实是很难调试的. 当一个页面有众多js代码的时候,setTimeout就是导致页面的卡顿. var s ...

  2. setTimeout用于取消多次执行mouseover或者mouseenter事件,间接实现hover的悬停加载的效果.

    Mouseenter在鼠标滑上去不会对其子元素也发生监听, Mouseover在鼠标滑上去会对其子元素发生监听. 所以对于事件的监听,我们要看需求,这里是对父元素的监听,不需要对子元素做监听.就用mo ...

  3. 利用JS写一个计算平方的网页

    <!-- 计算一个数的平方并显示出来 --> <!DOCTYPE html> <html> <head> <meta charset=" ...

  4. 【转】JavaScript 异步进化史

    前言 JS 中最基础的异步调用方式是 callback,它将回调函数 callback 传给异步 API,由浏览器或 Node 在异步完成后,通知 JS 引擎调用 callback.对于简单的异步操作 ...

  5. JavaScript 异步进化史

    前言 JS 中最基础的异步调用方式是 callback,它将回调函数 callback 传给异步 API,由浏览器或 Node 在异步完成后,通知 JS 引擎调用 callback.对于简单的异步操作 ...

  6. 性能优化九之UI卡顿分析

    在前一篇博客中提到内存抖动和耗时复杂的计算会导致UI卡顿. 那为什么内存抖动会导致UI卡顿呢? 其实在 性能优化一之内存与垃圾回收器 这篇文章中已经有所提及. 这里来详细说明一下: 渲染功能是应用程序 ...

  7. 基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件

    目录 1. 前言 2. 关于vue-simple-uploader 3. 基于vue-simple-uploader封装全局上传组件 4. 文件上传流程概览 5. 文件分片 6. MD5的计算过程 7 ...

  8. 团队项目（第三周）—GG队

    需求改进&系统设计 队员 学号 叶尚文(队长) 3116008802 蔡晓晴 3216008808 杜婷萱 3216008809 龙剑初 3116004647 于泽浩 3116004661 一 ...

  9. Python学习笔记014——生成器Generator

    1 生成器定义 在Python中,一边循环一边计算的机制,称之为生成器(generator). 生成器是一个迭代器. 含有yield语句的函数是生成器函数,该函数被调用时返回一个生成器对象(yield ...

随机推荐

  1. JavaFX 教程资料收集

    1. JavaFX中文资料 http://www.javafxchina.net/blog/docs/tutorial1/ 2. JavaFX入门教程 http://www.xrpmoon.com/c ...

  2. Jsonp原理就是这么简单

    原理就是:包裹数据的js数据文件,自动执行,找到目标函数,通过传参,把数据注入进去. 当你打开本篇博文,证明你已经大体知道了Jsonp的作用了. 但如果需要我介绍一下,我也可以简单介绍: 简单说,就是 ...

  3. pythonchallenge 解谜 Level 1

    得到第一关地址后可以进行第一关的解析了. 看起来好神秘的样子.但是也就是把字母 k 变成 m , o 变成 q ,e 变成 g.将字母对应的ASCII的值+2就行了. #-*- coding:utf- ...

  4. android之Handler机制

    简单例子开头: 网络http请求网站源码数据并显示 注意点:访问网络需要加Internet权限: android.permission.INTERNET 简单的步骤: 使用UrlConnection请 ...

  5. 关于phpstrom 的一些实用小技巧与擦件

    1.界面中文方框问题 Settings->Appearance中Theme 设置 Windows勾选Override default fonts by (not recommended),设置字 ...

  6. PHP基础知识之对象复制

    对象的复制默认为浅复制 进行深复制的方法为:在类中定义魔法方法__clone(),类的对象复制时,会自动调用 __clone方法,在 __clone方法中可以进行各种复制对象的个性化 class My ...

  7. weblogic 12c web部署注意的问题

    废话不多说下面讲介绍他的具体部署web应用,应该注意哪些问题. 准备工作: Java JDK 安装及环境配置 http://jingyan.baidu.com/article/ff41162596a7 ...

  8. '-[__NSCFString stringFromMD5]: unrecognized selector sent to instance 0x14d89a50'

    类型:ios 问题描述: 导入百度地图 然后在模拟器运行可以,真机测试不行: 报错: '-[__NSCFString stringFromMD5]: unrecognized selector sen ...

  9. WebView解析

    WebView解析   WebView是一个基于Webkit的,相当于内置浏览器的强大功能的组件,WebView的使用这么分四步说明:添加组件,加载资源,属性设置,辅助功能. 一.WebView的添加 ...

  10. Visual Studio LightSwitch

    LightSwitch是一个基于模板的自动化开发Silverlight和HTML5应用程序的工具,不同于一般的基于数据字典,配置生成的应用程序的工具,因为LightSwtich提供的所有模板都是可以扩 ...