closertb.github.io
closertb.github.io copied to clipboard
closertb
浏览issue 或 我的网站，即可查看我的所有博客
## 角色的转变 在做商品前端之前，我是本地生活前端基础设施WAP平台的全栈开发者。我对接的客户是本地生活的前端，区别于业务前端的是，自己即是产品、也是开发、测试、运维。 商品前端作为业务开发，其工作更细，更强调团队，除了要和产品、服务端、测试密切配合；还需要关注上下游链路、依赖更多，制约更多。 而除了上述差别，还有就是更关注用户体验、关注客诉、关注线上问题。以下便是我2023年遇到的奇葩、棘手，让人个人成长但不多的业务问题集锦top4, 分享与各位共勉： ## 一个表情符造成的崩溃 某天要下班提包走的瞬间，突然产品拉群，运维反馈说XX商户套餐添加菜品操作页面`白屏`(其实是一致loading，页面假死)，并发了个视频。  发错了，是下面这个  我们迅速根据商家信息去查了接口调用日志，发现请求正常，响应正常未超时，前端系统日志也正常，未上报任何报错信息。 几个人对视频又观察分析，发现商户小程序选菜页面正常，只是H5应用选菜页面打开才会白屏(本质上是整个app崩溃了，页面都没法退出)。然后又和运维交流了一下，说商户安卓手机能正常操作，只有苹果手机有问题（型号：IP15 PRO）。我们测试迅速在我们的测试商户复现，未成功复现。于是又联系运维，要了商户的临时登录帮助复现，也未复现（复现的机型是IP 13）。这就更蒙了，难道只有苹果高端机才有问题？ 然后找到一位土豪同事，用他刚上手的水果试了一下，果然复现了，难道这真的是富贵病？？？  但机智的我突然开窍，会不会是这个分类表情符造成的？我们迅速在测试账号复现了该分类，并成功验证这个猜想，确实是分类表情符被截断造成。当晚我们给商户的建议是：改一下表情符出现的位置，或者减少数量。 第二天，另一个测试在一台IP 13也复现了，但APP版本一样，唯一不一样的，是系统的版本，他的更新。然后我们又升级了一台，果然是系统升级造成。至于为什么小程序没问题，因为小程序用的是UC内核容器，而H5用的是原生webview容器，即safari内核。 这难道了我，以前只知道去github给仓库作者提issue，这给苹果系统提issue，还是`大姑娘上轿`-头一回。  在google了苹果bug反馈机制后，迅速写了一个demo，并提了[一个issue](https://feedbackassistant.apple.com/feedback/13419150)，一周后，打开测试机看到一条系统更新推送，看到了是关于safari的，果断升级，发现问题已解。 ## UC内核打造的出其不意 某天bug写的起劲，钉钉消息不断弹出，大事不妙，果然，前线运维反馈APP菜品列表滑动卡顿，并录了视频。  习惯性打开测试商户看了下，800个菜，滑动正常，问了下对面，只有100来个菜，这不应该啊。问了对方机型，华为Mate60(没听错，就是那个遥遥领先)，那就更不可能啊。毕竟我手上这个vivo老年机，不能说很流畅，但真的不至于卡。又找了几个手机（包括一个Mate50），运行都很正常，然后、然后、就挂起了。 然后隔了几天，另一个同事查问题，发现在一加手机上也很卡。但奇怪的是，出问题当天，我们就用过这手机，测试出来很流畅，而且是两个人一起测过。很快我们发现了不同端，APP由于有发版，测试版自动升级成了正式版。然后我们又找了两台测试机，装了app正式包，发现都有卡顿问题。于是我们把问题抛给了APP。...
写于 2023-11初冬 ## 洋务派的实践者，宫保鸡丁的起源者 说来也巧，国庆重游了都江堰，偶然看到这个人名，当时百度了下是个人物。但没想到，有人比我更有眼光，直接把他拍成了电视剧。  近些天，中央八套热播的电视剧《丁宝桢》引起了广泛的关注，塑造了一位为人民请命、为圣上分忧、为国鞠躬尽瘁的能官，廉吏。剧中详实记录了他任山东巡抚杀宦官、治黄水、搞洋务、兴水师、清理场等实事。又大概描述他在四川当总督理盐政、除匪患、修都江堰水利的丰功伟绩。 剧中一直强调他是一个造枪炮的洋务派实践者，走到那，就在哪里办学，搞制造局，但这并不是因为他仅是因为他想让国家富强，而是这部剧并没有完整记录他的生计。 他实际上是行伍出生，镇压过苗族起义，太平天国、捻军起义，所以他是非常懂军务的，也深知枪炮的厉害、边防的重要性，这是剧中一个文臣形象永远表达不出来的，这也是他为什么敢杀宦官、奏叶赫那拉.恩承的背后原因。 除了删减行伍，也隐瞒了一些剧情，但大体上不影响这是一部历史正剧的评价。 ## 大清为何会亡 在《丁宝桢》中，剧情深刻地揭示了大清灭亡的历史因素。丁宝桢作为洋务派实践者，致力于引进西方科技，但受到传统观念的束缚和官场腐败的阻碍，具体表机器局建好了又关，外患已经枪抵脖子了，内斗还在不断升级。大清亡国的原因复杂，既包括外患内讧，也离不开长期积弊的官僚体制和无法适应时局的政治制度。用历史课本的话来说，封建官僚主义的社会体制，生成关系已经无法满足生产要素的发展，所以必然会亡。 ## 官场贪腐的本质，电视剧里的经济账 电视剧《丁宝桢》通过细致描绘官场贪腐的内幕，深入挖掘了贪腐现象的本质。官场贪腐往往是一个错综复杂的经济账，包括官官相护、官商勾结、官匪勾结等多个层面。这些本质揭示了贪腐不仅是一种行为，更是一种体制性问题，需要深刻的体制改革来解决。 ### 官官相护 在官场中，官员之间往往形成紧密的关系网，这种关系被称为"官官相护"。这种现象可能出于多种原因，包括共同的利益、权力互惠以及对抗外部审查的需要。官官相护可能导致内部监督机制不健全，使得贪污腐败得以滋生。 丁宝桢的时代，官官相护可能更加显著（洋务派、守旧派、旗人、汉人）。官员们往往通过相互默契的方式来保护自己的权益，这种情况可能会导致一些不正当的行为被纵容，从而助长了贪腐的氛围，以恩承为首的捐资纳官就是最好的代表。 ### 官商勾结 "官商勾结"是指官员与商人之间建立的不正当的关系。在这种勾结中，官员可能为商人提供便利，而商人则通过贿赂或其他手段获取不正当的利益。这种现象可能包括非法交易、虚假合同和腐败行为。 在《丁宝桢》中，治黄水就是最好的例子，为此我画了一张图，诸位请看：  往下拨，这账一环扣一环，全部对的上。但到商人这里，就成了黑洞，但大头不是自己拿，得拿去孝敬，不然下次200都没得挣。 ### 官匪勾结 "官匪勾结"是指官员与犯罪分子（匪徒）之间的勾结关系。在这种情况下，官员可能通过与犯罪分子合作，从中获取不正当的好处，而犯罪分子则能够在官员的庇护下逍遥法外。 在《丁宝桢》中，理盐政的片段就有体现：...
## 背景 近来，我们的业务开始尝试用新的解决方案（双端开发，同时投放PC端和移动端）解决前端资源短缺问题。但提测后，测试提出我们移动端页面首屏太慢（6s+），体验极差。 我尝试在PC端打开这个页面，耗时4s+，加载瀑布流长下面这样：  粗略一分析，存在下面三个问题： - 应用页面采用了懒加载策略，详见红色圈注区域； - 入口js，包体积太大，gzip之后还有1.3M, 原始大小4M+ - 日常静态资源未开启cdn ## 优化三部曲 一、应用架构优化 在应用架构中，懒加载是一个常见的优化技巧，它可以在需要时才加载资源，减少应用的启动时间和流量消耗。但是，懒加载并不是万能的，有时候过多的懒加载反而会降低应用性能。因此，在进行应用架构优化时，应该根据具体情况权衡是否采用懒加载。  根据瀑布流结合上图的分析，资源的加载用时4s+，index.html 的时间对于前端来说是不可控的，这完全取决于域名的解析和服务器的响应。但js 和 css 这一段是完全可控的，我们可以把后面 500ms 的资源加载用时提前，也就是去除懒加载的架构方案。 二、包体积优化 包体积优化是优化应用性能的重要一环。包体积的大小直接影响应用的加载时间和用户体验。 当看到1.3M的gzip包大小后，我们第一反应就是去开启webpack的analyse查看包体积分布，结果完全超出想象(这是development模式，注释了其他页面入口，仅保留了时段菜单一个页面)：  上面这张图也很直观的暴露出几个问题：...
2022 年过得好快，感觉上一次写文章还是去年的年终总结（这一年确实偷了懒，需要自我反省），一转眼，已经除夕了。本想就这样过去吧，用“太忙”搪塞自己。但人在做，自己以后好看。 今年一直在三件事中来回挣扎： - 养娃 - 疫情 - 工作 ## 喜得千金 这是过去一年的主旋律，有太多故事记得纪念，这一节写给18年后的女儿，让她时刻记住她母亲生她的不易。  ### 中了 去年春节回家前一天，我下班回到家，媳妇情绪非常失落，说感觉亲戚快来了（我们已经备孕三个月）。本着不在猜疑中吓死自己，我们用试纸测了一下，过了几十秒，毫无变化，失落感瞬间拉满，我只好在旁安慰，好事多磨，好事多磨。等过了几分钟去洗漱时，我媳妇看到多了道杠，查了一下，这是正常现象，于是我们带着欣喜又忐忑的心情回家过年。直到新年返程，我们才去医院做了正式检测确认。 ### 孕期哪些九九八十一难 过完节回家没几天，孕反就找上了门，起因是一顿牛杂和她的老毛病：胃炎。熬了好几天，不见好转，只有电话丈母娘请求援助。于是两个老人，拖着锅碗瓢盆，油盐米菜就过来了，那阵仗就像我两在成都一直住的清水房。在精心照料一个月后，终于摆脱孕反，体重开始回升。 其实孕反不是很可怕，但孕反加先兆流产就可以让人崩溃。而后又经历了孕期激素性鼻炎、高温断水断电、产检心脏强光点红灯。还好还好，一切都是有惊无险，但足够我两新手爸妈喝几壶。 ### 出生 兜兜转转，终于熬到足月迎来国庆，媳妇预感她会在国庆出生。但调皮的她不按常理出牌，没有一件事是我们计划内的：反应一来，彩超一查就是羊水不足，医生建议剖腹产，我们也根本没犹豫。10.08日下午两点，小布丁出生，母女平安。但因为该死的疫情，医院只允许一个陪护，可谓坑苦了我。从闺女出生前到出生后24小时我都没合过眼，不是睡不着，是根本没机会睡。 ### 养娃 出生在医院时，娃基本吃了睡，睡了吃，我一度以为并且对外宣称，我遇到了天使宝宝。上天丝毫没有惯着我，马上就惩罚了我的骄傲。没几天就开始让肠胀气找上了娃，随之而来的就是闹觉，半夜挣扎--吵夜。 有了娃后，一觉到天亮的睡眠就离我们而去，白天的生活基本也被碎片化。但一天天看着他长大，时不时抿嘴一笑，心里就很满足了。 感谢媳妇这一年为了娃所做的努力，去年很苦，兔年一定会很甜。也愿娃新的一年，健健康康，早日睡上整觉，还我一觉到天亮的睡眠。  ##...
Bumps [json5](https://github.com/json5/json5) to 2.2.3 and updates ancestor dependency @doddle/doddle-build. These dependencies need to be updated together. Updates `json5` from 0.5.1 to 2.2.3 Release notes Sourced from json5's releases. v2.2.3 Fix:...
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot] avatar"){kind=avatar}
Bumps [express](https://github.com/expressjs/express) from 4.17.1 to 4.18.2. Release notes Sourced from express's releases. 4.18.2 Fix regression routing a large stack in a single route deps: [email protected] deps: [email protected] perf: remove unnecessary...
Bumps [qs](https://github.com/ljharb/qs) from 6.5.2 to 6.5.3. Changelog Sourced from qs's changelog. 6.5.3 [Fix] parse: ignore __proto__ keys (#428) [Fix] utils.merge: avoid a crash with a null target and a truthy...
Bumps [decode-uri-component](https://github.com/SamVerschueren/decode-uri-component) from 0.2.0 to 0.2.2. Release notes Sourced from decode-uri-component's releases. v0.2.2 Prevent overwriting previously decoded tokens 980e0bf https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2 v0.2.1 Switch to GitHub workflows 76abc93 Fix issue where decode...
Bumps [loader-utils](https://github.com/webpack/loader-utils) to 1.4.2 and updates ancestor dependency @doddle/doddle-build. These dependencies need to be updated together. Updates `loader-utils` from 0.2.17 to 1.4.2 Release notes Sourced from loader-utils's releases. v1.4.2 1.4.2...
最近一直在接触Node服务端相关的东西，前端的知识真的是像大海一样：我太水。 在掘金读到一篇关于[深入理解Node.js 中的进程与线程](https://juejin.im/post/5d43017be51d4561f40adcf9), 里面讲到了线程阻塞，为了让自己印象深刻，我就复现了这个过程，然后用最近学会的pm2开启多线程解决这个顽疾时 -> 失败了，当发起计算请求时，再发起其他请求，就一直被阻塞，源码地址见下方。 > [node进程，深入理解源码地址](https://github.com/closertb/GraphQLDemo/tree/master/koaProcess) ### 说说为什么 ```js // pm2.json { "name": "koaProcess", "script": "npm", "args": "start" } // package.json { "start": "node index.js" } ``` 当我在命令行敲下pm2...