高性能javascript学习笔记系列(4) -算法和流程控制
参考高性能javascript
for in 循环 使用它可以遍历对象的属性名,但是每次的操作都会搜索实例或者原型的属性 导致使用for in 进行遍历会产生更多的开销
书中提到不要使用for in 遍历数组
1 首先for in 会查找原型链上的属性
var arr = [1,2,3];
Array.prototype.a = "test"; for(var i in arr) {
console.log(i);
console.log(typeof i);
}//在这里例子中会发现属性的字段是string 并且a也会作为结果输出 (可以通过hasOwnProperty()进行过滤原型的属性)
var arr = [1,2,3];
Array.prototype.a = "test";
for(var i = 0,len = arr.length;i < len;i+=1) {
console.log(i);
console.log(typeof i);
}//在这个例子中每个i都是number 并且a不会作为结果输出
如何提高循环的整体性能
(1)减少或者优化每次迭代处理的事务 缓存循环中不变的值(不一定是数组的长度 就是不要在循环中不断的去查找一个固定的值 ) 如果数组项的顺序与执行的任务无关,可以使用从后往前处理这种方案,这样就减少了每次跟迭代次数进行比较的这次操作,也优化了性能
(2)减少迭代的次数
在一次迭代中执行多次迭代 能从整体上减少循环迭代的次数
var iterations = Math.floor(items.length/8),
startAt = items.length%8,
i = 0;
console.time("a");
do {
switch(startAt) {
case 0: process(items[i++]);
case 7: process(items[i++]);
case 6: process(items[i++]);
case 5: process(items[i++]);
case 4: process(items[i++]);
case 3: process(items[i++]);
case 2: process(items[i++]);
case 1: process(items[i++]);
}
startAt = 0;
} while(--iterations);
在使用这种模式的情况下 在次数不够高的时候(比如10000) 我发现这种模式的速度并没有比传统的循环处理快 反而慢 当数量级上来(100000)的时候 的确提升了性能
优化条件语句
根据情景选择合适的条件语句
(1)通常来说if else更适合两个离散值或者几个不同的值域的情况 当条件多于两个离散值的时候,switch语句是更加的选择
(2)优化if else 确保最可能出现的分支放在首位 在if else 的分支中在进行if else的判断 思路都是尽快到达条件的分支
使用Memoization
思路就是缓存之前一次计算的结果供下一次计算使用,在递归算法中常用的技术
function factorial(n) {
if(n == 0) {
return 1;
} else {
return n*factorial(n-1);
}
}
console.time("a");
factorial(16);
factorial(11);
factorial(10);
memfactorial(10);
memfactorial(10);
memfactorial(10);
memfactorial(10);
console.timeEnd("a");
function memfactorial(n) {
if(!memfactorial.cache) {
memfactorial.cache = {
"0":1,
"1":1
};
}
if(!memfactorial.cache.hasOwnProperty(n)) {
memfactorial.cache[n] = n*memfactorial(n-1);
}
return memfactorial.cache[n];
}
console.time("b");
memfactorial(16);
memfactorial(11);
memfactorial(10);
memfactorial(10);
memfactorial(10);
memfactorial(10);
console.timeEnd("b");
由于我们缓存了之前计算的结果 在后面多次需要这个结果的时候 会很大程度的提高性能(我发现当不是多次需要之前的计算的结果的时候 性能反而没有提升 js引擎性能的提高 和属性的查找也需要耗费一些性能)
高性能javascript学习笔记系列(4) -算法和流程控制的更多相关文章
- 高性能javascript学习笔记系列(2)-数据存取
参考 高性能javascript Tom大叔深入理解javascript系列 相关概念 1.执行上下文 当控制器转到ecmascript可执行代码的时候,就会进入一个执行上下文,执行上下文是以堆栈 ...
- 高性能javascript学习笔记系列(1) -js的加载和执行
这篇笔记的内容主要涉及js的脚本位置,如何加载js脚本和脚本文件执行的问题,按照自己的理解结合高性能JavaScript整理出来的 javascript是解释性代码,解释性代码需要经历转化成计算机指令 ...
- 高性能javascript学习笔记系列(6) -ajax
参考 高性能javascript javascript高级程序设计 ajax基础 ajax技术的核心是XMLHttpRequest对象(XHR),通过XHR我们就可以实现无需刷新页面就能从服务器端读 ...
- 高性能javascript学习笔记系列(5) -快速响应的用户界面和编程实践
参考高性能javascript 理解浏览器UI线程 用于执行javascript和更新用户界面的进程通常被称为浏览器UI线程 UI线程的工作机制可以理解为一个简单的队列系统,队列中的任务按顺序执行 ...
- 高性能javascript学习笔记系列(3) -DOM编程
参考 高性能javascript 文档对象模型(DOM)是独立于语言的,用于操作XML和HTML文档的程序接口API,在浏览器中主要通过DOM提供的API与HTML进行交互,浏览器通常会把DOM和ja ...
- 高性能JavaScript笔记二(算法和流程控制、快速响应用户界面、Ajax)
循环 在javaScript中的四种循环中(for.for-in.while.do-while),只有for-in循环比其它几种明显要慢,另外三种速度区别不大 有一点需要注意的是,javascript ...
- golang学习笔记(二):流程控制
欢迎访问我的博客和github! 今天咱们把烦人的事情丢一丢,继续来学习go的基础知识. 这篇文章记录go语言的流程控制和更多类型. 流程控制 for Go 只有一种循环结构:for 循环. 基本的 ...
- JavaScript学习笔记系列2:Dom操作(一)
一.什么是Dom? DOM------>Document Object Model 直接翻译就是文档对象模型. DOM------>定义了表示和修改文档所需的对象.这些对象的行为和属性以及 ...
- 高性能javascript 学习笔记(1)
加载和运行 管理浏览器中的javascript代码是个棘手的问题,因为代码运行阻塞了其他浏览器处理过程,诸如用户绘制,每次遇到<script>标签,页面必须停下来等待代码下载(如果是外部的 ...
随机推荐
- 冒泡排序java代码
冒泡排序就是依次取出最大数,然后依次交换放到数组最后边. 直观写法: public long[] sort(long[] a){ int n = a.length - 1; // Step:1 选出最 ...
- PHP面向对象中的重要知识点(一)
1. __construct: 内置构造函数,在对象被创建时自动调用.见如下代码: <?php class ConstructTest { private $arg1; private $arg ...
- 优化数据库的方法及SQL语句优化的原则
优化数据库的方法: 1.关键字段建立索引. 2.使用存储过程,它使SQL变得更加灵活和高效. 3.备份数据库和清除垃圾数据. 4.SQL语句语法的优化.(可以用Sybase的SQL Expert,可惜 ...
- 15 Best Responsive HTML5 Frameworks 2014
Best HTML5 frameworks are most popular because with the use of these frameworks you can create websi ...
- 20套高品质的 Mobile & Web 界面 PSD 素材免费下载
在这里,我们向大家呈现20个新鲜出炉的矢量的免费 PSD 素材.这些素材来自著名的设计社区——Dribbble,这个网站的用户不断发布各种精美的用户界面,图标和网站布局,以帮助激励他人.这些免费素材不 ...
- 基于HT for Web矢量实现2D叶轮旋转
之前在拓扑上的应用都是些静态的图元,今天我们将在拓扑上设计一个会动的图元——叶轮旋转. 我们先来看下这个叶轮模型长什么样 从模型上看,这个叶轮模型有三个叶片,每一个叶片都是不规则图形,显然无法用上我们 ...
- DirectoryHelper
/// <summary> /// 将相对路径转换成程序所在的绝对路径 /// </summary> /// <param name="path"&g ...
- 从设计到开发,硅谷技术专家教你做“声控”APP
编者:本文为携程机票研发部技术专家祁一鸣在携程技术微分享中的分享内容,关注携程技术中心微信公号ctriptech,获知更多一手干货. [携程技术微分享]是携程技术中心推出的线上公开分享课程,每月1-2 ...
- 【转载】关于BooleanQuery在搜索中的用处
我们在搜索中可能会遇到要搜索索引文件中不同字段,不同字段之间就存在了与或非的运算关系,如:这个xx字段中必须存在什么什么关键词,而另一个 XXX字段可以存在或不存在什么什么关键词等等等.这就需要有Bo ...
- 获取DataTable选择第一行某一列值
数据源是一个DataTable,现在我们需要获取这个DataTable的第一行第一列的值.先准备一个数据集,创建一个DataTable,并填充数据: source code: using System ...