饿了么开源的骨架屏插件原理分析

Skeleton Screen(骨架屏) 指的在页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充进需要显示的数据内容。常用于内容列表页。

一、page-skeleton-webpack-plugin

page-skeleton-webpack-plugin 是一款由 ElemeFE 团队开发的webpack 插件，该插件的目的是根据你项目中不同的路由页面生成相应的骨架屏页面，并将骨架屏页面通过 webpack 打包到对应的静态路由页面中。

二、插件自动生成骨架屏的主要原理

先demo展示一下如何自动生成骨架屏，后续再通过代码具体分析如何生成骨架屏：

安装运行环境

依赖环境：

安装puppeteer可参考：>

puppeteer 怎么判断某个元素被移除了代码如下。

const searchInputs = await page$("#text3");

if (searchInputs) consolelog('对象存在')

else consolelog('对象不存在')

背景

在表单（web页面）测试过程中，要经常对表单基本功能进行回归，曾经考虑过使用webUI自动化工具，减少重复性的 *** 作，但是因为之前用过appium，对UI自动化的体验不是很好，所以有些纠结，但是，再仔细想一下，有可能存在比较好用又确实能提升效率的工具，也不妨去尝试一下。

上网查询了一下，puppeteer具有可以使用录制脚本的工具puppeteer-recorder、截图等功能，找了个demo开始试了一下，发现坑较少，安装方便，使用比较流畅。

puppeteer介绍

Puppeteer 是一个Node库， 它提供高级API，通过DevTools Protocol 来控制Chrome 或 Chromium。 Puppeteer 默认运行为headless ，但是可以配置为运行为non-headless。详见文末参考链接。

效果展示

目录结构

cases：用例脚本

config：配置文件，可区分测试、线上环境

screenshot_outputs：输出的截图文件

utils：用到的通用方法

测试思路

1、在脚本中写入测试执行步骤

2、运行脚本

3、查看执行结果（截图），查看是否符合预期。

这样 *** 作会使简单很测试很多。就拿表单人工审核为例，全部人工 *** 作的话，需要填写并提交表单，登录表单运营后台，找到对应的目录及表单，对表单进行审核，再重新打开表单并进行查看，而自动化的话，在写好脚本（在脚本中可进行接口请求）之后，就可以直接运行脚本，查看结果。

环境搭建

1、安装puppeteer：npm install puppeteer（前提是安装了node、npm）

2、安装chrome插件puppeteer-recorder（可自行百度，比较简单）

3、npm init，初始化一个项目

脚本编写

遇到问题

1、puppeteer-recorder只能录制获取元素、点击元素 *** 作，没有获取到填写文本的 *** 作，需要修改或添加已录制好的脚本

2、有些地方例如截图前，接口请求结束后，需要使用等待方法。await pagewaitFor(3000)

3、使用await进行接口请求，不然会出现同步异步问题，后面的语句开始执行（但是要用到的参数还没有获取到）

参考：

>

缺点：不能获取页面上的文字，超链接等（用途有限）

能够获取页面上的文字，超链接等。但是出现问题难以调试

官方文档： >

1 简介

Puppeteer 是一个 Node 库，它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。

Puppeteer 默认以无头模式（headless）运行，也就是运行一个无界面的 Chrome 浏览器。

2 应用场景

21 页面生成 PDF

Puppeteer 提供了页面生成 PDF 的方法，我们可以利用这个方法来将页面导出为 PDF ，导出的 PDF 效果和 Chrome 浏览器打印功能导出的 PDF 一致。

具体的应用场景有：

22 页面截图

Puppeteer 提供了截图的方法，我们可以利用这个方法来将页面的指定区域导出为 jpeg 或 png 。

具体的应用场景有：

23 服务端渲染

单页应用（SPA）的主要内容是在 JavaScript 向服务端请求数据后渲染的，存在爬虫难以抓取主要内容、首屏加载慢等问题，而使用 Nextjs、Nuxtjs 等服务端渲染框架改造的成本较高。

如果只是为了搜索引擎优化，我们可以考虑利用 Puppeteer 来实现。我们可以在网关层判断请求的来源，如果是爬虫，直接返回由 Puppeteer 服务端渲染的 html 文件。

24 自动化UI测试

使用 Puppeteer 可以模拟 Chrome 浏览器环境，结合 JavaScript 测试框架（如 Jest）可以实现自动化 UI 测试。

Puppeteer 提供了 Mouse 类来模拟鼠标 *** 作，提供了 Keyboard 类来模拟键盘 *** 作，提供了 Touchscreen 类来模拟触屏 *** 作，并且 Puppeteer 提供的 Page 类里有很多方法可以用来 *** 作元素，比如点击元素、聚焦元素等 *** 作。

25 页面检测分析

使用 Puppeteer 提供的 pagetracing 系列方法捕获网站的 timeline trace 来对页面进行性能分析。

使用 Puppeteer 提供的 pagecoverage 系列方法来获取 JavaScript 和 CSS 覆盖率。

使用 Puppeteer 提供的 pagemetrics() 方法来获取某个时间点页面的指标数据，包括页面的 documents 数量、iframe 数量、js 事件数量、dom 节点数量、布局数量、样式重新计算数量、布局时间、样式重新计算总时间、js 代码执行总时间、任务执行总时间、占用堆内存大小、总的堆内存大小。

使用 Puppeteer 提供的 Request 类和 Response 类来监控页面发送的请求和接受的响应。

3 基础概念

Puppeteer API 是分层次的，反映了浏览器结构。

Puppeteer 使用 DevTools 协议与浏览器进行通信。

Browser 是浏览器实例，可以有多个浏览器上下文。

BrowserContext 是浏览器上下文实例，定义了一个浏览会话并可拥有多个页面。

Page 是页面实例，至少拥有一个框架（主框架mainFrame），可能还有由 iframe 创建的其他框架。

Frame 是框架实例，至少有一个默认的 JavaScript 执行上下文。可能还有与扩展插件关联的执行上下文。

Worker 表示一个WebWorker，具有单一执行上下文。

4 快速上手

41 安装 puppeteer-core

npm i puppeteer-core

puppeteer-core 是一个轻量级的 Puppeteer 版本，自 170 版本以来，官方都会发布一个 puppeteer-core 包，安装这个包时，默认不会下载 Chromium。

42 下载 Chromium

Puppeteer 官网： >

以上就是关于饿了么开源的骨架屏插件原理分析全部的内容，包括:饿了么开源的骨架屏插件原理分析、nodejs puppeteer打开一个页面后，在点击跳转到另一个页面 怎么判断这么页面是否所有的元素都已加载完成、puppeteer 怎么判断某个元素被移除了等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！