`
rapheal
  • 浏览: 171102 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

浅谈Javascript的压缩优化

阅读更多

前言

我们都知道Javascript是脚本语言,用于浏览器端编程,也就是说当我们访问一个Web网站或者应用时,需要从服务器去取相应的JS文件,然后在浏览器端解释运行。由于Web应用的丰富性,Javascript自然而然也会增多,所带来的影响就是我们需要花更多的时间去服务器取这些JS文件,因此压缩JS是一个很重要的步骤,当然既然是下载到客户机器上,JS的代码对用户也是可见的,压缩JS也可以有效的保护源码。

 

移除注释和空白

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

同时这样的方法执行 (function(){/*your code*/})(); 也是倡导的,避免产生的变量污染全局,具体见我的另外一篇博文:《Javascript解决过多冲突—避免污染全局》

 

本篇总结

至于用什么工具去压缩,网上可以找到很多,比如:YUI compressor,jsmin等等,Web应用上线后应该提供压缩版本有利于节约带宽,希望各位大牛能提供更加好的压缩脚本思路,拿出来一起交流分享。

2
3
分享到:
评论

相关推荐

    浅谈JavaScript 库———jQuery, ExtJs 的对比研究

    ### 浅谈JavaScript库——jQuery与ExtJs的对比研究 #### 一、引言 随着Web 2.0和RIA(Rich Internet Applications)技术的普及,JavaScript作为一种前端开发的重要工具,逐渐占据了重要的地位。它不再仅仅是用于...

    浅谈vue加载优化策略

    Vue.js 是一个非常受欢迎的前端JavaScript框架,以其易学易用和灵活性著称。然而,随着应用程序变得越来越大,性能优化成为了一个重要的议题,特别是在单页面应用(SPA)中,首屏加载时间可能会成为用户体验的瓶颈。...

    浅谈前端网络、JavaScript优化以及开发小技巧

    在网络性能优化方面,文章提到了YSlow这个工具,它提供了23条规则,主要目标是消除或减少不必要的网络延迟,并将需要传输的数据压缩至最少。为了实现这一目标,开发者可以通过合并和压缩CSS、JavaScript和图片等静态...

    浅谈 Vue 项目优化的方法

    - 利用Webpack的优化选项,如`mini-css-extract-plugin`提取CSS为单独文件,` terser-webpack-plugin`压缩JavaScript代码。 以上就是对Vue项目优化的一些关键点,通过这些实践,我们可以显著提高项目性能,提升开发...

    浅谈H5前端性能测试实践1

    这个阶段的性能优化可以通过减少HTTP请求数量、压缩文件大小、启用HTTP/2协议等方式实现。 2. **HTML解析**:Webview接收到HTML内容后,自顶向下解析,构建DOM Tree和Render Tree。在此过程中,优化HTML结构,避免...

    浅谈如何使用 webpack 优化资源

    而`UglifyJSPlugin`则负责压缩和混淆JavaScript代码,通过关闭不必要的代码和删除未使用的变量来进一步减小文件大小。 此外,Webpack的代码分割(Code Splitting)功能可以将大型模块拆分为多个小块,按需加载,...

    0.1秒的价值!浅谈Web前端页面提速问题

    - 压缩CSS和JavaScript:利用工具如Gulp或Grunt进行压缩,减少文件大小,提高加载速度。 - 选择合适的图片格式:根据需求选择GIF、JPEG或PNG,考虑使用WebP格式以减小文件大小。 - 使用图标字体(如Font Awesome...

    浅谈网页基本性能优化规则小结

    1. **静态资源压缩**:使用构建工具如webpack或gulp对CSS、JavaScript和图片进行压缩,减少文件大小,从而加快加载速度。例如,CSS和JavaScript可以通过minify进行压缩,图片可以使用工具进行适当地压缩,以降低其...

    浅谈VUE单页应用首屏加载速度优化方案

    Vue 单页应用(SPA)在项目逐渐庞大后,首屏加载速度往往成为用户体验的关键...然而,优化工作不应止步于此,还应关注代码结构优化、图片压缩、预渲染、Service Worker 等更多层面的优化措施,以全方位提升应用性能。

    浅谈Webpack核心模块tapable解析

    Webpack 是一个强大的模块打包工具,通过 loader 和 plugin 实现对现代 JavaScript 应用程序的构建和优化。Loader 负责转换源代码,而 plugin 可以执行更复杂的任务,如代码分析、压缩、提取公共模块等。由于 loader...

    浅谈CSS在前端优化中一些值得注意的关键点

    此外,压缩CSS和JavaScript文件,减小文件大小,也是提高加载速度的有效方法。对于图片,可以使用CSS精灵图(sprites)合并多个小图,或者使用响应式图片技术,根据设备屏幕尺寸加载合适的图片大小。 总之,前端...

    浅谈 Webpack 如何处理图片(开发、打包、优化)

    1. **控制图片质量和压缩图片**:引入 `image-webpack-loader` 配合 `url-loader`,以不同质量压缩图片,降低文件大小。例如: ```javascript rules: [ { test: /\.(png|jpg)$/, use: [{ loader: 'url-loader...

    美团点评技术沙龙05 - 浅谈前端工程化.d9f236d0-4fea-11e6-a7f8-6561741675a1.pdf

    《美团点评技术沙龙05 - 浅谈前端工程化》 前端工程化是现代互联网开发中的重要主题,它旨在提高开发效率,优化代码质量,确保软件的可维护性和可扩展性。本文将深入探讨前端工程化的概念、实践方法以及在美团点评...

    浅谈web app的优势和设计的几个重点.pdf

    3. **性能优化**:由于Web App依赖网络加载,所以优化加载速度和页面渲染性能至关重要,这包括减少HTTP请求、压缩资源、使用缓存策略等。 4. **互动性与功能性**:Web App应像原生应用一样,提供流畅、直观的交互...

    【ASP.NET编程知识】浅谈ASP.NET Core静态文件处理源码探究.docx

    `StaticFileMiddleware`的内部实现涉及了多种策略,包括文件是否存在检查、缓存控制、ETag头的处理以及GZip和Brotli压缩支持。它使用`PhysicalFileProvider`或`IFileProvider`接口来读取文件系统中的内容,`...

    关于前端页面的一些性能测试总结

    - **静态文件优化**:静态文件(如CSS、JavaScript)应尽量减少并压缩,以减小下载时间。 4. **HTML示例分析**: - 示例中的HTML头部包含了必要的元信息,如字符集设置、浏览器兼容性声明以及缓存控制,这些都是...

Global site tag (gtag.js) - Google Analytics