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 相关文章推荐
javascript时区函数介绍
Sep 14 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
May 19 Javascript
layui导航栏实现代码
May 19 Javascript
AngularJS的ng-click传参的方法
Jun 19 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
vue 组件中添加样式不生效的解决方法
Jul 06 Javascript
js正则取值的结果数组调试方法
Oct 10 Javascript
详解ES6 系列之异步处理实战
Oct 26 Javascript
mpvue 单文件页面配置详解
Dec 02 Javascript
angular6 填坑之sdk的方法
Dec 27 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
使用bcompiler对PHP文件进行加密的代码
2010/08/29 PHP
修改php.ini以达到屏蔽错误信息并记录日志
2013/06/16 PHP
PHP5.5在windows安装使用memcached服务端的方法
2014/04/16 PHP
PHP扩展迁移为PHP7扩展兼容性问题记录
2016/02/15 PHP
PHP页面跳转操作实例分析(header方法)
2016/09/28 PHP
php使用include 和require引入文件的区别
2017/02/16 PHP
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
2007/04/12 Javascript
firefox中用javascript实现鼠标位置的定位
2007/06/17 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
移动Web中图片自适应的两种JavaScript解决方法
2015/06/18 Javascript
Knockout自定义绑定创建方法
2015/12/26 Javascript
jQuery实现点击关注和取消功能
2017/07/03 jQuery
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
动态Axios的配置步骤详解
2018/01/12 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
2018/03/17 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
用python读写excel的方法
2014/11/18 Python
Python格式化压缩后的JS文件的方法
2015/03/05 Python
Python实现的选择排序算法示例
2017/11/29 Python
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
Python itertools.product方法代码实例
2020/03/27 Python
新手学python应该下哪个版本
2020/06/11 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
使用Python实现音频双通道分离
2020/12/25 Python
Old Navy加拿大官网:美式休闲服饰品牌
2017/09/26 全球购物
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
2015年机关党委工作总结
2015/05/23 职场文书
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js