JavaScript 性能优化小结


Posted in Javascript onOctober 12, 2015

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

Javascript 相关文章推荐
Javascript改变CSS样式(局部和全局)
Dec 18 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
Jan 28 Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 Javascript
AngularJS Phonecat实例讲解
Nov 21 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
vue绑定设置属性的多种方式(5)
Aug 16 Javascript
Javascript实现运算符重载详解
Apr 07 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
js中值引用和地址引用实例分析
Jun 21 Javascript
countUp.js实现数字动态变化效果
Oct 17 Javascript
vue更改数组中的值实例代码详解
Feb 07 Javascript
JavaScript实现京东快递单号查询
Nov 30 Javascript
一个php+js实时显示时间问题
Oct 12 #Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
Oct 12 #Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
Oct 12 #Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
Oct 12 #Javascript
jquery实现可自动判断位置的弹出层效果代码
Oct 12 #Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 #Javascript
JavaScript实现上下浮动的窗口效果代码
Oct 12 #Javascript
You might like
默默简单的写了一个模板引擎
2007/01/02 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
用于table内容排序
2006/07/21 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
Node.js与PHP、Python的字符处理性能对比
2014/07/06 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
js随机生成网页背景颜色的方法
2015/02/26 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
js实现简单计算器
2015/11/22 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
2015/12/24 Javascript
Node.js实现文件上传
2016/07/05 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
2016/08/17 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
微信小程序开发探究
2016/12/27 Javascript
package.json文件配置详解
2017/06/15 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
vue init失败简单解决方法(终极版)
2017/12/22 Javascript
jQuery实现定时隐藏对话框的方法分析
2018/02/12 jQuery
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
浅谈vuex actions和mutation的异曲同工
2018/12/13 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
2019/09/21 Javascript
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
python循环监控远程端口的方法
2015/03/14 Python
Python表示矩阵的方法分析
2017/05/26 Python
tensorflow之并行读入数据详解
2020/02/05 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
html5视频媒体标签video的使用方法及完整参数说明详解
2019/09/27 HTML / CSS
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
给儿子的表扬信
2014/01/15 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书