先说一下，无头浏览器即headless browser，是一种没有界面的浏览器。它有浏览器该有的一切功能，除了界面。可以通过命令进行浏览器内的各种操作
| 无头浏览器 selenium. | 无头浏览器 Phantomjs | 无头浏览器 Puppeteer |
canvas html2canvas v1.0.0-rc.7 | SVG resterizehtml |
|---|---|---|---|---|
|
Selenium提供了多种语言的接口和多个平台/浏览器的支持 常见的有Java, Python, Javascript, Ruby等 https://www.selenium.dev/documentation/zh-cn/webdriver/browser_manipulation/ |
javascript node phantomjs |
javascript node 环境安装 安装 npm install puppeteer |
javascript 插件html2canvas 转换过程可理解成：
|
javascript 插件 resterizehtml 转换过程可理解成：
|
|
selenium操作chrome浏览器需要有ChromeDriver驱动来协助 |
Puppeteer是一个Node库，提供了高级API通过DevTool来控制Chrome或Chromium。默认headless也就是无UI的chrome，也可以配置为有UI |
使用Canvas截图兼容低版本浏览器时，不能使用 |
||
两种截图方式 把DOM绘制到Canvas，再通过Canvas输出图片 |
||||
|
Selenium Webdriver | Phantomjs | Puppeteer. | |
|---|---|---|---|
| 版本 | 停止更新（V2.1.1） |
持续更新（V1.8） |
|
| 官网 | http://phantomjs.org，其支持多个平台的使用和部署 |
https://github.com/puppeteer/puppeteer https://developers.google.com/web/tools/puppeteer/get-started |
|
| js | es5 | ES5，部分支持ES6、ES7(箭头函数,async,await等) | |
| 浏览器 | 全部浏览器 | WebKit内核 | 自带Chorme |
| 优点 |
多语言、多浏览器支持 唯一一个支持所有五个主要的网络浏览器（Chrome、IE、Edge、Firefox和Safari）的框架。 |
持续更新，功能性能可期 脚本语言更适合原生开发，学习成本低 使用新ES标准，对异步事件处理更简便 |
|
| 缺点 |
配置慢，对版本配置苛刻， 更新响应的驱动 |
无人维护 bug 多 对于页面异步的事件处理无力，部分情况下只能用延迟解决 不支持flash 开放的api较少 |
部署相对复杂，且需要翻墙 脚本语言使用新标准，学习成本较高如果你使用 Firefox、Edge或Safari进行开发或测试，Puppeteer无法正常工作，你应该选择Selenium Webdriver |
| 性能 | 运行速度比 Puppeteer慢的多 | 它的高速度也是很多开发者选择测试工具的一大考量 | |
| 性能分析 | 无 | 有 | 有,功能同Chromen性能分析工具 |
cutimg01 puppeteer
cutimg03 selenium-webdriver
开始和结束时间
一、无头浏览器 selenium python 运行
selenium操作 chrome浏览器需要有ChromeDriver驱动来协助，根据本地谷歌浏览器的版本对应安装ChromeDriver
代码执行及效果：
无头浏览器 selenium Webdriver(node.js） javascript 运行
代码执行及效果
二、node phantomjs
代码执行及效果
(截图是全网站的全屏）
三、无头浏览器 js 实现
node 环境安装 安装npm install puppeteer
代码执行及效果
四、canvas
、插件 html2canvas
代码执行及效果
demo1
demo2
下载图片
svg 代码demo
