Javascript优化(文件瘦身)
作者:Grace 来源:Grace 发布时间:2008-06-02 13:20:00
最近一直在研究 Javascript 相关的技术。在《Javascript 高级程序设计》有篇章节着重阐述了优化 Javascript 代码的重要性。相信有很多的 Javascript 开发人员在开发的同时或多或少的会接触到此类的问题。
在大部分情况下,代码的优化并不是实际开发中所需要着重的部分。但是一旦代码完成了以后,开发者总是期待自己的代码能够越短越高效越好。结合从书中获得的知识以及本人实际开发过程中的经验,下面说明本人所采取的一些花招(也算是照本宣科一下)。
前言
相比脚本语言,编译型的语言并不需要太关心优化问题。在极大的程度上,编译时编译器都会之行优化操作。比如所有的变量、函数、对象等等都会替换成只有处理器才能理解的符号和指针(就是通常所指的可执行文件)。其他的脚本语言也并不需要过分在意文件的大小问题,但是 Javascript 则不同。
因为它首先要通过从服务器端下载源代码,然后再由客户端的浏览器执行。因此,Javascript 代码的速度被分割成两部分:下载时间(取决于文件的大小)和执行速度(取决于代码算法)。这篇主要讨论的是 Javascript 的下载时间优化,也就是如何尽可能的缩小 Javascript 文件本身的容量。
在这里要记住的一个数字是 1160,这是能放入单个 TCP/IP 包中的字节数。所以,最好的期望值是能将每个 Javascript 文件保持在 1160 字节一下,以获取最优的下载时间。
删除注释
这似乎是是废话,不过很多开发人员都会忘记。在实际生产环境中,脚本中的注释都应该删除。在开发期间注释相当的重要,它可以帮助团队理解代码。但在实际生产环境中,注释会明显使脚本文件体积变大。删除它们并不会给脚本实际运行带来任何的影响。
删除制表符和空格
具有良好缩进和空格的代码通常都具有良好的可读性。但是浏览器并不需要这些额外的制表符和空格,所以最好删除它们。当然也不要忘记函数参数,赋值语句以及比较操作之间的空格。比如
function showMeTheMoney(money)
{
if (!money) {
return false;
} else {
...
}
}
可以优化成
function showMeTheMoney(money){if(!money){reutrn false;}else{...}}
这样可以减少部分容量。
删除所有的换行
有许多关于在 Javascript 中换行应该存在的思考,但底线都是换行要增加代码的可读性。但过分的换行也会造成代码体积的增加。
可能处于某种原因而不能删除换行符,这样则要保证文件是 Unix 格式的。因为 Windows、Mac 格式的换行符用两个字符表示换行;Unix 仅用一个。所以将文件转换成 Unix 格式也可以节约一些字节数。
替换变量名
这可能是最无聊的一种做法,这通常不是手工完成的。毕竟变量的名称对解释器来说毫无意义(只是对开发人员来说会更友好一些),在生产环境中将描述性的变量名替换成更简单、更短的名称也可以缩减一部分体积。比如上述的代码可以缩减成:
function sm(m){if(!m){reutrn false;}else{...}}
这样虽然看起来会比较的头痛,不过实际执行效果是一样的。
使用工具
实际使用上述的方法可能会有一些困难,幸好有现成的外部工具能完成这些步骤。下面简单的介绍几个:
JS代码的格式化和压缩
ECMAScript Cruncher:http://saltstorm.net/depo/esc/
JSMin(The JavaScript Minifier): http://www.crockford.com/javascript/jsmin.html
Online JavaScript Compressor.:http://dean.edwards.name/packer/
我猜你会有兴趣看下这篇文章。


猜你喜欢
- 使用 pyecharts 渲染成图片一直是开发者比较关心的功能,pyecharts提供了 selenium、phantomjs 和 pypp
- Django是一个开放源代码的Web应用框架,由Python写成。采用了MTV的框架模式,即模型M,视图V和模版T。它最初是被开发来用于管理
- <script> function window.onload(){ if(location.href.indexOf('
- DQL简介概念:DQL(data query language)数据查询语言 select操作排序规则:- select 表达式1|字段,.
- 在python中,普通的列表list和numpy中的数组array是不一样的,最大的不同是:一个列表中可以存放不同类型的数据,包括int、f
- 1. __init__ 初始化文件路径,关键字1,关键字2;2. key_match 使用with open 方法,以二进制方式(也可以改成
- 本教程使用的是python 3 和django为事例打开pycharmfile -> new
- 译序:本文译自Smashingmagazine,但是原文讲述的内容有些浅,也不是很完整,前端观察在翻译的前提下,增加了更多的更系统的内容。如
- python使用ctypes模块调用windows api GetVersionEx获取当前系统版本,没有使用python32#!c:/py
- 解决空格和空行报错问题到build文件夹下面的webpack.base.conf.js文件。然后打开该文件,找到图下这段代码,把他注释掉。注
- 看知乎的时候发现了一个 “如何正确地吐槽” 收藏夹,里面的一些神回复实在很搞笑,但是一页一页地看又有点麻烦,而且每次都要打开网页,于是想如果
- Mysql自增主键id不是以此逐级递增一、介绍在mysql数据库添加数据时使用ON DUPLICATE KEY UPDATE进行数据更新时可
- 1. IO多路复用O多路复用技术是使用一个可以同时监视多个IO阻塞的中间人去监视这些不同的IO对象,这些被监视的任何一个或多个IO对象有消息
- openpyxlopenpyxl是⼀个Python库,用于读取/写⼊Excel 2010 xlsx / xlsm / xltx / xltm
- 前言索引的本质是存储引擎用于快速查询记录的一种数据结构。特别是数据表中数据特别多的时候,索引对于数据库的性能就愈发重要。在数据量比较大的时候
- 使用JS的DOM(文档对象模型)获取前端循环的参数使用Go语言渲染html,但是想让网页动起来,显示一些弹窗还是比较麻烦的,于是乎,想到使用
- 1.闭包的定义和使用当返回的内部函数使用了外部函数的变量就形成了闭包闭包可以对外部函数的变量进行保存,还可以提高代码的可重用性实现闭包的标准
- 该sql如下:Select /*+ parallel(src, 8) */ distinct src.systemn
- 如下所示:# Seed random number generatornp.random.seed(42)# Compute mean no
- 相信现在很多人都喜欢玩王者荣耀这款手游,里面好看的皮肤令人爱不释手。那么你有没有想过把王者荣耀高清皮肤设置为壁纸,像下面这样今天就来教大家如