前端优化【整理】

看了好多前辈关于性能优化的简介，于是东拼西凑，整理整理，方便以后查看

优化目的

1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。
2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。

一、页面级优化

• 减少DNS查找次数
• 减少 HTTP请求数
• 利用缓存
• 合并文件，CSS，JS文件等
• CSS精灵处理图片
• CDN加速
• 把样式表置于顶部 (</head>之前)
• 将外部脚本置底 (</script>之前)

二、代码级优化

• 减少DOM的重绘重排
• 代码复用，如：class选择器
• 命名空间
• 变量释放
• 理解作用域链，减少变量查找

我只收集了我们能用的一些常用的，有些说的太高端，觉得离我太遥远、

代码优化实践整理

1.减少全局查找

//不好的写法
var arr = [1, 2, 3, 4];
function test () {
    for(var i = 0; i < arr.length; i++){

    }
}

//好的写法
var arr = [1, 2, 3, 4];
function test () {
    var array = arr; //注意这里
    for(var i = 0; i < array.length; i++){

    }
}

2.array.length优化

对上面《好的写法》在进行优化

var arr = [1, 2, 3, 4];
function test () {
    var array= arr;
    var bLength = array.length; //.length每次会触发索引长度
    for(var i = 0; i < bLength; i++){

    }
}