提升网页加载速度-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_37524661/article/details/87854362

减少http请求

合并CSS、JavaScript：将浏览器一次访问需要的JavaScript，CSS合并成一个文件，这样浏览器只需要一次请求
合并图片：多张图片合并成一张，如果每张图片都有不同的超链接，可通过CSS偏移响应鼠标点击操作，构造不同的URL。

压缩js、css

减少文件体积，去除不必要的空白符、格式符、注释（即对代码进行格式化）

优化js、css文件位置

将css放到页面最上面（尽量放到head中，不要放入body或其他位置），js文件放到页面最下面
把js和css提取出来放在外部文件中：这一条要灵活运用，把js和css提取出来放在外部文件的优点是：减少html体积，提高了js和css的复用性，提高日后的可维护性；缺点：增加了http请求，不过这一点可以通过缓存来解决什么情况下将js和css写在页面内呢，可以分为几种情况：js和css代码比较少；这个页面不怎么会访问

避免重定向

重定向会增加服务器和浏览器之间的往返次数，影响网站性能。

减少对DOM的操作

DOM操作应该是脚本中最耗性能的一类操作，例如增加、修改、删除 DOM元素或者对 DOM集合进行操作。

避免使用 eval和 Function

eval 函数效率特别低，由于事先无法知晓传给 eval 的字符串中的内容，eval在其上下文中解释要处理的代码，也就是说编译器无法优化上下文，因此只能有浏览器在运行时解释代码。这对性能影响很大。
　
Function 构造函数比 eval略好，因为使用此代码不会影响周围代码 ;但其速度仍很慢。
　
使用 eval和 Function也不利于Javascript 压缩工具执行压缩。

减少作用域链查找

// 低效率的写法：
// 全局变量 
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; 
}