前端工程师必读:网站前端性能优化最佳方案

swmozowtfl · *发表于* 2015-7-9 23:23:58

一个网站影响用户访问的最大部分是前端的页面。网站可以划分为：前端和后台。后台可以理解成是用来实现网站的功能的，而前端是属于功能的表现。然如除了后台需要在性能上做优化外，其实前端的页面更需要在性能优化上下功夫，只有这样才能给我们的用户带来更好的用户体验。
如今浏览器能够实现的特性越来越多，并且网络逐渐向移动设备转移，使我们的前端代码更加紧凑，如何优化，就变得越来越重要了。开发人员普遍会将他们的代码习惯优先于用户体验。但是很多很小的改变可以让用户体验有个飞跃提升，所以任何一点儿小小的优化都会提升你网站的性能。前端给力的地方是可以有许多种简单的策略和代码习惯让我们可以保证最理想的前端性能。说了这么多，那么我们应该如何对我们前端的页面进行性能优化呢？
而前端开发工作者可以控制的是什么呢？。前端的页面主要包括xhtml,css,js。其实xhtml就是现实中所谈到的内容，页面的内容：文字，图片，flash,视频等。
网站前端性能优化最佳方案1：使用documentfragments或innerhtml取代复杂的元素注入
dom操作在浏览器上是要付税的。尽管性能提升是在浏览器，dom很慢，如果你没有注意到，你可能会察觉浏览器运行非常的慢。这就是为什么减少创建集中的dom节点以及快速注入是那么的重要了。
现在假设我们页面中有一个<ul>元素，调用ajax获取json列表，然后使用javascript更新元素内容。通常，程序员会这么写：
var list = document.queryselector('ul');
ajaxresult.items.foreach(function(item) {
// 创建<li>元素
var li = document.createelement('li');
li.innerhtml = item.text;
// <li>元素常规操作，例如添加class，更改属性attribute，添加事件监听等
// 迅速将<li>元素注入父级<ul>中
list.apppendchild(li);
});
上面的代码其实是一个错误的写法，将<ul>元素带着对每一个列表的dom操作一起移植是非常慢的。如果你真的想要使用document.createelement，并且将对象当做节点来处理，那么考虑到性能问题，你应该使用documentfragement。
documentfragement 是一组子节点的“虚拟存储”，并且它没有父标签。在我们的例子中，将documentfragement想象成看不见的<ul>元素，在 dom外，一直保管着你的子节点，直到他们被注入dom中。那么，原来的代码就可以用documentfragment优化一下：
var frag = document.createdocumentfragment();
ajaxresult.items.foreach(function(item) {
// 创建<li>元素
var li = document.createelement('li');
li.innerhtml = item.text;
// <li>元素常规操作
// 例如添加class，更改属性attribute，添加事件监听，添加子节点等
// 将<li>元素添加到碎片中
frag.appendchild(li);
});
// 最后将所有的列表对象通过documentfragment集中注入dom
document.queryselector('ul').appendchild(frag);
为documentfragment追加子元素，然后再将这个documentfragment加到父列表中，这一系列操作仅仅是一个dom操作，因此它比起集中注入要快很多。
如果你不需要将列表对象当做节点来操作，更好的方法是用字符串构建html内容：
var htmlstr = '';
ajaxresult.items.foreach(function(item) {
// 构建包含html页面内容的字符串
htmlstr += '<li>' + item.text + '</li>';
});
// 通过innerhtml设定ul内容
document.queryselector('ul').innerhtml = htmlstr;
这当中也只有一个dom操作，并且比起documentfragment代码量更少。在任何情况下，这两种方法都比在每一次迭代中将元素注入dom更高效。
网站前端性能优化最佳方案2：高频执行事件/方法的防抖
通常，开发人员会在有用户交互参与的地方添加事件，而往往这种事件会被频繁触发。想象一下窗口的resize事件或者是一个元素的onmouseover事件 - 他们触发时，执行的非常迅速，并且触发很多次。如果你的回调过重，你可能使浏览器死掉。
这就是为什么我们要引入防抖。
防抖可以限制一个方法在一定时间内执行的次数。以下代码是个防抖示例：
// 取自 underscorejs 实用框架
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callnow = immediate && !timeout;
cleartimeout(timeout);
timeout = settimeout(later, wait);
if (callnow) func.apply(context, args);
};
}
// 添加resize的回调函数，但是只允许它每300毫秒执行一次
window.addeventlistener('resize', debounce(function(event) {
// 这里写resize过程
}, 300));
debounce方法返回一个方法，用来包住你的回调函数，限制他的执行频率。使用这个防抖方法，就可以让你写的频繁回调的方法不会妨碍用户的浏览器！

更多网页制作信息请查看：网页制作

seazvyt · *发表于* 2016-3-12 11:39:26

看你快沉底了~~~~~~

wwdu926a · *发表于* 2016-3-12 11:39:40

什么什么啊??

tohme · *发表于* 2016-3-12 11:39:46

还没崇拜过谁呢,满足一下愿望吧,谢谢!

gevaemaidovef · *发表于* 2016-3-12 11:39:49

呵呵我可不敢~~~~

wwzcdenleclv · *发表于* 2016-3-18 18:43:57

回来了呵呵刚才在斗地主那 ~~~~

effoggikeftor · *发表于* 2016-3-18 18:44:13

哈哈我支持你

gevaemaidovef · *发表于* 2016-3-18 18:44:32

我去看看网络上的事我不是很会哎

Mqokjdvq · *发表于* 2016-3-18 18:44:35

你该这么说~~

前端工程师必读:网站前端性能优化最佳方案

猜你喜欢

回复|共 8 个

回复

快捷导航