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:感觉只是缩短了空白页显示的时间,但是还是有,但是暂时只能先这样啦