使用Headless Chrome进行页面渲染

开发 开发工具
Headless Chrome仍然存在一定的局限,相较于 Nightmare或Phantom 这样的工具, Chrome的远程接口仍然无法提供较好的开发者体验。

使用 Headless Chrome 进行页面渲染 从属于笔者的 Web 开发基础与工程实践系列文章,主要介绍了使用 Node.js 利用 Chrome Remote Protocol 远程控制 Headless Chrome 渲染界面的基础用法。本文涉及的参考与引用资料统一列举在这里

近日笔者在为 declarative-crawler 编写动态页面的蜘蛛,即在使用 declarative-crawler 爬取知乎美图 一文中介绍的 HeadlessChromeSpider 时,需要选择某个无界面浏览器以执行 JavaScript 代码来动态生成页面。之前笔者往往是使用 PhantomJS 或者 Selenium 执行动态页面渲染,而在 Chrome 59 之后 Chrome 提供了 Headless 模式,其允许在命令行中使用 Chromium 以及 Blink 渲染引擎提供的完整的现代 Web 平台特性。需要注意的是,Headless Chrome 仍然存在一定的局限,相较于 Nightmare 或 Phantom 这样的工具, Chrome 的远程接口仍然无法提供较好的开发者体验。我们在下文介绍的代码示例中也会发现,目前我们仍需要大量的模板代码进行控制。

安装与启动

在 Chrome 安装完毕后我们可以利用其包体内自带的命令行工具启动:

  1. $ chrome --headless --remote-debugging-port=9222 https://chromium.org 

笔者为了部署方便,使用 Docker 镜像来进行快速部署,如果你本地存在 Docker 环境,可以使用如下命令快速启动:

  1. docker run -d -p 9222:9222 justinribeiro/chrome-headless 

如果是在 Mac 下本地使用的话我们还可以创建命令别名:

  1. alias chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome" 
  2. alias chrome-canary="/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary" 
  3. alias chromium="/Applications/Chromium.app/Contents/MacOS/Chromium" 

如果是在 Ubuntu 环境下我们可以使用 deb 进行安装:

  1. # Install Google Chrome 
  2. # https://askubuntu.com/questions/79280/how-to-install-chrome-browser-properly-via-command-line 
  3. sudo apt-get install libxss1 libappindicator1 libindicator7 
  4. wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb 
  5. sudo dpkg -i google-chrome*.deb  # Might show "errors", fixed by next line 
  6. sudo apt-get install -f 

chrome 命令行也支持丰富的命令行参数,--dump-dom 参数可以将 document.body.innerHTML 打印到标准输出中:

  1. chrome --headless --disable-gpu --dump-dom https://www.chromestatus.com/ 

而 --print-to-pdf 标识则会将网页输出位 PDF:

  1. chrome --headless --disable-gpu --print-to-pdf https://www.chromestatus.com/ 

初次之外,我们也可以使用 --screenshot 参数来获取页面截图:

  1. chrome --headless --disable-gpu --screenshot https://www.chromestatus.com/ 
  2.  
  3. Size of a standard letterhead. 
  4. chrome --headless --disable-gpu --screenshot --window-size=1280,1696 https://www.chromestatus.com/ 
  5.  
  6. # Nexus 5x 
  7. chrome --headless --disable-gpu --screenshot --window-size=412,732 https://www.chromestatus.com/ 

如果我们需要更复杂的截图策略,譬如进行完整页面截图则需要利用代码进行远程控制。

代码控制

启动

