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 相关文章推荐
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
javascript实现的一个带下拉框功能的文本框
May 08 Javascript
JavaScript弹窗基础篇
Apr 27 Javascript
Angularjs过滤器使用详解
May 25 Javascript
脚本div实现拖放功能(两种)
Feb 13 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
JavaScript数据结构之二叉树的查找算法示例
Apr 13 Javascript
微信小程序之GET请求的实例详解
Sep 29 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 Javascript
基于vue+element实现全局loading过程详解
Jul 10 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 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
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
xml在joomla表单中的应用详解分享
2012/07/19 PHP
PHP面向对象学习笔记之一 基础概念
2012/10/06 PHP
深入PHP5中的魔术方法详解
2013/06/17 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
php中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
jQuery Chosen通用初始化
2017/03/07 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
vue打包npm run build时候界面报错的解决
2020/08/13 Javascript
JS实现密码框效果
2020/09/10 Javascript
Python之eval()函数危险性浅析
2014/07/03 Python
python3 实现的人人影视网站自动签到
2016/06/19 Python
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
Python3 翻转二叉树的实现
2019/09/30 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
写给学生的新学期寄语
2014/01/18 职场文书
班主任班级寄语大全
2014/04/04 职场文书
人大代表选举标语
2014/10/07 职场文书
售房协议书范本2014
2014/10/23 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
初中美术教学反思
2016/02/17 职场文书
JavaScript设计模式之原型模式详情
2022/06/21 Javascript