前端性能优化最佳实践篇资料.docxVIP

前端性能优化最佳实践篇本文导读：如今浏览器能够实现的特性越来越多，并且网络逐渐向移动设备转移，使我们的前端代码更加紧凑，如何优化，就变得越来越重要了。开发人员普遍会将他们的代码习惯优先于用户体验。但是很多很小的改变可以让用户体验有个飞跃提升，所以任何一点儿小小的优化都会提升你网站的性能。前端给力的地方是可以有许多种简单的策略和代码习惯让我们可以保证最理想的前端性能。  最佳实践1：使用DocumentFragments或innerHTML取代复杂的元素注入? DOM操作在浏览器上是要付税的。尽管性能提升是在浏览器，DOM很慢，如果你没有注意到，你可能会察觉浏览器运行非常的慢。这就是为什么减少创建集中的DOM节点以及快速注入是那么的重要了。现在假设我们页面中有一个 元素，调用AJAX获取JSON列表，然后使用JavaScript更新元素内容。通常，程序员会这么写： Javascript代码? var?list?=?document.querySelector(ul);?? ajaxResult.items.forEach(function(item)?{?? //?创建 元素 var?li?=?document.createElement(li);?? ????li.innerHTML?=?item.text;?? //? 元素常规操作，例如添加class，更改属性attribute，添加事件监听等 //?迅速将 元素注入父级 中 ????list.apppendChild(li);?? });?? 上面的代码其实是一个错误的写法，将 元素带着对每一个列表的DOM操作一起移植是非常慢的。如果你真的想要 使用document.createElement，并且将对象当做节点来处理，那么考虑到性能问题，你应该使用DocumentFragement。DocumentFragement 是一组子节点的“虚拟存储”，并且它没有父标签。在我们的例子中，将DocumentFragement想象成看不见的 元素，在 DOM外，一直保管着你的子节点，直到他们被注入DOM中。那么，原来的代码就可以用DocumentFragment优化一下： Javascript代码? var?frag?=?document.createDocumentFragment();?? ajaxResult.items.forEach(function(item)?{?? //?创建 元素 var?li?=?document.createElement(li);?? ????li.innerHTML?=?item.text;?? //? 元素常规操作 //?例如添加class，更改属性attribute，添加事件监听，添加子节点等 //?将 元素添加到碎片中 ????frag.appendChild(li);?? });?? //?最后将所有的列表对象通过DocumentFragment集中注入DOM document.querySelector(ul).appendChild(frag);?? 为DocumentFragment追加子元素，然后再将这个DocumentFragment加到父列表中，这一系列操作仅仅是一个DOM操作，因此它比起集中注入要快很多。如果你不需要将列表对象当做节点来操作，更好的方法是用字符串构建HTML内容： Javascript代码? var?htmlStr?=?;?? ajaxResult.items.forEach(function(item)?{?? //?构建包含HTML页面内容的字符串 ????htmlStr?+=? ?+?item.text?+?/span;??/span/li });?? //?通过innerHTML设定ul内容 document.querySelector(ul).innerHTML?=?htmlStr;?? 这当中也只有一个DOM操作，并且比起DocumentFragment代码量更少。在任何情况下，这两种方法都比在每一次迭代中将元素注入DOM更高效。 最佳实践2：高频执行事件/方法的防抖? 通常，开发人员会在有用户交互参与的地方添加事件，而往往这种事件会被频繁触发。想象一下窗口的resize事件或者是一个元素的onmouseover事件 - 他们触发时，执行的非常迅速，并且触发很多次。如果你的回调过重，你可能使浏览器死掉。这就是为什么我们要引入防抖。防抖可以限制一个方法在一定时间内执行的次数。以下代码是个防抖示例： Javascript代码? //?取自?UnderscoreJS?实用框架 function?debounce(func,?wait,?immediat