JavaScript性能优化技巧之函数节流
函数节流技术的主要思路是,通过一个定时器,阻断连续重复的函数调用。对于我们自己内部使用的函数,这通常意义不大,也不推荐使用这个技术,它可能会丢失对某些数据的处理。但是对于在用户界面调用的函数,却非常有意义。
函数节流技术的主要思路是,通过一个定时器,阻断连续重复的函数调用。对于我们自己内部使用的函数,这通常意义不大,也不推荐使用这个技术,它可能会丢失对某些数据的处理。但是对于在用户界面调用的函数,却非常有意义。例如一个 mousemove 或者 IE 中 resize 事件的监听函数。
这类事件监听函数往往伴随着两个主要特征:1. 短时间内连续多次重复触发 ; 2. 大量的 DOM 操作。众所周知,DOM 操作对内存和 CPU 的开销是比较大的,特别是当同时满足特征1时,往往给浏览器造成不小的压力。函数节流技术的意义在于在用户察觉范围外,降低函数调用的频率,从而提升性能。
这个技巧的大概模式如下面这样:
- var processor = {
- timeoutId: null,
- performProcessing: function(){
- // 要执行的代码
- },
- process: function(){
- clearTimeout(this.timeoutId);
- this.timeoutId = setTimeout(function(){
- processor.performProcessing();
- }, 100);
- }
- };
- //调用
- processor.process();
- performProcessing 是真正要调用的函数,而程序的入口在 process,每次进入 process,真正要调用的函数
- performProcessing 都会被延迟 100 毫秒执行,如果在此期间,process 再次被调用,则会重置前一次的计时器,
- 重新开始计时,这样保证了 performProcessing 中的代码至少要间隔 100 毫秒才会被执行一次,原理非常的简单,
- 下面这个函数也是利用这个原理,通过闭包达到了同样的目的,它接受两个参数,第一个是要真正要执行的函数,第二个是间隔的时间。
- function throttle(fn, delay) {
- var timer = null;
- return function () {
- var context = this, args = arguments;
- clearTimeout(timer);
- timer = setTimeout(function () {
- fn.apply(context, args);
- }, delay);
- };
- }
JavaScript性能优化技巧之函数节流的更多相关文章
- JavaScript 性能优化技巧分享
JavaScript 作为当前最为常见的直译式脚本语言,已经广泛应用于 Web 应用开发中.为了提高Web应用的性能,从 JavaScript 的性能优化方向入手,会是一个很好的选择. 本文从加载.上 ...
- Javascript 性能优化的一点技巧
把优秀的编程方式当成一种习惯,融入到日常的编程当中.下图是今天想到的一点Javascript 性能优化的技巧,分享一下,抛砖引玉.
- JavaScript 如何工作:渲染引擎和性能优化技巧
翻译自:How JavaScript works: the rendering engine and tips to optimize its performance 这是探索 JavaScript ...
- JavaScript性能优化
如今主流浏览器都在比拼JavaScript引擎的执行速度,但最终都会达到一个理论极限,即无限接近编译后程序执行速度. 这种情况下决定程序速度的另一个重要因素就是代码本身. 在这里我们会分门别类的介绍J ...
- 摘:JavaScript性能优化小知识总结
原文地址:http://www.codeceo.com/article/javascript-performance-tips.html JavaScript的性能问题不容小觑,这就需要我们开发人员在 ...
- JavaScript性能优化小知识总结(转)
JavaScript的性能问题不容小觑,这就需要我们开发人员在编写JavaScript程序时多注意一些细节,本文非常详细的介绍了一下JavaScript性能优化方面的知识点,绝对是干货. 前言 一直在 ...
- JavaScript性能优化篇js优化
JavaScript性能优化篇js优化 随着Ajax越来越普遍,Ajax引用的规模越来越大,Javascript代码的性能越来越显得重要,我想这就是一个很典型的例子,上面那段代码因为会被频繁使用, ...
- Python代码性能优化技巧
摘要:代码优化能够让程序运行更快,可以提高程序的执行效率等,对于一名软件开发人员来说,如何优化代码,从哪里入手进行优化?这些都是他们十分关心的问题.本文着重讲了如何优化Python代码,看完一定会让你 ...
- Python 代码性能优化技巧(转)
原文:Python 代码性能优化技巧 Python 代码优化常见技巧 代码优化能够让程序运行更快,它是在不改变程序运行结果的情况下使得程序的运行效率更高,根据 80/20 原则,实现程序的重构.优化. ...
随机推荐
- Linq入门
一.Linq需要的C#语法支持: 1.隐式变量的使用var var使用时必须初始化 var是强类型数据 2.自动属性:public string FirstName{get ;set;} 3 ...
- UITextField 设置 placeholder 的字体颜色方法
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Helvetica; color: #ff2608 } [_textField setValu ...
- zoj 3204 Connect them
最小生成树,我用的是并查集+贪心的写法. #include<stdio.h> #include<string.h> #include<math.h> #includ ...
- Number String
Number String 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4055 dp 定义状态:dp[i][j]为当strlen=i,数字结尾为j的 ...
- 关于js优化和css优化
css优化: 1.css代码的压缩. 2.css文件的合并. 3.不滥用float,因为float在渲染时计算量比较大,所以尽量减少使用float. 4.避免在html标签中写style属性. js优 ...
- UVa 679 Dropping Balls (例题 6-6)
传送门:https://uva.onlinejudge.org/external/6/p679.pdf 题意:在一颗结点带开关的完全二叉树上扔球,初始时开关为关闭状态,树的深度为D(1 <= D ...
- web前端工程师技能总结
编辑器: 1 webstorm(建议版本10.0), 2 sublimeTEXT(建议版本3), 3 dreamweaver (建议版本CS6, CC2015) 浏览器: 1 firefox 建议 ...
- LeetCode OJ 1. Two Sum
Given an array of integers, return indices of the two numbers such that they add up to a specific ta ...
- Openjudge-计算概论(A)-求分数序列和
描述: 有一个分数序列 2/1,3/2,5/3,8/5,13/8,21/13,.... 求这个分数序列的前n项之和.输入输入有一行:正整数n.输出输出有一行:分数序列的和(浮点数,精确到小数点后4位) ...
- EF Unit Of Work
BaseEntity, 所有的业务表都继承这个类,每个表的主键都是GUID, 主键名Id. public abstract class BaseEntity{ public BaseEntity() ...