1.自动化生成骨架屏的技术方案设计与落地
2.开源分享 | 在线编辑器,支持PSD解析、AI抠图等,基于Puppeteer生成
3.为什么爬虫抓取的页面和浏览器看到不一致?
4.ç©è½¬Puppeteer
5.爬虫为什么抓不到网页源码
6.用爬虫抓取网页得到的源代码和浏览器中看到的不一样运用了什么技术?
自动化生成骨架屏的技术方案设计与落地
在构建高性能前端应用程序时,减少页面加载过程中白屏的时间一直是关注焦点,尤其在前后端分离的重庆源码时代地址项目中。骨架屏(Skeleton)技术能够在此过程中发挥重要作用,通过在页面未加载完整内容前展示页面结构,给用户一种页面已开始渲染的错觉,从而提升用户体验。本文将探讨在拍卖源码工作台BeeMa架构中如何设计并实现自动生成骨架屏的技术方案。
### 骨架屏概览
骨架屏本质上是一种视觉过渡效果,其工作原理是先预加载页面的大致结构和布局元素,待数据加载完成后再替换为实际内容。相比于传统的加载动画(如菊花加载),骨架屏能更自然地引导用户注意到页面的进展,降低等待过程中的焦虑感。
### 技术调研与方案选择
现有实现骨架屏的技术方案大致可以分为三类,其中自动生成骨架屏方案具有较高的维护性和较低的配置成本。市面上流行的go语言商城源码饿了么开源的webpack插件“page-skeleton-webpack-plugin”通过生成特定路由页面的骨架屏实现这一功能。这种方式将骨架屏代码与业务代码分离,由webpack注入到项目中,确保了代码的独立性和易管理性。然而,其依赖于webpack配置以及html-webpack-plugin,对于某些团队可能是一层额外的负担。
### 技术方案设计
基于前述分析,我们决定采用最低侵入业务代码且降低配置成本的骨架屏自动生成方案。结合BeeMa架构特点与vscode插件特性,设计了一套新方案。方案核心思路如下:
1. **设计原则与架构整合**:明确骨架屏需要遵循的原则,确保与BeeMa架构和vscode插件的协同作用。
2. **技术方案与流程**:基于现有的技术调研结果,详细规划从骨架屏生成、配置到注入的具体流程。
3. **关键技术和实现**:涉及到的关键技术,如Puppeteer、webView通信、配置校验与处理,文字加密解密 源码以及通用处理逻辑。
4. **实施步骤与优化**:从安装部署到基本使用,包括配置需注意的细节,以及生成代码优化建议。
### 使用与优化
实施方案时,需全局安装Puppeteer来确保正确的路径查找与处理,以优化构建效率与资源占用。此外,引入优化措施,如调整骨架屏高度、标记特定元素以避免不必要的渲染,来进一步提升性能与用户体验。
### 结果演示与效果评价
通过该技术方案的实践,我们能够展示生成的代码大小与具体应用场景的表现,包括普通效果、带有通用头和渐变背景色的效果、复杂元素页面的表现,以及在不同网络条件下的差异。优化策略在提高性能同时,0.96 oled 动画源码保证了良好的用户体验。
开源分享 | 在线编辑器,支持PSD解析、AI抠图等,基于Puppeteer生成
分享开源项目——迅排设计,一款在线编辑器,具备PSD解析、AI抠图等功能,基于Puppeteer生成。项目于最近完成更新并开源,短短一天内收获上百个Star。
迅排设计提供前端界面与生成服务,运行于与端口,通过本地启动的Chrome浏览器实例合成。功能包括上传PSD模板、AI抠图、编辑与设计快捷键文字、调整大小、裁剪、手机php直播源码拖动至容器显示以及图层管理。
上传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
1 ç®ä»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访问频率等。这些技术也会导致爬虫获取到的页面内容与浏览器中看到的不一样。