网页性能优化

页面级优化

1. 减少HTTP请求数

• 从设计层实现页面简化：比如百度首页，很简介，所需要的资源就相对较少

• 合理设置HTTP缓存：比如对很少变化的图片资源设置HTTP header的expires为一个很长的时间，尽量让浏览器缓存图片

• 资源合并与压缩：将多个js合并为一个js并压缩，将多个css合并为一个css并压缩；去除不要的代码

• 雪碧图

• 资源懒加载：比如看第一屏的时候只有第一屏的图片，往下滑动才会请求加载第二屏的图片；webpack也为我们提供了懒加载的方式，比如vue-router里这么写

  const routes = [
    {
      path: 'xxx',
      component: resolve => import('xxxxx.vue')     // 这个import就是webpack提供的代码切割达到懒加载的方法
    }
  ]
  

2. CSS放在head中，js放在body结尾处
3. 减少不必要的HTTP跳转：这个主要是服务器端的事
4. 避免重复的资源请求

代码级优化

1. 减少DOM的操作：对于DOM的操作会引起页面的重绘和重排，耗费大量资源
2. 遵守代码规范：比如不使用eval、with等
3. 减少作用域链式查找：即在方法中使用一个临时变量去缓存全局变量
4. 在有大量的字符串拼接操作的时候，使用数据和join方法代替字符串拼接