背景音：

Sir，收到線報啦，今天喺生產環境用戶訪問網頁嘅時候，竟然感受到咁卡卡地！彻底冇得爽啊！已經導致唔少用戶投訴。根據推斷，昨日更新咗埋點SDK…

昨日，一位前端程序员在优化公司的埋点SDK使用方式后，出了一些小插曲。不知道是什么原因，更新之后就开端有用户反应说网页卡卡地，走得比蜗牛还慢。

六点二非常，第一个用户提交了投诉工单，但这只是个开端。

今天早上九点非常，公司的运维团队已经接到了一大堆反应工单，许多用户都遭受到了同样的问题。这是一个巨大的问题，一旦得不到解决，或许导致数万的用户受到影响。运维人员立即开端了排查作业，想要找出问题所在。

经过一个小时的紧急排查，他们终于想到了昨日的这名前端程序员，一经沟通发现是SDK版别更新引起的问题。在新的版别中，有一些不稳定的代码导致了功能问题。

然而，这不仅仅是个技能问题，由于接下来，他们要开端着手写事故陈述，预备给上层领导告知。

接下来，进入正题：

一、问题排查定位

依据更新的版别体量，能够缩小和快速定位问题源于新引入埋点SDK。

  1. 翻开 开发者工具-功能剖析，开端记载
  2. 刷新页面，重现问题
  3. 中止记载，排查剖析功能问题

我是埋点SDK，看我如何让甲方爸爸的页面卡顿10s+

如上图，依照耗时排序，能够快速定位找到对应的代码问题。

首要把编译压缩后的代码收拾一下，接下来，深入代码一探终究。

我是埋点SDK，看我如何让甲方爸爸的页面卡顿10s+

⏸️暂停一下，不妨猜猜看这儿是为了干嘛？

喝口茶，让我们沿着事情途径，反向持续摸清它的目的吧。

我是埋点SDK，看我如何让甲方爸爸的页面卡顿10s+

这儿列举了231个字体称号，调用上文的 detect() 来剖析。

⏸️暂停一下，那么这个操作为什么会耗时且阻塞页面烘托呢？

…

歇息一下，让我们去看看这段代码的来龙去脉。

上面我们大概猜到代码是用于获取用户浏览器字体，那就简略检索一下 js get browser font。

我是埋点SDK，看我如何让甲方爸爸的页面卡顿10s+

我是埋点SDK，看我如何让甲方爸爸的页面卡顿10s+

证据确凿，错在彼岸。

二、解决问题

相信大家也看出来了，我不是埋点SDK，我也不是甲方爸爸，我只能是一位前端开发。

联络反应至SDK方，需要走工单，流程，而这一切要多少时间？

我唔知啊！领导也不接受啊！

没办法，只能自己缝补缝补了。

那么如何解决呢？

  1. 测验修正 getFonts detect 字体检测逻辑，避免多次重绘。
  2. 缩短待检测字体目录。

人生苦短，我选计划3，直接修正返回值，越过检测。

getFonts () { return 'custom_font' }

那么让我们持续搬砖吧。

  1. 寻根

我是埋点SDK，看我如何让甲方爸爸的页面卡顿10s+

首要找到 SDK 加载对应 JS 的加载方式，看看能不能动点四肢。 这儿能够看到，是选用很常见的 经过 appendScript loadJs 的计划，那么就能够复写阻拦一下 appendChild 函数。

  1. 正源

经过阻拦 appendChild，将SDK加载的JS改为加载修正后的JS文件。

核心代码如下：

var tempCAppend = document.head.appendChild
document.head.appendChild = function (t) {
    if (t.tagName === 'SCRIPT' && t.src.includes('xxx.js')) {
          t.src = 'custom_fix_xxx.js'
    }
    return tempCAppend.bind(this)(t)
}

三、后续

这件事情发生在21年底，今天为什么拿出来共享一下呢？

近期排查 qiankun 部分子使用路由加载异常的时分，定位到与 document.head.appendChild 被复写有关，于是去看SDK方是否修正，结果纹丝未动….

结合近期境遇，不得不感慨，业务能不能活下去，真的和代码、技能什么的毫无关系。

其他

❄️下雪了，简略看了几眼文心一言的发布会，更凉了。