web前端性能优化实践

更新时间：2017年9月2日21:35:21

《个人博客地图》

    做为一名合格的前端开发人员，必须考虑和面对的一个问题就是性能优化，尤为对于大型网站来讲，这个技术 || 技能是必不可少的。从问题入手，选择合理方案。

    性能优化规范

一、加载优化

    合并CSS，JavaScript；合并小图片，使用雪碧图；缓存一切能够缓存的资源；使用长Cache；使用外联样式引用CSS，JavaScript；压缩HTML、CSS、JavaScript；启用GZip；使用首屏加载；使用按需加载；使用滚屏加载；经过Media Query加载；增长Loading进度条；减小Cookie；避免重定向；异步加载第三方资源；

二、CSS优化

    CSS写在头部，JavaScript写在尾部或异步；避免图片和IFrame等的空src；避免重设图片大小；图片避免使用DataURL；避免在HTML标签中写style属性；避免CSS表达式；移除空的CSS规则；正确使用display属性；不滥用float；不滥用web字体；不声明过多的font-size；值为0时不须要任何单位；标准化浏览器前缀；

三、图片优化

    使用智图http://zhitu.tencent.com；使用（CSS三、svg、iconfont）代替图片；使用srcset；webp优于jpg；png8优于gif；首次加载不大于1014kb（基于3秒联通平均网速所能达到值）；图片不宽于640；

四、脚本优化

    减小重绘和重排（回流）；缓存DOM选择与计算；缓存列表的length；使用事件委托，避免批量绑定事件；使用ID原则器；使用touchstart、touchend代替click

五、渲染优化

    HTML使用viewport；减小DOM节点；使用CSS3动画；合理使用requestAnimationFrame动画代替setTimeout；适当使用canvas动画；touchmove、scroll事件会致使屡次渲染；使用（css3 transitions、3D transform、opacity、canvas、webgl、video）来触发GPU渲染

  方案：

一、传输层面：减小请求次数（合并样式、脚本文件、图片），下降请求量

二、执行层面：减小重绘和重排

    其余

1.事件处理程序的数量越多，页面的总体运行性能越差，用户体验越差。

    事件处理程序为用户体验提供了丰富的交互性，但任何事件处理程序都会增长DOM访问次数，从而延迟整个页面的交互就绪事件。同时，定义的对象越多，内存消耗越大，运行性能就越差。

    解决同类事件处理程序过多的方案，可采用事件委托。事件委托技术利用了事件冒泡，指定一种类型的事件处理程序，就能够管理该类型的全部事件。子元素的click事件一直会冒泡到document层级，也就是说为整个页面指定一个onclick事件，就能够监听页面内每一个元素上的单机事件，而没必要为每一个元素单独添加事件处理程序。

    能够采用事件委托技术的事件主要包括但不限于：鼠标事件和键盘事件。（必须是能够冒泡的事件）

<div id='eventDiv'>

    <span id='span01'></span>

    <span id='span02'></span>

    <span id='span03'></span>

</div>

var $eventDiv = $('#eventDiv');

EventUtil.addHandler($eventDiv,'click',function(event){

    event = EventUtil.getEvent(event);

    var target = EventUtil.getTarget(event);

    switch(target.id){

case 'span01':

    alert('i am span01');

    break;

case 'span02':

    alert('i am span02');

    break;

case 'span03':

    alert('i am span03');

    break;

    }

})

2.页面图片过多，致使同一时间http请求量过大，页面性能降低。

解决方案：图片懒加载技术（延迟加载）

实现原理：按需加载，即仅加载用户可视区域图片

第一步，设置页面须要进行懒加载的图片背景为统同样式，img{background:url(./img/loading.png) center center no-repeat;width:100%;}

第二步，检测图片是否进入可视区域，图片进入可视区域的条件是：

图片距离页面顶部距离 - 纵向滚动条距离页面顶部距离 < 可视区域高度

document.getElementsByClassName('mdiv')[0].offsetTop - document.body.scrollTop < window.innerHeight

$('.mdiv')[0].offsetTop -  $(window).scrollTop() <window.innerHeight

第三步，对进入可视区域的图片进行加载

window.onload = function(){}

window.onscroll = function(){}

附图：