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 isType() 类型判断代码
Feb 14 Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
在JavaScript中实现类的方式探讨
Aug 28 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
Jul 07 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
vue-lazyload使用总结(推荐)
Nov 01 Javascript
javascript防抖函数debounce详解
Jun 11 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 Javascript
layui-table获得当前行的上/下一行数据的例子
Sep 24 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 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 清除网页病毒的方法
2008/12/05 PHP
php中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
php 中英文语言转换类代码
2011/08/11 PHP
支持中文的php加密解密类代码
2011/11/27 PHP
初品cakephp 入门基础
2012/02/16 PHP
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
jquery.map()方法的使用详解
2015/07/09 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
js实现动态改变radio状态的方法
2018/02/28 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
Python多进程multiprocessing.Pool类详解
2018/04/27 Python
Python SQL查询并生成json文件操作示例
2018/08/17 Python
python使用webdriver爬取微信公众号
2018/08/31 Python
Python如何爬取微信公众号文章和评论(基于 Fiddler 抓包分析)
2019/06/28 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
士力架广告词
2014/03/20 职场文书
文员岗位职责
2015/02/04 职场文书
信息技术教研组工作总结
2015/08/13 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书
浅谈MySQL user权限表
2021/06/18 MySQL