Javascript是一门非常灵活的语言，我们可以随心所欲的书写各种风格的代码，不同风格的代码也必然也会导致执行效率的差异，开发过程中零零散散地接触到许多提高代码性能的方法，整理一下平时比较常见并且容易规避的问题
Javascript自身执行效率
Javascript中的作用域链、闭包、原型继承、eval等特性，在提供各种神奇功能的同时也带来了各种效率问题，用之不慎就会导致执行效率低下。
1、全局导入
我们在编码过程中多多少少会使用到一些全局变量（window,document,自定义全局变量等等），了解javascript作用域链的人都知道，在局部作用域中访问全局变量需要一层一层遍历整个作用域链直至顶级作用域，而局部变量的访问效率则会更快更高，因此在局部作用域中高频率使用一些全局对象时可以将其导入到局部作用域中，例如：
2 (function(window,$){
3 var xxx = window.xxx;
4 $("#xxx1").xxx();
5 $("#xxx2").xxx();
6 })(window,jQuery);
7
8 //2、暂存到局部变量
9 function(){
10 var doc = document;
11 var global = window.global;
12 }
2、eval以及类eval问题
我们都知道eval可以将一段字符串当做js代码来执行处理，据说使用eval执行的代码比不使用eval的代码慢100倍以上（具体效率我没有测试，有兴趣同学可以测试一下）
JavaScript 代码在执行前会进行类似“预编译”的操作：首先会创建一个当前执行环境下的活动对象，并将那些用 var 申明的变量设置为活动对象的属性，但是此时这些变量的赋值都是 undefined，并将那些以 function 定义的函数也添加为活动对象的属性，而且它们的值正是函数的定义。但是，如果你使用了“eval”，则“eval”中的代码（实际上为字符串）无法预先识别其上下文，无法被提前解析和优化，即无法进行预编译的操作。所以，其性能也会大幅度降低
其实现在大家一般都很少会用eval了，这里我想说的是两个类eval的场景(new Function{},setTimeout,setInterver)
setInterver("alert(1)",1000);
(new Function("alert(1)"))();
上述几种类型代码执行效率都会比较低，因此建议直接传入匿名方法、或者方法的引用给setTimeout方法
3、闭包结束后释放掉不再被引用的变量
var a = {name:"var3"};
var b = ["var1","var2"];
var c = document.getElementByTagName("li");
//****其它变量
//***一些运算
var res = function(){
alert(a.name);
}
return res;
})()
上述代码中变量f的返回值是由一个立即执行函数构成的闭包中返回的方法res，该变量保留了对于这个闭包中所有变量（a,b,c等）的引用，因此这两个变量会一直驻留在内存空间中,尤其是对于dom元素的引用对内存的消耗会很大，而我们在res中只使用到了a变量的值，因此，在闭包返回前我们可以将其它变量释放
var a = {name:"var3"};
var b = ["var1","var2"];
var c = document.getElementByTagName("li");
//****其它变量
//***一些运算
//闭包返回前释放掉不再使用的变量
b = c = null;
var res = function(){
alert(a.name);
}
return res;
})()
Js操作dom的效率
在web开发过程中，前端执行效率的瓶颈往往都是在dom操作上面，dom操作是一件很耗性能的实行，如何才能在dom操作过程中尽量节约性能呢？
1、减少reflow
什么是reflow？
当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会通知 render 重新描绘相应的元素, 此过程称为 repaint。
如果该次变化涉及元素布局 (如 width), 浏览器则抛弃原有属性, 重新计算并把结果传递给 render 以重新描绘页面元素, 此过程称为 reflow。
减少reflow的方法先将元素从document中删除，完成修改后再把元素放回原来的位置
将元素的display设置为”none”，完成修改后再把display修改为原来的值
大量添加元素到页面时使用documentFragment
例如
var child = docuemnt.createElement("li");
child.innerHtml = "child";
document.getElementById("parent").appendChild(child);
}
上述代码会多次操作dom，效率比较低，可以改为下面的形式 创建documentFragment，将所有元素加入到docuemntFragment不会改变dom结构，最后将其添加到页面，只进行了一次reflow
for(var i=0;i<100:i++){
var child = docuemnt.createElement("li");
child.innerHtml = "child";
frag.appendChild(child);
}
document.getElementById("parent").appendChild(frag);
2、暂存dom状态信息
当代码中需要多次访问元素的状态信息，在状态不变的情况下我们可以将其暂存到变量中，这样可以避免多次访问dom带来内存的开销，典型的例子就是：
for(var i=1;i<lis.length;i++){
//***
}
上述方式会
先介绍一下audio这个标签
<audio src=/blog_article/"1.ogg" controls="controls" autoplay="autoplay">
你的浏览器不支持播放音乐，建议使用谷歌浏览器
</audio>
属性
属性 值 描述 autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。 controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。 loop loop 如果出现该属性，则每当音频结束时重新开始播放。 preload preload
如果出现该属性，则音频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略该属性。
src url 要播放的音频的 URL。audio是html5的标签，ie9是不支持的，谷歌完美支持，火狐也是支持的，但是，请使用ogg格式的音乐文件，mp3格式的音乐火狐是没提示不支持，也不会有音乐的。为了有更好的兼容性，使用这个标签的时候，请把音乐的格式改为ogg
最近因为在flash项目中遇到as调用js函数马上弹出alert，在火狐浏览器下会卡死浏览器。介于这样我们重写alert，让alert弹出一个自定义的div弹层，来实现提示效果！
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>重写alert</title>
<link href="/blog_article/css/style.css" rel="stylesheet"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
var showAlert = function(msg){
jAlert(msg, "提示！");
}
window.alert=showAlert;
$.alerts={
verticalOffset:-75,horizontalOffset:0,repositionOnResize:true,overlayOpacity:.01,overlayColor:'#FFF',draggable:true,okButton:' OK ',cancelButton:' Cancel ',dialogClass:null,alert:function(message,title,callback){
if(title==null)title='Alert';
$.alerts._show(title,message,null,'alert',function(result){
if(callback)callback(result)
})
}
,_show:function(title,msg,value,type,callback){
$.alerts._hide();
$.alerts._overlay('show');
$("BODY").append('<div id="popup_container">'+'<h1 id="popup_title"></h1>'+'<div id="popup_content">'+'<div id="popup_message"></div>'+'</div>'+'</div>');
if($.alerts.dialogClass)$("#popup_container").addClass($.alerts.dialogClass);