一、第三方引发类

1.1 WPS

2023-12-01

事件描述：页面上的 a 标签，用户复制粘贴到 wps excel 单元格中，此时编辑超链接可以看到，hash 值被复制了一份

复现步骤：

1. F12 往页面上写个标签 document.write('<a href="https://baidu.com/#/abc?a=1">我是百度</a>')
2. 复制页面上的标签到 wps excel 单元格中
3. 编辑单元格超链接

教训总结：用户在点击单元格超链接时，前端截取方法处理不当，引发多个重复参数。

题外话：有时看到开发同学编码没来由的在去重，或者做一些奇怪的兜底，可能不是我方代码不行，而是第三方的神迹。

1.2 高德地图前端SDK

2021-12-23 17:40 切身经历，没有高德事故报告，无从考究

事件描述：前端初始化高德地图异常，页面没剩啥功能可操作，amap 提供的定位获取失效，无法完成业务作业-打卡等各个流程

排查得出高德 CDN 返回的 JS，格式化后，比平时多了15行。约 25 分钟后恢复正常。

教训总结：

1. 第三方依赖尽量本地化（大部分情况下，这种做法是OK的，不排除极端情况，如：API变更）
2. 兜底/降级方案，比如该场景下的定位、自动降级切换地图等等

1.3 腾讯地图前端SDK

2023-08-07 14:45 同事分享，没有实质证据，无从考究

事件描述：腾讯地图 CDN 凉凉，无法加载，同事的 SPA 系统在模板 html 中 script 同步加载了该资源，导致白屏 2min 才能进去系统（2min 后 js fetch fail）

教训总结：

1. 第三方依赖尽量本地化（大部分情况下，这种做法是OK的，不排除极端情况，如：API变更）
2. 不能本地化别同步加载，在用到的页面异步添加 script load
3. 兜底/降级方案，比如该场景下的定位、自动降级切换地图等等

性能类

2.1 out of memory

事件描述：Table场景，行是懒加载，然而是动态列，忽然业务侧爆发了新场景，5000+列，初始化渲染导致内存泄漏

教训总结：

1. 想办法懒加载
2. 不能懒加载的时候，从产品方案设置渲染上限

2.2 计算导致渲染进程卡死

事件描述：两个下拉具备关联关系，比如一个送礼页面，礼物下拉筛选有 品类 和 品类下的实体礼物。这里前端同学答应了产品和后端的无理请求，从后端拿了所有的品类和实体枚举项，刚进页面/没选品类的时候要加载所有品类下的实体下拉项。开发顺利，上线进入页面先卡 8s 后，才能正常操作。

教训总结：

1. 质疑产品方案的合理性，产品所谓的用户体验，有时就是YY出来的交互，也不是用户需要的东西
2. 质疑后端方案的合理性，为啥不动态搜索，灵活拆接口
3. 纯计算可以放 web-worker，异步，不会阻塞渲染。比如这里就让这两个下拉去 loading，其他操作正常用
4. 做压测

过去在工作中因需要，匆忙给政企部门封装过一个 Electron 客户端应用，整个过程非常“敏捷“，印象中有很多版本方面的差异和兼容问题，但没有总结，这里对着官网整个基础 mac 应用，学习整理下各方面功能实现及 API 调用。

官网：https://www.electronjs.org/

本文完成 DEMO : https://github.com/zzyxka/electron-demo-app

注：本文以 mac 平台为准，其他平台可能需要增加“补丁”类模板代码。

日常工作线上化后，很多时候需要自动化给团队的同学推送消息。基本上会采用企微机器人的方式，但公司企微机器人服务因为撑不住，故不给非业务诉求使用了，只能退而求其次，想到使用 node-mail 来发邮件，但腾讯企业邮箱又有发信限制，其他没有发信限制的邮箱又不够安全合规。最终有了用 Electron 做一个桌面工具给团队同学安装使用的想法，后台(软件最小化)获取 websocket 消息推送，借助 Electron 能力，弹出 mac 消息提示。

举例一个实际的场景：系统发版申请，现有一个 web 页面，用来填写发版申请单，填写完成后推送提醒给发版执行人

核心处理：

1. websocket 服务：使用 Node 提供 websocket 服务，web 系统/ node 服务 完成消息交互测试
2. Eleectron 应用搭建：
   1. 使用 Electron 加载 web 系统，登录后传入 用户ID 连接 socket
   2. 使用 Electron 中 Node 线程获取 sokcket 消息并弹出提醒

1. 基本概念及原理
2. 插件示例：router 生成
3. 插件示例：redux 简化
4. 插件示例：公共资源 copy 至产物

前端都可以用 nginx 来做什么？

1. 静态资源代理、资源压缩
2. 接口请求转发（解决跨域）
3. A/B test（负载均衡）

问题

常常因为网络环境，遇到 github.com、github.io、raw.githubusercontent.com 等网址打不开，比如：博客用 raw.githubusercontent.com 图床，出现图片裂开等情况。

解决方案

通过多种方式（亲测只有 github520 方案稳定些），改 hosts，让其能够成功解析出 IP 地址，从而访问 github.com 等网址。

github520

https://gitee.com/klmahuaw/GitHub520

刷新 DNS 缓存

• 改完 hosts 后 edge 可使用 edge://net-internals/#dns 再清空下 host cache
• 同理 chrome 使用 chrome://net-internals/#dns 来清空缓存
• mac 可使用 sudo killall -HUP mDNSResponder 刷新系统 hosts 解析

jenkins/gitlab-ci/github actions/travis-ci
docker/k8s
本地生产包一致性(lock, .npmrc)、node、npm/pnpm版本一致性(nodeVersion, packageManager)

参考：https://guangchuangyu.github.io/2019/10/open-all-files/

open 一个 mac 上，可以打开各个安装软件、网址、多个目录、文件的命令。

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

# 默认浏览器打开百度
open <https://baidu.com>
# Chrome 打开百度
open -a /Applications/Google\\\\ Chrome.app <https://baidu.com>
# 打开多个目录
open ~/Documents ~/Desktop ~/Downloads
# 通配符：打开多个 D 开头的目录
open ~/D*
# (默认app)打开各种文件
open wallhaven-85ex62.png
open Node.js+Webpack开发实战.pdf
# ...

Crontab 是 cron table 的缩写，字面意思日程表。可以使用 crontab 指令，按照指定的规则/周期定时执行某项任务。

常用指令：

• crontab -l 列出目前的时程表(无日程时，执行打印 crontab: no crontab for xxx)
• crontab -e 新建一个日程，执行后打开 vim，需要按照指定规则编写并保存(:wq)
• crontab -r 删除目前的日程表(执行成功后没有内容打印)

编写日程的规则：

1
2
3
4
5
6
7
8

*    *    *    *    *
-    -    -    -    -
|    |    |    |    |
|    |    |    |    +----- 星期中星期几 (0 - 6) (星期天 为0)
|    |    |    +---------- 月份 (1 - 12)
|    |    +--------------- 一个月中的第几天 (1 - 31)
|    +-------------------- 小时 (0 - 23)
+------------------------- 分钟 (0 - 59)

举例：每天 19:45 执行 auto-task.sh 脚本中的 git 命令，来保存提交 Note目录 下的笔记。