puppeteer生成pdf卡顿解决方案

最近公司线上pdf生成缓慢,经常超过30s导致请求超时断开,通过排查问题,找到下面这条issues,可解决目前问题

chromium升级到119之后导致原本20页的pdf生成超级慢,通过打印时间发现puppeteerpage.pdf()方法转换html到pdf用时达到20s左右,根据issues修改版本号降级到Chromium(117.0.5938.92)对照puppeteer的21.3.2版本

降级后page.pdf方法生成20页pdf从原本20s降低到680ms,提升将近30倍,整体接口返回时间大概5s左右

  • Issues: #11494

  • puppeteerchromium对照表: support

  • 依赖对照表(提示缺少依赖可以对比安装): Chrome doesn’t launch on Linux

  • 中文乱码: 需要自行下载字体库

    1
    2
    3
    4
    # 在字体文件目录安装字体
    sudo mkfontscale
    sudo mkfontdir
    sudo fc-cache -fv

#11494

Serve-Send Events(SSE) + Visibility API项目中应用

最近收到一个需求,需要做一套消息中心,需求倒是很简单,再用户有新消息时推送给web页面,提示用户有新消息未读,最初版本用短轮询方案实现,若是局部组件,可关闭页面后结束轮询,但是此消息中心是一个全局组件,只要开启页面就开始轮询,体验不佳,看着network密密麻麻的请求头都大了,随使用SSE方案。

对于这种消息推送目前几个成熟方案:

  1. 客户端轮询 (短轮询)
  2. 服务端轮询 (长轮询)
  3. WebSocket
  4. SSE (Serve-Send Events)
阅读全文

Xbox One手柄改TypeC尾插

本次改装按照Foundries大佬的教程搞得,附带一些个人心得

准备的工具和材料

  • 贴片式Type C 16Pin 母口
  • 热风枪(没有可以用打磨笔+电烙铁慢慢搞)
  • 电烙铁,焊锡,助焊剂
  • 六角螺丝刀(T6用于拆主板螺丝,外壳螺丝需要专用的防盗螺丝刀拆)
  • 30AWG跳线
  • 打磨笔(有更好,没也行)
  • 镊子
  • 5.1k ohm电阻*2(触发PD快充需要,最好准备0805,0603各一颗)
  • 0.1mm漆包线
  • M121.5螺丝两颗(可选,主要是固定尾插用)
  • AB树脂结构胶(可选)
  • 光固化绿油和固化灯
  • 聚酰亚胺胶带
  • 万用表
阅读全文

解决puppeteer依赖chromium内核下载失败问题

  1. 本地可使用代理魔法上网安装

  2. 服务器安装
    配置puppeteer环境变量,使用国内镜像源下载

ps: v20.1.1(2023-05-05)版本更新 PUPPETEER_DOWNLOAD_HOST 环境变量改为 PUPPETEER_DOWNLOAD_BASE_URL

1
2
3
4
5
6
7
8
9
10
11
12
# v20.1.1之前版本
npm config set puppeteer_download_host=https://npmmirror.com/mirrors/
# 备用镜像地址
npm config set puppeteer_download_host="https://cdn.npmmirror.com/binaries/"

# v20.1.1以及之后版本
npm config set puppeteer_download_base_url=https://npmmirror.com/mirrors/
# 备用镜像地址
npm config set puppeteer_download_base_url=https://cdn.npmmirror.com/binaries/chrome-for-testing/

# 不需要下载则需要补充环境变量,跳过下载内核步骤
PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true

通过node调用Jenkins API完成构建过程

前言

项目中使用jenkins挺久了,每次发布测试环境代码都需要手动去jenkins上发布,特别麻烦,想到两种解决方案,一种是通过CI/CD持续集成,一种是通过jenkins API调用配制好的job。

  • 第一种方案需要触发,还要推送代码到指定分支,不能完美解决目前的痛点。
  • 第二种方案灵活配置,手动触发,在需要的时候构建,可以解决目前的痛点。

本文就讲解如何通过API完成测试环境的构建工作,生产环境不推荐这样做,生产环境一般都有严格的上线流程和权限控制。

image-20230831200429836

阅读全文

iTerm2快捷键大全

标签操作

新建标签:command + t

关闭标签:command + w

切换标签:command + 数字 / command + 左右方向键

切换全屏:command + enter

查找:command + f

分屏操作

垂直分屏:command + d

水平分屏:command + shift + d

切换屏幕:command + option + 方向键 / command + [ / command + ]

查看历史命令:command + ;

查看剪贴板历史:command + shift + h

其他

选中即复制,在iterm2中选中内容就已经复制到了剪切板

清除当前行:ctrl + u

到行首:ctrl + a

到行尾:ctrl + e

前进后退:ctrl + f/b (相当于左右方向键)

上一条命令:ctrl + p

搜索命令历史:ctrl + r

删除当前光标的字符:ctrl + d

删除光标之前的字符:ctrl + h

删除光标之前的单词:ctrl + w

删除到文本末尾:ctrl + k

交换光标处文本:ctrl + t

清屏1:command + r

清屏2:ctrl + l

原文地址: 知乎

微前端方案对比

什么是微前端

微前端类似微服务,并不是指某一具体的技术,而是一种整合了技术、策略和方法的宏观架构方案,是一种将多个可独立交付的小型前端应用聚合为一个整体的架构风格。

为什么选择微前端

微前端主要解决了两个问题:

  1. 项目迭代导致巨石应用,难以维护

  2. 兼容历史应用,实现增量开发

阅读全文

手写call、apply、bind与this指向问题

本文给大家介绍更完善的手写方法

虽然手写call,apply,bind网上已经大把大把的文章,且本身知识点比较集中,但是网上的大部分方法都会有这样或者那样的问题,并不完善

本文带大家从另一个角度,更加完善的理解、学习如何手写call、apply、bind

一、用法与区别

  1. call:

    call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

  2. apply:

    apply() 方法调用一个指定 this 值的函数,以及以一个数组(或一个类数组对象)的形式提供的参数。

  3. bind:

    bind() 方法创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用。

阅读全文

代码可读性

对软件来说,适当的规范和标准绝不是消灭代码内容的创造性、优雅性,而是限制过度个性化,以一种普遍认可的统一方式一起做事,提升协作效率。代码的字里行间流淌的是软件生命中的血液,质量的提升是尽可能少踩坑,杜绝踩重复的坑,切实提升质量意识。 ——《阿里巴巴开发手册》

阅读全文