Rumah hujung hadapan web tutorial js Javascript优化技巧(文件瘦身篇)_javascript技巧

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

May 16, 2016 pm 07:06 PM
javascript pengoptimuman Kemahiran

最近一直在研究 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 左右的。

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Perkongsian Petua Win11: Langkau Log Masuk Akaun Microsoft dengan Satu Helah Perkongsian Petua Win11: Langkau Log Masuk Akaun Microsoft dengan Satu Helah Mar 27, 2024 pm 02:57 PM

Perkongsian Petua Win11: Satu helah untuk melangkau log masuk akaun Microsoft Windows 11 ialah sistem pengendalian terkini yang dilancarkan oleh Microsoft, dengan gaya reka bentuk baharu dan banyak fungsi praktikal. Walau bagaimanapun, bagi sesetengah pengguna, perlu log masuk ke akaun Microsoft mereka setiap kali mereka boot sistem boleh menjadi agak menjengkelkan. Jika anda salah seorang daripada mereka, anda juga boleh mencuba petua berikut, yang akan membolehkan anda melangkau log masuk dengan akaun Microsoft dan memasuki antara muka desktop secara langsung. Pertama, kita perlu mencipta akaun tempatan dalam sistem untuk log masuk dan bukannya akaun Microsoft. Kelebihan melakukan ini ialah

Panduan Bermula VSCode: Mesti dibaca untuk pemula untuk menguasai kemahiran penggunaan dengan cepat! Panduan Bermula VSCode: Mesti dibaca untuk pemula untuk menguasai kemahiran penggunaan dengan cepat! Mar 26, 2024 am 08:21 AM

VSCode (Visual Studio Code) ialah editor kod sumber terbuka yang dibangunkan oleh Microsoft Ia mempunyai fungsi yang berkuasa dan sokongan pemalam yang kaya, menjadikannya salah satu alat pilihan untuk pembangun. Artikel ini akan menyediakan panduan pengenalan untuk pemula untuk membantu mereka menguasai kemahiran menggunakan VSCode dengan cepat. Dalam artikel ini, kami akan memperkenalkan cara memasang VSCode, operasi penyuntingan asas, kekunci pintasan, pemasangan pemalam, dsb., dan menyediakan contoh kod khusus kepada pembaca. 1. Pasang VSCode dahulu, kita perlu

Perkara yang mesti dimiliki oleh veteran: Petua dan langkah berjaga-jaga untuk * dan & dalam bahasa C Perkara yang mesti dimiliki oleh veteran: Petua dan langkah berjaga-jaga untuk * dan & dalam bahasa C Apr 04, 2024 am 08:21 AM

Dalam bahasa C, ia mewakili penunjuk, yang menyimpan alamat pembolehubah lain & mewakili pengendali alamat, yang mengembalikan alamat memori pembolehubah. Petua untuk menggunakan penunjuk termasuk mentakrifkan penunjuk, membatalkan rujukan dan memastikan bahawa penunjuk menunjuk ke alamat yang sah & termasuk mendapatkan alamat pembolehubah, dan mengembalikan alamat elemen pertama tatasusunan apabila mendapatkan alamat elemen tatasusunan; . Contoh praktikal yang menggambarkan penggunaan penunjuk dan pengendali alamat untuk membalikkan rentetan.

Kemahiran pengaturcaraan PHP: Bagaimana untuk melompat ke halaman web dalam masa 3 saat Kemahiran pengaturcaraan PHP: Bagaimana untuk melompat ke halaman web dalam masa 3 saat Mar 24, 2024 am 09:18 AM

Tajuk: Petua Pengaturcaraan PHP: Cara Melompat ke Halaman Web dalam masa 3 Saat Dalam pembangunan web, kita sering menghadapi situasi di mana kita perlu melompat ke halaman lain secara automatik dalam tempoh masa tertentu. Artikel ini akan memperkenalkan cara menggunakan PHP untuk melaksanakan teknik pengaturcaraan untuk melompat ke halaman dalam masa 3 saat, dan memberikan contoh kod khusus. Pertama sekali, prinsip asas lompat halaman direalisasikan melalui medan Lokasi dalam pengepala respons HTTP. Dengan menetapkan medan ini, penyemak imbas secara automatik boleh melompat ke halaman yang ditentukan. Di bawah ialah contoh mudah yang menunjukkan cara menggunakan P

