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 thickbox2.0使用的方法
Mar 05 Javascript
jquery tablesorter.js 支持中文表格排序改进
Dec 09 Javascript
jQuery 常见开发使用技巧总结
Dec 26 Javascript
js字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
利用javascript数组长度循环数组内所有元素
Dec 27 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
js验证框架之RealyEasy验证详解
Jun 08 Javascript
实现easyui的datagrid导出为excel的示例代码
Nov 10 Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 Javascript
Node.js log4js日志管理详解
Jul 31 Javascript
vue代码分割的实现(codesplit)
Nov 13 Javascript
vue.js实现左边导航切换右边内容
Oct 21 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处理json时中文问题的解决方法
2011/04/12 PHP
深入分析php中接口与抽象类的区别
2013/06/08 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
了解jQuery技巧来提高你的代码
2010/01/08 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
jQueryUI的Dialog的简单封装
2010/06/07 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
创建自己的jquery表格插件
2015/11/25 Javascript
js插件dropload上拉下滑加载数据实例解析
2016/07/27 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
分享python数据统计的一些小技巧
2016/07/21 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
python requests.get带header
2020/05/05 Python
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
大学生的应聘自我评价
2013/12/13 职场文书
护士年终考核评语
2014/12/31 职场文书
明星邀请函
2015/02/02 职场文书
婚宴来宾致辞
2015/07/28 职场文书
2016教师校本研修心得体会
2016/01/08 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书
Vue实现动态查询规则生成组件
2021/05/27 Vue.js
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL