JavaScript代码优化(下载时间和执行速度优化)

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来替换。 
例如:

Js代码  

  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。可以用逻辑非来简化判断。例如

Js代码  

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

Js代码  

以上代码可以替换成

Js代码  

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

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

Js代码  

  1. var oTest = new Array;
  2. var oTest = [];

Js代码  

  1. var oTest = new Object;
  2. var oTest = {};

是等价的

执行时间

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

Js代码  

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

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

Js代码  

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

可以替换成

Js代码  

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

可以替换成

Js代码  

  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代码优化(下载时间和执行速度优化)

时间: 2024-10-09 06:51:00

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

Javascript速度优化

Javascript速度优化 Javascript速度优化基本原则 1. 择重避轻,有所取舍 通常来讲,系统是都是庞大的,不要太完美主义,先抓住重点,理解那些是我们的核心页面,那些页面对我们来说是最重要的,那些页面访问量最高,核心优先. 抓住主要问题,找到瓶颈点.治病要医本,优化前,需要进行细致的分析,抓住主要瓶颈点,对症下药.优化那么多的方子,别全采用,通常几个就能达到效果. 2. 简单有效才是硬道理 越是简单的东西越容易控制,越不容易出错,尽量避免将系统设计的过于庞大,过于复杂,记住,这是在

优化SQL的执行速度

在项目开发中,页面的反应速度是非常重要的,改善页面反应速度的方法有很多. 但一般的问题多数是出现在数据库访问的SQL上面. 比如:重复多次访问数据库,SQL速度很低等. 重复多次访问数据库需要修改逻辑来减少数据库的访问.而SQL的执行速度可以通过仔细调试解决. 下面是一些SQL的性能调试方法.整理于网络内容. 1. IN和EXISTS --1.慢   SELECT  name   FROM    Personnel   WHERE   birthday IN (SELECT  birthday 

页面加载速度优化的12个建议

Radware发布的2014年春季电商页面速度与Web性能”调查报告强调了电商页面加载速度的重要性,同时指出很多网站都没有利用最佳的页面优化技术,页面加速速度都存在很大缺陷.那么该如何补救,提高网站页面的加载速度呢? 报告给出了12个页面加载速度优化的补救措施,用以改善加载时间,改善站长浏览者的用户体验.网站运营人员可以通过这些建议来解决页面加载速度难题.编译如下: 1.合并Js文件和CSS 将JS代码和CSS样式分别合并到一个共享的文件,这样不仅能简化代码,而且在执行JS文件的时候,如果JS文

转:网页速度优化一览

原地址:http://phpstudy.net/b.php/43006.html 相信互联网已经越来越成为人们生活中不可或缺的一部分.ajax,flex等等富客户端的应用使得人们越加"幸福"地体验着许多原先只能在C/S实现的功能.比如Google机会已经把最基本的office应用都搬到了互联网上.当然便利的同时毫无疑问的也使页面的速度越来越慢.自己是做前端开发的,在性能方面,根据yahoo的调查,后台只占5%,而前端高达95%之多,其中有88%的东西是可以优化的. 以上是一张web2.

Webpack编译速度优化实战

当你的应用的规模还很小时,你可能不会在乎Webpack的编译速度,无论使用3.X还是4.X版本,它都足够快,或者说至少没让你等得不耐烦.但随着业务的增多,嗖嗖嗖一下项目就有上百个组件了,也是件很简单的事情.这时候当你再独立编前端模块的生产包时,或者CI工具中编整个项目的包时,如果Webpackp配置没经过优化,那编译速度都会慢得一塌糊涂.编译耗时10多秒钟的和编译耗时一两分钟的体验是迥然不同的.出于开发时的心情的考虑,加上不能让我们前端的代码编译拖累整个CI的速度这两个出发点,迫使我们必须去加快

JavaScript代码优化新工具UglifyJS

jQuery 1.5 发布的时候 john resig 大神说所用的代码优化程序从Google Closure切换到UglifyJS,新工具的压缩效果非常令人满意. UglifyJS 是一个服务端node.js的压缩程序.我测试了一下压缩率确实比较高. 所以值得写篇文章推荐下. 你也可以尝试一下在线版的Uglifyjs: 如果你对 uglifyjs 有兴趣可以按照以下安装方式进行安装. 1. 安装 node.js 环境 2. 进入 右上角 “Download” ZIP下载整个包. 3. 解压打开

android加载速度优化,通过项目的优化过程分析

通过这么长时间的盒子开发以及之前手机项目的经验,总体感觉两种不同设备还是有很多不同的地方的,首先一点不同的就是,手机项目和电视项目默认启动页面加载速度有重要区别 对于手机:手机加载网络数据,由于屏幕小,如果主页有网络图片的情况下,基本都是显示默认图片,这也是由于网速的限制,更重要的是手机上基本是图文混排,用户没看到图片可能焦点就在文本上了. 对于电视:如果应用首页加载使用默认图,会感觉特别丑,因为屏幕大,重要信息都是图片,如果没有图片,那用户看到的都是空白,用户的焦点没有了,只有等待和抱怨. 因

Unity3d插件SmoothMoves加载速度优化

我们游戏是使用Unity3d做的2D游戏,角色特效等都使用SmoothMoves来制作(在国内估计也算奇葩一朵吧,据说燃烧的蔬菜也是SmoothMoves作的),游戏中的所有的资源--角色.特效.技能ICON.角色ICON.音效等几乎都使用assetbundles来实现. 问题:加载一场战斗的时间大概要30s左右!!! 解决方案关键字:依赖打包.数据块共享.冗余数据剔除 优化后:5s左右 :) 1. 依赖打包 1.1 使用AssetDatabase.GetDependencies()接口可以查看

《JavaScript 代码优化指南》

  ~~教你向老鸟一样敲代码~~. 1. 将脚本放在页面的底部 ... <script src="./jquery.min.js"></script> <script src="./index.js"></script> </body> </html> 2. 变量声明合并 将多条var语句合并为一条语句,我建议将未赋值的变量放在最后面. 并且为了代码的美观,还可以将等号对齐. //糟糕 var