前端性能优化

页面性能优化

为了使页面加载的更快，让客户有更好的体验。

减少页面请求，减少请求所占宽带，节省流量。

1. 减少http请求

   减少http的主要手段是合并CSS、合并javascript、合并图片

   数据量不大的页面，就减少http请求，一次性返回过来，对于数据量大的页面，可以分段请求，让用户先看到一部分，再继续加载另一部分。

2. 合并css、合并js代码，合并图片、注释、精灵图

   • 将浏览器一次访问需要的jsvaScript和css合并成一个文件，这样浏览器就只需要一次请求。

   • 尽量减少页面中的空格和注释，从而减少页面的大小。对于css、js可以使用压缩工具进行压缩后再发布

   • 使用精灵图，将很多小图片合成一张大图，通过css来移动位置，减少向服务器请求数据的次数

3. 合理设置缓存

   很少变化的图片可以通过http header中的expires设置一个很长的过期头，尽可能让资源再缓存中保存更久。

4. 将更新频率较低的css、js、图标等静态资源缓存在浏览器中

   避免频繁的http请求，通过设置http头中的cathe-ontrol和ecpires的属性，可以设定浏览器缓存时间。

5. css引入放在head中，把js放在body底部

   让页面加载的时候，先加载css，再加载js(先呈现页面，再给用户提供操作)

   浏览器会在下载完成全部CSS之后才对整个页面进行渲染，因此最好的做法是将CSS放在页面最上面，避免页面布局混乱，或没有样式。

   浏览器在加载javascript后立即执行，有可能会阻塞整个页面，造成页面显示缓慢，所以最好卸载页面底部。

6. 减少作用域链查找

7. 节流和防抖

   防抖是控制次数，节流是控制频率

   防抖和节流是优化高频率执行js代码的一种手段，js中的一些事件在出发时，会不断调用绑定的回调函数，降低性能，为了优化体验，对这类事件进行调用次数的限制。

   防抖动和节流本质是不一样的。防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一 段时间执行。

   防抖

   防抖和节流都是防止函数多次调用。区别在于，如果一个函数的调用间隔小于规定的时间，防抖的情况下只调用一次，而节流是每隔一定时间调用一次。

   实现防抖：将执行函数放到一个定时器中，如果在定时器出发之前没有时间执行，那么就出发该函数，否则清空定时器。

   节流

   连续出发时间但是在n秒钟只执行一次函数，节流就会稀释函数的执行频率。

vue中的优化

• 路由懒加载
• 图片懒加载
• 合理使用生命周期，使用过后的全局变量在组件销毁后重新设置null，清空定时器
• 使用keep-alive缓存组件
• 封装重复使用的组件模块
• 封装axios、接口
• 按需加载、按需引入