web性能提升

js优化

1 访问全局变量总是比访问局部变量要慢 所以减少全局变量的创建以及访问

2 减少eval,with语句的使用，

3原生方法更快,尽量使用原生方法

4switch语句较快，如果有很多的if-else判断尽量使用switch

5JS代码中的语句数量也会影响所执行的操作的速度

// 避免

var i = 1;

var j = "hello";

var arr = [1,2,3];

var now = new Date();

 

// 提倡

var i = 1,

    j = "hello",

    arr = [1,2,3],

    now = new Date();

// 避免

var name = values[i];

i++;

 

// 提倡

var name = values[i++];

6 js按需加载，代码分割。

优化DOM

css 优化

1使用图片精灵

2 压缩图片，分割图片

Vue性能优化

1. 慎用deep watch：
　　 第一次遇到性能问题是文件夹数据量稍大时，操作素材会感觉到明显的延迟和卡顿，通过chrome的performance分析发现是使用watch时，配置了deep等于true，由于这个文件系统是个大的tree状对象，每个素材对象又相互引用，导致任何一份数据更新都会通知到这个watcher。
deep:true, 明显延迟卡顿

2 进行懒加载之后，实现按需加载，那么项目打包不会把所有js打包进app.[hash].js里面，优点是可以减少app.[hash].js体积，缺点就是会把其它js分开打包，造成多个js文件，会有多次https请求。如果项目比较大，需要注意懒加载的效果。

routes: [
    { path: "/", redirect: "index" },
    {
    path: "/",
    name: "home",
    component: resolve=>require(["@/views/home"],resolve),
    children: [
      {
        // 员工查询
        path: "/employees",
        component: resolve=>require(["@/components/employees"],resolve)
      },
    {
      // 首页
      path: "/index",
      component: resolve=>require(["@/views/index"],resolve)
    },
    {
      // 访客查询
      path: "/visitorlist",
      component: resolve=>require(["@/components/visitorlist"],resolve)
    },
    {
      path: "/department",
      component: resolve=>require(["@/views/department"],resolve)
    },
    //识别查询
    {
      path: "/discriminate",
      component: resolve=>require(["@/components/discriminate"],resolve)
    },

 

2.源码优化

• v-if 和 v-show选择调用
  • v-show和v-if的区别是：v-if是懒加载，当状态为true时才会加载，并且为false时不会占用布局空间；v-show是无论状态是true或者是false，都会进行渲染，并对布局占据空间对于在项目中，需要频繁调用，不需要权限的显示隐藏，可以选择使用v-show，可以减少系统的切换开销。
• 为item设置唯一key值，
  • 在列表数据进行遍历渲染时，需要为每一项item设置唯一key值，方便vuejs内部机制精准找到该条列表数据。当state更新时，新的状态值和旧的状态值对比，较快地定位到diff。

• 减少watch的数据
  • 当组件某个数据变更后需要对应的state进行变更，就需要对另外的组件进行state进行变更。可以使用watch监听相应的数据变更并绑定事件。当watch的数据比较小，性能消耗不明显。当数据变大，系统会出现卡顿，所以减少watch的数据。其它不同的组件的state双向绑定，可以采用事件中央总线或者vuex进行数据的变更操作。
• 内容类系统的图片资源按需加载
  • 对于内容类系统的图片按需加载，如果出现图片加载比较多，可以先使用v-lazy之类的懒加载库或者绑定鼠标的scroll事件，滚动到可视区域先再对数据进行加载显示，减少系统加载的数据
  •  
  • SSR(服务端渲染)
  • 如果项目比较大，首屏无论怎么做优化，都出现闪屏或者一阵黑屏的情况。可以考虑使用SSR(服务端渲染)，vuejs官方文档提供next.js很好的服务端解决方案，但是局限性就是目前仅支持Koa、express等Nodejs的后台框架，需要webpack支持。目前自己了解的就是后端支持方面，vuejs的后端渲染支持php，其它的不太清楚

  •  

  •  

  •  

  • 如何减少webpack打包体积，加快webpack的打包速度呢？

    解决方法很简单，打包 vender 时不打包 vue、vuex、vue-router、axios 等，换用国内的 bootcdn 直接引入到根目录的 index.html 中。

    例如：

    <script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"></script>
    <script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script>
    <script src="//cdn.bootcss.com/vuex/2.2.1/vuex.min.js"></script>
    <script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>

    在 webpack 里有个 externals，可以忽略不需要打包的库

    externals: {
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'vuex': 'Vuex',
      'axios': 'axios'
    }