Headless Chrome
Headless Chrome
https://developers.google.com/web/updates/2017/04/headless-chrome
Puppeteer & SSR
https://developers.google.com/web/tools/puppeteer/articles/ssr
bug
"use strict";
/**
*
* @author xgqfrms
* @license MIT
* @copyright xgqfrms
* @created 2020-02-22
* @modified
*
* @description
* @augments
* @example
* @link
*
*/
const log = console.log;
const Koa = require('koa');
const app = new Koa();
const fs = require('fs');
const path = require('path');
const puppeteer = require('puppeteer');
const Poster = async (url) => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
// await page.emulate(devices['iPhone X']);
await page.goto(url);
await page.screenshot({
path: 'poster-template-ssr.png',
fullPage: true,
});
await browser.close();
}
// logger
app.use(async (ctx, next) => {
await next();
const rt = ctx.response.get('X-Response-Time');
log(`${ctx.method} ${ctx.url} - ${rt}`);
});
// x-response-time
app.use(async (ctx, next) => {
const start = Date.now();
await next();
const ms = Date.now() - start;
ctx.set('X-Response-Time', `${ms}ms`);
});
// response
app.use(async ctx => {
ctx.response.set("content-type", "text/html");
const html = fs.createReadStream('./index.html');
ctx.body = html;
// response html
const uid = 1234567;
const url = `http://localhost:3000/template/index.html?id=${uid}`;
await Poster(url);
});
app.listen(3000);
partly ok
"use strict";
/**
*
* @author xgqfrms
* @license MIT
* @copyright xgqfrms
* @created 2020-02-22
* @modified
*
* @description
* @augments
* @example
* @link
*
*/
const log = console.log;
const Koa = require('koa');
const app = new Koa();
const fs = require('fs');
const path = require('path');
const puppeteer = require('puppeteer');
const Poster = async (url) => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
// await page.emulate(devices['iPhone X']);
await page.goto(url);
await page.screenshot({
path: 'poster-template-ssr.png',
fullPage: true,
});
await browser.close();
}
// logger
app.use(async (ctx, next) => {
await next();
const rt = ctx.response.get('X-Response-Time');
log(`${ctx.method} ${ctx.url} - ${rt}`);
});
// x-response-time
app.use(async (ctx, next) => {
const start = Date.now();
await next();
const ms = Date.now() - start;
ctx.set('X-Response-Time', `${ms}ms`);
});
// response
app.use(async ctx => {
ctx.response.set("content-type", "text/html");
const html = fs.createReadStream('./index.html');
ctx.body = html;
// response html
const uid = 1234567;
const url = `http://localhost:3000/template/index.html?id=${uid}`;
// 连续监听,memory leak 抖动 bug
setTimeout(() => {
Poster(url);
}, 3000);
});
app.listen(3000);
full page scroll
https://alvarotrigo.com/fullPage/examples/apple.html
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
Headless Chrome的更多相关文章
- Web自动化之Headless Chrome概览
Web自动化 这里所说的Web自动化是所有跟页面相关的自动化,比如页面爬取,数据抓取,页面内容检测,页面功能测试,页面加载性能测试,页面回归测试等等,当前主要由如下几种解决方式: 文本数据获取 这就是 ...
- Web自动化之Headless Chrome编码实战
API 概览 && 编码Tips 文档地址 github Chrome DevTools Protocol 协议本身的仓库 有问题可以在这里提issue github debugger ...
- puppeteer,新款headless chrome!
puppeteer puppeteer是一种谷歌开发的Headless Chrome,因为puppeteer的出现,业内许多自动化测试库停止维护,比如PhantomJS,Selenium IDE fo ...
- Web自动化之Headless Chrome测试框架集成
使用Selenium操作headless chrome 推荐 简介 WebDriver是一个W3C标准, 定义了一套检查和控制用户代理(比如浏览器)的远程控制接口,各大主流浏览器来实现这些接口以便调用 ...
- Web自动化之Headless Chrome开发工具库
命令行运行Headless Chrome Chrome 安装(需要带梯子) 下载地址 几个版本的比较 Chromium 不是Chrome,但Chrome的内容基本来源于Chromium,这个是开源的版 ...
- Headless Chrome:服务端渲染JS站点的一个方案【上篇】【翻译】
原文链接:https://developers.google.com/web/tools/puppeteer/articles/ssr 注:由于英文水平有限,没有逐字翻译,可以选择直接阅读原文 tip ...
- Headless Chrome:服务端渲染JS站点的一个方案【中篇】【翻译】
接上篇 防止重新渲染 其实说不对客户端代码做任何修改是忽悠人的.在我们的Express 应用中,通过Puppteer加载页面,提供给客户端响应,但是这个过程是有一些问题的. js脚本在服务端的Head ...
- Java 实现 HttpClients+jsoup,Jsoup,htmlunit,Headless Chrome 爬虫抓取数据
最近整理一下手头上搞过的一些爬虫,有HttpClients+jsoup,Jsoup,htmlunit,HeadlessChrome 一,HttpClients+jsoup,这是第一代比较low,很快就 ...
- PuppeteerSharp: 更友好的 Headless Chrome C# API
前端就有了对 headless 浏览器的需求,最多的应用场景有两个 UI 自动化测试:摆脱手工浏览点击页面确认功能模式 爬虫:解决页面内容异步加载等问题 也就有了很多杰出的实现,前端经常使用的莫过于 ...
- Puppeteer: 更友好的 Headless Chrome Node API
很早很早之前,前端就有了对 headless 浏览器的需求,最多的应用场景有两个 UI 自动化测试:摆脱手工浏览点击页面确认功能模式 爬虫:解决页面内容异步加载等问题 也就有了很多杰出的实现,前端经常 ...
随机推荐
- DPDK CAS(compare and set)操作
前言 rte_ring是一个无锁队列,无锁队列的出队入队操作是rte_ring实现的关键.因此,本文主要讲解dpdk是怎样使用无锁机制实现rte_ring的多生产者入队操作. rte_atomic32 ...
- springmvc框架java.lang.NoSuchMethodException问题解决
例子:https://blog.csdn.net/huaidandaidai1/article/details/81979704 原因: 在java中,如果一个类A没有自己写构造方法,那么java会自 ...
- Phoenix表和索引分区优化方法
Phoenix表和索引分区,基本优化方法 优化方法 1. SALT_BUCKETS RowKey SALT_BUCKETS 分区 2. Pre-split RowKey分区 3. 分列族 4. 使用压 ...
- 环境变量jdk版本与java -version显示不一致
问题描述: 问题产生原因: 1.Path环境变量配置了Oracle 2.C:\windows\System32下,还有java.exe. 问题描述: 今天遇到一个小bug,我电脑环境变量配置的版本是j ...
- BigDecimal 用法详解
BigDecimal简介 BigDecimal用法: BigDecimal的构造方法 BigDecimal常用方法描述 BigDecimal比较 BigDecimal总结 BigDecimal简介 J ...
- DEDECMS:将dedecms系统的data目录迁移到web以外目录
dedecms系统的data目录是系统缓存和配置文件的目录,一般都有可以读写的权限,只要是能够写入的目录都可能存在安全隐患,很多站长甚至给予这个目录可执行的权限,更是非常危险,所以我们建议将这个dat ...
- C++ 标准模板库(STL):map
目录 4. map 4.1 map的定义 4.2 map容器内元素的访问 4.3 map常用函数实例解析 4.4 map的常见用途 4. map map翻译为映射,也是常用的STL容器. 在定义数组时 ...
- hdu5886Tower Defence(树形dp)
Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submission ...
- 洛谷 P1135 奇怪的电梯 (DFS)
题意:有一\(n\)层高的大楼,每层楼都只能在合法情况下上\(x\)层或者下\(x\)层,问你是否能从\(a\)层楼坐电梯到\(b\)层楼,输出最小步数. 题解:直接dfs搜,\(flo\)表示层数, ...
- Windows环境下Robot Framework 下载及安装流程
1.安装包下载 注意安装包统一64位或32位 1)python-2.7.16.amd64.msi 2)robotframework-3.0.2.tar.gz 3)robotframework-ride ...