Trik Win11 Didedahkan: Cara Memintas Log Masuk Akaun Microsoft Trik Win11 Didedahkan: Cara Memintas Log Masuk Akaun Microsoft Mar 27, 2024 pm 07:57 PM

Helah Win11 didedahkan: Cara memintas log masuk akaun Microsoft Baru-baru ini, Microsoft melancarkan sistem pengendalian baharu Windows11, yang telah menarik perhatian meluas. Berbanding dengan versi sebelumnya, Windows 11 telah membuat banyak pelarasan baharu dari segi reka bentuk antara muka dan penambahbaikan fungsi, tetapi ia juga telah menyebabkan beberapa kontroversi Perkara yang paling menarik perhatian ialah ia memaksa pengguna untuk log masuk ke sistem dengan akaun Microsoft . Bagi sesetengah pengguna, mereka mungkin lebih terbiasa log masuk dengan akaun tempatan dan tidak bersedia untuk mengikat maklumat peribadi mereka ke akaun Microsoft.

Pengoptimuman program C++: teknik pengurangan kerumitan masa Pengoptimuman program C++: teknik pengurangan kerumitan masa Jun 01, 2024 am 11:19 AM

Kerumitan masa mengukur masa pelaksanaan algoritma berbanding saiz input. Petua untuk mengurangkan kerumitan masa program C++ termasuk: memilih bekas yang sesuai (seperti vektor, senarai) untuk mengoptimumkan storan dan pengurusan data. Gunakan algoritma yang cekap seperti isihan pantas untuk mengurangkan masa pengiraan. Hapuskan berbilang operasi untuk mengurangkan pengiraan berganda. Gunakan cawangan bersyarat untuk mengelakkan pengiraan yang tidak perlu. Optimumkan carian linear dengan menggunakan algoritma yang lebih pantas seperti carian binari.

Penerangan terperinci tentang kemahiran penggunaan simbol √ dalam kotak perkataan Penerangan terperinci tentang kemahiran penggunaan simbol √ dalam kotak perkataan Mar 25, 2024 pm 10:30 PM

Penjelasan terperinci tentang petua menggunakan simbol √ dalam kotak Word Dalam kerja dan kajian harian, kita selalunya perlu menggunakan Word untuk penyuntingan dan penataan dokumen. Antaranya, simbol √ adalah simbol biasa, yang biasanya bermaksud "betul". Menggunakan simbol √ dalam kotak Word boleh membantu kami menyampaikan maklumat dengan lebih jelas dan meningkatkan profesionalisme dan keindahan dokumen. Seterusnya, kami akan memperkenalkan secara terperinci kemahiran menggunakan simbol √ dalam kotak Word, dengan harapan dapat membantu semua orang. 1. Masukkan simbol √ Dalam Word, terdapat banyak cara untuk memasukkan simbol √. satu

Bagaimana untuk mengoptimumkan item permulaan sistem WIN7 Bagaimana untuk mengoptimumkan item permulaan sistem WIN7 Mar 26, 2024 pm 06:20 PM

1. Tekan kombinasi kekunci (kekunci win + R) pada desktop untuk membuka tetingkap jalankan, kemudian masukkan [regedit] dan tekan Enter untuk mengesahkan. 2. Selepas membuka Registry Editor, kami klik untuk mengembangkan [HKEY_CURRENT_USERSoftwareMicrosoftWindowsCurrentVersionExplorer], dan kemudian lihat jika terdapat item Serialize dalam direktori Jika tidak, kami boleh klik kanan Explorer, buat item baharu dan namakannya Serialize. 3. Kemudian klik Serialize, kemudian klik kanan ruang kosong dalam anak tetingkap kanan, cipta nilai bit DWORD (32) baharu dan namakannya Bintang

See all articles