vue 首屏渲染
2020-06-15 本文已影响0人
在幽幽暗暗反反复复中追问
项目的图片比较多，有大图有小图，小图没用 iconfont，直接打包进 js 了，然后首页渲染就比较慢
解决方案：
- 图片压缩
- nginx 缓存
- lazy-load
- skeleton
- cdn
- oss
- 图片服务器
实际解决方案：
- 所有图片都压缩一遍 压缩网址
- 大图渲染优化：vue-lazyload 这个插件文档有例子针对 css bg，但是我试了没有效果?
- 小图渲染优化：用 iconfont
- nginx 不会，先不做
- cdn 要钱，不做
- oss 让客户买
- 图片服务器，这个可以用 oss 代替
skeleton 骨架屏这个实际上并没有优化首屏渲染，只是让用户知道他在等...
饿了么有个 2k star 的开源项目，然后我想看例子的时候，依赖好难装，终于装上跑起来，又报错，就没有用他了
骨架屏的原理就是在 app 节点渲染前显示出来，而不是全白的，app 节点显示了之后就把他删掉，看效果的话可以将调试面板的 network 改成 3g slow
// router.js
router.beforeEach((to, from, next) => {
const skeleton = document.getElementById("skeleton")
if (skeleton) {
document.body.removeChild(skeleton)
}
next()
})
// index.html 写上你的 skeleton 的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>skeleton </title>
</script>
<style>
#skeleton {
padding: 40px 20px;
}
#skeleton > div {
height: 30px;
background: #999;
margin-bottom: 15px;
animation: loadingSubTitle 3s infinite;
}
#skeleton > div:nth-child(4n+1) {
width: 100%;
height: 50px;
background: #ccc;
animation: loadingTitle 8s infinite;
}
#skeleton > div:nth-child(4n+1):not(:first-child) {
margin-top: 50px;
}
@keyframes loadingTitle {
from {
width: 10%;
opacity: 0.1;
}
to {
width: 55%;
opacity: 1;
}
}
@keyframes loadingSubTitle {
from {
width: 10%;
opacity: 0.1;
}
to {
width: 100%;
opacity: 1;
}
}
</style>
</head>
<body>
<div id="skeleton">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
