Web API-ResizeObserver详解

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

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

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

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

阅读全文

前端错误监控平台(webpack-plugin+Performance API+SendBeacon API)

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

自研or三方

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

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

阅读全文

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. 兼容历史应用,实现增量开发

阅读全文