为什么需要 Rendertron? 传统的 Web 页面,通常是服务端渲染的,而随着 SPA(Single-Page Application) 尤其是 React.Vue.Angular 为代表的前端框架的流行,越来越多的 Web App 使用的是客户端渲染. 使用客户端渲染有着诸多优势,比如节省后端资源.局部刷新.前后端分离等等,但也带来了一些挑战,比如本文要解决的 SEO 问题. 对于服务端渲染的页面,服务端可以直接将内容通过 HTML 的形式返回,搜索引擎爬虫可以轻易的获取页面内容,而对于…

原文链接:https://developers.google.com/web/tools/puppeteer/articles/ssr 注:由于英文水平有限,没有逐字翻译,可以选择直接阅读原文 tips:Headless浏览器完全可以作为服务端渲染的一个替代方案,在服务端转化js 站点为静态html页面:在webserver 上运行Headless 浏览器完全可以预渲染现代js 模式的应用,增加响应速度,对SEO也更加友好 本篇涉及到的技术展示了如何通过Google Headless 框架(pu…

摘自:https://zhuanlan.zhihu.com/p/31670033 Rendertron:JavaScript Web 富应用的一个老问题是如何使这些页面的动态渲染部分可供搜索引擎检索.为此开发人员采用了各种各样的技巧,包括使用 React.js 的服务端渲染,外部服务或预渲染内容.现在谷歌 Chrome 新的 headless 模式又贡献了一个新的技巧—— Rendertron,即 Chrome的headless 渲染解决方案.它在一个 Docker 容器中封装了一个 headl…

接上篇 防止重新渲染 其实说不对客户端代码做任何修改是忽悠人的.在我们的Express 应用中,通过Puppteer加载页面,提供给客户端响应,但是这个过程是有一些问题的. js脚本在服务端的Headless Chrome 中执行过一次,但是等浏览器拿到真正的结果后,并不会阻止js再次执行,所以这种情况下js会执行两次(客户端一次,服务端一次) 针对我们的例子,我们可以简单的修复一下,我们需要告诉页面,需要的html已经生成了,不需要再次生成了,所以我们可以简单的检测<ul id="pos…

使用 Headless Chrome 进行页面渲染 - 知乎专栏 使用 Headless Chrome 进行页面渲染 - 知乎专栏 这里我们使用 chrome-remote-interface 来远程控制 Chrome ,实际上 chrome-remote-interface 是对于 Chrome DevTools Protocol 的远程封装,我们可以参考协议文档了解详细的功能与参数.使用 npm 安装完毕之后,我们可以用如下代码片进行简单控制:…

API 概览 && 编码Tips 文档地址 github Chrome DevTools Protocol 协议本身的仓库 有问题可以在这里提issue github debugger-protocol-viewer 协议API文档的仓库 API 文档地址 API展示的地方,这个经常用 常用API Network 网络请求.Cookie.缓存.证书等相关内容 Page 页面的加载.资源内容.弹层.截图.打印等相关内容 DOM 文档DOM的获取.修改.删除.查询等相关内容 Runtime J…

前端就有了对 headless 浏览器的需求,最多的应用场景有两个 UI 自动化测试:摆脱手工浏览点击页面确认功能模式 爬虫:解决页面内容异步加载等问题 也就有了很多杰出的实现,前端经常使用的莫过于 PhantomJS 和 selenium-webdriver,但两个库有一个共性--难用!环境安装复杂,API 调用不友好,1027 年 Chrome 团队连续放了两个大招 Headless Chrome 和对应的 NodeJS API Puppeteer,直接让 PhantomJS 和 Selen…

Web自动化 这里所说的Web自动化是所有跟页面相关的自动化,比如页面爬取,数据抓取,页面内容检测,页面功能测试,页面加载性能测试,页面回归测试等等,当前主要由如下几种解决方式: 文本数据获取 这就是各种request库或者类似curl这样的工具做的事情,拿到的是页面的文本,然后进行XML文档解析,获得相应的内容.但如果页面有一些动态执行的内容,比如JavaScript生成跳转URL,这样就搞不定了,需要有JS引擎的工具来搞,比如再配合JS引擎自行实现的工具,或者直接使用浏览器内核来搞的工具.…

很早很早之前,前端就有了对 headless 浏览器的需求,最多的应用场景有两个 UI 自动化测试:摆脱手工浏览点击页面确认功能模式 爬虫:解决页面内容异步加载等问题 也就有了很多杰出的实现,前端经常使用的莫过于 PhantomJS 和 selenium-webdriver,但两个库有一个共性--难用!环境安装复杂,API 调用不友好,1027 年 Chrome 团队连续放了两个大招 Headless Chrome 和对应的 NodeJS API Puppeteer,直接让 PhantomJS…

一般的的静态HTML页面可以使用requests等库直接抓取,但还有一部分比较复杂的动态页面,这些页面的DOM是动态生成的,有些还需要用户与其点击互动,这些页面只能使用真实的浏览器引擎动态解析,Selenium和Chrome Headless可以很好的达到这种目的. Headless Chrome Headless Chrome 是 Chrome 浏览器的无界面形态,可以在不打开浏览器的前提下,使用所有Chrome支持的特性,在命令行中运行你的脚本.以前在爬虫要使用Phantomjs来实现这些功…