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 相关文章推荐
用JS判断IE版本的代码 超管用!
Aug 09 Javascript
jQuery 动态云标签插件
Nov 11 Javascript
简介JavaScript中Math.LOG10E属性的使用
Jun 14 Javascript
Eclipse引入jquery报错如何解决
Dec 01 Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
JS创建对象的写法示例
Nov 04 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
深入理解Vue 的钩子函数
Sep 05 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
Vue项目实现换肤功能的一种方案分析
Aug 28 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
PHP 中执行系统外部命令
2006/10/09 PHP
PHP的开合式多级菜单程序
2006/10/09 PHP
PHP版国家代码、缩写查询函数代码
2011/08/14 PHP
浅析PHP绘图技术
2013/07/03 PHP
解决PHP mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
PHP实现中文圆形印章特效
2015/06/19 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
php简单随机字符串生成方法示例
2017/04/19 PHP
php文件后缀不强制为.php的实操方法
2019/09/18 PHP
js获得页面的高度和宽度的方法
2014/02/23 Javascript
删除Javascript Object中间的key
2014/11/18 Javascript
基于javascript实现简单计算器功能
2016/01/03 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
VUE中的无限循环代码解析
2017/09/22 Javascript
你可能不知道的前端算法之文字避让(inMap)
2018/01/12 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
python的几种开发工具介绍
2007/03/07 Python
python生成指定长度的随机数密码
2014/01/23 Python
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
Python中格式化format()方法详解
2017/04/01 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
django框架防止XSS注入的方法分析
2019/06/21 Python
Python实现链表反转的方法分析【迭代法与递归法】
2020/02/22 Python
Django权限控制的使用
2021/01/07 Python
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
银河香水:Galaxy Perfume
2019/03/25 全球购物
品恩科技软件测试面试题
2014/10/26 面试题
自我鉴定怎么写
2013/12/05 职场文书
校园学雷锋活动月总结
2014/03/09 职场文书
街道务虚会发言材料
2014/10/20 职场文书
民政局离婚协议书范本
2014/10/20 职场文书
百日宴上的祝酒词
2015/08/10 职场文书
2019通用版导游词范本!
2019/08/07 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL