1.自动化生成骨架屏的技术方案设计与落地
2.开源分享 | 在线编辑器，支持PSD解析、AI抠图等，基于Puppeteer生成
3.为什么爬虫抓取的页面和浏览器看到不一致？
4.玩转Puppeteer
5.爬虫为什么抓不到网页源码
6.用爬虫抓取网页得到的源代码和浏览器中看到的不一样运用了什么技术？

自动化生成骨架屏的技术方案设计与落地

       在构建高性能前端应用程序时，减少页面加载过程中白屏的时间一直是关注焦点，尤其在前后端分离的html登录源码下载项目中。骨架屏（Skeleton）技术能够在此过程中发挥重要作用，通过在页面未加载完整内容前展示页面结构，给用户一种页面已开始渲染的错觉，从而提升用户体验。本文将探讨在拍卖源码工作台BeeMa架构中如何设计并实现自动生成骨架屏的技术方案。

       ### 骨架屏概览

       骨架屏本质上是一种视觉过渡效果，其工作原理是先预加载页面的大致结构和布局元素，待数据加载完成后再替换为实际内容。相比于传统的加载动画（如菊花加载），骨架屏能更自然地引导用户注意到页面的进展，降低等待过程中的焦虑感。

       ### 技术调研与方案选择

       现有实现骨架屏的技术方案大致可以分为三类，其中自动生成骨架屏方案具有较高的维护性和较低的配置成本。市面上流行的游戏编程大赛源码饿了么开源的webpack插件“page-skeleton-webpack-plugin”通过生成特定路由页面的骨架屏实现这一功能。这种方式将骨架屏代码与业务代码分离，由webpack注入到项目中，确保了代码的独立性和易管理性。然而，其依赖于webpack配置以及html-webpack-plugin，对于某些团队可能是一层额外的负担。

       ### 技术方案设计

       基于前述分析，我们决定采用最低侵入业务代码且降低配置成本的骨架屏自动生成方案。结合BeeMa架构特点与vscode插件特性，设计了一套新方案。方案核心思路如下：

       1. **设计原则与架构整合**：明确骨架屏需要遵循的原则，确保与BeeMa架构和vscode插件的协同作用。

       2. **技术方案与流程**：基于现有的技术调研结果，详细规划从骨架屏生成、配置到注入的具体流程。

       3. **关键技术和实现**：涉及到的关键技术，如Puppeteer、webView通信、配置校验与处理，蜗牛宠物盘源码以及通用处理逻辑。

       4. **实施步骤与优化**：从安装部署到基本使用，包括配置需注意的细节，以及生成代码优化建议。

       ### 使用与优化

       实施方案时，需全局安装Puppeteer来确保正确的路径查找与处理，以优化构建效率与资源占用。此外，引入优化措施，如调整骨架屏高度、标记特定元素以避免不必要的渲染，来进一步提升性能与用户体验。

       ### 结果演示与效果评价

       通过该技术方案的实践，我们能够展示生成的代码大小与具体应用场景的表现，包括普通效果、带有通用头和渐变背景色的效果、复杂元素页面的表现，以及在不同网络条件下的差异。优化策略在提高性能同时，手机骨骼绘制源码保证了良好的用户体验。

开源分享 | 在线编辑器，支持PSD解析、AI抠图等，基于Puppeteer生成

       分享开源项目——迅排设计，一款在线编辑器，具备PSD解析、AI抠图等功能，基于Puppeteer生成。项目于最近完成更新并开源，短短一天内收获上百个Star。

       迅排设计提供前端界面与生成服务，运行于与端口，通过本地启动的Chrome浏览器实例合成。功能包括上传PSD模板、AI抠图、编辑与设计快捷键文字、调整大小、裁剪、类似macd指标源码拖动至容器显示以及图层管理。

       上传PSD模板至“我的”-“资源管理”界面，解析后可编辑模板，调整完毕后上传至个人作品集。AI抠图功能允许用户上传需要背景去除的，自动执行抠图过程。画布中双击可编辑文字，使用吸色器修改颜色，支持拖拽缩放大小、裁剪以及放置容器内显示。图层面板提供快速层级调整，图层锁定后元素不可移动，解锁后可自由调整。

       标尺辅助线可通过拖拽创建并随时删除。项目架构包括Vue3、Vite2、Vuex、ElementPlus等前端技术，Puppeteer、Express用于生成，Node.js作为服务端技术。组件库地址位于github.com/palxiao/fron...

       开源感受深刻，项目受到广泛关注，曾有用户提出购买源码或商业化需求。通过开源，将项目价值传递给更多需要的人，促进了技术交流与学习。开源项目让他人避免走弯路，节省时间，专注于个人技术追求和产出。当前项目仍在不断完善，代码可能存在不足之处，但开源的初衷在于贡献，期待更多的支持和反馈。

       迅排设计的开源地址为github.com/palxiao/post...

       在线Demo：design.palxp.com/

       文档网站：xp.palxp.com/

       PSD解析上传界面：design.palxp.com/psd

       AI抠图在线体验：design.palxp.com/home?...

为什么爬虫抓取的页面和浏览器看到不一致？

       有可能是因为网页采用了动态网页技术，如AJAX、JavaScript等，导致浏览器中看到的网页内容与通过爬虫抓取的网页源代码不同。

       动态网页技术可以使网页在加载后通过JavaScript代码动态地修改或添加页面内容，而这些修改和添加的内容是在浏览器中执行的，而不是在服务器端。因此，如果使用传统的爬虫工具，只能获取到最初加载的网页源代码，而无法获取动态生成的内容。

       解决这个问题的方法是使用支持JavaScript渲染的爬虫工具，例如Selenium和Puppeteer。这些工具可以模拟浏览器行为，实现动态网页的加载和渲染，从而获取完整的网页内容。

       另外，有些网站也可能采用反爬虫技术，例如IP封禁、验证码、限制访问频率等，这些技术也可能导致爬虫抓取的网页源代码与浏览器中看到的不一样。针对这些反爬虫技术，需要使用相应的反反爬虫策略。

玩转Puppeteer

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

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

        2 应用场景

        2.1 页面生成 PDF

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

        具体的应用场景有：

        2.2 页面截图

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

        具体的应用场景有：

        2.3 服务端渲染

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

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

        2.4 自动化UI测试

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

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

        2.5 页面检测分析

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

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

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

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

        3 基础概念

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

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

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

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

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

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

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

        4 快速上手

        4.1 安装 puppeteer-core

        npm i puppeteer-core

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

        4.2 下载 Chromium

        Puppeteer 官网： .vuejs.org/v2/guide/index.html ）。使用 Chrome 浏览器的打印功能，在打印预览中我们可以看到打印效果和实际网页的内容并不一致。这是因为 vue2 的官方文档网页添加了一些打印样式。访问打印样式所在的文件（ .vuejs.org/css/page.css ）并搜索 @media print 就能明白为什么在打印预览中一些元素（如顶栏、侧边栏等）被隐藏或者样式不同了。

        接下来进入正题，让我们使用 Puppeteer 来实现同样的打印（导出 PDF）功能。

        在 example 目录下新建 exportPdf.js 文件。

        pdf 方法会返回 PDF 文件的 Buffer 数据，以便后续处理。这里我们只是演示一下这个功能，传入 path 参数就能让 pdf 方法将 PDF 文件写到指定路径了。

        使用 node 运行这个 js 文件。

        node ./src/example/exportPdf.js

        运行完毕后，example 目录下出现了 exportPdf.pdf 文件。打开这个文件便能看到 vue2 官方文档了。

        5.2 网页截图

        在这一部分，我们演示一下整个网页截图的功能。

        在 example 目录下新建 exportImg.js 文件。

        使用 node 运行这个 js 文件。

        node ./src/example/exportImg.js

        运行完毕后，example 目录下出现了 exportImg.png 文件。打开这个文件便能看到 vue2 官方文档了。

爬虫为什么抓不到网页源码

       有可能是因为网页采用了动态网页技术，如AJAX、JavaScript等，导致浏览器中看到的网页内容与通过爬虫抓取的网页源代码不同。

       动态网页技术可以使网页在加载后通过JavaScript代码动态地修改或添加页面内容，而这些修改和添加的内容是在浏览器中执行的，而不是在服务器端。因此，如果使用传统的爬虫工具，只能获取到最初加载的网页源代码，而无法获取动态生成的内容。

       解决这个问题的方法是使用支持JavaScript渲染的爬虫工具，例如Selenium和Puppeteer。这些工具可以模拟浏览器行为，实现动态网页的加载和渲染，从而获取完整的网页内容。

       另外，有些网站也可能采用反爬虫技术，例如IP封禁、验证码、限制访问频率等，这些技术也可能导致爬虫抓取的网页源代码与浏览器中看到的不一样。针对这些反爬虫技术，需要使用相应的反反爬虫策略。

用爬虫抓取网页得到的源代码和浏览器中看到的不一样运用了什么技术？

       网页源代码和浏览器中看到的不一样是因为网站采用了动态网页技术（如AJAX、JavaScript等）来更新网页内容。这些技术可以在用户与网站进行交互时，通过异步加载数据、动态更新页面内容，实现更加流畅、快速的用户体验。而这些动态内容无法通过简单的网页源代码获取，需要通过浏览器进行渲染后才能看到。

       当使用爬虫抓取网页时，一般只能获取到网页源代码，而无法获取到经过浏览器渲染后的页面内容。如果要获取经过浏览器渲染后的内容，需要使用一个浏览器渲染引擎（如Selenium）来模拟浏览器行为，从而获取到完整的页面内容。

       另外，网站为了防止爬虫抓取数据，可能会采用一些反爬虫技术，如设置验证码、限制IP访问频率等。这些技术也会导致爬虫获取到的页面内容与浏览器中看到的不一样。