Javascript之UI线程与性能优化

在浏览器中,Javascript执行与UI更新是发生在同一个进程(浏览器UI线程)中的。UI线程的工作基于一个简单的队列系统,任务会被保存到队列中直到进程空闲时被提取出来执行。所以Javascript的执行会阻塞UI更新;反之,UI更新也会阻塞Javascript的执行。给用户的表现就是浏览器在工作时短暂或长时间失去反应,用户的操作不能及时得到响应。而UI线程的阻塞很多时候是由于我们要在代码里进行长时间的脚本运算,超过了浏览器限制,导致浏览器失去响应,冻结用户界面。

所以,编码时对于耗时较长的运算我们不得不考虑UI线程的问题

3、长时间运行脚本限制

 1 var fibonacci = (function() {
 2     var cache = [1, 1];
 3     var fib = function(n) {
 4         if (n > 1) {
 5             for (var i = cache.length; i <= n; i++) {
 6                 cache[i] = cache[i - 1] + cache[i - 2];
 7             }
 8         }
 9         return cache[n - 1];
10     };
11     return fib;
12 })();

还是上面使用Memoization技术实现的fibonacci函数,执行fibonacci(10000000),由于运算时间长,触发了浏览器长时间运行脚本限制,UI线程被阻塞了。所以,迭代中有大规模运算,100ms内完成不了的任务可以进行拆分,让javascript短暂让出UI线程控制权,以执行其他任务。

要短暂让出UI线程控制权,可以使用setTimeout。

setTimeout的时间精度:
javascript中定时器是有时间精度的, IE9(非充电模式)、IE8及其以下版本的时间精度是15.6ms;IE9(充电模式)下是4ms;其他浏览器一般也是4ms,低于4ms会降低电池使用寿命。所以,setTimeout(fn, 0)并非马上执行的,其执行时机取决于时间精度。

为了解决setTimeout在不同浏览器的时间精度问题,W3C因此引入了新的setImmediate()函数。setImmediate与setTimeout类似,setImmediate会在UI线程空闲时将任务插入到队列并执行,我们不再需要关心时间精度的影响。并且,setImmediate执行起来比setTimeout(fn, 0)要快。

时间: 2024-10-18 02:38:24

Javascript之UI线程与性能优化的相关文章

javascript JavaScript强化教程——DOM编程性能优化

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 ——DOM编程性能优化 DOM的访问与修改访问DOM元素是有代价的——修改元素侧更为昂贵,因为他会导致浏览器重新计算页面的几何变化.当然,最坏的情况是在循环中访问或修改元素,尤其是对HTML元素几何循环操作.为了让你对DOM编程带来的性能问题有个量化的了解,请看下面的简单实例: function innerHTMLLoop(){ for(var count = 0;count<15000;count++)

Android Studio学习随笔-UI线程阻塞以及优化

我们在使用手机的时候,经常会遇到一个问题:先是卡死,然后跳出该程序无响应,是否关闭的提示(当然有可能是我们手机性能太差=.=)这是因为线程的阻塞引起的,在这里我讲述一下UI线程,一般处理程序会在UI线程中执行耗时操作,这回导致UI线程阻塞,当UI线程阻塞,屏幕会出现卡死,用户体验会变得非常差,当线程阻塞超过5s,android系统可能进行干预,弹出对话框询问是否关闭.那如何解决呢? 解决方案一:创建一个新线程 我在UI视图中创建了一个button和一个textView Button button

【插件式框架探索系列】使用多UI线程提升性能

了解WPF线程模型的都知道,UI线程负责呈现和管理UI,而UI元素(派生自 DispatcherObject)只能由创建该元素的线程来访问,这就导致了一些耗时的UI操作将影 响到整个应用程序性能,未响应及漫长的等待有时会令人抓狂,而UI线程一度成为了不可 越逾的鸿沟.对于框架来说,一个插件的行为不应该影响到其它插件及整个平台的稳定性,后来在看了 <Running WPF Application with Multiple UI Threads>和<DispatcherObject与WPF

近期业务需要所引发的性能优化问题,浅谈线程池性能优化

线程池对于性能优化无处不在 1.楼主在平时产品开发过程中所遇到的性能问题,特别是最近特别流行的微服务架构. web - java - 底层数据源(python亦或者opensatck),对于这种前后台分离的场景 无时无刻会存在对于业务场景需要对同一数据源进行百次,千次的重复调用过程. 性能方面就会出现接口延迟,过慢,超时等情况 下面就楼主最近遇到的一个业务场景加以举例说明:做云计算相关的想必都是知道,我们在为客户提供单板的过程中(也就是物理机):会对众多的单板进行管理,这里我们就引进主机组: 主

10 UI线程阻塞及其优化

1.button1移动30次的小动画: Ui_thread01Activity.java: public class Ui_thread01Activity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setCon

javascript最佳实践,包含性能优化、编码实践等。

昨天跳过<javascript高级程序设计>前面几章书的内容,直接跳到最佳实践那一章,然而那一张说的又和我在实习的时候的实践,有很大的关系,因此我就觉得应该整理出来,分享一下,毕竟还是挺好的一部分. 一.编写可维护的代码 可维护的代码就有一些特征: (1)可理解性 (2)直观性 (3)可适应性 (4)可拓展性 (5)可调试性   二.代码约定        1.可读性:代码缩进大小为4个空格 需要进行注释的地方: (1)函数和方法:如函数的目的和用于完成任务所可能使用的算法. (2)大段代码:

Android性能优化之使用线程池

在写程序时有些异步程序只执行一遍就不需要了,为了方便经常会写下面的代码 new Thread(new Runnable() { @Override public void run() { // TODO Auto-generated method stub } }).start(); 这样new出来的匿名对象会存在一些问题 1.由于是匿名的,无法对它进行管理 2.如果需要多次执行这个操作就new多次,可能创建多个,占用系统资源 3.无法执行更多的操作 使用线程池的好处 1.可以重复利用存在的线程

CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

目录 一.浏览器兼容 1.1.概要 1.2.浏览器内核 1.3.浏览器市场份额(Browser Market Share) 1.4.兼容的一般标准 1.5.CSS Reset 1.6.CSS Hack 1.6.1.条件注释法 1.6.2.样式内属性标记法 1.6.3.选择器前缀法 1.7.文档模式 (X-UA-Compatible) 1.8.javascript兼容 二.前端性能优化 2.1.概要 2.2.减少HTTP请求数量 2.2.1.图片地图 2.2.2.精灵图片(Sprite) 2.2.

JavaScript 如何工作:渲染引擎和性能优化技巧

翻译自:How JavaScript works: the rendering engine and tips to optimize its performance 这是探索 JavaScript 及其构建组件专题系列的第 11 篇.在识别和描述核心元素的过程中,我们分享了在构建 SessionStack 时使用的一些经验法则.SessionStack 是一个需要鲁棒且高性能的 JavaScript 应用程序,它帮助用户实时查看和重现它们 Web 应用程序的缺陷. 当构建 Web 应用程序时,