前端性能优化小结

资源组织方式

合并css和js文件

一个项目只有一个css，一个js，使得不同网页不必每次请求重复的css或者js内容。
并且使用打包工具可以压缩资源文件的大小，例如webpack、gulp、grunt等。

优先使用矢量图

使用字体图表或者SVG图替代传统的PNG图片。
矢量图片资源大小更小，渲染速度快，不存在放大后模糊的问题。

减少冗余

CSS的性能优于js；原生js的性能优于第三方插件。
避免引入庞大的第三方库后，只使用部分微小的功能。

图片精灵

将所有较小的资源图片整合至一张大图，将大图下载后，再定位小图的展现。

避免使用iframe

嵌套的iframe页面性能消耗更大，加载资源更多

资源请求流程

图片懒加载

延迟加载页面中的图片，减少第一次加载过程中http的请求数目
步骤

1. 在页面中对应的位置放上占位图，开始加载时不使用http请求图片。
2. 当页面加载完毕后，检查图片是否在可视区域，再加载图片信息。

减少cookie使用

因为客户端和服务端之间总是在传递cookie，所以需要减少本地cookie存储内容的大小，并且避免每次发送http请求都携带cookie。

前后端数据交互

json格式

多项数据使用json传递数据，比xml格式数据处理更方便，资源更小。

keep-alive

keep-alive是Vue提供的一个抽象组件，可以缓存导航栏下的页面组件，从而优化性能。
抽象组件在渲染完毕后不会被渲染成DOM元素。

<keep-alive>
	<loading></loading>
</keep-alive>

当组件在keep-alive内部被切换的时候，组件的activated和deactivated两个生命周期钩子函数会被执行。
被包裹在keep-alive中的组件的状态将会被保留，即从其他分栏返回后，页面位于跳转前的位置。即缓存并非处于活动状态的实例，再次调用这些实例的，对应的缓存将被复用。

但是缓存会导致组件的陈旧化，即页面不会被重新渲染，只保持第一次请求得到数据后的渲染结果。

强制刷新组件的方法

include exclude 属性

<keep-alive include="bookLists">
      <router-view></router-view>
</keep-alive>
<keep-alive exclude="indexLists">
      <router-view></router-view>
</keep-alive>

属性include
表示只有name属性为bookLists的组件会被缓存，其他组件不会被缓存。
属性exclude
表示只有name属性为indexLists的组件不会被缓存，其他组件都会被缓存。

meta属性

export default[
 {
  path:'/',
  name:'home',
  components:Home,
  meta:{
    keepAlive:true //需要被缓存的组件
 },
 {
  path:'/book',
  name:'book',
  components:Book,
  meta:{
     keepAlive:false //不需要被缓存的组件
 } 
]

<keep-alive>
  <router-view v-if="this.$route.meta.keepAlive"></router-view>
  <!--这里是会被缓存的组件-->
</keep-alive>

<keep-alive v-if="!this.$router.meta.keepAlive">
	<!--这里是不会被缓存的组件-->
</keep-alive>

监听并响应路由参数的变化

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }
}

beforeRouteEnter

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

第三方插件

前进刷新，后退缓存

音视频的preload=none

代码编写逻辑

js

减少闭包使用

闭包被使用后，其所在上下文的资源不会被释放。

避免嵌套循环和死循环

避免递归、死递归

替换为尾递归

低耦合高内聚

requestAnimationFrames

替代传统的定时器动画
requestAnimationFrames原理

css

css放置于body上面，js放置于body下面

优先加载CSS

改变盒子层级

css设置定位后，使用z-index改变盒子的层级

link替代@import

@import是同步操作，link是异步操作

html

加载js使用defer / async

异步加载提高总体加载并行度。

减少DOM操作

减少DOM的重绘和回流。

1. 合并样式的设置操作。
2. 尽量将一个动画元素单独设置为一个图层

资源本地存储

协商缓存304

（立flag写文章)

localStorage、sessionStorage

h5新特性，存储简单数据。
（立flag写文章)