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 相关文章推荐
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
May 10 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 Javascript
layer实现关闭弹出层刷新父界面功能详解
Nov 15 Javascript
vuejs实现递归树型菜单组件
Jan 13 Javascript
微信小程序项目实践之验证码倒计时功能
Jul 18 Javascript
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 Javascript
详解Vue2.5+迁移至Typescript指南
Aug 01 Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 Javascript
JavaScript 语句之常用 for 循环详解
Mar 29 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
常用星际术语索引(新手指南)
2020/03/04 星际争霸
一个用于网络的工具函数库
2006/10/09 PHP
常用的php ADODB使用方法集锦
2008/03/25 PHP
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
在PHP模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
PHP输出一个等腰三角形的方法
2015/05/12 PHP
PHP工程师VIM配置分享
2015/12/15 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
ExtJS下grid的一些属性说明
2009/12/13 Javascript
js 遍历对象的属性的代码
2011/12/29 Javascript
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
angularjs ocLazyLoad分步加载js文件实例
2017/01/17 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
微信小程序版翻牌小游戏
2018/01/26 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python中input()与raw_input()的区别分析
2016/02/27 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
升级keras解决load_weights()中的未定义skip_mismatch关键字问题
2020/06/12 Python
基于python实现删除指定文件类型
2020/07/21 Python
Python 防止死锁的方法
2020/07/29 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
门诊手术室工作制度
2014/01/30 职场文书
赔偿协议书怎么写
2015/01/28 职场文书
行为规范主题班会
2015/08/13 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python
关于nginx 实现jira反向代理的问题
2021/09/25 Servers
海贼王十大逆天果实 魂魂果实上榜,岩浆果实攻击力最强
2022/03/18 日漫