通过puppeteer无头浏览器生成pdf但是需要动态加载传入的图片url时，可以通过axios下载图片，再转base64展示

1
2
3
4
5
6
7
8
9
10
11
12

const fetchBase64Img = async (url) => {
  const arrayBuffer = await axios.get(url, {
    responseType: 'arraybuffer'
  })
  const buffer = Buffer.from(arrayBuffer.data, 'binary').toString("base64");
  return `data:${arrayBuffer.headers["content-type"]};base64,${buffer}`;
}


// puppeteer渲染的dom中可以直接通过img展示
const imgBase64 = await fetchBase64Img(url)
`<img src="${imgBase64}">`

最近搭建新项目框架遇到一个问题，搜索栏会根据不同屏幕宽度自动换行或者不换行，换行后导致下面内容区域高度过高，造成页面滚动，所以需要动态计算搜索栏的高度，决定下面内容区域的高度(后续通过flex布局实现)，看到了这个ResizeObserver挺有意思的

Resize Observer API 提供了一种高性能的机制，通过该机制，代码可以监视元素的大小更改，并且每次大小更改时都会向观察者传递通知。

之前我们需要监控页面尺寸变化，一般都会用到window.resize()方法，这个方法会会轮询触发每秒将近60次，监听所有DOM元素的变化，有时候DOM元素尺寸发生了变化，但是窗口大小没有变化也会触发，这时候用这个方法就会造成严重的性能浪费，在MDN上已经不推荐resize方法去监听某个元素的变化。

由于以上种种原因，就迎来了一个新的APIResizeObserver API

需求上线后，经常遇到业务侧同学反馈xxx按钮点击报错，xxx页面打不开等情况，测试也不可能对系统进行100%覆盖，用户也不会总按照我们的预期去操作，所以有了前端错误监控平台，可以在系统异常时主动收集错误信息进行上报，可以帮助我们快速定位错误，统计、分析、复盘错误数据。

自研or三方

优: 三方方案更加成熟，部分例如sentry可以选择私有化部署；自研方案拥有更高的定制化开发需求，SDK可集成更多需求，高度定制化开发。

劣: 三方二次开发受限，部分需要上传源码到三方服务器，数据保存在第三方，费用不低；自研需要熟悉整套设计流程，对开发者要求较高，需要兼容各种场景以及耗时更久。

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

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

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

• Issues: #11494

• puppeteer和chromium对照表: support

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

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

  1 2 3 4

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

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

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

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

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

准备的工具和材料

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

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

目录结构

首先从零搭建一套前端脚手架需要用到最核心的一个库就是commander

前言

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

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

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

标签操作

新建标签：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

原文地址: 知乎