web开发所需注意优化性能细节

个人观点，希望对大家有帮助。

1.优化CSS调用方式

   main.css

@import加载CSS是加载一个才加载另一个，会延长CSS加载时间

    
    
@import url('bootstrap.min.css');
@import url('../font-awesome/css/font-awesome.css');
@import url('style.css');

2.合并JS文件

    main.min.js

    使用gulp工具把多个JS文件合并与压缩为一个JS

3.图片加载方式及icon小图标

    3-1.图片使用先加载缩略大图后逐渐加载原图（一般限于大图，加载防止HTTP请求过多）；

    3-2.图片懒加载（当需要时才显示图片）

    3-3.采用compass的自动制作CSS script技术制作icon图片；

    3-4.使用bootstarp自带的icon图片文字；

    3-5.小于50K且重复利用的图片可以转为base64加载减少HTTP请求；

4.使用使用CDN

     建议一个页面从2个不同的域（比如站点域和CDN域）下来请求资源是最佳的选择

5.依赖加载JS

    使用requireJS（AMD规范）或seaJS（CMD规范）

6.jquery写法优化

    1. CLASS选择器中加上TAG NAME更高效获取 -> $("div.myclass");

    2. 后代选择方式-> $("div.myclass ul") 更改为 -> $(" ul "," div.myclass ") or  $(" div.myclass ").find("ul");

    3. 选择器能用原生JS尽量使用获取对象；

    4. 获取文本内容高效方式 var $tx = $text.text( )  更改为 ->   var $tx = $.text( $text )

    5. 循环高效：for > .each；循环体内尽量不操作DOM（）；   

    

7.JS频繁触发事件优化

使用场景：在图片的懒加载、下滑自动加载数据、侧边浮动导航栏等中有着广泛的应用。

参考地址：http://www.cnblogs.com/coco1s/p/5499469.html  

四种方法解决：

节流、 抖动、 rAF()、CSS的pointer-events:none

       
       
// 已封装的节流函数
//规定时间内触发一次事件，与rAF()类似，但节流的时间可控（例子为触发事件间少于500ms时确保1000ms能执行一次）
function throttle(func, wait, mustRun) {
    var timeout,
        startTime = new Date();
 
    return function() {
        var context = this,
            args = arguments,
            curTime = new Date();
 
        clearTimeout(timeout);
        // 如果达到了规定的触发时间间隔，触发 handler
        if(curTime - startTime >= mustRun){
            func.apply(context,args);
            startTime = curTime;
        // 没达到触发间隔，重新设定定时器
        }else{
            timeout = setTimeout(func, wait);
        }
    };
};
// 实际想绑定在 scroll 事件上的 handler
function realFunc(){
    console.log("Success");
}
// 采用了节流函数
window.addEventListener('scroll',throttle(realFunc,500,1000));

       
       
// 已封装的防抖动函数
//触发事件间小于500ms则阻止执行
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);
    };
};
 
var myEfficientFn = debounce(function() {
    // 滚动中的真正的操作
    console.log('Success')
}, 500);
 
// 绑定监听
// 事件resize  scroll
window.addEventListener('scroll', myEfficientFn);

       
       
//rAF()规定16.7ms触发一次 handler,用于更复杂的场景时，rAF 可能效果更佳，性能更好，但是不兼容低版本浏览器。
var ticking = false; // rAF 触发锁
function onScroll(){
  if(!ticking) {
    requestAnimationFrame(realFunc);
    ticking = true;
  }
}
 
function realFunc(){
    // do something...
    console.log("Success");
    ticking = false;
}
// 滚动事件监听
window.addEventListener('scroll', onScroll, false);

但是在实践中我发现一个问题就是如果把以上已封装的函数放在对象里调用会报错，不知道有木有高手知道原因。

如果想使用：

一、独立拿出运行；

二、利用settimeout延迟事件

1. var timeId="";
2. if(timeId){
3. clearTimeout(timeId);
4. timeId=null;
5. }
6. timeId=setTimeout(function(){
7. //doing need loadding images code
8. },500);