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

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

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

  1. Jquery 学习一

    一.jQuery概述 1.Javascript代码库 在早期的项目开发中都是使用Javascript原生代码,一行一行编写.但是Javascript自身存在3个弊端: ① 复杂的DOM操作 ② 不一致 ...

  2. 🍓JavaScript 对象原型链继承的弊端 🍓

  3. 【趣事】用 JavaScript 对抗 DDOS 攻击 (下)

    上一篇:http://www.cnblogs.com/index-html/p/js-network-firewall.html 对抗 v2 之前的那些奇技淫巧,纯属娱乐而已,并不能撑多久. 但简单. ...

  4. JavaScript学习笔记(三)——this、原型、javascript面向对象

    一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...

  5. JavaScript学习总结(三)——this、原型、javascript面向对象

    一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...

  6. 【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）

    前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...

  7. JavaScript 跨域漫游

    前言: 最近在公司做了几个项目都涉及到了iframe,也就是在这些iframe多次嵌套的项目中,我发现之前对iframe的认识还是比较不足的,所以就静下心来,好好整理总结了iframe的相关知识:&l ...

  8. JavaScript葵花宝典之闭包

    闭包,写过JS脚本的人对这个词一定不陌生,都说闭包是JS中最奇幻的一个知识点,  虽然在工作中,项目里经常都会用到~  但是是不是你已经真正的对它足够的了解~~ 又或者是你代码中出现的闭包,并不是你刻 ...

  9. Javascript面向对象特性实现封装、继承、接口详细案例——进级高手篇

    Javascript面向对象特性实现(封装.继承.接口) Javascript作为弱类型语言,和Java.php等服务端脚本语言相比,拥有极强的灵活性.对于小型的web需求,在编写javascript ...

随机推荐

  1. 谢启鸿谈"如何学好高等代数"

    高等代数和数学分析.空间解析几何一起,并称为数学系本科生的三大基础课.所谓基础课,顾名思义,就是本科四年学习的所有数学课程,都是以上述三门课作为基础的.因此对一年级新生而言,学好这三门基础课,其重要性 ...

  2. BZOJ 3601: 一个人的数论

    题目链接:www.lydsy.com/JudgeOnline/problem.php?id=3601 题意: 思路: 因此可以用高斯消元得到ai. const int mod=1000000007; ...

  3. BZOJ 2879 美食节（费用流-动态加边）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=2879 题意:有n道菜,每道菜需要b[i]份,m个厨师,第j个厨师做第i道菜需要时间a[i ...

  4. jquery之hide()用法详解

    注:  以下函数用法和hide()类似  [参数类型完全一样] toggle() hide() show() slideToggle() slideUp() slideDown() fadeToggl ...

  5. 2.mybatis入门实例 连接数据库进行查询

    1.新建项目,添加mybatis和mysql的jar包 2.在mysql中新建表user[id,name,age] CREATE TABLE `users` ( `id` ) NOT NULL aut ...

  6. CSS笔记（十三）CSS3之过渡

    参考:http://www.w3school.com.cn/css3/css3_transition.asp 通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元 ...

  7. webview页面和壳通信的库（精简版）

    // PG精简版 (function() { var PG = { iosBridge: null, callbackId: 0, callbacks: [], commandQueue: [], c ...

  8. DOS命令解释程序的编写

    实验一.DOS命令解释程序的编写 专业:物联网工程   姓名:黄淼  学号:201306104145 一. 实验目的 (1)认识DOS: (2)掌握命令解释程序的原理: (3)掌握简单的DOS调用方法 ...

  9. 08 高效的SQL

    编写高效 SQL 需要以下知识 有关所查询内容的物理组织的知识 数据库能做什么的知识, 例如: 如果你不知道跳跃扫描索引及其用途, 那么你可能会看着模式说”索引丢了” SQL 所有错综复杂的知识 对目 ...

  10. 2014 Multi-University Training Contest 1

    A hdu4861 打表找规律 #include <iostream> #include<cstdio> #include<cstring> #include< ...