zoukankan      html  css  js  c++  java
  • Javascript的压缩优化

    移除注释和空白

    注释的作用就不解释了,用户访问你的网站,把一个带注释的代码拿过去,而不会执行注释的这段东西,岂不是白白浪费了这段代码所带来的网络带宽。于是乎我们压缩就应该把注释给Del掉。

    空白则是为了代码美观,易于程序员查看调试,对于解释器来说,空白是无意义的,反而得花时间去扫描它,所以压缩应该也要去除这些无意义的空白,包括缩进,空格,空行等。

    做完这一步,只是第一层次的压缩。为了使得JS文件尽量的小,我们还得采用一些新思路。

    优化代码

    我们是不是经常使用"abcd"+"efgh"这样的字符串拼接呢?于是我们考虑在压缩的时候直接就压缩成"abcdefgh"这样对比一下,少了 两个双引号跟一个加号,如果使用字符串拼接比较频繁的话,这个优化会节省不少空间,并且提高了JS的执行效率(因为两个字符串拼接,解释器需要重新去申请 内存空间,然后把两端字符串复制进去)。

    对象的属性访问是不是也很频繁呢?例如o["name"]等,又或者是定义了对象{"name":"Object"};这样的话我们可以优化一下就是变成o.name以及{name:"Object"}节省几个字符。

    还有例如var a = new Array()优化成var a = []等(Object就是使用{}代替);连续的多个var定义可以用,来优化成一条语句定义。

    同时也能适当的提高JS的执行性能!外语屋

    千万不要小看这几个字节,往往一个大型应用有多少用户在下载你这个JS文件,累积起来这个数字就很庞大了。

    变量替换

    要进一步缩小文件大小的话,我们就要去分析一些JS的词法语法,替换变量。简单据个例子:

    var myObj = 1;
    myObj++;
    myObj--;
    alert(myObj);

    变量替换的意思就是把原先的变量名换成更加短的变量名:

    var A = 1;
    A++;
    A--;
    alert(A);

    自己比较一下就知道节省了多少个字节,并且代码被有效的保护起来了,谁知道你的A是什么含义,对吧?内陆运输

    当然了,我记得好像有看过更加牛逼的替换,印象中是最后再将全部字符转化成16进制的\x的格式,有知道怎么做的同志告知一下。

    undefined优化

    在你的代码中是否经常出现 if (a != undefined)呢?很多包含undefined的语句,我们会看到这个单词很长很不爽,又不能直接把它替换成一个短一点的单词。于是后来看到了一种方法,在此之前我们先看看一个例子。

    function f1(name){
        alert(name);
    }

    f1();

    我们可以发现调用f1时不带参数,f1的name参数将会是undefined值。好,于是我们对undefined进行优化跟缩短了。

    举个例子,如果是下边这样的代码:

    (function(name, undefined){//在这里undefined是一个变量!不信的话可以对此函数传入多一个值试试
        /* 在这里就是我们的代码区域 */
        if (name != undefined)
            alert(name);
    })('name');/* 有效参数为函数定义时的参数少一个以上,这样保证了第二个参数没有传入值,从而使其变成了undefined值 */

    我们压缩的时候就会把所有的undefined替换成一个变量A,这样是不是缩短了很多字节呢?像Jquery等框架都做了这个优化,jQuery的源码的结构就是:

    /*!
     * jQuery JavaScript Library v1.6.2
     * http://jquery.com/
     *
     * Copyright 2011, John Resig
     * Dual licensed under the MIT or GPL Version 2 licenses.
     * http://jquery.org/license
     *
     * Includes Sizzle.js
     * http://sizzlejs.com/
     * Copyright 2011, The Dojo Foundation
     * Released under the MIT, BSD, and GPL Licenses.
     *
     * Date: Thu Jun 30 14:16:56 2011 -0400
     */
    (function(window,  undefined) {
        /* jQuery Code */

        window.jQuery = window.$ = jQuery;
    })(window);

  • 相关阅读:
    JavaScript文件加载器LABjs API详解 转
    AMD及requireJS 转
    C#中数组、ArrayList和List三者的区别 转
    CSS魔法堂:那个被我们忽略的outline
    CSS魔法堂:改变单选框颜色就这么吹毛求疵!
    CSS魔法堂:display:none与visibility:hidden的恩怨情仇
    CSS魔法堂:一起玩透伪元素和Content属性
    CSS魔法堂:稍稍深入伪类选择器
    CSS魔法堂:更丰富的前端动效by CSS Animation
    CSS魔法堂:Transition就这么好玩
  • 原文地址:https://www.cnblogs.com/sky7034/p/2131836.html
Copyright © 2011-2022 走看看