javascript之with的使用 弊端

妹的，昨天都快写完了，一不小心点了个关闭，然后。。。就没有然后了

wordpress的自动保存功能咋就这么不靠谱呢

记得还在懵懂学习JavaScript基础之时，坊间便有传言“with语句是低效率语句，若非必要，请不要使用该语句”，同时， ECMAScript 5 的strict mode下是禁止使用with语句的，所以一直以来我对with语句一直没啥好感。

今天在知乎有个话题大概说的是“你觉得什么东西相当有B格”之类的，然后就有人贴了这段代码：


1

with(document)with(body)with(insertBefore(createElement("script"), firstChild))setAttribute("exparams","category=&userid=68497352&aplus&yunid=", id = "tb-beacon-aplus", src = (location > "https" ? "//s": "//a") + ".tbcdn.cn/s/aplus_v2.js")

据说是淘宝首页的，好奇心使然，果断跑去淘宝看了下，有图有真相哪：

点击图片查看大图

淘宝这种大项目一般是十分讲究效率的，居然会使用传说中的低效率代码？

我们试着用正常代码来达到上面的功能：


1

2

3

4

5

var s = document.createElement("script");

s.setAttribute("exparams","category=&userid=68497352&aplus&yunid=");

s.setAttribute("src",(location>"https"?"//s":"//a")+".tbcdn.cn/s/aplus_v2.js");

s.id="tb-beacon-aplus";

document.body.insertBefore(s,document.body.firstChild)

这是我能写出的最简单的代码了，当然，您可以尝试像淘宝那代码一样setAttribute，不过结果会让你很受伤！！！经过我的测试，他那样带3个以上的参数设置节点属性仅在with语句下有效，而且第三个及以后参数所设置的属性只能是HTML标准属性。原因我也不知道，有大牛愿意指教么？

代码压缩后，淘宝代码224字节，我写的代码264字节。

我得出的结论是：大的网站惜字节如金，特别是像淘宝这种每天流量巨大的网站，为了节省流量（别看只有几个字节，乘以个大的访问量后结果还是挺惊人的）而稍微牺牲下用户代码运行的效率是完全值得的。况且，在浏览器代码执行效率日新月异的今天，with语句效率真有那么低么？

秉承一颗探索的心（此刻内心略为激动。。），做了如下代码测试，

html代码：


1

2

3

4

5

6

7

8

9

10

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

</head>

<body>

    <div id="one" data="test data"></div>

</body>

</html>

with语句获取div#data值


1

2

3

4

5

var now = +new Date;

for(var i=0;i<1000000;i++){

   with(document)with(getElementById("one"))getAttribute("data")

}

console.log(new Date-now)

一般代码获取div#one的data值


1

2

3

4

5

var now = +new Date;

for(var i=0;i<1000000;i++){

   document.getElementById("one").getAttribute("data")

}

console.log(new Date-now)

获取属性值的代码均循环运行100W次，输出运行时间，测试浏览器为Chrome 35与IE 11：

申明：谁特么说我是IE黑，我和谁急！！！

Chrome 35 数值单位：ms
        第1次 第2次 第3次 第4次 第5次 第6次 第7次 第8次 第9次 第10次 平均值 10W次差值 单次差值
一般代码 1362 1358 1379 1377 1372 1411 1371 1341 1356 1339 1366.6 888.7 0.89μs
with语句 2237 2238 2313 2262 2248 2253 2240 2226 2308 2228 2255.3
IE 11 单位：ms
        第1次 第2次 第3次 第4次 第5次 第6次 第7次 第8次 第9次 第10次 平均值 10W次差值 单次差值
正常情况 2352 2332 2321 2347 2342 2339 2365 2373 2353 2343 2346.7 861.7 0.86μs
with语句 3233 3222 3195 3200 3197 3200 3207 3210 3210 3210 3208.4
时间： 2024-10-29 20:19:30

javascript之with的使用 弊端的相关文章

利用JavaScript所见即所得的生成Excel表格

笔者认为,解决问题的途径n种,也有很多组合的使用.我们用Excel导出大量数据的时候,可能会从服务器端,但如果数据量较小,是不是也可以考虑使用JavaScript就可以轻量级的导出呢.另外实际工作中,用户也会考虑,所见即所得的导出当前见到的内容到Excel表格中.这里,笔者有那么一丢丢感想,像文档数据.文件数据.图片数据归根结底都是一些数据码,而数据码的解析方式也是分多钟的,像.html的文件可以用记事本.浏览器.编辑工具等打开.这里笔者就利用Excel能够打开html文档,投机取巧了一把后缀名

