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 sudoku 数独智力游戏生成代码
Mar 27 Javascript
JavaScript 基础篇之运算符、语句(二)
Apr 07 Javascript
jquery 简单应用示例总结
Aug 09 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
了不起的node.js读书笔记之node.js中的特性
Dec 22 Javascript
jQuery中:last-child选择器用法实例
Dec 31 Javascript
JavaScript原生对象之String对象的属性和方法详解
Mar 13 Javascript
AngularJS表单和输入验证实例
Nov 02 Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 Javascript
Javascript Worker子线程代码实例
Feb 20 Javascript
Flexible.js可伸缩布局实现方法详解
Nov 13 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加MYSQL服务器
2006/10/09 PHP
php不使用copy()函数复制文件的方法
2015/03/13 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
深入浅出讲解:php的socket通信原理
2016/12/03 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
jquery动态改变onclick属性导致失效的问题解决方法
2013/12/04 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
JS实现点击按钮获取页面高度的方法
2015/11/02 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
2016/09/17 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
Pyramid添加Middleware的方法实例
2013/11/27 Python
python命令行参数sys.argv使用示例
2014/01/28 Python
Python里disconnect UDP套接字的方法
2015/04/23 Python
不要用强制方法杀掉python线程
2017/02/26 Python
python 从csv读数据到mysql的实例
2018/06/21 Python
PyTorch的深度学习入门教程之构建神经网络
2019/06/27 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
python speech模块的使用方法
2020/09/09 Python
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
HEMA英国:荷兰原创设计
2018/08/28 全球购物
经济实惠的豪华背包和行李袋:Packs Project
2018/10/17 全球购物
2013英文求职信模板范文
2013/11/15 职场文书
事业单位分类改革实施方案
2014/03/21 职场文书
计算机专业自荐信
2014/05/24 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
辩护词范文大全
2015/05/21 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
python本地文件服务器实例教程
2021/05/02 Python
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
Java 获取Word中所有的插入和删除修订的方法
2022/04/06 Java/Android
3050和2060哪个好 性能差多少 差距有多大 谁更有性价比
2022/06/17 数码科技