优化web前端性能的几个方法

Posted 2020-10-01

1 减少http请求,

  a、 合并脚本跟样式文件，如可以把多个 CSS 文件合成一个，把多个 JS 文件合成一个。

  b、 CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位,把多个图片合成一个图片。

2、使用浏览器缓存

设置http头中的cache-control和expires的属性,缓存相同的JS、CSS、图片

3 压缩文件

4 懒加载和预加载 

http://www.cnblogs.com/rlann/p/7296660.html

5 script放在底部，css在顶部

6 使用CDN（contentdistribute network，内容分发网络）的本质仍然是一个缓存，而且将数据缓存在离用户最近的地方，使用户以最快速度获取数据

7 使用外部的JS和CSS

外部的JS、CSS可缓存，减少重复下载内联的JS和CSS，减少http请求

8 切分组件到多个域 

主要的目的是提高页面组件并行下载能力。但不要跨太多域名，建议采用2个子域名

 

9 精简JS CSS 图片

 a HTML Collection不是一个静态的结果，它表示的仅仅是一个特定的查询，每次访问该集合时都会重新执行这个查询从而更新查询结果,

当需要遍历 HTML Collection的时候，使用使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象，再访问，以提高性能

b 慎用 with,避免使用 eval

c 字符串拼接,在 javascript中使用”+”号来拼接字符串效率是比较低的，因为每次运行都会开辟新的内存并生成新的字符串变量，然后将拼接结果赋值给新变量。与之相比更为高效的做法是使用数组的 join方法

d  CSS选择符优化 #mark p{color:red}，浏览器对选择符的解析是从右往左进行的，先查p再查mark

e 减少作用域链查找

在循环中需要访问非本作用域下的变量时请在遍历之前用局部变量缓存该变量，并在遍历结束后再重写那个变量，这一点对全局变量尤其重要，因为全局变量处于作用域链的最顶端，访问时的查找次数是最多

低效写法：
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;   
}