1.背景介绍

2.知识剖析

web前端性能优化的方法

一、减少HTTP请求

二、使用CDN

三、添加Expires头

四、压缩组件

五、将样式表放在头部

六、将脚本放在底部

七、避免CSS表达式

八、使用外部的JavaScript和CSS

九、减少DNS查找

十、精简JavaScript and Css

                        
.right {                                    .wrong{             
    color: #fff;                                color: #ffffff;
    padding-top: 0;                             padding-top: 0px;     
    margin: 0 10px;                             margin-top: 0;
    border: 1px solid #111                      margin-bottom: 0;
}                                               margin-left: 10px;
                                                margin-right: 10px;
                                                border-color: #111;
                                                border-width: 1px;
                                                border-style: solid;
                                            }
                        
                    

十一、避免重定向

十二、删除重复脚本

十三、配置ETag

十四、使Ajax可缓存(尽量使用get)

十五、图片优化

3.常见问题

除了上述的方法外还能从哪些方面进行优化？

4.解决方案

从更高效的JavaScript和Css写法来优化!

1.Css选择器优化？

更具效率的JavaScript写法

                        
                    var buf = [];
                    for (var i = 0; i < 100; i++) {
                        buf.push(i.toString());
                    }
                    var all = buf.join("");
                        
                    

                        
                    var aTest = new Array(); //替换为
                    var aTest = [];
                    var aTest = new Object; //替换为
                    var aTest = {};
                    var reg = new RegExp(); //替换为
                    var reg = /../;
                    //如果要创建具有一些特性的一般对象，也可以使用字面量，如下：
                    var oFruit = new O;
                    oFruit.color = "red";
                    oFruit.name = "apple";
                    //前面的代码可用对象字面量来改写成这样：
                    var oFruit = { color: "red", name: "apple" };
                        
                    

                        
                        //避免多次取值的调用开销
                        var h1 = element1.clientHeight + num1;
                        var h4 = element1.clientHeight + num2;
                        //可以替换为：
                        var eleHeight = element1.clientHeight;
                        var h1 = eleHeight + num1;
                        var h4 = eleHeight + num2;
                        
                    

                            
                        var list = document.getElementsByTagName('p');
                        for (var i = 0; i < list.length; i++) {
                            //……
                        }
                
                        //替换为：
                        var list = document.getElementsByTagName('p');
                        for (var i = 0, l = list.length; i < l; i++) {
                            //……
                        }
                            
                        

                        
                    if (oTest != '#ff0000') {
                        //do something
                    }
                    if (oTest != null) {
                        //do something
                    }
                    if (oTest != false) {
                        //do something
                    }
                    //虽然这些都正确，但用逻辑非操作符来操作也有同样的效果：
                    if (!oTest) {
                        //do something
                    }
                        
                    

5.代码实战

6.拓展思考

7.参考文献