JavaScript代码的速度被分成两部分:下载时间和执行速度。

下载时间

Web浏览器下载的是js源码,因此所有长变量名和注释都回包含在内。这个因素会增加下载时间。1160是一个TCP-IP包中的字节数。最好能将每个javascript文件都保持在1160字节以下以获得最优的下载时间。 
   由于这个原因,要删除注释、删除制表符和空格、删除所有的换行、将长变量名缩短。 
遵循这4条比较困难。因此用外部程序(ECMAScript Cruncher)来帮助我们。

要运行ESC,必使用Windows系统,打开一个控制台窗口,然后使用以下格式的命令:

cscript ESC.wsf -l [0-4] -ow outputfile.js inputfile1.js [inputfile2.js]

第一部分,cscript,是Windows Shell脚本解释程序。文件名ESC.wsf是ESC的程序本身。然后是压缩级别,一个0到4的数值。-ow选项表示下一个参数是优化后输出的文件名。最后,剩下的参数是要进行优化的JavaScript文件,可以有多个文件(多个文件在优化后后会按顺序放到输出文件中)。

0 —— 不改变脚本,要将多个文件拿到单个文件中时用用。

1 —— 删除所有的注释。

2 —— 除等级1外,再删除额外的制表符和空格。

3 —— 除等级2外,再删除换行。

4 —— 除等级3外,再进行变量名替换。

ESC擅长把变量名替换成无意义的名称,它还具有一定的智能,进行私有对象先进性和方法名的替换(由名称前后加上两个下划线表示),所以私有特性和方法依然保持其私有性。

ESC不会更改构造函数名、公用属性和公用方法名,所以无需担心。但要注意的是如果某个JavaScript引用了另一个文件中的构造函数,4级优化会把对构造函数的引用替换成无意义的名称。解决方法是将两个文件合成一个文件,这样就会保持构造函数的名称。

其他减少字节数的方法还有几个。

1.因为在javascript语言中 true等于1,false等于0。因此,脚本包含的字面变量true都可以用1来替换,而false可以用0来替换。 
例如:

  1. var bFound = false;
  2. for (var i = 0; i < aTest.length && !bFound; i++) {
  3. if (aTest[i] == vTest) {
  4. bFounde = true;
  5. }
  6. }
  7. var bFound = 0;
  8. for (var i = 0; i < aTest.length && !bFound; i++) {
  9. if (aTest[i] == vTest) {
  10. bFounde = 1;
  11. }
  12. }

这两段代码运行方式完全相同,而后者节省了7个字节。 
       2.缩短否定检测 
       代码中常常会出现检测某个值是否满足条件。而大部分作的判断某个变量是否为undefined 、null 、false。可以用逻辑非来简化判断。例如

  1. if (oTest != undefined) {
  2. //do someting
  3. }
  4. if (oTest != null) {
  5. //do someting
  6. }
  7. if (oTest != false) {
  8. //do someting
  9. }

以上代码可以替换成

  1. if (!oTest) {
  2. //do something
  3. }

为什么可以替换呢?因为逻辑非操作在遇到undefined 、null 、false时返回true这样做可以节省很多字节。 
        3.定义数组、对象时候的技巧

  1. var oTest = new Array;
  2. var oTest = [];
  1. var oTest = new Object;
  2. var oTest = {};

是等价的

执行时间

我们可以做一些简单的事情提高javascript性能。我觉得也是编写javascript的一些技巧。 
        1.关注范围 
        书中的范围我理解为作用域。 
        在javascript中默认的范围是window。在window范围中创建的变量旨在页面从浏览器卸载后才会销毁。在函数中创建的变量只在函数中的范围内有效。函数执行后就销毁。在引用变量时,javascript解释程序在最近的范围内查找,如果没有救灾上一层次中查找。直到window范围。如果window中也找不到。则出现错误。本地范围内的变量比全局变量执行起来要更快。 
提高javascript执行速度可以有下面几种方法 
          A.使用局部变量。 
          在函数中总是用var来定义变量。如果直接使用变量而不在函数中定义,则变量会创建在window范围内。也就是说执行函数遇到该变量时,javascirpt程序就会按层次到最上层才会查找到该变量。 
不要这样:

  1. function xxx() {
  2. name = "abc";
  3. alert(name);
  4. }

B. 避免with语句 
             范围越小执行速度越快。

  1. alert(document.title);
  2. alert(document.body.tagName);
  3. alert(document.location);

可以替换成

  1. with (document) {
  2. alert(title);
  3. alert(body.tagName);
  4. alert(location);
  5. }

这的确缩短了程序的长度,但是减少代码不能弥补损失的性能。为什么呢? 
因为:使用with语句时要强制解释程序不仅要在范围内查找局部变量。还强制检测每个变量及指定的对象,看其是否为特性。因为也可以在函数中定义变量title或者location。

2.Javascript陷阱

A. 避免多字符串用+号连接 
            多字符串连接最好用StringBuffer对象。该对象封装了Array用join()方法进行连接字符串。 
            B.优先使用内置方法 
Js提供了相当丰富的内置方法可以充分利用 
            C.存储常用的值 
多次使用同一个值时,可以将其存储在局部变量中提高访问速度。

3.减少语句数量 
          例如:

Js代码  

  1. var iFive = 5;
  2. var sColor = "blue";

