Auto-skeleton

Introducing

by-lenovointer

Introducing

1、为什么需要骨架屏

2、骨架屏常见的几种实现形式

3、自动生成骨架屏技术揭秘

Enable auto-animate
Duplicate the slide
Make changes

1、为什么需要骨架屏

网页加载速度和转化率呈现明显的负相关性

200ms 不用进行任何处理

200ms~1s 提供简单等待提示

1s~10s 尽可能优化用户等待体验

10s以上用户将离开

1、为什么需要骨架屏

优化用户等待体验：从用户的交互体验和心理感受出发,结合设计学、认知心理学、人机工程学等交叉学科的理论知识对交互等待过程的等待心理和心理等待时间进行设计优化,以达到“缩短”交互等待“时间”,“减轻”用户等待过程中的负面体验

体现在web中的方案，通常我们会在首屏、或者获取数据时，在页面中展现一个进度条，或者转动的 Spinner

加载中：吸引用户注意力

进度条：让用户知道大致的等待时间

骨架屏：通过这个空白版本传递信息，反馈给用户我们的页面正在渐进式的加载过程中，有轮廓感，呼之欲出的感觉

2、骨架屏常见的几种实现形式

1. 通过设计师给出骨架屏图片

2. 通过 HTML+CSS 编写骨架屏代码。

3. 非侵入式自动生成骨架屏图片。京东 https://github.com/famanoder/dps

4. 非侵入式自动生成骨架屏代码。考拉https://github.com/kaola-fed/awesome-skeleton

5. 非侵入式自动生成骨架屏代码。饿了么https://github.com/ElemeFE/page-skeleton-webpack-plugin

3、自动生成骨架屏技术揭秘

* 使用 Puppeteer 进行页面渲染，获取页面 DOM 结构；

* 命令行工具生成骨架屏代码；

* 支持页面登录态、不同设备页面显示、列表重复渲染、骨架屏灰色块大小配置；

* 支持骨架屏图片压缩和代码自动生成；

* 通过 DOM 属性进行骨架屏细粒度的配置，指定节点配置，包括背景色、是否在骨架屏中显示等。

实现流程
class Skeleton {
  constructor(options = {}) {
    this.options = options
    this.browser = null
    this.page = null
  }

  async initPage() {
        // 第一步：用于启动一个页面
  }

  async makeSkeleton() {
      // 第二步：构建骨架页面
  }

  async genHtml(url) {
    // 第三步：根据构建的骨架页面，获取 HTML 和 CSS
  }
}
module.exports = Skeleton

首先将页面根据不同元素分成不同的块，分块细则如下：

* 文本块：包含唯一文本节点的 DOM 元素被视为文本块

* 图片块：IMG 元素或者背景为图片的元素被视为图片块

* SVG块：SVG 元素被视为 SVG 块

* 伪元素块：::before 、 ::after 伪类元素由于在页面中也会有展示，因此也需要做处理，被视为伪元素块

* 按钮块：BUTTON、INPUT [type=button]、A [role=button] 等元素被视为按钮块，这儿需要注意一点，我们只将role=button 的 A 元素视为按钮块，其实如果需要将一个 A 元素视为按钮，为其添加一个 role=button 的特性是很有必要的，这也符合了前端可访问性的要求。

总结：puppeteer

// 启动浏览器
puppeteer.launch()
// 打开一个窗口
browser.newPage()
// 设置模拟器
page.emulate()
//  页面console 事件的监听器
page.on('console')
// 设置启用请求拦截
page.setRequestInterception
// 页面发送一个请求事件的监听器
page.on(‘request’)
// 页面返回响应事件的监听器
page.on(‘response’)
// 页面出错事件的监听器
page.on(‘pageerror’)
// 导航到的地址
page.goto(url,[, options])
// 在页面实例上下文中执行的方法
page.evaluate
// 等待指定的选择器匹配的元素出现在页面中
page.waitForSelector
// 注入一个指定src(url)或者代码(content)的 script 标签到当前页面
page.addScriptTag

总结：css-tree

总结：linear-gradient

background: linear-gradient(#fb3 50%, #58a 50%); 
background-size: 100% 30px;

语法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

thanks!

a way of auto makes skeleton screen

By lenovointer

a way of auto makes skeleton screen

介绍一种自动生成骨架屏的方式

Auto-skeleton

Introducing

Introducing

a way of auto makes skeleton screen

More from lenovointer