javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > javascript with

javascript之with的使用(阿里云、淘宝使用代码分析)

投稿:mdxy-dxy

这篇文章主要介绍了javascript之with的使用(阿里云、淘宝使用代码分析),主要是发现了阿里云使用了这段比较有B格的代码,所以说下这个怎么样

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

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

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")

代码拆解:

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"
)

再拆开

var script = document.createElement("script");
document.body.insertBefore(script, document.body.firstChild);

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

因为在 JavaScript 里,可以给函数多传一些无用参数的。
因此,最后这句话完全可以理解为:
script.id = "tb-beacon-aplus";
script.src = (location > "https" ? "//s": "//a") + ".tbcdn.cn/s/aplus_v2.js";
script.setAttribute("exparams","category=&userid=68497352&aplus&yunid=");

如果赋值的不是标准属性,就不会写出到标签的 attribute 里了,所以分开赋值能让加载的外部脚本读取到这里的附加参数。

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

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

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

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代码:

<!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值

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值

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

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语句在不是嵌套十分复杂的情况下,相比于一般代码对执行效率的影响其实微乎其微。

我想ECMAScript 5 的strict mode下禁用with语句的主要原因应该是with语句让个对象与方法与属性的关系变得更模糊, 不利于JavaScript向面向对象编程靠拢吧。

脚本之家小编补充:虽然有B格但不论是易于阅读还是考虑性能的目的,很多网站还是使用普通的方式加载。

您可能感兴趣的文章:
阅读全文