前端性能优化

移动端，首次加载同时请求数不能超过4个

移动端的性能优化问题：

 移动页面的速度跟三个因素有关，分别是：移动网络带宽速度，设备性能（CPU，GPU，浏览器），页面本身。

1.图片加载

    1）预加载，有两种实现方式：

a.显性加载

b.隐性加载

加载第一张图片时，已经预先加载了第二张图片。

    2）按需加载

     

先加载首屏，就是lazyload，滚屏加载，滚动到当前位置时加载图片。

响应式加载图片，利用css的@media或者js判断分辨率，从而引入不同的图片。

    3）对图片进行压缩处理

2.点击事件优化：

移动端用touch事件代替click事件，因为在移动端click会有300ms左右的延迟，所以应用touchstart,touchmove,touchend。

移动浏览器，事件执行顺序是touchstart > touchend > click

涉及到关键词：

300ms延迟：

当点击页面的时候移动端浏览器并不能立刻判断用户是确实要打开链接，还是想要进行双击操作，因此会等待约300ms，以判断用户是否再次点击了屏幕。

解决方案：用fastClick代替。

https://github.com/ftlabs/fastclick

点击穿透：

假如页面上有两个元素A和B。B元素在A元素之上，在B元素的touchstart事件上注册了一个回调函数，比如里边是隐藏B，当我们点击B元素时，当touchstart事件把B隐藏后，隔了300ms，浏览器触发了cilck事件，但是B元素已经隐藏了，所以事件被派发到A元素身上，这就是点透。

解决方案：

1）用touchend事件代替tap事件，并阻止掉touchend的默认preventDefault();

$("a").on("touchend",function(event){
    event.preventDefault();
});

2)延迟一定的时间（300ms+）来处理事件

$("a").on("tap",function(event){
    setTimeout(function(){
        //处理事件
    },310);
});

3)利用fastclick.js代替click

引入js后直接给body添加事件

$(function(){
  FastClick.attach(document.body);
});

或者页面加载时

window.addEventListener("load",function(){
    FastClick.attach(document.body);
});

3.动画优化

    1）尽量使用css3动画

优点：不占用js主线程；浏览器对动画做优化；

如有状态监听可用js控制。

    2）适当使用canvas动画

优点：可规避渲染树的计算渲染更快些；

缺点：开发成本高，维护较麻烦；

5个元素以内使用css3动画，5个以上使用canvas动画。

    3）合理使用RAF（requestAnimationFrame）

优点：能解决脚本问题引起的丢帧，卡顿问题；支持中间状态。

缺点：android4.3下不兼容

4.CSS，js等文件引入到html页面中，最好不要使用内联

加载优化：

*  减少HTTP请求

首次加载同时请求数不应超过4个。

1）合并css、javaScript；

2）使用CSS Sprites雪碧图合并；

*  压缩css\html\javaScript

使用压缩工具或者线上压缩；

*  缓存

1）将固定数据与图片缓存在本地；

2）使用外联样式引用 css\javaScript

*  按需加载

为了提升首屏加载速度，可将暂不用的资源需要时再加载；

1）LazyLoad延迟加载；

2）滚屏加载；

3）通过media Query加载；

*  预加载

使用Loading显性提醒进行加载资源；

*  压缩图片

1）TinyPng进行压缩图片；

2）使用cssSprite进行合并图片；

减少cookie，避免重定向

* 避免404：

如果遇到404没有找到页面，为了提升用户体验需设404跳转页面。

* 压缩HTML、CSS、JavaScript、img等文件

利用构建工具对代码或图片进行压缩，如gulp、webpack；

脚本执行

*  css放在头部，javascript放在尾部

*  避免图片的空src，空src会重新加载当前页面影响速度和效率；

*  避免重设图片大小，否则会引发图片的多次重绘，影响性能。

CSS优化

*  避免CSS表达式

*  正确使用display属性

1）display:inline;后不应该使用width,height,margin,padding及float;

2）display:inline-block;后不应该再使用float;

3）display:block;后不应该再使用vertical-align;

4）display:table-*后不应该再使用margin或float;

*  避免引用过多字体

web字体需要下载，解析，重绘当前页面；

标准化各浏览器前缀

-webkit-

-moz-

-ms-

无前缀放在最后；

JavaScript执行优化

* 将JavaScript脚本放在页面的底部；

* 将JavaScript和CSS作为外部文件来引用：

使用外部文件可以提高页面速度，使js和css文件在浏览器中产生缓存。

* 减少重绘和回流

1）避免使用document.write;

2）减少drawImage,减少不必要的DOM操作；

*  尽量使用ID选择器；

ID选择器是最快的

*  touch事件

使用 touchstart、touchend代替click事件。

渲染优化

* 移动端使用viewport

<meta name=“viewport” content=“width=device-width,initial-scale=1”>

*   动画使用

1）尽量使用css3动画代替js动画；

2）动画量多的情况下可用canvas代替动画；

3）使用requestAnimationFrame监听帧变化，使得在正确的时间进行渲染；

* GPU加速

css中以下属性：transitions、transforms、opacity、canvas、webGL、video等来触发GPU加速；

transform: translate3d(0,0,0);

参考：

http://isux.tencent.com/h5-performance.html