前端性能优化盘点

前端性能优化盘点

聊到前端性能优化，首当其冲肯定得是白屏时间优化了，脚手架打包的js文件过大，当用户打开首页时，会一次性加载所有的资源，造成首页加载很慢，降低用户体验

路由加载优化白屏

目标： 缩小打包体积，优化白屏时间

• 路由懒加载

  const Home = () => import(/* webpackChunkName: "home" */"@/views/home/index.vue");
  const MetricGroup = () => import(/* webpackChunkName: "metricGroup" */ "@/views/metricGroup/index.vue"); 
  const routes = [
  	    {
  	       path: "/",
  	       name: "home",
  	       component: Home
  	    },
  	    {
  	       path: "/metricGroup",
  	       name: "metricGroup",
  	       component: MetricGroup
  	    },
    	]
  

• 组件懒加载
  一般只用在需要用户手动操作才调用的组件，如dialog、drawer等，我们期望用户操作后去触发组件的加载

  	const dialog= () => import(/* webpackChunkName: "dialogInfo" */ '@/components/dialog');
  	export default:{ 
  	       name: 'homeView',      
   		   components: {
   				dialog
   		   }                                                                           
  	}														
  

  重新打包后，home.js 和 about.js 中没有了弹框组件的代码，该组件被独立打包成 dialog.js，当用户点击按钮时，才会去加载 dialog.js 和 dialog.css
  
  使用组件路由懒加载后，该项目的路由页资源进一步减少体积，可以有效提升首次加载时间

骨架屏优化白屏

SPA 单页应用，无论 vue 还是 react，最初的 html 都是空白的，需要通过加载 JS 将内容挂载到根节点上，这套机制的副作用：会造成长时间的白屏，
使用骨架屏其实并不能真正意义上优化白屏时长，只能从用户体验上来优化等待，其实只是一个loading效果，把大部分等待的白屏时间替换成了骨架屏来达到优化效果，在大部分移动端网页和app上都有应用，偏向C端体验了

使用骨架屏插件

这里以 vue-skeleton-webpack-plugin 插件为例，该插件的亮点是可以给不同的页面设置不同的骨架屏，这点确实很酷

(1)安装

  npm i vue-skeleton-webpack-plugin 

(2)vue.config.js 配置

// 骨架屏
const SkeletonWebpackPlugin = require("vue-skeleton-webpack-plugin");
module.exports = {
   configureWebpack: {
      plugins: [
       new SkeletonWebpackPlugin({
        // 实例化插件对象
        webpackConfig: {
          entry: {
            app: path.join(__dirname, './src/skeleton.js') // 引入骨架屏入口文件
          }
        },
        minimize: true, // SPA 下是否需要压缩注入 HTML 的 JS 代码
        quiet: true, // 在服务端渲染时是否需要输出信息到控制台
        router: {
          mode: 'hash', // 路由模式
          routes: [
            // 不同页面可以配置不同骨架屏
            // 对应路径所需要的骨架屏组件id，id的定义在入口文件内
            { path: /^\/home(?:\/)?/i, skeletonId: 'homeSkeleton' },
            { path: /^\/detail(?:\/)?/i, skeletonId: 'detailSkeleton' }
          ]
        }
      })        
      ]
   }
}

(3)新建 skeleton.js 入口文件

// skeleton.js
import Vue from "vue";
// 引入对应的骨架屏页面
import homeSkeleton from "./views/homeSkeleton";
import detailSkeleton from "./views/detailSkeleton";

export default new Vue({
    components: {
        homeSkeleton,
        detailSkeleton,
    },
    template: `
    <div>
      <homeSkeleton id="homeSkeleton" style="display:none;" />
      <detailSkeleton id="detailSkeleton" style="display:none;" />
    </div>
  `,
});

长列表虚拟滚动

虚拟滚动——指的是只渲染可视区域的列表项，非可见区域的
笔者以前做过一个特别奇葩的需求，一个C端web项目，列表数据需要通过触底加载，数据量比较庞大 ，如果不加虚拟列表的话，用户一直触底加载会导致页面DOM过多导致卡顿，这时候虚拟列表就排上用场了
实现方案用很多种，这里采用第三方插件形式(对性能要求不高的可以手动实现简易)

插件

虚拟滚动的插件有很多，比如 vue-virtual-scroller、vue-virtual-scroll-list、react-tiny-virtual-list、react-virtualized 等,这里使用vue-virtual-scroller

// 安装插件
npm install vue-virtual-scroller
// main.js
import VueVirtualScroller from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

Vue.use(VueVirtualScroller)

// 使用
<template> 
  <RecycleScroller 
    class="scroller" 
    :items="list" 
    :item-size="32" 
    key-field="id" 
    v-slot="{ item }"> 
      <div class="user"> {{ item.name }} </div>
  </RecycleScroller> 
</template>

图片优化

图片的动态裁剪

多云服务，比如阿里云或七牛云，都提供了图片的动态裁剪功能，效果很棒，对于C端项目花点钱无可厚非
只需在图片的url地址上动态添加参数，就可以得到你所需要的尺寸大小，比如：http://7xkv1q.com1.z0.glb.clouddn.com/grape.jpg?imageView2/1/w/200/h/200
图片瘦身前后对比

• 原图 1.8MB
  

• 裁剪后: 12.8kb

图片的懒加载

原理:
由于浏览器会自动对页面中的 img 标签的 src 属性发送请求并下载图片，可以通过 html5 自定义属性 data-xxx 先暂存 src 的值，然后在图片出现在屏幕可视区域的时候，再将 data-xxx 的值重新赋值到 img 的 src 属性即可

<img src="" alt="" data-src="./images/1.jpg">
<img src="" alt="" data-src="./images/2.jpg">

这里以 vue-lazyload为例

// 安装 
npm install vue-lazyload 
    
// main.js 注册
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
// 配置项
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png', // 图片加载失败时的占位图
  loading: 'dist/loading.gif', // 图片加载中时的占位图
  attempt: 1
})

// 通过 v-lazy 指令使用
<ul>  
    <li v-for="img in list">
        <img v-lazy="img.src" :key="img.src" >
    </li>
</ul>

字体图标

首当其冲的选择是阿里巴巴旗下的字体库iconfont，有许多配套的图标供选择，支持多种格式导出png、svg
优点：

• 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了 http 请求
• 灵活性：可以随意的改变颜色、产生阴影、透明效果、旋转等
• 兼容性：几乎支持所有的浏览器，用起来安心

优化总结

本文都些常规的代码方面的优化，核心都是减少http请求，加快页面响应速度，可以优化的点还有很多，持续学习后继续分享心得的，感谢观看