首頁 web前端 js教程 Javascript优化技巧(文件瘦身篇)_javascript技巧

Javascript优化技巧(文件瘦身篇)_javascript技巧

May 16, 2016 pm 07:06 PM
javascript 最佳化 技巧

最近一直在研究 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{...}}

这样虽然看起来会比较的头痛,不过实际之行效果是一样的。

使用工具

实际使用上述的方法可能会有一些困难,幸好有现成的外部工具能完成这些步骤。下面简单的介绍几个:
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/

我猜你会有兴趣看下这篇文章。

其他方法

替换布尔值

对于比较来说,true 就等于 1,false 就等于 0 。因此,脚本包含的字面量 true 都可以用 1 来替换,而 false 可以用 0 来替换。对于 true 节省了 3 个字节,而 false 则节省了 4 个字节。

缩短否定检测

代码中常常会出现检测某个值是否有效的语句。而大部分条件非的判断就是判断某个变量是否为 undefined、null 或者 false,比如:

if (myValue != undefined) {
    // ...
}

if (myValue != null) {
    // ...
}

if (myValue != false) {
    // ...
}

这些虽然都正确,但用逻辑非操作符也可以有同样的效果:

if (!myValue) {
    // ...
}

这样的替换也可以节省一部分字节。

使用数组和对象字面量

这个比较好理解,比如一下两行是相同的:

var myArray = new Array;
var myArray = [];

然而第二行比第一行短很多,而且也能非常容易的理解。类似的还有对象声明:


var myObject = new Object;
var myObject = {};

举个例子,比如下面的语句:

var mySite = new Object;
mySite.author = "feelinglucky";
mySite.location = "http://www.gracecode.com";

这样写也可以非常容易的理解,并且短很多:

var mySite = {author:"feeinglucky", location:"http://www.gracecode.com"};

好的,这期就到这里。就向上面说的,Javascript 代码的速度被分割成两部分:下载时间(取决于文件的大小)和执行速度(取决于代码算法)。这次讨论的是下载时间方面的优化,下期讨论之行速度方面的优化(这样看起来非常有技术含量,不是么)。

下面布置家庭作业。或许大家会有兴趣了解下 jQuery 是怎么把自己 70KB 的代码压缩至 20KB 左右的。

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

Win11小技巧分享:一招跳過微軟帳號登入 Win11小技巧分享:一招跳過微軟帳號登入 Mar 27, 2024 pm 02:57 PM

Win11小技巧分享:一招跳過微軟帳號登入Windows11是微軟最新推出的作業系統,具有全新的設計風格和許多實用的功能。然而,對於某些用戶來說,在每次啟動系統時都要登入微軟帳戶可能會感到有些煩擾。如果你是其中一員,不妨試試以下的技巧,讓你能夠跳過微軟帳號登錄,直接進入桌面介面。首先,我們需要在系統中建立一個本機帳戶,來取代微軟帳戶登入。這樣做的好處是

老手必備:C語言中*與&的技巧與注意事項 老手必備:C語言中*與&的技巧與注意事項 Apr 04, 2024 am 08:21 AM

C語言中,表示指針,儲存其他變數的位址;&表示位址運算符,傳回變數的記憶體位址。指針的使用技巧包括定義指針、解引用指針,需確保指針指向有效地址;地址運算符&的使用技巧包括取得變數地址,取得數組元素地址時返回數組第一元素地址。實戰案例說明了使用指標和位址運算子反轉字串。

C++ 程式最佳化:時間複雜度降低技巧 C++ 程式最佳化:時間複雜度降低技巧 Jun 01, 2024 am 11:19 AM

時間複雜度衡量演算法執行時間與輸入規模的關係。降低C++程式時間複雜度的技巧包括:選擇合適的容器(如vector、list)以最佳化資料儲存和管理。利用高效演算法(如快速排序)以減少計算時間。消除多重運算以減少重複計算。利用條件分支以避免不必要的計算。透過使用更快的演算法(如二分搜尋)來優化線性搜尋。

VSCode入門指南:初學者必讀,快速掌握使用技巧! VSCode入門指南:初學者必讀,快速掌握使用技巧! Mar 26, 2024 am 08:21 AM

VSCode(VisualStudioCode)是一款由微軟開發的開源程式碼編輯器,具有強大的功能和豐富的插件支持,成為開發者的首選工具之一。本文將為初學者提供一個入門指南,幫助他們快速掌握VSCode的使用技巧。在本文中,將介紹如何安裝VSCode、基本的編輯操作、快捷鍵、插件安裝等內容,並為讀者提供具體的程式碼範例。 1.安裝VSCode首先,我們需

PHP程式設計技巧:如何實現3秒內跳轉網頁 PHP程式設計技巧:如何實現3秒內跳轉網頁 Mar 24, 2024 am 09:18 AM

標題:PHP程式設計技巧:如何實現3秒內跳轉網頁在Web開發中,經常會遇到需要在一定時間內自動跳到另一個頁面的情況。本文將介紹如何使用PHP實作在3秒內實現頁面跳轉的程式設計技巧,並提供具體的程式碼範例。首先,實現頁面跳轉的基本原理是透過HTTP的回應頭中的Location欄位來實現。透過設定該欄位可以讓瀏覽器自動跳到指定的頁面。下面是一個簡單的例子,示範如何在P

Win11技巧大揭密:如何繞過微軟帳號登入 Win11技巧大揭密:如何繞過微軟帳號登入 Mar 27, 2024 pm 07:57 PM

Win11技巧大揭密:如何繞過微軟帳號登入近期,微軟公司推出了全新的作業系統Windows11,引起了廣泛關注。相較於之前的版本,Windows11在介面設計、功能改進等方面做出了許多新的調整,但也引發了一些爭議,其中最引人注目的一點就是強制要求用戶使用微軟帳戶登入系統。對於某些用戶來說,他們可能更習慣於使用本地帳戶登錄,而不願意將個人資訊與微軟帳戶綁定。

深入理解Go語言中的函數重構技巧 深入理解Go語言中的函數重構技巧 Mar 28, 2024 pm 03:05 PM

在Go語言程式開發中,函數重構技巧是十分重要的一環。透過優化和重構函數,不僅可以提高程式碼品質和可維護性,還可以提升程式的效能和可讀性。本文將深入探討Go語言中的函數重構技巧,結合具體的程式碼範例,幫助讀者更能理解和應用這些技巧。 1.程式碼範例1:提取重複程式碼片段在實際開發中,經常會遇到重複使用的程式碼片段,這時就可以考慮將重複程式碼提取出來作為一個獨立的函數,以

優化WIN7系統開機啟動項目的操作方法 優化WIN7系統開機啟動項目的操作方法 Mar 26, 2024 pm 06:20 PM

1.在桌面上按組合鍵(win鍵+R)開啟運行窗口,接著輸入【regedit】,回車確認。 2.開啟登錄編輯程式後,我們依序點選展開【HKEY_CURRENT_USERSoftwareMicrosoftWindowsCurrentVersionExplorer】,然後看目錄裡有沒有Seri​​alize項,如果沒有我們可以點選右鍵Explorer,新建項,並將其命名為Serialize。 3.接著點選Serialize,然後在右邊窗格空白處點選滑鼠右鍵,新建一個DWORD(32)位元值,並將其命名為Star

See all articles