JavaScript框架探索1——为何JavaScript开发需要框架

当下浏览器是JavaScript重要的宿主环境,因此我们非常有必要讨论一下浏览器这款客户端应用程序.而浏览器是伴随着互联网的发展而发展的. 1969年互联网诞生,此后得到了飞速的发展,它将全世界各地互联了起来. 1991年一个划时代的东西----浏览器横空出世,自此,互联网走进普通大众的家中,我们只需要输入一个url地址再按下回车这个窗口中就显示出我们想要的内容,早期的时候这些内容通常以文字的形式呈现出来,后来又有了图形化呈现的方式,我们通常把这个窗口和里面的内容叫做网页. 通过以上过程的描述,

javascript中的事件委托

这几天看到一个面试题,大概就是,让你给1000个li都添加一个click事件,应该怎么添加?大多数人第一开始的感觉可能就是,每个li上边都添加一个呗,那要是这样的话,估计面试的时候就会GG了,这里就是撤出了我们的事件冒泡和捕获机制,以及事件委托机制,对于上边这些,我们慢慢来看. 首先说一下事件冒泡和事件捕获机制,事件冒泡是有微软公司提出来的,事件捕获是有网景公司提出来的,当时两家是争论的不可开交,后来w3c也没办法,就采取了折中的方式,事件产生后先捕获后冒泡, 通常,在js中监听事件的方法共有三

javascript继承机制 &amp; call apply使用说明

一.继承机制 1.对象冒充:构造函数使用 this 关键字给所有属性和方法赋值,可使 ClassA 构造函数成为 ClassB 的方法,然后调用它. function ClassZ() { this.newMethod = ClassX; this.newMethod(); delete this.newMethod; this.newMethod = ClassY; this.newMethod(); delete this.newMethod; } 这里存在一个弊端,如果存在两个类 Clas

有必要知道的 24 个 JavaScript 面试题

1.使用 typeof bar === "object" 判断 bar 是不是一个对象有神马潜在的弊端?如何避免这种弊端? let obj = {}; let arr = []; console.log(typeof obj === 'object'); //true console.log(typeof arr === 'object'); //true console.log(typeof null === 'object'); //true 从上面的输出结果可知,typeof b

彻底理解Javascript 中的 Promise

ES6原生提供了 Promise 对象. 到底是何方妖怪呢?打出来看看: 所谓 Promise,就是一个对象,用来传递异步操作的消息.它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提供统一的 API,可供进一步处理. Promise 对象有以下两个特点. (1)对象的状态不受外界影响.Promise 对象代表一个异步操作,有三种状态:Pending(进行中).Resolved(已完成,又称 Fulfilled)和 Rejected(已失败).只有异步操作的结果,可以决定当

赠书《JavaScript高级程序设计（第三版）》5本

本站微博上正在送书<JavaScript高级程序设计>走过路过的不要错过,参与方式,关注本站及简寻网+转发微博:http://weibo.com/1748018491/DoCtp6B8r 本站联合简寻网#寻找千里码# 正在送书<javascript高级程序设计>第三版 5本,对这本书期待的朋友可以去参与哦. 关于简寻网: 我们是一群年轻的创业者,我们关注互联网发展,追逐技术的进步.互联网时代的到来,我们希望能通过技术的手段解决生活中的问题.招聘行业是一个传统而又新兴的行业,传统的流

Javascript 面向对象一：封装数据个方法，从原型对象生成实例

一. 生成对象的原始模式 假定我们把猫看成一个对象,它有"名字"和"颜色"两个属性. var Cat = { name : '', color : '' } 现在,我们需要根据这个原型对象的规格(schema),生成两个实例对象. var cat1 = {}; // 创建一个空对象 cat1.name = "大毛"; // 按照原型对象的属性赋值 cat1.color = "黄色"; var cat2 = {}; cat2.n

JavaScript中创建自定义对象的方法

本文内容参考JavaScript高级程序设计(第3版)第6章:面向对象的程序设计 ECMA-262中把对象定义为:“无序属性的集合,其属性可以包含基本值.对象或者函数.”我所理解的就是对象就是一个结构体,结构体中有一些它的基本属性以及对结构体处理的方法,把它们封装起来称为一个整体.JS中所有的对象都是基于一个引用类型创建,这个引用类型可以是原生类型,如Array,Date等,也可以是开发人员自定义的类型. 下面主要总结下JS中创建对象的几种模式,分析他们各自的优缺点. 1. 工厂模式 /****