在上文中我们介绍了如何利用命令行来手动启动 Chrome,这里我们尝试使用 Node.js 来启动 Chrome,最简单的方式就是使用 child_process 来启动:

  1. const exec = require('child_process').exec
  2.  
  3. function launchHeadlessChrome(url, callback) { 
  4.   // Assuming MacOSx. 
  5.   const CHROME = '/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome'
  6.   exec(`${CHROME} --headless --disable-gpu --remote-debugging-port=9222 ${url}`, callback); 
  7.  
  8. launchHeadlessChrome('https://www.chromestatus.com', (err, stdout, stderr) => { 
  9.   ... 
  10. }); 

远程控制

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

  1. const CDP = require('chrome-remote-interface'); 
  2.  
  3. CDP((client) => { 
  4.     // extract domains 
  5.     const {Network, Page} = client; 
  6.     // setup handlers 
  7.     Network.requestWillBeSent((params) => { 
  8.         console.log(params.request.url); 
  9.     }); 
  10.     Page.loadEventFired(() => { 
  11.         client.close(); 
  12.     }); 
  13.     // enable events then start! 
  14.     Promise.all([ 
  15.         Network.enable(), 
  16.         Page.enable() 
  17.     ]).then(() => { 
  18.         return Page.navigate({url: 'https://github.com'}); 
  19.     }).catch((err) => { 
  20.         console.error(err); 
  21.         client.close(); 
  22.     }); 
  23. }).on('error', (err) => { 
  24.     // cannot connect to the remote endpoint 
  25.     console.error(err); 
  26. }); 

我们也可以使用 chrome-remote-interface 提供的命令行功能,譬如我们可以在命令行中访问某个界面并且记录所有的网络请求:

  1. $ chrome-remote-interface inspect 
  2. >>> Network.enable() 
  3. { result: {} } 
  4. >>> Network.requestWillBeSent(params => params.request.url) 
  5. 'Network.requestWillBeSent''params => params.request.url' } 
  6. >>> Page.navigate({url: 'https://www.wikipedia.org'}) 
  7. 'Network.requestWillBeSent''https://www.wikipedia.org/' } 
  8. { result: { frameId: '5530.1' } } 
  9. 'Network.requestWillBeSent''https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia_wordmark.png' } 
  10. 'Network.requestWillBeSent''https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png' } 
  11. 'Network.requestWillBeSent''https://www.wikipedia.org/portal/wikipedia.org/assets/js/index-3b68787aa6.js' } 
  12. 'Network.requestWillBeSent''https://www.wikipedia.org/portal/wikipedia.org/assets/js/gt-ie9-c84bf66d33.js' } 
  13. 'Network.requestWillBeSent''https://www.wikipedia.org/portal/wikipedia.org/assets/img/sprite-bookshelf_icons.png?16ed124e8ca7c5ce9d463e8f99b2064427366360' } 
  14. 'Network.requestWillBeSent''https://www.wikipedia.org/portal/wikipedia.org/assets/img/sprite-project-logos.png?9afc01c5efe0a8fb6512c776955e2ad3eb48fbca' } 

