npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

chrome-render

v1.4.1

Published

General server render base on chrome

Downloads

26

Readme

Npm Package Build Status Npm Downloads Dependency Status

chrome-render

High-performance and universal server render base on Headless chrome, render any SPA(render data in browser) in server for SEO or other optimizes.

Use

  1. install it from npm by npm i chrome-render

  2. new a ChromeRender then use it to render a web page, a ChromeRender means a chrome.

const ChromeRender = require('chrome-render');
// ChromeRender.new() return a Promise, you can use async function in this way:
// const chromeRender = await ChromeRender.new(); 
ChromeRender.new({}).then(async(chromeRender)=>{
    const htmlString = await chromeRender.render({
       url: 'http://qq.com',
    });
});    

A chromeRender instance can call render multi-times and concurrent for high frequency use case. chromeRender will manage a tabs pool to render multi-pages concurrent.

  1. After you don't need chromeRender anymore, you should call await chromeRender.destroyRender() to kill chrome add release all resource.

see more demo in unit test

API

ChromeRender.new() method support options:

  • maxTab: number max tab chrome will open to render pages, default is no limit, maxTab used to avoid open to many tab lead to chrome crash. ChromeRender will create a tab poll to reuse tab for performance improve and resource reduce as open and close tab in chrome require time, like database connection poll.
  • chromeRunnerOptions: object same as chrome-runner's options, can config chrome's startup options, detail see chrome-runner options

chromeRender.render() method support options:

  • url: string is required, web page's URL
  • cookies: object {cookieName:cookieValue} is an option param. set HTTP cookies when request web page
  • headers: object {headerName:headerValue} is an option param. add HTTP headers when request web page
  • useReady: boolean whether use window.isPageReady=1 to notify chrome-render page is ready. default is false chrome-render use domContentEventFired as page has ready.
  • script: string is an option param. inject script source to evaluate when page on load
  • renderTimeout: number in ms, render() will throw error if html string can't be resolved after renderTimeout, default is 5000ms.
  • deviceMetricsOverride: object overrides the values of device screen dimensions for responsive websites, detail use see here
  • clearTab: boolean if true after render chrome instance will navigate to about:blank to free resources. default is true. setting to false may increase page load speed when rendering the same website.

all request from chrome-render will take with a HTTP header x-chrome-render:${version}

Friends