`

按速度优化JavaScript代码

 
阅读更多

一旦你的JavaScript能运行,你就会想到使其运行得更快。
在讲解加速代码的方法之前,让我先讲讲“80/20规则”:
百分之八十的优化是由最初百分之二十的工作所完成的。竭
力实现剩余百分之二十的速度优化是一种巨大的痛苦,而且
经常导致完全不能读和难以管理的代码。简言之,如果你的
JavaScript运行得很慢,你可以用很多简单的方法来加速它,
但是除非你的代码确实运行得很慢,我不会对它进行再优化。
下面是一些使你的代码轻松运行的方法。

限制循环内的工作量

程序运行慢的最常见原因是循环内的重复工作。如果一
条命令只需要执行一次,就没有必要把它放在循环内。
例如:

var index = 0;
while (index <10)
{
   var the_date = new Date();
   var the_day = the_date.getDay();
   var the_name = prompt("what's the kid's name? " ,"");
   alert("On " + the_day + " " + the_name + " is a very special person.");
    index++;
}

此程序循环执行10次。每次得到当天的日期,询问小孩
的名字,然后打印出“On Monday,so-and-so is a 
very special person.”。

但是日期是不会改变的,总是今天。所以没有必要把前
两行放在循环中。把它们从循环中拿出来,让其只执行
一次而不是10次,这样会节省时间:
var index = 0;
var the_date = new Date();
var the_day = the_date.getDay();
while (index <10)
{
var the_name = prompt("what's the kid's name? " ,"");
alert("On " + the_day + " " + the_name + " is a very special person.");
index++;
}


定制if-then-else语句,按最可能到最不可能的顺序

因为if-then-else语句在遇到条件为真时结束,你可以
通过把最有可能的条件放到最开始来减少需要判断的语
句的数量。例如:

var pet = prompt("what kind of pet do you have?", "");
if (pet  == "cat") 
{
    doCatStuff();
} else if (pet == "dog") 
{
    doDogStuff();
} else if (pet == "bird")
{
    doBirdStuff();
} else if (pet == "lizard")
{
    doLizardStuff();
}
一般来说,程序中的if子句比从lizard到dog需要执行的
逻辑判断要少。

最小化重复执行的表达式

如果你发现需要重复计算一个特定的表达式,如
var pi=22/7,只计算一次并把它放在一个全局变量中或
许是个好主意。例如,不象下面程序这样:

function theArea(radius)
{
var pi = 22/7;
var area = pi * radius * radius;
return area;
}

function theCircumference(radius)
{
var pi = 22/7;
var circumference = 2 * pi * radius;
return circumference;
}


而是这样做:

var pi = 22/7;
function theArea(radius)
{
     var area = pi * radius * radius;
     return area;
}
function theCircumference(radius)
{
     var circumference = 2 * pi * radius;
     return circumference;
}

我知道我在用一个全局变量,我也说过这不是一个好主意。
然而,一些数字,如pi,其值在程序中永远不会改变,是
此规则的特例。通过只计算pi一次,可以省去额外的计算。
或许时间上的一些小的节省,累加起来会很管用。

如果你发现代码运行很慢,你只要注意一些事情。这些都
很明显,但是当你发现你经常忽略象这样简单的优化技巧
时,你会很吃惊。

还有,我的朋友,让我们结束今天的课程,这也是整个
JavaScript高级教程的结束。如果你已经进行到这儿,
并且你至少读过过去五天课程中的一半,那么你已经看
过很多JavaScript代码了。实际上,如果你能理解跨越
第一部分和第二部分的10课的大部分内容,你就可以很
安全地把自己称为“JavaScript助手”。通往神秘真知
的路就在你的脚下。

分享到:
评论

相关推荐

    前台javascript速度优化

    NULL 博文链接:https://t240178168.iteye.com/blog/1702269

    最新Javascript高级教程

    目录: 第1课 第一页 Javascript高级教程 第二页 本教程的课程计划 第三页 一个if-then-else的快捷方式 第四页 什么是变量 第五页 变量的使用方法 ...第六页 按速度优化JavaScript代码 第七页 下面讲什么?

    JavaScript 代码压缩加密软件

    此外,很多程序辛辛苦苦的写出来的javascript代码却被别人随意的剽窃,实为憾事。本软件还可以通过对javascript的变量名称和过程名称进行编码,从而起到混淆ja代码的作用,保护您的劳动成功。 JS代码压缩,基本原理...

    优化CSS,Javascript代码(Minify+Uglify)以减少带宽占用,提高网页打开速度 教程.zip

    优化CSS,Javascript代码(Minify+Uglify)以减少带宽占用,提高网页打开速度 教程

    Javascript/CSS 多文件代码合并、安全压缩、优化(PHP版)

    所以网页前端速度优化的一个重要项目就是:减小资源请求数。 事实上,业界有很有名气的js,css合并压缩开源程序:minify。 但悲剧的 minify 在 php5.3 , php 5.4 环境下无法使用,于是逼的我只好自己丰衣足食。 ...

    HTML代码优化原理与技巧

    本书介绍了70多种有关优化网页HTML代码的原理与技巧,内容涉及HTML、图像、多媒体、表格、报头、网址、JavaScript、CSS、网站等十个方面的优化问题。相信读者能够利用这些技巧,减少网页的字节数,提高网页的显示...

    使用RequireJS优化JavaScript引用代码的方法

    RequireJS是一个提高你的javascript代码速度和质量的有效方法,同时它还让你的代码更容易阅读和维护。 在本文中,我会为你介绍RequireJS和应该如何使用它。我们讨论引入文件和定义模块,甚至还会接触优化方面的知识...

    优化月球着陆器路径的遗传算法的浏览器示例_JavaScript_python_代码_下载

    在 javascript 控制台上,您可以看到最佳着陆器的得分如何在到达着陆区时从 0 增加到 100,而当他们在安全速度内到达着陆区时增加到 200。超过 200 分,他们会因消耗更少的燃料而获得更多积分。 着陆器根据他们获得...

    【JavaScript源代码】Vue包大小优化的实现(从1.72M到94K).docx

    毕竟是个小水管服务器,相比提高带宽,还是先看看代码上能不能优化一下,性价比更高 这个是优化前的包大小,这家伙都上 1.72 M 了,小水管加载时间直接往 3s 以上走了,臣妾扛不住啊 二、目标  这必须得优化一下,...

    深入了解JavaScript代码覆盖

    它为什么是有用的? 作为一名JavaScript开发者,你可能经常发现自己处于代码覆盖可能有用的情景。例如: 对测试套件的质量感兴趣?...今年早些时候,我们在V8上添加了对JavaScript代码覆盖的原生支持。

    基于JavaScript的WebGIS前端开发及优化

    前端模块化开发能够极大地降低了程序员开发时的相互干 扰,协同开发更加快速,此外还能提高网页浏览速度、网络信息组织与维护更高 效、精简代码。 论文在对HTML5、Openlayers、RequireJS和Backbone技术进行分析的...

    Transcrypt:把Python编写的代码转换成JavaScript-python

    可选择使用源代码行号进行注释 闪电般快速的 JavaScript 6 代码:调用缓存、for 循环优化、内联 JavaScript 等。命令行开关尖端的集成静态类型检查和缩小也运行在node.js 包含许多代码示例的广泛文档 Apache 2.0 ...

    JavaScript代码性能优化总结篇

    javaScript是解释性语言,相比编译性语言执行速度要慢。浏览器已经实现的方法,就不要再去实现一遍了。另外,浏览器已经实现的方法在算法方面已经做了很多优化。 避免全局查找 在一个函数中会用到全局对象存储为局部...

    javascript压缩工具

    此外,很多程序辛辛苦苦的写出来的javascript代码却被别人随意的剽窃,实为憾事。本软件还可以通过对javascript的变量名称和过程名称进行编码,从而起到混淆ja代码的作用,保护您的劳动成功。 JS代码压缩,基本原理...

    JavaScript代码性能优化总结(推荐)

    javaScript是解释性语言,相比编译性语言执行速度要慢。浏览器已经实现的方法,就不要再去实现一遍了。另外,浏览器已经实现的方法在算法方面已经做了很多优化。 避免全局查找 在一个函数中会用到全局对象存储为局部...

    前端性能优化知识图谱指导

    JS性能优化是指在JavaScript代码的编写和执行过程中,通过一系列的优化策略和技术手段,提高代码的执行效率和性能,从而提升网页或应用程序的响应速度和用户体验。 优化JS性能的方法包括但不限于以下几个方面: 代码...

    性能优化之代码优化页面加载速度

    页面代码的优化对于页面加载速度也有不小的影响,最广为人知的: HTML头部的JavaScript和写在HTML标签中的Style会阻塞页面的渲染,因此CSS放在页面头部并使用Link方式引入,JavaScript的引入放在页面尾。 其次还有:...

    改善JavaScript程序的188个建议

    由于JavaScript 可用资源有限,所以规范和优化更为重要。代码结构是执行速度的决定因素 之一:代码量少,运行速度不一定快;代码量多,运行速度也不一定慢。性能损失与代码的 组织方式及具体问题的解决办法直接相关...

    几个优化WordPress中JavaScript加载体验的插件介绍

    WordPress 本身以及主题和插件通常需要加载一些 JavaScript 来实现某些特殊功能。为了最大限度地保证兼容性,不至于出现 JavaScript 失效的情况,所以一般在页头加载 JavaScript 文件。... 优化JavaScript的Word

    【JavaScript源代码】js对象的读取速度实例详解.docx

    js对象的读取速度实例详解  1、访问字面量和局部变量最快,而访问数组元素和对象成员相对较慢。访问对象成员时,就像作用域链一样,在原型链上搜索。 2、如果找到的成员在原型链中的位置太深,... } // 优化,如果

Global site tag (gtag.js) - Google Analytics