We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Learn more about funding links in repositories.
Report abuse
There was an error while loading. Please reload this page.
第118天 你有做过骨架屏吗?它的原理是什么知道吗?
没有,据了解骨架屏为解决首屏加载导致白屏时间过长的一种优化方案。它可以理解为是当数据还未加载进来前,页面的一个空白版本,一个简单的关键渲染路径。具体的实现方式可以是手写html、css,待数据请求回来再以真是数据替换。还可以使用图片来作为骨架屏。
骨架屏的目的和Loading是一样的,安抚用户,最速响应 一般情况下是服务端渲染好html 直接把骨架屏结构先写在html里,用户打开直接先看到页面结构优化了白屏体验,后续js等资源加载完了才渲染出页面,本质和Loading是一样的 难点就在于通用的自构件产出骨架屏,因为每个入口页面结构都是不一样的不像Loading样式一致 有方案是通过webpack打包编写插件,自构结构插入到输出的html文件里 reference:Jocs/jocs.github.io#22
Activity
SiroSong commentedon Aug 12, 2019
没有,据了解骨架屏为解决首屏加载导致白屏时间过长的一种优化方案。它可以理解为是当数据还未加载进来前,页面的一个空白版本,一个简单的关键渲染路径。具体的实现方式可以是手写html、css,待数据请求回来再以真是数据替换。还可以使用图片来作为骨架屏。
HCLQ commentedon Aug 13, 2019
骨架屏的目的和Loading是一样的,安抚用户,最速响应
一般情况下是服务端渲染好html 直接把骨架屏结构先写在html里,用户打开直接先看到页面结构优化了白屏体验,后续js等资源加载完了才渲染出页面,本质和Loading是一样的
难点就在于通用的自构件产出骨架屏,因为每个入口页面结构都是不一样的不像Loading样式一致
有方案是通过webpack打包编写插件,自构结构插入到输出的html文件里
reference:Jocs/jocs.github.io#22