前端性能優化學習筆記3：JavaScript層級優化

1、變量緩存

//方式一

this.aa='結果1';
this.bb='結果2';
this.cc='結果3';

//方式二
let _self=this;
_self.aa='結果1';
_self.bb='結果2';
_self.cc='結果3';

原理：方式一每次都要讀取this；方式二隻需要讀取一次，之後直接從變量裏拿。代碼多了就可以明顯效果了。

2、選擇一個的前段框架，我用的是VUE

基於vue的一些細節：

v-if 與 v-show

v-if ：通過創建與刪除DOM來實現是否顯示，適合非頻繁的切換，可降低加載資源，但是導致頁面不斷重排、重繪，影響性能。

v-show：通過display:none來實現切換，適合頻繁操作，但增加加載資源，有更高的首屏渲染開銷。

3、骨架屏

安裝

步驟一：

npm install vue-server-renderer --save  
 //安裝服務端渲染插件，利用它能夠把.vue文件處理成html和css字符串的功能，來完成骨架屏的注入

npm install webpack-node-externals --save-dev
//安裝外部插件，在項目中給css設置白名單

npm install html-webpack-plugin --save-dev  //打包的時候可以將index.html一起打包

步驟二：

在/src目錄下新建一個Skeleton.vue文件，樣式都可以自己定義的，爲了方便，可以直接複製粘貼。

<template>
  <div class="skeleton page">
    <div class="skeleton-nav"></div>
    <div class="skeleton-swiper"></div>
    <ul class="skeleton-tabs">
      <li v-for="i in 8" class="skeleton-tabs-item"><span></span></li>
    </ul>
    <div class="skeleton-banner"></div>
    <div v-for="i in 6" class="skeleton-productions"></div>
  </div>
</template>

<style>
.skeleton {
  position: relative;
  height: 100%;
  overflow: hidden;
  padding: 15px;
  box-sizing: border-box;
  background: #fff;
}
.skeleton-nav {
  height: 45px;
  background: #eee;
  margin-bottom: 15px;
}
.skeleton-swiper {
  height: 160px;
  background: #eee;
  margin-bottom: 15px;
}
.skeleton-tabs {
  list-style: none;
  padding: 0;
  margin: 0 -15px;
  display: flex;
  flex-wrap: wrap;
}
.skeleton-tabs-item {
  width: 25%;
  height: 55px;
  box-sizing: border-box;
  text-align: center;
  margin-bottom: 15px;
}
.skeleton-tabs-item span {
  display: inline-block;
  width: 55px;
  height: 55px;
  border-radius: 55px;
  background: #eee;
}
.skeleton-banner {
  height: 60px;
  background: #eee;
  margin-bottom: 15px;
}
.skeleton-productions {
  height: 20px;
  margin-bottom: 15px;
  background: #eee;
}
</style>

步驟三： 在Skeleton.vue同個目錄下，建立一個skeleton.entry.js入口文件

import Vue from 'vue'
import Skeleton from './Skeleton.vue'

export default new Vue({
  components: {
    Skeleton
  },
  template: '<skeleton />'
})

步驟四：

在根目錄新建一個webpack.skeleton.conf.js文件，以專門用來進行骨架屏的構建，vue-server-renderer就是將Skeleton.vue生成json文件，以便插入到html。

該配置文件和普通的配置文件基本完全一致，主要的區別在於其target: 'node'，配置了externals，以及在plugins裏面加入了VueSSRServerPlugin。在VueSSRServerPlugin中， 指定了其輸出的json文件名。我們可以通過運行下列指令，在/dist目錄下生成一個skeleton.json文件

const path = require('path')
const webpack = require('webpack')
const nodeExternals = require('webpack-node-externals')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  target: 'node',
  entry: {
    skeleton: './src/skeleton.entry.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: '[name].js',
    libraryTarget: 'commonjs2'
  },
  plugins: [new HtmlWebpackPlugin({
    title: 'test',
    template: 'index.html',
  })],
  module: {
    rules: [{
      test: /\.css$/,
      use: ['vue-style-loader', 'css-loader']
    }, {
      test: /\.vue$/,
      loader: 'vue-loader'
    }]
  },
  externals: nodeExternals({
    allowlist: /\.css$/
  }),
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  plugins: [new VueSSRServerPlugin({
    filename: 'skeleton.json'
  })]
}

 

步驟五： 使用命令   將skeleton.vue文件變成json格式

webpack --config ./webpack.skeleton.conf.js 

步驟六： 在根目錄下新建一個skeleton.js，該文件即將被用於往index.html內插入骨架屏

const fs = require('fs')
const { resolve } = require('path')

const createBundleRenderer = require('vue-server-renderer').createBundleRenderer

// 讀取`skeleton.json`，以`index.html`爲模板寫入內容
const renderer = createBundleRenderer(resolve(__dirname, './dist/skeleton.json'), {
  template: fs.readFileSync(resolve(__dirname, './index.html'), 'utf-8')
})

// 把上一步模板完成的內容寫入（替換）`index.html`
renderer.renderToString({}, (err, html) => {
  fs.writeFileSync('index.html', html, 'utf-8')
})

步驟七： 將<!--vue-ssr-outlet-->佔位符寫在index.html裏面，才能注入代碼

<div id="app">
 <!--vue-ssr-outlet-->
</div>

步驟八：

運行node skeleton.js，就可以完成骨架屏的注入了。可以看下index.html的結果。

最後：

文件目錄

學自網絡，分享網絡。

 

PS：感覺只是縮短了空白頁顯示的時間，但是還是有，但是暫時只能先這樣啦