前端优化的目的

  1. 用户：体验好

  2. 服务商：节省资源

  简而言之，就是在不影响系统运行正确性的前提下，使之运行地更快，完成特定功能所需的时间更短。

2.1 优化途径

1、页面级

  HTTP请求数、脚本加载、内联脚本位置等

2、代码级

  DOM操作优化、CSS选择符优化、图片及HTML结构优化等

一、页面级优化

1、减少HTTP 请求数——最重要最有效的方法

  减少时间成本和资源成本

途径

（1）从设计实现层面简化页面

（2）合理设置 HTTP缓存
原则:能缓存越多越好，能缓存越久越好

（3）资源合并与压缩

（4）CSS Sprites

途径

（5）、Inline Images——转化为编码

                    
                        let fr = new FileReader();
                        $scope.max = $scope.file.size;//文件大小
                        fr.readAsDataURL($scope.file);
                        fr.onprogress = function($event){
                            $scope.value = $event.loaded;
                        }
                        fr.onload = function ($event){//预览图片
                            preview.src = $event.target.result;
                        }
                    
                

缺点：增大了页面的体积，而且无法利用浏览器缓存

（6）图片懒加载
  图片地址缓存在 Textarea标签中，待用户往下滚屏的时候才 “惰性” 加载

一、页面级优化

1、减少HTTP 请求数——最重要最有效的方法

2、外部脚本置底

3、异步执行inline脚本

4、Lazy Load Javascript

5、将 CSS放在head中

6、减少不必要的 HTTP跳转

  有/会认为是目录，没/会认为是文件。 加了/浏览器会指向一个目录，目录的话会读取默认文件index等等。没有/会先尝试读取文件，如果没有文件再找与该文件同名的目录，最后才读目录下的默认文件。 网址没有加上/会给服务器增加一个查找是否有同名文件的过程。

7、避免重复的资源请求

二、代码级优化

1、JavaScript

(1)DOM

a. HTML Collection

在遍历的时候可以将 length属性、成员保存到局部变量后再使用局部变量。

b. Reflow & Repaint

Reflow(回流/重排):元素
Repaint(重绘): 属性

                    
                        var el = document.getElementById('demo');
                        el.style.broderLeft = '1px';
                        el.style.broderRight = '2px';
                        el.style.padding = '5px';
                    
                

优化：减少此类操作

(2)减少作用域链查找

    
            低效率的写法：
            // 全局变量
            var globalVar = 1;
            function myCallback(info){
                 for( var i = 100000; i--;){
                    //每次访问 globalVar 都需要查找到作用域链最顶端，本例中需要访问 100000 次
                    globalVar += i;
                 }}

            更高效的写法：
            // 全局变量 var globalVar = 1;
            function myCallback(info){
                //局部变量缓存全局变量
                var localVar = globalVar;
                for( var i = 100000; i--;){
                    //访问局部变量是最快的
                    localVar += i;
                }
                //本例中只需要访问 2次全局变量在函数中只需要将 globalVar中内容的值赋给localVar 中区
                globalVar = localVar;
             }
    
                    

要减少作用域链查找还应该减少闭包的使用

(3)避免使用with（obj）｛｝、evel（）Function

(4)数据访问

  Javascript中的数据访问包括直接量 (字符串、正则表达式 )、变量、对象属性以及数组， 其中对直接量和局部变量的访问是最快的，对对象属性以及数组的访问需要更大的开销.当出现以下情况时，建议将数据放入局部变量：

  a. 对任何对象属性的访问超过 1次

  b. 对任何数组成员的访问次数超过 1次

(4)字符串拼接

"+" :
效率低：因为每次运行都会开辟新的内存并生成新的字符串变量，然后将拼接结果赋值给新变量；
优化方法：join()

2 CSS选择符

ul li a { color: #444; }