Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
haizhilin2013 opened this issue Aug 11, 2019 · 2 comments
Labels
软技能 软技能

Comments

@haizhilin2013
Copy link
Collaborator

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

@haizhilin2013 haizhilin2013 added the 软技能 软技能 label Aug 11, 2019
@SiroSong
Copy link

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

@HCLQ
Copy link

HCLQ commented Aug 13, 2019

骨架屏的目的和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
Labels
软技能 软技能
Projects
None yet
Development

No branches or pull requests

3 participants