首页 > 代码库 > javascript的一些最佳实践
javascript的一些最佳实践
一、缓存需要多次读取的 DOM元素，对象属性，数组值
var obj = { arr: [1, 2, 3] };A:for (var i = 0; i < obj.arr.length; i++) { document.getElementById("Grid" + obj.arr[i]).Condition = ‘‘; document.getElementById("Grid" + obj.arr[i]).DataBand();}B:var arr = obj.arr, i = 0, len = arr.length, item = null;for (; i < len; i++) { item = arr[i]; var grid = document.getElementById("Grid" + item); grid.Condition = ‘‘; grid.DataBand();}
二、尽量缩小DOM元素查询范围
有如下DOM结构
<body> <ul id="ul"> <li>a</li> <li class=‘li‘>b</li> <li>c</li> </ul> ……</body>
使用$(‘#ul‘).find(‘.li‘)替代$(‘.li‘)注：现代浏览器都实现了getElementByClassName,querySelector和querySelectorAll，class选择器的速度只比id选择器稍慢，但是针对低版本的IE浏览器，速度差距很大。
三、减少页面回流(reflow)
重绘(repaint):当一个元素只有外观发生改变，但不影响布局。主要为以下样式：visibility，outline，visibility， background-color。 回流(reflow)：当一个元素发生改变的时候，导致文档流中的其他元素变动。一个元素的回流导致了其所有子元素以及DOM中紧随其后的祖先元素的随后的回流。有如下DOM结构
<body> <div> <p id="p1">1</p> <p>2</p> <p>3</p> </div> ……</body>
修改p1的的高度，会导致 1.p1的高度变化2.p1后面的p元素定位变化3.父容器高度变化4.重复以上过程。常见导致回流的操作：1.添加删除可见DOM元素。2.修改DOM元素的可见性，位置，大小，内容。3.浏览器将 reflow 放进一个队列，达到一定程度或时限就进行操作，但是在读取以下属性时，会强制提交relow操作[offset|scroll|client][Top|Left|Width|Height]， getComputedStyle()，currentStyle(IE)回流是无法避免的，但是可以尽量避免：1.一次性添加元素，事先拼接好html代码，使用innterHTML插入或者使用DocumentFragment添加。2.尽量通过className或者cssText一次性修改元素的样式，或者将元素删除/隐藏，处理完成之后再加回到文档中。3.针对上面提到到Layout属性值，事先缓存，避免每次读取属性时造成浏览器的渲染。4.设置元素的position为absolute或fixed，使元素从文档流中脱离，浏览器只需要渲染该元素 以及位于该元素下方的元素，动画方面尤其值得考虑。
四、使用事件委托替代事件绑定。
针对列表和表格的事件绑定，可以利用冒泡的原理，将事件绑定到父级上。
<ul id="ul"> <li>a</li> <li>b</li> <li>c</li></ul>A:$(‘#ul‘).find(‘li‘).click(function(){ });B:$(‘#ul‘).delegate(‘li‘，‘click‘，function(){ });
五、其他
1.使用原生js代码替代jquery
$checkeboxs.each(function () { var checked = $(this).prop(‘checked‘); var checked = this.checked;});
了解原生js，才能更好的使用其他框架和库。2.针对耗时js操作，使用setTimeout定时释放UI线程，防止浏览器假死
function processArray(items， process) { if (items && items.length){ var todo = items.concat(); (function () { var start = new Date(); do { process(todo.shift()); } while (todo.length && (new Date() - start < 100)); if (todo.length) { setTimeout(arguments.callee， 25); } })(); }}
3.尽量避免全局变量4.使用jslint/jshite 检查代码5.参考书籍《高性能JavaScript》
javascript的一些最佳实践
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。