优化JavaScript脚本的性能总结
优化JavaScript脚本的性能总结
JavaScript性能优化重要吗？当然，如果你的JavaScript只是做一些简单的表单验证，你几乎可以忽略。但是，如果你是构建一个复杂的基于JavaScript的程序，例如webgame，富客户端，那么优化JavaScript程序的性能就很重要了。
瓶颈在哪里？
如果你是急匆匆的搜索到这篇文章，觉得你的js太缓慢了，可以先看看下面几个tips，或许对你有帮助：
IE6，7的JavaScript解释器非常差，比起firefox，opera，chrome，safari等浏览器，差距是数量级的。相反，这几个浏览器的JavaScript效率都非常的高，如果你的js在这几个浏览器下面也很慢，才真正有问题。而事实上，对JavaScript做优化，目前而言都是在对IE6，7做优化，而IE8的js效率已经提升了很多，跟firefox等没有数量级上的差距了，但是性能还是落后的。
检查你代码里面的循环，递归调用等地方的代码，是否存在逻辑问题？或者说业务本身就这么复杂需要长时间的js执行？
检查代码里面的字符串拼接操作，IE6，7的字符串拼接，应该说是其JavaScript解释器的错误实现，导致IE6，7在处理字符串拼接上存在严重的效率问题，具体的解决方法可以参看下面的详细介绍。
检查页面DOM元素的数量。页面DOM元素过多,会导致浏览器JS运行和DOM渲染效率降低，这往往是一个根本性的原因，采用ext做出来的系统，很多情况下会出现这个问题，而这个问题，目前而言并没有什么最佳的解决方案。如果ext是选定的架构，那么应该在DOM元素数量的控制上下一番功能。
以下我们来具体的分析优化的具体实现。以上提到的几个tips往往是解决的关键，除此之外的，很多优化往往是需要到一个很高的数量级才会有明显的效果，所以在此顺便点评了优化指数，即做这个优化的必要性，5星最高，3星程度就是基本一定要做的了。
语言层次方面
1)循环
循环是很常用的一个控制结构，大部分东西要依靠它来完成，在JavaScript中，我们可以使用for(;;),while(),for(in) 三种循环，事实上，这三种循环中for(in)的效率极差，因为他需要查询散列键，只要可以就应该尽量少用。for(;;)和while循环的性能应该说基本（平时使用时）等价。
而事实上，如何使用这两个循环，则有很大讲究。我在测试中有些很有意思的情况，见附录。最后得出的结论是：
?如果是循环变量递增或递减，不要单独对循环变量赋值，应该在它最后一次读取的时候使用嵌套的++或–操作符。
?如果要与数组的长度作比较，应该事先把数组的length属性放入一个局部变量中，减少查询次数。
举例，假设arr是一个数组，最佳的遍历元素方式为：
for(var i=0, len = arr.length;i0;i--){...}优化指数：1星。除非你循环的次数达到万以上的数量级，否则这样的优化并不能带来明显的收益，不过养成这样的写法是个好习惯。for(in)的效率有多差这个曹力没给出测试结果，但是我认为该怎么用还是怎么用，前提还是循环的次数，在jQuery之类的框架源码里面都有很多的for(in)的使用。
2)局部变量和全局变量
局部变量的速度要比全局变量的访问速度更快，因为全局变量其实是全局对象的成员，而局部变量是放在函数的栈当中的。
优化指数：2星。将全局变量改成局部变量提高的性能也并不明显，但是合理设计程序的结构，减少全局变量的使用是比较良好的编程习惯，可以避免一些无意中带来的错误或者bug。
3)不使用Eval
使用eval相当于在运行时再次调用解释引擎对内容进行运行，需要消耗大量时间。这时候使用JavaScript所支持的闭包可以实现函数模版（关于闭包的内容请参考函数式编程的有关内容）
优化指数：3星。关于eval我还没有进行过深入的测试，不过根据多个资料的介绍，eval 确实会消耗大量时间，不适宜在程序中多使用。此外，with语句也一样，不适宜多使用。
4)减少对象查找
因为JavaScript的解释性，所以a.b.c.d.e，需要进行至少4次查询操作，先检查a 再检查a中的b，再检查b中的c，如此往下。所以如果这样的表达式重复出现，只要可能，应该尽量少出现这样的表达式，可以利用局部变量，把它放入一个临时的地方进行查询。
这一点可以和循环结合起来，因为我们常常要根据字符串、数组的长度进行循环，而通常这个长度是不变的，比如每次查询a.length，就要额外进行一个操作，而预先把var len=a.length，则就少了一次查询。
优化指数：1星。一样，减少对象查找这样提升的效率也很不明显，一样还是要到一个数量级才行。比如YUI这样的，重度的命名空间，都是XX.XX.XX.XX，但它一样应用得很广泛。
5)字符串连接
如果是追加字符串，最好使用s+=anotherStr操作，而不是要使用s=s+anotherStr。
如果要连接多个字符串，应该少使用+=，如
s+=a;
s+=b;
s+=c;应该写成
s+=a + b + c；而如果是收集字符串，比如多次对同一个字符串进行+=操作的话，最好
使用一个缓存。怎么用呢？使用JavaScript数组来收集，最后使用join方法连接起来，如下:
var buf = new Array();
for(var i = 0; i < 100; i++){
buf.push(i.toString());
}
var all = buf.join("");优化指数：4星。如果你的js程序经常涉及到字符串的拼接操作的话，这个优化的意义就很重大了。当然，这个优化在ff，chrome之类的浏览器上面并没有什么明显的效果。但是别忘了有个浏览器叫IE。ie6跟ie7下面，字符串拼接的引擎实现有错误，所以在大量字符串拼接的情况下，用数组的join操作来拼接字符串会比用+号来拼接提升一个数量级效率。
6)类型转换
类型转换是大家常犯的错误，因为JavaScript是动态类型语言，你不能指定变量的类型。
?把数字转换成字符串，应用”" + 1，虽然看起来比较丑一点，但事实上这个效率是最高的，性能上来说：
(”" + ) > String() > .toString() > new String()
这条其实和下面的“直接量”有点类似，尽量使用编译时就能使用的内部操作要比运行时使用的用户操作要快。
String()属于内部函数，所以速度很快，而.toString()要查询原型中的函数，所以速度逊色一些，new String()用于返回一个精确的副本。
?浮点数转换成整型，这个更容易出错，很多人喜欢使用parseInt()，其实parseInt()是用于将字符串转换成数字，而不是浮点数和整型之间的转换，我们应该使用Math.floor()或者Math.round()。
Math是内部对象，所以Math.floor() 其实并没有多少查询方法和调用的时间，速度是最快的。
?对于自定义的对象，如果定义了toString()方法来进行类型转换的话，推荐显式调用toString()，因为内部的操作在尝试所有可能性之后，会尝试对象的toString()方法尝试能否转化为String，所以直接调用这个方法效率会更高
优化指数：2.5星。这些优化一样是没办法得到多大的提升的，但是养成这样的写法与做法确实很有必要的。很多新手与老手的差距也都体现在对细节的处理上面。
7)使用直接量
其实这个影响倒比较小，可以忽略。什么叫使用直接量，比如，JavaScript支持使用[param,param,param,...]来直接表达一个数组，以往我们都使用new Array(param,param,…)，使用前者是引擎直接解释的，后者要调用一个Array内部构造器，所以要略微快一点点。
同样，var foo = {}的方式也比var foo = new Object();快，var reg = /../;要比var reg=new
RegExp()快。
优化指数：1星。使用直接量是现在很流行的做法，建议写法上养成一样的习惯，代码看起来会更清晰。
8)字符串遍历操作
对字符串进行循环操作，譬如替换、查找，应使用正则表达式，因为本身JavaScript 的循环速度就比较慢，而正则表达式的操作是用C写成的语言的API，性能很好。
优化指数：1.5星。优化是有前提的，看你需要操作的字符串有多大，普通的字符串，该用什么方式还是用什么方式。
9)高级对象
自定义高级对象和Date、RegExp对象在构造时都会消耗大量时间。如果可以复用，应采用缓存的方式。
优化指数：2星。
DOM相关
1)插入HTML
很多人喜欢在JavaScript中使用document.write来给页面生成内容。事实上这样的效率较低，如果需要直接插入HTML，可以找一个容器元素，比如指定一个div或者span，并设置他们的innerHTML来将自己的HTML代码插入到页面中。
优化指数：3星。document.write虽然方便，但是不仅效率较低，同样也带来一些维护上困难。在你经常需要设置innerHTML的情况下，那就更不要去使用document.write。
2)对象查询
使用[""]查询要比.items()更快，这和前面的减少对象查找的思路是一样的，调用.items()增加了一次查询和函数的调用。
优化指数：2星。使用[""]提升的性能可以忽略，不过我觉得[""]的写法会更加清晰，此外，item()这个的方法只有IE下才能用，firefox下面是不行的。
3)创建DOM节点
通常我们可能会使用字符串直接写HTML来创建节点，其实这样做
1.无法保证代码的有效性
2.字符串操作效率低
所以应该是用document.createElement()方法，而如果文档中存在现成的样板节点，应该是用cloneNode()方法，因为使用createElement()方法之后，你需要设置多次元素的属性，使用cloneNode()则可以减少属性的设置次数——同样如果需要创建很多元素，应该先准备一个样板节点。
优化指数：2星。同样的，直接用HTML方式来创建节点还是很多便利的，而createElement()的方式则要写不少代码。这性能跟便利之间，取舍其实完全在你自己了。
4)定时器
如果针对的是不断运行的代码，不应该使用setTimeout，而应该是用setInterval。
setTimeout每次要重新设置一个定时器。
优化指数：1星。本身这2个定时器使用的场合就不太一样。很多setTimeout的场合用setInterval并不适合。
其他
1)脚本引擎
据测试Microsoft的JScript的效率较Mozilla的Spidermonkey要差很多，无论是执行速度还是内存管理上，因为JScript现在基本也不更新了。但SpiderMonkey不能使用ActiveXObject
2)文件优化
文件优化也是一个很有效的手段，删除所有的空格和注释，把代码放入一行内，可以加快下载的速度，注意，是下载的速度而不是解析的速度，如果是本地，注释和空格并不会影响解释和执行速度。
优化指数：5星。产品化的代码，用压缩工具处理后再放出是必须的。可用的工具很多，比如YUI Compressor，JS min。虽然它并不是提高程序的性能，但是JavaScript作为客户端执行的程序，更快下载到客户端就能更早得到执行，这个时间往往比你费尽心思的优化提高得多得多。想象一下，如果extjs没有压缩，那么客户端需要多么漫长的等待才能看到界面。
总结
本文总结了在JavaScript编程中所找到的提高JavaScript运行性能的一些方法，其实这些经验都基于几条原则：
1)直接拿手头现成的东西比较快，如局部变量比全局变量快，直接量比运行时构造对象快等等。
2)尽可能少地减少执行次数，比如先缓存需要多次查询的。
3)尽可能使用语言内置的功能，比如串链接。
4)尽可能使用系统提供的API，因为这些API是编译好的二进制代码，执行效率很高。
同时，一些基本的算法上的优化，同样可以用在JavaScript中，比如运算结构的调整，这里就不再赘述了。但是由于JavaScript是解释型的，一般不会在运行时对字节码进行优化，所以这些优化仍然是很重要的。
JavaScript常用知识点
1、GET和POST的区别，何时使用POST？ GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符 POST：一般用于修改服务器上的资源，对所发送的信息没有限制。 GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值， 也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。 然而，在以下情况中，请使用POST 请求： 无法使用缓存文件（更新服务器上的文件或数据库） 向服务器发送大量数据（POST 没有数据量限制） 发送包含未知字符的用户输入时，POST 比GET 更稳定也更可靠JavaScript是客户端和服务器端脚本语言，可以插入到HTML页面中，并且是目前较热门的Web开发语言。同时，JavaScript也是面向对象编程语言。 类似的基本题目还包括：JavaScript都有哪些类型?JavaScript是谁发明的?……2、列举Java和JavaScript之间的区别? Java是一门十分完整、成熟的编程语言。相比之下，JavaScript是一个可以被引入HTML页面的编程语言。这两种语言并不完全相互依赖，而是针对不同的意图而设计的。Java是一种面向对象编程(OOPS)或结构化编程语言，类似的如C ++或C，而JavaScript是客户端脚本语言，它被称为非结构化编程。
3. JavaScript和ASP脚本相比，哪个更快? JavaScript更快。JavaScript是一种客户端语言，因此它不需要Web服务器的协助来执行。另一方面，ASP是服务器端语言，因此总是比JavaScript慢。值得注意的是，Javascript现在也可用于服务器端语言(nodejs)。 4、什么是负无穷大? 负无穷大是JavaScript中的一个数字，可以通过将负数除以零来得到。 5、如何将JavaScript代码分解成几行吗? 在字符串语句中可以通过在第一行末尾使用反斜杠“\”来完成 例：document.write(“This is \a program”); 如果不是在字符串语句中更改为新行，那么javaScript会忽略行中的断点。
javaScript重点知识总结
1、JavaScript 显示数据 JavaScript 可以通过不同的方式来输出数据： 使用window.alert()弹出警告框。 使用document.write()方法将内容写到HTML 文档中。 使用innerHTML写入到HTML 元素。 使用console.log()写入到浏览器的控制台。 实例： document.getElementById("demo").innerHTML = "段落已修改。"; document.write("
这是一个标题
");//write可以直接写入格式！ 2、JavaScript 数据类型 var length = 16; // Number 通过数字字面量赋值var points = x * 10; // Number 通过表达式字面量赋值var lastName = "Johnson"; // String 通过字符串字面量赋值var cars = ["Saab", "Volvo", "BMW"]; // Array 通过数组字面量赋值var person = {firstName:"John", lastName:"Doe"}; // Object 通过对象字面量赋值 var cars=new Array(); cars[0]="Saab"; cars[1]="Volvo"; cars[2]="BMW"; 3、JavaScript事件HTML 事件可以是浏览器行为，也可以是用户行为。 以下是HTML 事件的实例： HTML 页面完成加载。 HTML input 字段改变时。 HTML 按钮被点击。 右图是常见的事件(前面都有on) 事件有三种写法，举onclick为例： //后面再写函数实现方式。 4、JavaScript 字符串 var carname = "Volvo XC60"; var character = carname[7]; //字符串的索引从0 开始 JavaScript本身对单引号还是双引号没有区别。一般都用双引号，两个都存在时，再考虑。
JavaScript复习题
复习题1 一、选择题 1、写“Hello World”的正确javascript语法是 A. ("Hello World") B. "Hello World" C. ("Hello World") D. ("Hello World") 2、JS特性不包括( ) A.解释性 B.用于客户端 C.基于对象 D.面向对象 3、下列JS的判断语句中( )是正确的 (i==0)(i=0) i==0 then i=0 then 4、下列JavaScript的循环语句中( )是正确的 (i<10;i++) (i=0;i<10) i=1 to 10 (i=0;i<=10;i++) 5、下列的哪一个表达式将返回假 A.!(3<=1) B.(4>=4)&&(5<=2) C.(“a”==”a”)&&(“c”!=”d”) D.(2<3)||(3<2) 6、下列选项中,( )不是网页中的事件 7、有语句“var x=0;while(____) x+=2;”，要使while循环体执行10次，空白处的循环判定式应写为： A．x<10 B. x<=10 <20 <=20 8、JS语句 var a1=10; var a2=20; alert(“a1+a2=”+a1+a2) 将显示( )结果 +a2=30 +a2=1020+a2=a1+a2 9、将字串s中的所有字母变为小写字母的方法是( ) 、以下( )表达式产生一个0~7之间(含0,7)的随机整数. . floor()*8) 11、产生当前日期的方法是( ) (); () Date() Now() 12、如果想在网页显示后,动态地改变网页的标题( ) A.是不可能的 B.通过(“新的标题内容”) C. 通过=(“新的标题内容”) D. 通过(“新的标题内容”) 13、某网页中有一个窗体对象,其名称是mainForm,该窗体对象的第一个元素是按钮,其名称是myButton,表述该按钮对象的方法是()
个人心得javascript总结模板
个人心得javascript总结模板 个人心得javascript总结模板 篇一：个人心得javascript总结 1、javascript 是一种基于对象，和事件驱动的并具有安全性的脚本语言；基于对象，动态语言，无需编译，直接解释执行； 2、可以放在的地方； A、中，一对 之间； B、单独文件中 C、将脚本程序代码作为属性值、javascript 3、保留字以及关键字； 4、javascript基本语法： 4.1 标识：大小写字母，数字，下划线，和美元符号：不能以数字开头； 4.2 javascript严格区分大小写 4.3 每条语句必须以分号结束；（不写，一般没事，但是可能会引起不必要的歧义） 4.4 多行注释**单行注释： 4.5 Function test(){ Var i=100;不加var 就会自动变成全局变量，这样在以后会产生冲突；
Alert(i); } Test(); 5、数据类型：(数字，boolean，String字符串；日期什么的是对象了) 特殊值：NaN，Infinity，函数isNaN（）；isFinite（）； Boolean，取值只能是true，和false 全是小写 逻辑运算符 var a=100; var b=0; var c=a||b; alert(c);返回值是100：就是当两边返回值都是false时，返回第一个或最后一个不为false的值； 6、什么值在javascript中是false？ 逻辑运算中，0，“”，false，null，undefined，NaN均表示false 6.1想要赋个默认值：怎么办？ function test(e){ e=e||new object(); if(https://www.wendangku.net/doc/ef3260575.html,!='ang'){ alert(e);}} test(3); 看这里： Var sth=test;相当于将函数赋给一个变量，这个变量之后可以传参运行
Bootstrap知识简单归纳
Bootstrap 响应式实用工具---目前只适用于块和表切换 Bootstrap 字形图标（Glyphicons） 什么是字形图标（Glyphicons）？ 字形图标（Glyphicons）是在Web 项目中使用的图标字体。 字形图标（Glyphicons）列表 点击这里，查看可用的字形图标（Glyphicons）列表 用法 如需使用图标，只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。 在线定制字形图标（Glyphicons） 点击这里，在线定制字形图标（Glyphicons）。 插入符 使用插入符表示下拉功能和方向。使用带有class caret 的 元素得到该功能。 关闭图标 使用通用的关闭图标来关闭模态框和警告框。使用class close 得到关闭图标。 快速浮动 您可以分别使用class pull-left 或pull-right 来把元素向左或向右浮动。下面的实例演示了这点。 如需对齐导航栏中的组件，请使用.navbar-left 或.navbar-right 代替。请查看Bootstrap 导航栏。 居中内容块 使用class center-block 来居中元素。
清除浮动 如需清除元素的浮动，请使用.clearfix class。 显示和隐藏内容 您可以通过使用class .show 和.hidden 来强行设置元素显示或隐藏（包括屏幕阅读器）。屏幕阅读器 您可以通过使用class .sr-only 来把元素对所有设备隐藏，除了屏幕阅读器。 Bootstrap 下拉菜单（Dropdowns） 对齐 通过向.dropdown-menu 添加class .pull-right 来向右对齐下拉菜单class="dropdown-menu pull-right" 标题 您可以使用class dropdown-header 向下拉菜单的标签区域添加标题 Bootstrap 按钮组 按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时，这就显得非常有用。您可以通过Bootstrap 按钮（Button）插件添加可选的JavaScript 单选框和复选框样式行为 Bootstrap 按钮下拉菜单 本章将讲解如何使用Bootstrap class 向按钮添加下拉菜单。如需向按钮添加下拉菜单，只需要简单地在在一个.btn-group 中放置按钮和下拉菜单即可。您也可以使用 来指示按钮作为下拉菜单。