骨架图在项目中的实践

转载

mb6013bd7dd84a6 2021-01-30 13:52:16

文章标签 骨架图 文章分类 前端开发

项目背景

会员首页是整个会员的承载页，项目中集合了会员身份、金币、任务、cps、各种弹窗（至少8个)，整个页面还要支持运营日氛围配置。

项目存在的问题

随着版本的迭代，html引入资源越来越多，项目体积越来越大，页面加载速度越来越慢，白屏时间增长。

优化目标

减少白屏时间，提要用户留存率

技术实现

1. 根据页面样式生成骨架图，并转换成base64

将图片转换成base64的目的是减少网络请求，html加载完之后直接渲染
骨架图的作用是让用户看到的白屏变成一个页面的大致骨架，让用户有一种已经进入了页面感觉

2. 在html中加入骨架占位元素

    /*骨架图元素css样式*/.main-bone {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-image: url('data:image/png;base64,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');background-color: #fff;background-size: cover;z-index: 1000;transition: all .6s linear;-webkit-transition: all .6s linear;pointer-events: none;
    }复制代码

<!--增加占位--><div id="home_skeleton" class="main-bone" style="display: none"></div>复制代码

3. 增加多页支持

<!--
    1、basename 是对应着Router的basename
    2、根据页面路由匹配是否显示对应的骨架，如果是单一的页面可以把下面逻辑简化，去掉for循环检索
--><script>var pathname = window.location.pathname, hash = window.location.hash, basename = '/member/memberCenter',
        skeletons = [{id: "home_skeleton", el: document.querySelector("#home_skeleton")}], isMatched = function (e, t) {return "hash" === t ? e.test(hash.replace("#", "")) : "history" === t && e.test(pathname.replace(basename, ''))
        }, showSkeleton = function (e) {for (var t = 0; t < skeletons.length; t++) {var o = skeletons[t];
                e === o.id ? o.el.style = "display:block;" : o.el.style = "display:none;"}
        }, removeChild = function () {for (var t = 0; t < skeletons.length; t++) {var o = skeletons[t];if (o && o.el) {document.body.removeChild(o.el);
                }
            }
        };    //要显示骨架图的正则匹配var match_skeleton_route=/^\/index.html/;//匹配当前路由是否需要显示骨架图isMatched(match_skeleton_route, "history") ? showSkeleton("home_skeleton") : removeChild();</script>复制代码

4. 在页面渲染完之后，手动将其隐藏掉

手动关闭的好处是，保证从骨架图到页面首屏渲染完切换时比较顺滑

    /**
     * 关闭骨架屏
     */closeSkeleton = () => {const skeleton = document.getElementById("home_skeleton");if (skeleton) {//透明度设置为0，执行过渡动画,动画过渡事件必须小于延迟时间，否则动画看起来不完整skeleton.style.opacity = '0';setTimeout(() => {//延迟1秒之后删除骨架图占位元素const tempSkeleton = document.getElementById("home_skeleton");if (tempSkeleton) {document.body.removeChild(tempSkeleton);
                }
            }, 1000);
        }
    }复制代码