这几天多次看到有博主们在写 with 的文章,这货确实非常方便,但是却是个性能杀手,所以一直都是上不得台面的。
那么他究竟会让效率低下到什么程度呢?
先来看下 with 是如何的便捷吧。。

// 正常调用
console.log(location.host);
console.log(location.pathname); // 在 with 下
with (location) {
console.log(host);
console.log(pathname);
}

如果不影响性能,确实是非常霸气的存在,可是看了下面的例子,也许就吓尿了。

var obj = {key: "string"};
var tmp;
var n = 1e6; console.time("no with");
for (var i=0; i<n; i++) {
tmp = obj.key;
}
console.timeEnd("no with"); console.time("with");
with (obj) {
for (var i=0; i<n; i++) {
tmp = key;
}
}
console.timeEnd("with");

吓尿了,with 下竟然相差100倍。
甚至 FF 下不是直接 with 也会影响性能,详见参考阅读。

不要在 chrome 的控制台下进行压力测试,因为 chrome 控制台就是 with 环境。
如果想看 chrome 控制台环境,在控制台输入 debugger 就可以看到 with 这货了。

然后按两下 F11 就可以来到 chrome 控制台环境,剩下的自己折腾吧,因为今天的分享到此结束。。

参考阅读:
with语句是JavaScript的性能杀手

浅谈 js 下 with 对性能的影响的更多相关文章

  1. 浅谈 js 正则字面量 与 new RegExp 执行效率

    原文:浅谈 js 正则字面量 与 new RegExp 执行效率 前几天谈了正则匹配 js 字符串的问题:<js 正则学习小记之匹配字符串> 和 <js 正则学习小记之匹配字符串优化 ...

  2. 浅谈JS面向对象

    浅谈JS面向对象 一 .什么是面向过程 就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候一个一个依次调用就可以了.注重代码的过程部分. 二.什么是面向对象 最先出现在管理学 ...

  3. 前端性能优化--为什么DOM操作慢? 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM

    前端性能优化--为什么DOM操作慢?   作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...

  4. 浅谈JS之AJAX

    0x00:什么是Ajax? Ajax是Asynchronous Javascript And Xml 的缩写(异步javascript及xml),Ajax是使用javascript在浏览器后台操作HT ...

  5. 浅谈JS中的闭包

    浅谈JS中的闭包 在介绍闭包之前,我先介绍点JS的基础知识,下面的基础知识会充分的帮助你理解闭包.那么接下来先看下变量的作用域. 变量的作用域 变量共有两种,一种为全局变量,一种为局部变量.那么全局变 ...

  6. 浅谈 js 字符串之神奇的转义

    原文:浅谈 js 字符串之神奇的转义 字符串在js里是非常常用的,但是你真的了解它么?翻阅<MDN String>就可以了解它的常见用法了,开门见山的就让你了解了字符串是怎么回事. 'st ...

  7. 浅谈 js 正则之 test 方法

    原文:浅谈 js 正则之 test 方法 其实我很少用这个,所以之前一直没注意这个问题,自从落叶那厮写了个变态的测试我才去看了下这东西.先来看个东西吧. var re = /\d/; console. ...

  8. 浅谈 js 语句块与标签

    原文:浅谈 js 语句块与标签 语句块是什么?其实就是用 {} 包裹的一些js代码而已,当然语句块不能独立作用域.可以详细参见这里<MDN block> 也许很多人第一印象 {} 不是对象 ...

  9. 浅谈 js 字符串 trim 方法之正则篇

    原文:浅谈 js 字符串 trim 方法之正则篇 关于 trim 其实没啥好说的,无非就是去除首位空格,对于现代浏览器来说只是简单的正则 /^\s+|\s+$/ 就可以搞定了.而且支持中文空格   等 ...

随机推荐

  1. cadence allegro 封装原点修改

    打开 dra文件后 在菜单栏 setup - change drawing origin 在命令栏输入 新的参考点位置 如想更改新坐标位置为 1,2 .输入  x 1 2

  2. c++ Arx二次开发创建椭圆和样条曲线

    一.本节课程 c++ Arx二次开发创建椭圆和样条曲线 二.本节要讲解的知识点 1.如何应用C++ ARX二次开发创建椭圆(对AcDbEllipse类的构造函数的直接封装和根据外接矩形来创建椭圆) 2 ...

  3. Jenkins报表 代码 指标分析

    Jenkins报表 这表现在前面的章节中,也有可用最简单的一种是适用于 JUnit 测试报告的许多报表插件. 在生成后动作进行任何工作,你可以定义要创建的报告. 该构建已经完成,测试结果选项将可进一步 ...

  4. Docker swarm集群搭建教程

    一.什么是Swarm Swarm这个项目名称特别贴切.在Wiki的解释中,Swarm behavior是指动物的群集行为.比如我们常见的蜂群,鱼群,秋天往南飞的雁群都可以称作Swarm behavio ...

  5. [T-ARA][너너너][你你你]

    歌词来源:http://music.163.com/#/song?id=22704480 作曲 : Cheang Hai Kee [作曲 : Cheang Hai Kee] 作词 : Cheang H ...

  6. js闭包的作用

    js闭包的用途详解 js闭包可以用在许多地方.它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中.具体怎么理解呢,各位看官请仔细看好下文   我们来看 ...

  7. 团队作业week7

    软件分析和用户需求调查 具体细则见: http://www.cnblogs.com/xinz/p/3308608.html

  8. BugPhobia开发篇章:Beta阶段第V次Scrum Meeting

    0x01 :Scrum Meeting基本摘要 Beta阶段第五次Scrum Meeting 敏捷开发起始时间 2015/12/17 00:00 A.M. 敏捷开发终止时间 2015/12/17 23 ...

  9. week9:个人博客作业

    团队作业(5) 以下内容多数是网上的内容,只是做了整合的过程. 要求 在PM 带领下, 每个团队深入分析下面行业的App, 找到行业的Top 5 (从下面的三个备选中,任选一个行业即可) 英语学习/词 ...

  10. 洛谷P3613 睡觉困难综合征(LCT,贪心)

    洛谷题目传送门 膜拜神犇出题人管理员!!膜拜yler和ZSY!! 没错yler连续教我这个蒟蒻写起床困难综合症和睡觉困难综合症%%%Orz,所以按位贪心的思路可以继承下来 这里最好还是写树剖吧,不过我 ...