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 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
详解new function(){}和function(){}() 区别分析
Mar 22 Javascript
javascript背投广告代码的完善
Apr 08 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
Jan 16 Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 Javascript
Boostrap入门准备之border box
May 09 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
May 31 Javascript
JavaScript与ActionScript3两者的同性与差异性
Sep 22 Javascript
详解在AngularJS的controller外部直接获取$scope
Jun 02 Javascript
在vue组件中使用axios的方法
Mar 16 Javascript
关于vue面试题汇总
Mar 20 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+AJAX让WordPress动态加载文章的教程
2015/12/11 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
利用JS判断鼠标移入元素的方向
2016/12/11 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
2017/05/31 Javascript
Vue.js实现列表清单的操作方法
2017/11/15 Javascript
9种改善AngularJS性能的方法
2017/11/28 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
关于Js中new操作符的作用详解
2021/02/21 Javascript
Python切片用法实例教程
2014/09/08 Python
Python入门篇之字典
2014/10/17 Python
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
python简单读取大文件的方法
2016/07/01 Python
浅谈Python中的可变对象和不可变对象
2017/07/07 Python
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
用Python徒手撸一个股票回测框架搭建【推荐】
2019/08/05 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
10分钟入门CSS3 Animation
2018/12/25 HTML / CSS
美国著名童装品牌:OshKosh B’gosh
2016/08/05 全球购物
空气的环保标语
2014/06/12 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
商务考察邀请函模板
2015/02/02 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
60条职场经典语录,总有一条能触动你的心
2019/08/21 职场文书