我们也可以直接查看内置的接口文档:

  1. >>> Page.navigate 
  2. { [Function
  3.   category: 'command'
  4.   parameters: { url: { type: 'string', description: 'URL to navigate the page to.' } }, 
  5.   returns
  6.    [ { name'frameId'
  7.        '$ref''FrameId'
  8.        hidden: true
  9.        description: 'Frame id that will be navigated.' } ], 
  10.   description: 'Navigates current page to the given URL.'
  11.   handlers: [ 'browser''renderer' ] }>>> Page.navigate 
  12. { [Function
  13.   category: 'command'
  14.   parameters: { url: { type: 'string', description: 'URL to navigate the page to.' } }, 
  15.   returns
  16.    [ { name'frameId'
  17.        '$ref''FrameId'
  18.        hidden: true
  19.        description: 'Frame id that will be navigated.' } ], 
  20.   description: 'Navigates current page to the given URL.'
  21.   handlers: [ 'browser''renderer' ] } 

我们在上文中还提到需要以代码控制浏览器进行完整页面截图,这里需要利用 Emulation 模块控制页面视口缩放:

  1. const CDP = require('chrome-remote-interface'); 
  2. const argv = require('minimist')(process.argv.slice(2)); 
  3. const file = require('fs'); 
  4.  
  5. // CLI Args 
  6. const url = argv.url || 'https://www.google.com'
  7. const format = argv.format === 'jpeg' ? 'jpeg' : 'png'
  8. const viewportWidth = argv.viewportWidth || 1440; 
  9. const viewportHeight = argv.viewportHeight || 900; 
  10. const delay = argv.delay || 0; 
  11. const userAgent = argv.userAgent; 
  12. const fullPage = argv.full
  13.  
  14. // Start the Chrome Debugging Protocol 
  15. CDP(async function(client) { 
  16.   // Extract used DevTools domains. 
  17.   const {DOM, Emulation, Network, Page, Runtime} = client; 
  18.  
  19.   // Enable events on domains we are interested in
  20.   await Page.enable(); 
  21.   await DOM.enable(); 
  22.   await Network.enable(); 
  23.  
  24.   // If user agent override was specified, pass to Network domain 
  25.   if (userAgent) { 
  26.     await Network.setUserAgentOverride({userAgent}); 
  27.   } 
  28.  
  29.   // Set up viewport resolution, etc. 
  30.   const deviceMetrics = { 
  31.     width: viewportWidth, 
  32.     height: viewportHeight, 
  33.     deviceScaleFactor: 0, 
  34.     mobile: false
  35.     fitWindow: false
  36.   }; 
  37.   await Emulation.setDeviceMetricsOverride(deviceMetrics); 
  38.   await Emulation.setVisibleSize({width: viewportWidth, height: viewportHeight}); 
  39.  
  40.   // Navigate to target page 
  41.   await Page.navigate({url}); 
  42.  
  43.   // Wait for page load event to take screenshot 
  44.   Page.loadEventFired(async () => { 
  45.     // If the `full` CLI option was passed, we need to measure the height of 
  46.     // the rendered page and use Emulation.setVisibleSize 
  47.     if (fullPage) { 
  48.       const {root: {nodeId: documentNodeId}} = await DOM.getDocument(); 
  49.       const {nodeId: bodyNodeId} = await DOM.querySelector({ 
  50.         selector: 'body'
  51.         nodeId: documentNodeId, 
  52.       }); 
  53.       const {model: {height}} = await DOM.getBoxModel({nodeId: bodyNodeId}); 
  54.  
  55.       await Emulation.setVisibleSize({width: viewportWidth, height: height}); 
  56.       // This forceViewport call ensures that content outside the viewport is 
  57.       // rendered, otherwise it shows up as grey. Possibly a bug? 
  58.       await Emulation.forceViewport({x: 0, y: 0, scale: 1}); 
  59.     } 
  60.  
  61.     setTimeout(async function() { 
  62.       const screenshot = await Page.captureScreenshot({format}); 
  63.       const buffer = new Buffer(screenshot.data, 'base64'); 
  64.       file.writeFile('output.png', buffer, 'base64'function(err) { 
  65.         if (err) { 
  66.           console.error(err); 
  67.         } else { 
  68.           console.log('Screenshot saved'); 
  69.         } 
  70.         client.close(); 
  71.       }); 
  72.     }, delay); 
  73.   }); 
  74. }).on('error', err => { 
  75.   console.error('Cannot connect to browser:', err); 
  76. }); 

 【本文是51CTO专栏作者“张梓雄 ”的原创文章,如需转载请通过51CTO与作者联系】

戳这里,看该作者更多好文

责任编辑:武晓燕 来源: 51CTO专栏
相关推荐

2016-08-12 10:23:28

javascriptChrome前端

2013-07-10 10:24:10

2014-06-18 10:34:41

Android字体渲染器OpenGL ES

2010-09-09 16:36:36

DIV标签

2023-05-24 16:41:41

React前端

2017-04-12 11:46:46

前端浏览器渲染机制

2023-03-22 18:31:10

Android页面优化

2013-08-27 10:31:05

Headless模式Java SE设计模式

2018-10-22 16:21:50

ChromeHTMLCSS

2018-01-19 14:39:53

浏览器页面优化

2017-04-25 16:20:10

页面优化滚动优化

2021-01-09 09:23:29

CSS页面渲染开发

2011-07-29 11:04:52

2009-11-23 19:51:48

ibmdwWeb

2009-12-02 19:14:07

PHP header

2013-11-18 15:09:34

浏览器渲染速度

2009-11-26 10:51:40

Chrome OS微软称IE9

2021-07-27 13:08:52

微软Chrome新提案

2017-10-09 10:04:48

JavaScriptChrome DevT调试

2009-12-25 12:58:52

GoogleChrome OS
点赞
收藏

51CTO技术栈公众号