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之旅还在继续……

时间: 2015-10-09

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

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

JS性能优化笔记搜索整理

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

JavaScript性能优化之小知识总结

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

简单实现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>

nodejs的10个性能优化技巧

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

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

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

基于JavaScript创建动态Dom

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

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 学习总结(五)

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

js性能优化技巧

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

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

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

JS 网站性能优化笔记

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

Asp.net 网站性能优化二则分享

随着后端优化空间越来越小,现在越来越多的网站更注重前端性能的优化,就是浏览器,http层面的优化,这里写两点最简单最有效的 asp.net网站优化技巧. 了解常见的网站性能优化技巧 首先我们要学一些优化网站性能和体验的理论和基础知识,雅虎已经帮我们总结好了,详见参考链接中的几篇文章,有好心人已经给翻译成中文了.这里面提到的一些技巧可操作性都很强,建议每一个网站开发人员都仔细学习并进行实践,可以说不了解这里面说的优化技巧,提升网站前端性能就无从谈起. 诊断网站性能 要想优化网站的前端性能,首先要查

asp.net小谈网站性能优化

当然,网站性能优化是多方面的,这里先谈一下这些天来的所获: 1.书写代码的习惯: 再复杂的逻辑,也是从最简单的开始.在书写代码的过程中,很多不好的规范都会影响网站的性能: 以下是整理出来的些许代码习惯: 1)字符串的比较 用 string.Empty 代替 " " 2)在遍历过程中,先定义好计数变量, 再遍历, 这样会减少每次遍历就分配一次内存空间: 复制代码 代码如下: int i; for( i=0; i<100;i++) { // codeing } 3)同样的,用 Str

JavaScript提高网站性能优化的建议(二)

在javascript关于提高网站性能的几点建议(一)中,从HTTP请求到页面渲染几个方面对提高网站性能提出了几点建议,本文是学习Steve Sounders的另外一本书<高性能网站建设进阶指南>之后,从JavaScript性能的角度进行总结概括,诸君共勉. JavaScript性能是实现高性能Web应用程序的关键 --Steve Sounders 1 利用js作用域链 作用域链(scope chain) 当执行一段JavaScript代码(全局代码或函数)时,JavaScript引擎会创建为

WordPress网站性能优化指南

1.选择一个好的主机 尽量不要使用免费主机或者共享主机(Godaddy啊.Bluehost啊等等所谓无限带宽.无限网站之类的主机) 首先,你的域名和你的主机最好在一个IDC哪儿,如果不是的话,建议你采用口碑良好的DNS服务商,让域名以最快的速度解析到主机上,这不是重点,重点是你的服务器/主机空间应该够快,怎么才能够快呢?CPU的配置.CPU的使用率.物理内存的大小.磁盘类型以及磁盘的I/O性能(包括Mysql数据库服务器所用磁盘).Mysql响应速度以及Mysql并发数等等,都会影响到网站的快与

Asp.Net 网站性能优化之缓字决 (上) 缓冲写数据

大家已经看到很多关于Asp.Net缓存的文章了.所以我写的时候要改变一下思路,从缓冲写数据开始说起.缓冲写数据的意思是在数据需要更新时不马上把数据存到数据库,而是先缓冲一下,然后在适当的时机再写入到数据库中. 缓冲写数据可以避免在网站并发访问多的时候,数据库瞬间承受过大压力,而造成死锁或响应不及时的情况. 那么什么时候适合缓冲写呢?是不是所有情况都适用呢?缓冲写会导致数据在内存中或者web server硬盘或者第三方存储中驻留一段时间,在这段时间内如果从数据库中查询最新数据的话,会有遗漏.大多数

网站性能优化之HTTP请求过程简述

1 域名解析(DNS Lookup):    这个没什么好说的就是把域名解析到指定IP地址的服务器所需要的时间. 2 创建连接(connection):    创建一个Tcp 连接到服务器或代理服务器所需要的时间,如使用的是https链接这个时间还包括SSH握手过程.通常在HTTP头中使用keep-alive 连接以避免重复连接到web 服务器的开销. 3 发送请求(Send):    发送HTTP请求消息到服务器所需的时间,所需时间取决于发送到服务器数据量的大小,一般包括 http头信息.po

JavaScript关于提高网站性能的几点建议(一)

近在学习<高性能网站建设指南>这本书,本文算是一个学习笔记,将学到的东西进行整理一下,方便后面查看. 性能黄金法则(Performance Golden Rule)解释了只有10%~20%的最终用户响应时间花在接受所请求的用户HTML文档上,剩余的80%~90%时间花在为HTML文档所引用的所有组件(图片.脚本.样式表等)进行的HTTP请求上,最终用户响应时间花费在页面组件上   --Steve Sounders 1 文件合并(减少HTTP请求数量) CSS Sprites   利用css s

ASP.NET比较常用的26个性能优化技巧

本篇文章主要介绍了"ASP.NET中常用的26个优化性能方法",主要涉及到ASP.NET中常用的26个优化性能方法方面的内容,对于ASP.NET中常用的26个优化性能方法感兴趣的同学可以参考一下. 现在很多客户也慢慢开始注重网站的性能了,同时有很多运营网站的公司也不像以前那样特别在意网站是否非常漂亮,而把更多的精力放在了网站性能优化上面,提供更快更稳定的浏览速度,在这个基础上面进行网站功能上的扩充和完善,那么在asp.net中如何优化性能呢? 1. 数据库访问性能优化 数据库的连接和关