Code Monkey home page Code Monkey logo

performance-optimization's People

Contributors

brianwalkertoretto avatar

Watchers

 avatar

performance-optimization's Issues

puppeteer性能优化

功能强大的puppeteer

  1. 轻松实现网页或元素截图;
  2. 导出PDF;
  3. 模拟表单提交、键盘输入、按钮点击等;
  4. 请求拦截和响应拦截;
  5. 其他强大的功能。

存在的问题

  1. puppeteer启动耗时,每次启动大约需要200-300ms;
  2. 一个puppeteer多次使用,会导致puppeteer响应变慢,需要自动重启puppeteer;
  3. 消耗大量CPU运力和内存,一个标签页占用30MB左右;

常规优化方案

  1. 流程优化:
    原流程:启动puppeteer-》打开标签页-》运行代码-》关闭标签页-》-》返回数据-》关闭puppeteer
    新流程:部署服务器延时执行puppeteer-》打开标签页-》运行代码-》关闭标签页-》返回数据-》重复使用该puppeteer
  2. 针对问题1和2的优化方案:
    使用本地连接池;
    配置单个puppeteer标签页最大使用数,超过自动重启该puppeteer;
    部署延时启动n个puppeteer;
    轮询使用puppeteer,利用高并发解决思路,第m个请求使用第m%n个puppeteer,防止一个puppeteer过多渲染标签页导致的性能问题。
    优化结果:
    每次渲染页面启动标签页耗时:1ms内,如果需要重启puppeteer的话,依旧是200-300ms;
    配置maxUse自动重启;
    不影响Node服务器启动时间。
const puppeteer = require('puppeteer');
/*
 优化一:puppeteer连接池(启动多个puppeteer,然后依次使用某个puppeteer,页签大于maxUses就关闭它)
      最少puppeteer数,低于这个数就启动多个puppeteer
 优化二:每个puppeteer的页签最大使用maxUses,多余这个就关闭这个puppeteer
 优化三:每个puppeteer的页签最大并发数,多于这个数就切换或者启动另一个puppeteer
 优化四:远程连接:browser.wsEndpoint
*/
const createBrowserFactory = {
  instance: null,
  maxUses: 110, // 自定义的属性:每一个 实例 最大可重用次数。
  // starting: false, // 启动中,默认:false,
  create: async function(args) {
    if(this.validate()) {
      return this
    }
    await this.close()
    return puppeteer.launch({
      // 关闭无头模式,方便我们看到这个无头浏览器执行的过程
      headless: true,
      timeout: 30000, // 默认超时为30秒,设置为0则表示不设置超时
      args,
      ignoreHTTPSErrors: true,
      defaultViewport: {
        width: 1920, height: 1080,
        // deviceScaleFactor: 1,
        // isMobile
        // hasTouch
        // isLandscape
      }
    }).then(instance => {
      return this.load(instance)
    }).catch(() => {
      this.close();
      return null
    })
  },
  load: function(instance) {
    instance.useCount = 0;
    instance.on('disconnected', async () => {
      await this.close()
    })
    this.instance = instance;
    return this;
  },
  // destroy
  close: async function() {
    if(this.instance) {
      await this.instance.close()
      this.instance = null
    }
  },
  validate: function() {
    return this.instance && this.instance.useCount < this.maxUses ? true : false
  },
  newPage: function() {
    this.instance.useCount++;
    return this.instance.newPage()
  }
}

module.exports = createBrowserFactory;

// 延迟启动
process.nextTick(() => {
  createBrowserFactory.create()
})
  1. 针对问题2的优化方案:避免不必须要的运算
    禁用GPU渲染、Sandbox、插件等功能,减少内存使用量和相关计算。
    优化结果:
    每个标签页内存使用量降低到20MB;
createBrowserFactory.create([
        '--no-zygote',
        '--no-sandbox',
        '--disable-gpu', // 没啥需要gpu渲染的css等,可以先禁用
        '--no-first-run',
        '--single-process',
        '--disable-extensions',
        "--disable-xss-auditor",
        '--disable-dev-shm-usage',
        '--disable-popup-blocking',
        '--disable-setuid-sandbox',
        '--disable-accelerated-2d-canvas',
        '--enable-features=NetworkService',
    ])
  1. 其他方法
    使用网络连接池;
    过滤无效请求:比如埋点代码、Font字体(字体需要服务器部署);

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.