Skip to content

[软技能] 第118天 你有做过骨架屏吗?它的原理是什么知道吗? #1056

Open
@haizhilin2013

Description

@haizhilin2013

第118天 你有做过骨架屏吗?它的原理是什么知道吗?

Activity

SiroSong

SiroSong commented on Aug 12, 2019

@SiroSong

没有,据了解骨架屏为解决首屏加载导致白屏时间过长的一种优化方案。它可以理解为是当数据还未加载进来前,页面的一个空白版本,一个简单的关键渲染路径。具体的实现方式可以是手写html、css,待数据请求回来再以真是数据替换。还可以使用图片来作为骨架屏。

HCLQ

HCLQ commented on Aug 13, 2019

@HCLQ

骨架屏的目的和Loading是一样的,安抚用户,最速响应
一般情况下是服务端渲染好html 直接把骨架屏结构先写在html里,用户打开直接先看到页面结构优化了白屏体验,后续js等资源加载完了才渲染出页面,本质和Loading是一样的
难点就在于通用的自构件产出骨架屏,因为每个入口页面结构都是不一样的不像Loading样式一致
有方案是通过webpack打包编写插件,自构结构插入到输出的html文件里
reference:Jocs/jocs.github.io#22

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@HCLQ@SiroSong

        Issue actions

          [软技能] 第118天 你有做过骨架屏吗?它的原理是什么知道吗? · Issue #1056 · haizlin/fe-interview