Speed up your JavaScrip 4[]

    <div class="blog_content">在web开发中，javascript的一个很重要的作用就是对dom进行操作，可你知道么？对dom的操作是非常昂贵的，因为这会导致浏览器执行回流操作，而执行了过多的回流操作，你就会发现自己的网站变得越来越慢了，我们应该尽可能的减少dom操作。本文是这个系列的最后一篇，给出了一些指导性原则，比如在什么时候应该对dom可以进行什么样的操作等。<br><br>【原文】<a rel="external" href="http://www.nczonline.net/about/" target="_blank"><span style="color: #108ac6;">nicholas c. zakas</span></a> - <a rel="external" href="http://www.nczonline.net/blog/2009/02/03/speed-up-your-javascript-part-4/" target="_blank"><span style="color: #108ac6;">speed up your javascript, part 4</span></a><br>【译文】<a rel="external" href="http://cuimingda.com/" target="_blank"><span style="color: #108ac6;">明达</span></a> - <a rel="external" href="http://cuimingda.com/2009/02/speed-up-your-javascript-part-4.html" target="_blank"><span style="color: #108ac6;">如何提升javascript的运行速度（dom篇）</span></a><br><br>以下是对原文的翻译：<br><br>在过去的几周中，我为大家介绍了几种可以加快javascript脚本运行速度的技术。第一节 介绍了如何优化循环。第二节的重点放在优化函数内部代码上，还介绍了队列（queuing）和记忆化（memoization）两种技术，来减轻函数的工作负担。第三节就如何将递归转换为迭代循环或者记忆化方式的话题，展开了讨论。第四节是这个系列的最后一篇，也就是本文，将重点阐述过多的dom操作所带来的影响。<br><br>我们都知道，dom操作的效率是很低的，而且不是一般的慢，而且这也是引发性能问题的常见问题之一。为什么会慢呢？因为对dom的修改为影响网页的用户界面，重绘页面是一项昂贵的操作。太多的dom操作会导致一系列的重绘操作，为了确保执行结果的准确性，所有的修改操作是按顺序同步执行的。我们称这个过程叫做回流（reflow），同时这也是最昂贵的浏览器操作之一。回流操作主要会发生在几种情况下：<br><br>* 当对dom节点执行新增或者删除操作时。 <br>* 动态设置一个样式时（比如element.style.width="10px"）。 <br>* 当获取一个必须经过计算的尺寸值时，比如访问offsetwidth、clientheight或者其他需要经过计算的css值（在兼容dom的浏览器中，可以通过getcomputedstyle函数获取；在ie中，可以通过currentstyle属性获取）。<br><br>解决问题的关键，就是限制通过dom操作所引发回流的次数。大部分浏览器都不会在javascript的执行过程中更新dom。相应的，这些浏览器将对对 dom的操作放进一个队列，并在javascript脚本执行完毕以后按顺序一次执行完毕。也就是说，在javascript执行的过程中，用户不能和浏览器进行互动，直到一个回流操作被执行。（ 失控脚本对话框会触发回流操作，因为他执行了一个中止javascript执行的操作，此时会对用户界面进行更新）<br><br>如果要减少由于dom修改带来的回流操作，有两个基本的方法。第一个就是在对当前dom进行操作之前，尽可能多的做一些准备工作。一个经典的例子就是向document对象中添加很多dom节点：
<div class="ubbpanel codepanel"><div class="ubbcontent"><div class="dp-highlighter"><br>