JavaScript 性能优化小结

随着 Web2.0 技术的不断推广，越来越多的应用使用 JavaScript 技术在客户端进行处理，从而使 JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题。而这个问题又因 JavaScript 的阻塞特性变的复杂，也就是说当浏览器在执行 JavaScript 代码时，不能同时做其他任何事情。本文详细介绍了如何正确的加载和执行 JavaScript 代码，从而提高其在浏览器中的性能。

在J2EE编程中，我们接触最多的脚本语言还是JavaScript。在使用JavaScript中我们通常会考虑其性能问题，因此将日常总结的关于JavaScript性能优化的方式总结出来，以备查询。
在使用JavaScript中经常会遇到字符串的拼接问题。请问大家在使用Java编程的时候遇到上述的问题，该怎么处理？

NX学生：老师，使用StringBulider 或StringBuffer

老师：回答正确，使用StringBuilder或StringBuffer能够避免过多创建对象，降低系统性能。

好了，回到正题，我们还是来解答在使用JavaScript中，遇到上述问题的处理方式。

首先，先来看看NX学生的处理方式：

<html>
<script type="text/javascript">
var string="begin"
var date = new Date()
var begin = date.getTime() 

for(var i=0;i<9999999;i++){
  string+="abc"
}
alert(new Date().getTime() - begin)
</script>
</html>

老师一看NX学生实现的方式，差点笑喷。这种垃圾的实现方式，真是毁了你一世英名啊。
老师面带微笑的说道：你这种实现方式就相当于小学生的水平，就是一堆垃圾字母的随机组合。说完只听见SB老师在键盘上键步如飞的敲其代码来。NX学生还没有反应过来，老师已经将代码完成：

<html>
<script type="text/javascript">
var string="begin";
var string01=["begin"];
var date = new Date();
var begin = date.getTime();
for(var i=0;i<55555555;i++){
  //string+="abc";
  string01.push("abc");
}
var result = string01.join("");
alert(new Date().getTime() - begin);
</script>
</html>

通过对以上代码的运行比较，老师的代码性能明显优于NX学生的代码，NX学生代码还会经常导致IE宕掉。
NX学生看到代码运行的结果，顿时对老师产生仰慕之情，决定虚心想老师学习，不断提升自己……
这个故事虽然告一段落，但是老师和NX学生的JavaScript之旅还在继续……

赞 (0)

