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类和继承 constructor属性
Mar 04 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
Jun 21 Javascript
jquery的extend和fn.extend的使用说明
Jan 09 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
Jan 10 Javascript
JS实现Enter键跳转及控件获得焦点
Aug 12 Javascript
Javascript基础教程之函数对象和属性
Jan 18 Javascript
jquery购物车结算功能实现方法
Oct 29 Javascript
详谈JavaScript的闭包及应用
Jan 17 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 Javascript
在vue项目中引入高德地图及其UI组件的方法
Sep 04 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 23 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中调用JAVA
2006/10/09 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
Yii框架getter与setter方法功能与用法分析
2019/10/22 PHP
Prototype 工具函数 学习
2009/07/23 Javascript
Javascript 自定义类型方法小结
2010/03/02 Javascript
中国地区三级联动下拉菜单效果分析
2012/11/15 Javascript
Javascript实现多彩雪花从天降散落效果的方法
2015/02/02 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
BootStrap整体框架之基础布局组件
2016/12/15 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
Vue组件和Route的生命周期实例详解
2018/02/10 Javascript
JS解析后台返回的JSON格式数据实例
2018/08/06 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
Python FTP操作类代码分享
2014/05/13 Python
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
pytorch 限制GPU使用效率详解(计算效率)
2020/06/27 Python
美国翻新电子产品商店:The Store
2019/10/08 全球购物
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
大学生作弊检讨书
2014/02/19 职场文书
幼儿园儿童节主持词
2014/03/21 职场文书
联谊会主持词
2014/03/26 职场文书
青春奉献演讲稿
2014/05/08 职场文书
建筑工地大门标语
2014/06/18 职场文书
2015初中生物教研组工作总结
2015/07/21 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
Python还能这么玩之用Python修改了班花的开机密码
2021/06/04 Python
node快速搭建后台的实现步骤
2022/02/18 NodeJs
Go 中的空白标识符下划线
2022/03/25 Golang
《月歌。》宣布制作10周年纪念剧场版《RABBITS KINGDOM THE MOVIE》
2022/04/02 日漫
Python中time标准库的使用教程
2022/04/13 Python