blog
blog copied to clipboard
bigo-frontend
👨🏻💻👩🏻💻 bigo前端技术博客
 本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。 # 【node实战系列】编写一个重试装饰器 ## 背景 bigo前端开始推广bff，hello农场作为首个bff落地项目，历经2个月，完成了从0-1的落地实践。 【node实战系列】按照小模块拆分，从开发者的角度讲叙，如何进行bff高可用编码。 本系列文章，基于eggjs框架编码，使用ts语法，为了提升阅读体验，建议大家先了解一下eggjs。 ## 系列文章 [【node实战系列】编写一个重试装饰器](https://github.com/bigo-frontend/blog/issues/49) 【node实战系列】自行实现应用缓存 【node实战系列】异步并发，自定义Promise.allSettled 【node实战系列】rpc与http协议通讯 【node实战系列】使用reqId跟踪请求全流程日志 【node实战系列】入参校验validate 【node实战系列】异常中断 【node实战系列】base64编码 【node实战系列】服务发现 【node实战系列】编码与约定 【node实战系列】监控告警 【node实战系列】单元测试 【node实战系列】压测 【node实战系列】灰度 【node实战系列】文档 【node实战系列】系列小结 欢迎大家关注我们的github blog，持续更新。...
### 防抖节流 #### 概念 - **debounce**：把触发非常频繁的事件（比如按键）合并成一次执行。 - **throttle**：保证每 X 毫秒恒定的执行次数，比如每 200ms 检查下滚动位置，并触发 CSS 动画。 - **requestAnimationFrame**：可替代 throttle ，函数需要重新计算和渲染屏幕上的元素时，想保证动画或变化的平滑性，可以用它。注意：IE9 不支持。 防抖和节流的显著**区别** 在于，节流在指定时间间隔内只会执行一次任务，而防抖则是任务之间间隔超过一定阈值才回执行一次任务。 ### debounce 防抖函数 `debounce` 指的是某个函数在某段时间内，无论触发了多少次回调，**都只执行最后一次**，即触发频繁的事件合并成一次执行（如键盘输入）。 实现原理就是利用定时器，函数第一次执行时设定一个定时器，之后调用时发现已经设定过定时器就清空之前的定时器，并重新设定一个新的定时器，如果存在没有被清空的定时器，当定时器计时结束后触发函数执行。 ```javascript cosnt debounce...
# **我们做了啥** Bigo前端组计算平台前端组基于amis框架，参考之前的文章：https://github.com/bigo-frontend/blog/issues/17 ，有很好的研发效率提升，但是构建速度却很慢，亟需进行优化。优化之后达到了将webpack构建速度提升80%左右的一个成绩，以下是优化前后的对比👇 **30965ms ➡️ 6545ms** 团队做了3件事情来达到这样的一个效果： 1. `split-chunks`进行公共模块优化👇 ``` optimization: { splitChunks: { chunks: "all", cacheGroups: { vendorsa: { chunks: 'all', test: /(mobx-state-tree|react-color|react-dom-router|sortablejs|mobx-react)/, priority: 100, name: 'vendors-react-mobx', },...
### 背景 brpc服务管理平台，是我这边第一个用纯ts开发的项目，初期的时候，由于迭代较快，项目中有很多any类型的数据，主要是api request以及response data。any太多，一方面不规范，另一方面绕过校验，ts的优势也就不复存在了。 基于上述问题，解决方案如下： 使用auto-service，结合公司内部使用的yapi，自动生成model。 ### auto-service简介 [auto-service](https://github.com/gogoyqj/auto-service)，可以根据 [Swagger](https://swagger.io/) 或者 [YApi](https://github.com/YMFE/yapi) 格式的接口文档（JSON）自动生成 TypeScript 格式的API调用代码以及接口request/response的类型定义。auto-service 依赖基于开源项目 [Swagger Codegen](https://github.com/swagger-api/swagger-codegen) 定制开发的 Java [生成工具](https://github.com/gogoyqj/swagger-codegen)，请确保已经安装 Java。 本文介绍的使用方式是结合yapi使用。 ### auto-service使用 #### 安装 `npm i...
## 前言 早年在开发内部技术论坛时，为了实现一种流程的图片浏览体验，基于 Vue 开发了一个图片查看器组件，简单梳理了实现思路，希望能给大家提供一下帮助。 先来看看效果图：  从交互上来说内容很简单，点击页面上的图片，从图片当前的位置弹出图片浮动层，以便达到图片浏览的目的。 ## 原理分析 1. 根据点击事件，取得点击的图片元素 2. 使当前图片元素不可见（通过 visibility 或者 opacity） 3. 创建遮照层 4. 在图片元素当前位置创建同等大小的图片元素 5. 创建动画将图片放大至合适的尺寸（更新位置、比例） 思路清晰了，实现起来也就不难了。 ## 实现方案 因为最终目的就是在 Vue 项目中使用，所以以下方案就直接封装成 Vue...
## 场景 多数APP的卸载量在提高，各家面临的情况大同小异。流失的用户需要召回，短信引流是相对有效的方式之一。 产品要求： - 在短信中放入链接，用户点击链接如果用户已安装app则直接唤起app（且不需要经过浏览器），如果用户未安装app则打开浏览器显示app下载页面。 - 链接需要尽可能的短（短信有字数限制，超出长度按多条收费） ## 相关技术 ### 一、web唤起app技术 web调起app技术常见的有三种 URL Schema，universal link(ios), app links(android)；经调研 URL Schema无法在短信中调起app，universal link 和 app links可以。下面详细介绍下三种技术。 #### 1.URL Scheme 首先解释下scheme，我们看URL的组成： ```javascript [scheme:][//authority][path][?query][#fragment]...
### 需求分析： - 主要有两点，滚动，以及可视范围的判断 - 滚动即提供一个组件，接收两个参数from与to，组件实现从数字from变为数字to，变化过程为上下滚动 - 可视范围的判断即，当组件位于可视范围时，才开始滚动 - 其余实现要求包括，当组件渲染后，数字to的变化，会触发下一次滚动，用vue实现 - 效果如下图 ### 实现方案： - 首先拆解需求，999可以视为3个9组成的数字，所以一串数字的滚动，其实相当于一组单个数字滚动的组合，故首先实现单个数字滚动的效果，再组装成组件就能实现需求的效果 - 单个数字的滚动，有点类似于机械时钟的翻页，其实现为在现有展示数字的背面，存在别的数字，在适当时机，机械会控制翻转到新的数字，旧的数字被掩盖在新的数字下方 - 所以单个数字滚动，也可以用类似的方法，即准备从0到9十个数字，纵向排列，但可视范围只有一个数字的大小，称其为窗口，这十个数字都根据窗口定位，在数字变化的时候，改变其定位，并添加动画效果，就可以实现滚动的效果 #### 样式 - 根据上面的方案，我们可以写出下面的样式布局 ``` /* html */ 0 0...
# 漫谈浏览器渲染 # 多进程/多线程模型 ## 主要进程类型 1. 浏览器进程：浏览器主进程，仅有一个，用于进程、资源调度和控制。 2. 渲染进程：基本每个浏览器标签页都是一个渲染进程，在内存紧张的时候会合并成一个进程 3. GPU进程：用户绘制3D图形和动画绘制 4. 第三方插件进程：浏览器有很多插件，都运行在第三方插件进程里，防止插件进程影响到主进程等其他进程 打开 Chrome 的任务管理器的窗口，如下图:   ## 渲染进程的主要线程类型 1. UI渲染线程（renderer thread）：渲染进程的主线程 1. 解析HTML，CSS，构建DOM树和CSSOM树，布局和绘制等 2. 当HTML解析script标签时，就会解析script里的Javascript脚本程序（Chromium使用的是V8，Safari用的是JavaScriptCore），阻塞html的解析 2. I/O线程...
为了应对Chrome对Flash播放的限制，在2020年我们对[Bigo Live](https://www.bigo.tv)直播官网进行了一次重构，将原本的Flash直播转为HTML5播放，将一个原本是前后端耦合的项目重构成了一个基于Nuxt的服务端渲染项目。由于服务端渲染依赖了一个node后台做页面渲染，因此，保证后台可以顺利完成页面组装，不会在项目运行阶段出现错误是至关重要的，为了了解node后台的运行情况，检测后台的运行健康状况，项目使用了几种日志记录方法，便于多方位观察项目的运行。由于现在关于 Nuxt 项目日志方面的文章不是特别多，因此做个记录和分享，有更好的日志记录方法欢迎一起交流～ ### 一、使用PM2日志 项目使用了PM2做进程管理，而PM2自带了完整的日志功能，查看PM2日志的时候，日志可以随着项目运行实时加载，且PM2会自动处理日志的分割和整合，所以我们可以通过观察PM2的日志了解程序的运行状态。 ###### 查看日志： ``` pm2 logs [项目名] --lines [行数] ``` PM2 查看日志默认显示15行，如果15行无法完整查看日志内容，可以通过```--lines```设置查看的行数。 ###### 配置时间戳和日志存储位置 PM2的日志打印默认没记录时间，但是日志的打印时间对排期故障是很重要的，可以通过修改配置的方式增加时间戳，还有修改日志位置： ``` module.exports = { apps: [ { name: 'app',...
### 需求背景 DMS DaemonSet发布，会在每个节点部署一个pod，影响面比较大。业务期望在发布的时候，可以展示当前修改的配置，与线上的配置的yaml文件diff，效果如下：  ### 实现方案 [jsdiff](https://github.com/kpdecker/jsdiff) + [diff2html](https://github.com/rtfpessoa/diff2html) #### jsdiff 获取文本差异。 #### diff2html 将差异转化为html。diff2html提供了2种方式展示diff效果： 1. parse+html 问题：highlight语法高亮不生效。 2. diff2html-ui: 1. 支持json、代码高亮。 2. 支持文件目录概要显示/隐藏。 3. 支持收起已查看文件（side-by-side 模式下，viewed功能失效）。 diff2html格式化类型：side-by-side、line-by-line。 ###...