前端规范——性能篇（1）

一、懒加载

1、延迟加载或按需加载，即在需要的时候的时候进行加载

例如：浏览器解析的过程中，遇到image里面有src，他就会去请求 src 里面的资源，在真实场景中，我们希望图片进入可视区域之后，src 才会被设置进去，而不是一开始可视区域之外的 img 就设置了 src ,如果已经设置了，显然没在可是区域就去加载了。所以一开始不在可视区域的图片只是一个占位符，他真正的 url 存放在 data-url 上面。这个地址因为没放在 src 上，所以不会造成去请求图片相关的资源。通过 js 监听 scroll 事件，监听到这个图片到可视区域之后，将 data-url 放置到 src ，src 的变化就会触发请求。

2、使用Vue路由的懒加载

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
**const HelloWorld = ()=>import("@/components/HelloWorld")**
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      **component:HelloWorld**
    }
  ]
})

3、使用组件懒加载

<template>
  <div class="hello">
      <One-com></One-com>
  </div>
</template>
<script>
const One = ()=>import("./one");
export default {
  components:{
     "One-com":One
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

二、缓存

在vue中使用keep-alive，配合router-view缓存整个路由页面。

三、压缩

去掉不必要的图片，压缩图片，使用字体图标或者雪碧图、图片懒加载页面加载及渲染过程优化

四、优化DOM

js方面缓存dom，一次性动态添加dom而不是循环每次添加dom；

五、优化CSS

css方面尽量不用后代选择器，少用子代选择器，最好不要超过三层

六、防抖/节流

节流：第一次发送请求后，只要响应没回来，就不能发送第二次

防抖：只要不是最后一次触发，就不执行异步请求