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高级拖动技术 setCapture,releaseCapture
Jul 31 Javascript
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
浏览器兼容console对象的简要解决方案分享
Oct 24 Javascript
javascript操作excel生成报表示例
May 08 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
js实现宇宙星空背景效果的方法
Mar 03 Javascript
利用Angularjs和Bootstrap前端开发案例实战
Aug 27 Javascript
js获取Get值的方法
Sep 29 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
Jun 04 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
Sep 18 Javascript
详解Angular5 服务端渲染实战
Jan 04 Javascript
Vue实现页面添加水印功能
Nov 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的ob_start() 控制您的浏览器cache
2009/08/03 PHP
php适配器模式介绍
2012/08/14 PHP
PHP Error与Logging函数的深入理解
2013/06/03 PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
PHP关联数组实现根据元素值删除元素的方法
2015/06/26 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
JavaScript学习笔记之Cookie对象
2015/01/22 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
js+css简单实现网页换肤效果
2015/12/29 Javascript
jQuery异步提交表单实例
2017/05/30 jQuery
ztree简介_动力节点Java学院整理
2017/07/19 Javascript
微信小程序 获取javascript 里的数据
2017/08/17 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
Node.Js中实现端口重用原理详解
2018/05/03 Javascript
js实现购物车功能
2018/06/12 Javascript
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
javascript实现点击产生随机图形
2021/01/25 Javascript
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
Python算术运算符实例详解
2017/05/31 Python
python的Tqdm模块的使用
2018/01/10 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
css3 按钮 利用css3实现超酷下载按钮
2013/03/18 HTML / CSS
麦德龙官方海外旗舰店:德国麦德龙超市
2017/12/23 全球购物
装潢设计专业推荐信模板
2013/11/26 职场文书
感谢信模板大全
2015/01/23 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书
Golang 空map和未初始化map的注意事项说明
2021/04/29 Golang
MySQL创建高性能索引的全步骤
2021/05/02 MySQL
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python
MySQL RC事务隔离的实现
2022/03/31 MySQL