在javascript中使用with(阿里巴巴云和淘宝使用代码分析)

记得在我还不懂学习JavaScript基础知识的时候，有一个谣言说“with statement是一个低效的语句，除非有必要，请不要使用它”。同时ECMAScript 5的严格模式禁止使用with语句，所以我一直不喜欢with语句。

今天知乎上有个话题大概是说“你觉得挺B型的”，然后有人贴了这个代码：

with(document)with(body)with(insertBefore(createElement(' script '，first child)))setAttribute(' exparams '，' category=userid=68497352 aplus unid='，id='tb-beacon-aplus '，src=(location 'https '？//s' :'//a ')”。tbcdn.cn/s/aplus _ v2 . js’)代码反汇编：

with(document)with(body)with(insertBefore(createElement(' script '，first child)))setAttribute(' exparams '，' category=userid=68497352 aplus unid='，id='tb-beacon-aplus '，src=(location 'https '？//s' :'//a ')”。tbcdn.cn/s/aplus _ v2 . js ')

var script=document . createelement(' script ')；document.body.insertBefore(脚本，document . body . first child)；script.setAttribute('exparams '，' category=userid=68497352 aplus unid='，script.id='tb-beacon-aplus '，script.src=(位置' https '？//s ' : '//a '). tbcdn.cn/s/aplus _ v2 . js ')；因为在JavaScript中，可以给函数传递更多无用的参数。所以最后一句完全可以理解为：script . id=' TB-beacon-aplus '；script.src=(位置“https”？//s ' : '//a '). tbcdn.cn/s/aplus _ v2 . js '；script.setAttribute('exparams '，' category=userid=68497352 aplusynid=')；

如果赋值不是标准属性，就不会写入标签的属性中，所以单独赋值可以让加载的外部脚本读取这里的附加参数。

据说是淘宝的主页。好奇心造就了它。我果断跑到淘宝看了看。有图有真相：

淘宝这么大的项目，一般效率都很高，甚至使用传说中的低效代码？

我们尝试使用普通代码来实现上述功能：

var s=document . create element(' script ')；s.setAttribute('exparams '，' category=userid=68497352 aplusy unid=')；s.setAttribute('src '，(位置' https '？)//s ' : '//a '). tbcdn.cn/s/aplus _ v2 . js ')；s . id=' TB-beacon-aplus '；Document.body.insertbefore (s，document.body.firstchild)这是我能写的最简单的代码。当然可以尝试像淘宝的代码一样设置Attribute，但是结果会很伤你！经过我的测试，他只在with语句下设置了三个以上参数的节点属性，第三个及以后的参数设置的属性只能是HTML标准属性。我不知道为什么。有没有大牛愿意出主意？

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

我得出的结论是，大网站在字节上是惜字如金的，尤其是每天流量巨大的淘宝。为了节省流量(虽然只有几个字节，但乘以大量访问时的结果相当惊人)，牺牲用户代码操作的效率是完全值得的。另外，随着浏览器代码执行效率的不断变化，with语句的效率真的那么低吗？

秉承一颗探索的心(此刻，我的心微微有些激动。)，做了以下代码测试，

Html代码：

！doctype html lang=' en ' head meta charset=' utf-8 ' title test/title/head dydiv id=' one ' data=' testdata '/div/body/html with语句获取div #数据值

var now=新日期；for(var I=0；i1000000I){ with(document)with(getelementbyid(' one '))getattribute(' data ')} console . log(new date-now)常规代码获取div#one的数据值

var now=新日期；for(var I=0；i1000000I){文档。getelementbyid ('one ')。getattribute ('data')}控制台。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.89s I E 11单位：ms 1，2，3，4，5，7，8，9，10，平均值，10W结果可能不是很严格，但个人认为不会影响我们最终的结论：如果不是嵌套的很复杂，那么with语句对执行效率的影响与一般代码相比是很小的。

我认为在ECMAScript 5的严格模式下禁用with语句的主要原因是with语句使得对象、方法和属性之间的关系更加模糊，不利于JavaScript向面向对象编程靠拢。

我们补充：虽然有B-frames，但很多网站都是以普通方式加载的，不管是为了方便阅读还是为了性能。