相关推荐

  • js性能优化 如何更快速加载你的JavaScript页面

    确保代码尽量简洁 不要什么都依赖JavaScript.不要编写重复性的脚本.要把JavaScript当作糖果工具,只是起到美化作用.别给你的网站添加大量的JavaScript代码.只有必要的时候用一下.只有确实能改善用户体验的时候用一下. 尽量减少DOM访问 使用JavaScript访问DOM元素很容易,代码更容易阅读,但是速度很慢.下面介绍几个要点:限制使用JavaScript来修饰网页布局,把针对访问元素的引用缓存起来.有时,当你的网站依赖大量的DOM改动时,就应该考虑限制你的标记.这是改用

  • javascript性能优化之事件委托实例详解

    本文实例分析了javascript性能优化之事件委托.分享给大家供大家参考,具体如下: 为下面每个LI绑定一个click事件 <ul id="myLinks"> <li id="goSomewhere" >Go somewhere</li> <li id="doSomething" >Do something</li> <li id="sayHi" >Sa

  • javascript性能优化之DOM交互操作实例分析

    本文实例讲述了javascript性能优化之DOM交互操作技巧.分享给大家供大家参考,具体如下: 在javascript各个方面,DOM毫无疑问是最慢的一部分.DOM操作与交互要耗费大量时间,因为它们往往需要重新渲染整个页面或者某一部分.理解如何优化与DOM的交互可以极大提高脚本完成的速度. 1.最小化DOM更新 看下面例子: var list = document.getElementById("ul"); for (var i=0; i < 10; i++){ var ite

  • JS 网站性能优化笔记

    1. 除去JavaScript注释 除了注释,其他所有的 // or /* */ 注释都可以安全删除,因为它们对于最终使用者来说没有任何意义. 2. 除去JavaScript中的空白区域 如:x = x + 1;  可以简短得写成:x=x+1;  . 3. 进行代码优化 简单的方法如除去暗示的(implied)分号,某些情形下的变量声明或者空回车语句都可以进一步减少脚本代码.一些简略的表达方式也会产生很好的优化,例如: x=x+1; 可以写成: x++; 不过得小心谨慎,不然代码很容易出错. 4

  • 基于JavaScript操作DOM常用的API小结

    前言 DOM(Document Object Model)即文档对象模型,针对 HTML 和 XML 文档的 API(应用程序接口).DOM 描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM 脱胎于 Netscape 及微软公司创始的 DHTML(动态 HTML),但现在它已经成为表现和操作页面标记的真正跨平台.语言中立的方式. 阅读目录 基本概念 节点创建型api 页面修改型API 节点查询型API 节点关系型api 元素属性型api 元素样式型api 总结 文本整

  • JavaScript性能优化之小知识总结

    随着网络的发展,网速和机器速度的提高,越来越多的网站用到了丰富客户端技术.而现在Ajax则是最为流行的一种方式.JavaScript是一种解释型语言,所以能无法达到和C/Java之类的水平,限制了它能在客户端所做的事情,为了能改进他的性能,我想基于我以前给JavaScript做过的很多测试来谈谈自己的经验,希望能帮助大家改进自己的JavaScript脚本性能. 前言 一直在学习javascript,也有看过<犀利开发Jquery内核详解与实践>,对这本书的评价只有两个字犀利,可能是对javas

  • js性能优化技巧

    性能优化:简而言之,就是在不影响系统运行正确性的前提下,使之运行地更快,完成特定功能所需的时间更短 http:超文本协议 它的最上层是应用层 传输层 网络层 物理层 请求信息:请求行 请求头 空行 消息体 响应信息:状态行和状态码 使用值类型的ToString方法: 在连接字符串时,经常使用"+"号直接将数字添加到字符串中.这种方法虽然简单,也可以得到正确结果,但是由于涉及到不同的数据类型,数字需要通过装箱操作转化为引用类型才可以添加到字符串中.但是装箱操作对性能影响较大,因为在进行这

  • 基于JavaScript创建动态Dom

    基于JavaScript创建动态Dom

    动态脚本 我们在页面中使用<script>元素就可以向页面中插入javascript代码.有两种方式:一种是通过src属性引用外部的JS文件,一种是用这个元素来包含一段js代码.所谓的动态脚本,就是指这个脚本在页面加载时不存在,在将来的某一个时刻通过修改DOM来动态的添加脚本.与操作html元素一样,创建动态脚本也有两种方式:插入外部文件和直接插入JavaScript代码. 动态加载的外部JavaScript代码可以立刻被执行,例如下面的代码: var script = document.cr

  • JS性能优化笔记搜索整理

    通过网上查找资料了解关于性能优化方面的内容,现简单整理,仅供大家在优化的过程中参考使用,如有什么问题请及时提出,再做出相应的补充修改. 一. 让代码简洁:一些简略的表达方式也会产生很好的优化 eg:x=x+1;在不影响功能的情况下可以简写为x++; 二. 变量名方法名尽量在不影响语意的情况下简单.(可以选择首字母命名) eg:定义数组的长度可以取名为:ArrLen而不需要取为ArrayLength. 三. 关于JS的循环,循环是一种常用的流程控制. JS提供了三种循环:for(;;).while

  • nodejs的10个性能优化技巧

    nodejs的10个性能优化技巧

    下面是我们使用Node.js时遵循的10个性能规则: 1. 避免使用同步代码 在设计上,Node.js是单线程的.为了能让一个单线程处理许多并发的请求,你可以永远不要让线程等待阻塞,同步或长时间运行的操作.Node.js的一个显著特征是:它从上到下的设计和实现都是为了实现异步.这让它非常适合用于事件型程序. 不幸的是,还是有可能会发生同步/阻塞的调用.例如,许多文件系统操作同时拥有同步和异步的版本,比如writeFile和writeFileSync.即使你用代码来控制同步方法,但还是有可能不注意

  • JavaScript DOM 学习总结(五)

    1.DOM简介. 当页面加载时,浏览器会创建页面的文档对象模型(Document Object Model).文档对象模型定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构,即节点树.通过DOM,JS可创建动态的HTML,可以使网页显示动态效果并实现与用户的交互功能.JS能够改变页面中所有的HTML元素.属性和CSS样式,并对页面中所有事件做出响应.所以学习JS的起点就是处理网页,处理网页就需要使用DOM进行操作. 2.DOM获取元素. JS要想操作H

  • 简单实现JS对dom操作封装

    这篇文章主要介绍了JS简单实现对dom操作封装,下面就直接上代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

随机推荐