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 获取 outerHtml 包含当前节点本身的代码
Oct 30 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
Mar 16 Javascript
深入理解Promise.all
Aug 08 Javascript
vue项目移动端实现ip输入框问题
Mar 19 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
Apr 09 Javascript
vue $set 给数据赋值的实例
Nov 09 Javascript
解决vue v-for src 图片路径问题 404
Nov 12 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 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
PHP5.0正式发布 不完全兼容PHP4 新增多项功能
2006/10/09 PHP
FCKeditor添加自定义按钮
2008/03/27 PHP
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
心扬JS分页函数代码
2010/09/10 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
13 个JavaScript 性能提升技巧分享
2012/07/26 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
inquirer.js一个用户与命令行交互的工具详解
2019/05/18 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
2020/02/17 Javascript
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
OpenCV2.3.1+Python2.7.3+Numpy等的配置解析
2018/01/05 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
PyQt5根据控件Id获取控件对象的方法
2019/06/25 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
python实现在列表中查找某个元素的下标示例
2020/11/16 Python
Python self用法详解
2020/11/28 Python
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
悬挂训练绳:TRX
2017/12/14 全球购物
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
关于元旦的广播稿
2014/02/16 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
教师党员一句话承诺
2014/03/28 职场文书
幼儿园中班评语大全
2014/04/17 职场文书
借款担保书范文
2014/05/13 职场文书
售后服务承诺函格式
2015/01/21 职场文书
开学第一周总结
2015/07/16 职场文书
学会感恩主题班会
2015/08/12 职场文书
利用python做表格数据处理
2021/04/13 Python