前端性能优化最佳实践篇要点解读.docx

前端性能优化最佳实践篇本文导读：如今浏览器能够实现的特性越来越多，并且网络逐渐向移动设备转移，使我们的前端代码更加紧凑，如何优化，就变得越来越重要了。开发人员普遍会将他们的代码习惯优先于用户体验。但是很多很小的改变可以让用户体验有个飞跃提升，所以任何一点儿小小的优化都会提升你网站的性能。前端给力的地方是可以有许多种简单的策略和代码习惯让我们可以保证最理想的前端性能。  最佳实践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，更改属性attr