js代码优化
Posted 九门提督琪琪
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js代码优化相关的知识,希望对你有一定的参考价值。
1、减少Jquery使用
处理dom遍历和复杂的脚本场景时,jquery可能有很大的帮助,不过在处理简单的、直截了当的代码场景就会迟缓。尽可能的避免jquery对象创建,尤其在循环中。
2、优化循环
用被缓存的数组长度
优化前 for (var i = 0; i < arr.length; i++) { // some code here } 优化后 for (var i = 0, len = arr.length; i < len; i++) { // some code here }
3、if/else和swith语句
- 如果只是1或者2个语句,那if/else性能更好点
- 如果3个或者3个以上,那swith更好,这个可以通过测试来验证(测试地址)
4、缓存dom元素、jquey对象、对象/数组值
5、减少reflow
对dom的每次改变都会有一个重大的性能成本造成页面reflow
- 避免在document上直接进行频繁的DOM操作,如果确实需要可以采用off-document的方式进行
- 先将元素从document中删除,完成修改后再把元素放回原来的位置
- 将元素的display设置为”none”,完成修改后再把display修改为原来的值
- 如果需要创建多个DOM节点,可以使用DocumentFragment创建完后一次性的加入
//优化前 var list=document.getElementById("list"); for(var i=0;i<10;i++){ var item=document.createElement("li"); item.innerhtml="option "+(i+1); list.appendChild(item); } //优化后 var list=document.getElementById("list"); var fragment=document.createDocumentFragment(); for(var i=0;i<10;i++){ var item=document.createElement("li"); item.innerHTML="option "+(i+1); fragment.appendChild(item); } list.appendChild(fragment);
- 集中修改样式
优化前: function selectAnchor(element){ var changeDiv = document.getElementById(element); changeDiv.style.color = ‘#093′; changeDiv.style.background = ‘#fff’; changeDiv.style.height = ’100px’; } 优化后: CSS: changeDiv { background: #fff; color: #093; height: 100px; } javascript: function selectAnchor(element) { document.getElementById(element).className = ‘changeDiv’; }
6、避免全局的搜索
var $button=$(".button"); $buttons.find( "a.mybutton" );替代$( "a.mybutton" );
7、优先dom搜索,然后再过滤
- 优先使用原生的
getElementById、getElementsByTagName
- 例如.find( "a" ).filter( "[href=*\'url_fragment\']" )替换.find( "a[href=*\'url_fragment\']"
8、绑定多个事件到一个元素
//优化前 var $elem = $( "#element" ); $elem.on( "mouseover", function( event ) { // mouseover }); $elem.on( "mouseout", function( event ) { // mouseout }); //优化后 $( "#elem" ).on( "mouseover mouseout", function( event ) { if ( event.type === "mouseover" ) { // mouseover } else { // mouseout } });
9、Property深度
- object.name<object.name.name
- 这个property越深,获取时间越长
转自:http://www.cnblogs.com/hj4444/p/3985321.html
以上是关于js代码优化的主要内容,如果未能解决你的问题,请参考以下文章