可以替换成

  1. var iFive = 5, sColor = "blue";
  2. //另外
  3. var sName = aValues[i];
  4. i++;
  5. //可以替换成
  6. var sName = aValues[i++];

另外可以用json来代替对象定义。

4.节约使用DOM

DOM处理算是javascript中最耗时的操作之一。解决这个问题的方法是尽可能避免对DOM文档中的元素直接进行DOM操作。 
这里要学会使用文档碎片对象即document.createDocumentFragment()。

JavaScript代码优化(下载时间和执行速度优化)的更多相关文章

  1. 前端性能优化:细说JavaScript的加载与执行

    本文主要是从性能优化的角度来探讨JavaScript在加载与执行过程中的优化思路与实践方法,既是细说,文中在涉及原理性的地方,不免会多说几句,还望各位读者保持耐心,仔细理解,请相信,您的耐心付出一定会 ...

  2. Ansible系列(七):执行过程分析、异步模式和速度优化

    本文目录:1.1 ansible执行过程分析1.2 ansible并发和异步1.3 ansible的-t选项妙用1.4 优化ansible速度 1.4.1 设置ansible开启ssh长连接 1.4. ...

  3. (转)网站速度优化技巧:Nginx设置js、css过期时间

    网站速度优化技巧:Nginx设置js.css过期时间 原文:http://www.webkaka.com/blog/archives/Nginx-set-the-expiration-time-for ...

  4. dWebpack编译速度优化实战

    当你的应用的规模还很小时,你可能不会在乎Webpack的编译速度,无论使用3.X还是4.X版本,它都足够快,或者说至少没让你等得不耐烦.但随着业务的增多,嗖嗖嗖一下项目就有上百个组件了,也是件很简单的 ...

  5. .NET 的 Debug 和 Release build 对执行速度的影响

    这篇文章发布于我的 github 博客:原文 在真正开始讨论之前先定义一下 Scope. 本文讨论的范围限于执行速度,内存占用什么的不在评估的范围之内. 本文不讨论算法:编译器带来的优化基本上属于底层 ...

  6. web访问速度优化分析

    请求从发出到接收完成一共经历了DNS Lookup.Connecting.Blocking.Sending.Waiting和Receiving六个阶段,时间共计38ms.请求完成之后是DOM加载和页面 ...

  7. 浅谈个人对客户端JavaScript同步、异步、执行顺序等概念的理解

    一.同步和异步的概念. 同步:即按代码的顺序执行任务. 在下列代码中,按照同步概念,则是先打印1后打印2. console.log(1); console.log(2); 异步:即执行一个任务的同时执 ...

  8. 《JavaScript 代码优化指南》

      ~~教你向老鸟一样敲代码~~. 1. 将脚本放在页面的底部 ... <script src="./jquery.min.js"></script> &l ...

  9. JavaScript代码优化指南

    1. 将脚本放在页面的底部 <script src="./jquery.min.js"></script> <script src="./i ...

随机推荐

  1. Linux中用stat命令查看文件时3个时间点解析

    有些时候,我们需要在Linux中使用stat命令来查看文件的详细信息.另外联想下,ls -l命令显示的是什么时间,touch命令修改文件的时间戳,修改的又是什么时间?在这里我们一起来试验下. 首先,我 ...

  2. Delphi 串口使用校验位

    平时都用的8N1的模式,这次使用了校验位,因此串口的初始化工作需要改变 #ifdef RT_USING_UART2 USART_InitStructure.USART_BaudRate = 9600; ...

  3. INDEX_JOIN

    这里就以INDEX_JOIN为例,简单描述一下如何影响Oracle的执行计划的产生. 控制执行计划最简单的方法莫过于使用HINT,这篇文章要介绍的是,在不使用HINT的情况下,让Oracle产生IND ...

  4. 从高铁G18中高端如厕看12306的验证码

    1.引子 最近疯狂的吐槽12306网站的虐心验证码. 从对铁老大的一贯作风来说,这个事不过是芝麻绿豆的事情.这个事件只是因为发生在网络上,而引起了广大网民的一致谴责而已. 相信更丰富的如厕经历,大家只 ...

  5. javaScript document对象详解

    Document对象内容集合 document 文挡对象 - JavaScript脚本语言描述———————————————————————注:页面上元素name属性和JavaScript引用的名称必 ...

  6. filter在CSS中的效果

    滤镜说明: Alpha:设置透明层次 blur:创建高速度移动效果,即模糊效果 Chroma:制作专用颜色透明 DropShadow:创建对象的固定影子 FlipH:创建水平镜像图片 FlipV:创建 ...

  7. Office2016 转换零售版为VOL版

    @echo off :ADMIN openfiles >nul >nul ||( echo Set UAC = CreateObject^("Shell.Application& ...

  8. js 剪切板应用clipboardData

    http://blog.csdn.net/fox123871/article/details/6454634 <a href="http://blog.csdn.net/fox1238 ...

  9. String - 兴趣解读

    个优点: . 以下代码的HashCode是否相同,它们是否是同个对象: . 以下代码的HashCode是否相同,他们是否是同个对象:        . 以下代码的HashCode是否相同,他们是否是同 ...

  10. canvas脏域问题纪录

    canvas 脏域问题 今天无意之中碰见了一.问题描述: 在支持html5的浏览器中运行javascript脚本,脚本主要是操作网页上的标签canvas,出错的操作为, getImageData(im ...