前端性能优化JavaScript

我们可以这样写window.onload=function(){varAdd=document.getElementById("add");varRemove=document.getElementById("删除");varMove=document.getElementById("移动");varSelect=document.getElementById("选择");Add.onclick=function(){alert('添加');};Remove.onclick=function(){alert('删除');};移动。onclick=function(){alert('移动');};Select.onclick=function(){alert('select');}}使用事件委托可以这样写：window.onload=function(){varoBox=document.getElementById("盒子");oBox.onclick=function(ev){varev=ev||窗口事件；vartarget=ev.目标||ev.src元素；if(target.nodeName.toLocaleLowerCase()=='input'){switch(target.id){case'add':alert('add');休息;案例“删除”：警报（“删除”）；休息;case'move':alert('移动');休息;案例“选择”：警报（“选择”）；休息;}}}}而使用事件委托还有一个好处就是当你添加一个新的按钮时，同样会绑定点击事件，这就是委托事件的好处上面是原生js写的，jquery可以这样写：$("#box").on("click","input",function(event){vartargetId=$(this).attr('id');switch(targetId){case'add':alert('add');break;case'remove':alert('delete');break;case'move':alert('move');break;case'select':alert('select');break;}})这样写起来容易多了。(6)避免不必要的DOM操作，尽量使用ID选择器：ID选择器速度最快，避免逐层查找节点。(7)类型转换：使用数字+""将数字转换为字符串。虽然看起来有点难看，但其实这样效率是最高的。在性能方面：(""+)>String()>.toString()>newString()(8)对字符串进行循环操作，如替换和查找，应该使用正则表达式。因为JavaScript本身的循环速度比较慢，而正则表达式的操作是用C写的语言API，性能非常好。(9)使用[""]查询的对象查询比.items()更快。这和之前减少对象查找的思路是一样的。调用.items()添加查询和函数调用。(10)使用Math.floor()或Math.round()将浮点数转换为整数。parseInt()是用来将字符串转成数字的，而Math是一个内部对象，所以Math.floor()其实查询方法和调用的时间并不多，速度是最快的。关于js性能优化，涉及到很多方面，尤其是现在前端框架很多，优化的方式也不一样。上面说的都是很简单的事情，在开发的时候多注意一下，尽量简化你的代码。性能优化还需要进一步研究。