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 相关文章推荐
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
Mar 17 Javascript
jQuery之尺寸调整组件的深入解析
Jun 19 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
Aug 15 Javascript
jquery引用方法时传递参数原理分析
Oct 13 Javascript
JavaScript中的Promise使用详解
Jun 24 Javascript
Bootstrap每天必学之表单
Nov 23 Javascript
微信小程序  网络请求API详解
Oct 25 Javascript
Vue数据驱动模拟实现5
Jan 13 Javascript
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
Jun 11 Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 Javascript
React组件refs的使用详解
Feb 09 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中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
测试php连接mysql是否成功的代码分享
2014/01/24 PHP
PHP基于timestamp和nonce实现的防止重放攻击方案分析
2019/07/26 PHP
js中将字符串转换成json的三种方式
2011/01/12 Javascript
jQuery取得select选择的文本与值的示例
2013/12/09 Javascript
jQuery中first()方法用法实例
2015/01/06 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
理解AngularJs指令
2015/12/10 Javascript
微信小程序 删除项目工程实现步骤
2016/11/10 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
JS实现购物车特效
2017/02/02 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
CKEditor4配置与开发详细中文说明文档
2018/10/08 Javascript
基于layui的table插件进行复选框联动功能的实现方法
2019/09/19 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2018/06/26 Python
解读python如何实现决策树算法
2018/10/11 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
Django通过dwebsocket实现websocket的例子
2019/11/15 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
Keras设置以及获取权重的实现
2020/06/19 Python
Java面试中常遇到的问题,也是需要注意的几点
2013/08/30 面试题
计算机科学与技术应届生求职信
2013/11/07 职场文书
我未来的职业规划范文
2014/01/11 职场文书
英语商务邀请函范文
2014/01/16 职场文书
开业主持词
2014/03/21 职场文书
《金子》教学反思
2014/04/13 职场文书
计算机专业毕业生求职信
2014/04/30 职场文书
大四毕业生自荐书
2014/07/05 职场文书
庆七一活动简报
2015/07/20 职场文书
2015年教师节广播稿
2015/08/19 职场文书