blog
blog copied to clipboard
bigo-frontend
👨🏻💻👩🏻💻 bigo前端技术博客
 本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。 ## 背景 bigo前端开始推广bff，hello农场作为首个bff落地项目，历经2个月，完成了从0-1的落地实践。 【node实战系列】按照小模块拆分，从开发者的角度讲叙，如何进行bff高可用编码。 本系列文章，基于eggjs框架编码，使用ts语法，为了提升阅读体验，建议大家先了解一下eggjs。 ## 系列文章 - [【node实战系列】编写一个重试装饰器](https://github.com/bigo-frontend/blog/issues/49) - [【node实战系列】自行实现应用缓存](https://github.com/bigo-frontend/blog/issues/53) - [【node实战系列】异步并发，自定义Promise.allSettled](https://github.com/bigo-frontend/blog/issues/56) - [【node实战系列】rpc与http协议通讯](https://github.com/bigo-frontend/blog/issues/64) - [【node实战系列】使用reqId跟踪全链路日志](https://github.com/bigo-frontend/blog/issues/65) - 【node实战系列】入参校验validate - 【node实战系列】异常中断 - 【node实战系列】base64编码 - 【node实战系列】服务发现 - 【node实战系列】编码与约定...
## 记一次静态页面配置化的实践 ### 背景 在日常项目开发中，我们可能会遇到一些项目，它们的文案可能会不定期改变，多个页面有相似之处，但是相同中又有不同，比如有的直播活动，策略逻辑没变，改了奖品、背景图和banner，也可以叫做换肤；也比如一些产品的官网，会不断加一些子页面，但是风格都是统一的，但会改变布局和文案。这个时候，做为技术，我们会思考如何能减少开发成本，避免改动一次文案替换一个图片就跑一遍繁琐的上线流程呢？大家一定能想到如果能把这些改动都做成可以配置的，那不就方便很多了么？前阵子正好做了这样场景的一个项目，于是尝试了下把页面尽可能写成可配置的。下面就简单介绍下。 #### 一、项目简介： 项目是一个官网项目，大部分都是静态页，分析需求，总结以下几点： * 子页面有多个，UI模板类似； * 部分页面会经常改动； * 后期可能增加新页面，但是风格相同，基本布局不变； #### 二、整体思路 **核心思想：需要配置的能配皆配。** 对于整个项目，可以配置的有菜单栏、某个页面包含的不同模块。 对于单个页面，可以配置的主要是图片、文案、样式、链接等。 #### 三、实现举例 ##### 菜单配置化 顶部菜单举例： 菜单的效果如下图，包含一级菜单和二级菜单。  菜单配置json是这样的 ```js export default ...
## 1. 怎么让链接上有图片，描述，和标题的？ 在分享出去的html页面上加上这一段代码，content的值写上你想要展示的内容 ```html ```  ## 2. 为什么加上这段代码就可以实现分享链接的预览了呢？ 像飞书、企业微信、WhatsApp、Twitter、Facebook 等社交软件，都会根据链接去抓取你给定 URL 的内容，以确定要包含哪些属性来进行共享展示。 而抓取的数据就是我们写的`og:tags` 来显式定义的属性。 ## 3. og是什么东东？ `Open Graph Protocol`（开放图谱协议），简称 OG 协议。它是 Facebook公布的一种网页元信息（Meta Information）标记协议，属于 Meta Tag （Meta 标签）的范畴，**是一种为社交分享而生的...
## 谈谈React Fiber与分片 #### React的理念和Fiber的出现 从React的[Doc](https://reactjs.org/docs/thinking-in-react.html)上可以看到React的理念是： > React is, in our opinion, the premier way to build big, fast Web apps with JavaScript. 但是我们有时候一个很长很深的DOM列表(在没有做列表优化的前提下)，`setState`创建更新后，React会进行对比创建前和创建后的节点(`Reconcilation`阶段)，对比的过程是不可中断的， 由于网页的主线程不仅包含了`js`执行，`样式计算`, 还包含了渲染需要的`重排重绘`，也就是当`Reconcilation`(js执行任务)执行很久的时候，当前的任务在主线程占用时间过多，就会影响浏览器正常的`重排`/`重绘`，也会影响正常的用户交互(输入，点击，选择等等)。 举个比较极端的例子，我们有个很深的列表(1500层)，而且变化频繁： ```js function App()...
#### 网页视频自动播放的局限 自动播放是指无需经过用户的同意就可以开始播放视频。这包括在video元素使用autoplay属性或者通过JavaScript代码直接调用video元素的play方法。 `` 和 `videoElement.play();` 非常遗憾的是，各个浏览器都为多媒体的自动播放设置了不尽相同的限制策略，也就意味着目前想要实现有良好兼容性的自动播放，是很难办到的。 #### 各个浏览器对视频自动播放的限制 ##### IOS IOS9以下版本： （在当时移动互联网的条件下，播放一个视频的流量和电量成本都是非常高的，因此视频的播放必须要先经过用户同意） 无法自动播放 IOS10以上版本： （浏览器厂商不给自动播视频，开发者只好曲线救国，使用GIF动图代替视频实现自动播放，但是GIF动图需要消耗的流量是视频的12倍，性能消耗是视频的2倍，并且移动互联网发展飞速，用户对视频播放占用的流量和电量也不再这么敏感，于是决定给移动设备的视频自动播放放宽限制） ``满足下列条件可以自动播放： 1.视频的源是没有音轨的或video元素使用了muted属性手动静音 2.video元素需要在屏幕上可见 3.video元素设置了playinline属性 `videoElement.play()`满足下列条件可以自动播放： 1.视频的源是没有音轨的或video标签使用了muted属性手动静音 2.video元素设置了playinline属性 以下行为将导致自动播放失效： ``元素在没有用户手势的情况下有了音轨或取消了静音，播放将被暂停 ---- ##### Chrome in Android...
### 背景 在开发中经常会遇到需要将配置数据转换成代码的情况，如果只有几个配置的话还好， `(￣▽￣)~*` 我们直接 `ctrl + c`、`ctrl + v` 操作就好了。`(ಥ_ಥ)` 然而，产品大佬通常只会甩一个几百行数据的谷歌表格给到前端，让前端自行录入奖励配置、图片配置等映射关系。  `o(´^｀)o`作为一枚有追求（能动脑就不动手）的切图仔，肯定不能一行行录入或者复制到记事本改数据格式的，费时耗力不说还容易出错。若针对每个谷歌表格都写一个读取脚本，显然也是不可取的（每次都要改代码也不行），所以这时候就需要一个高效的开发工具可以满足： - 选中谷歌表格的数据内容，按下神秘按键 `ctrl + c`，就得到我们需要的数据格式 `Json` 或 `Array` 。 - 能跨浏览器页面使用。 综上，打算撕一个浏览器插件工具来提效我们的研发，让开发者把时间花在更有意义的事情上。 ### 准备工作 作为还没入门过浏览器插件开发的萌新，于是就去扫盲了下 chrome...
## Rollup基础 ### 什么是Rollup Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。 ### Rollup简单使用 #### 安装Rollup ```bash npm install --global rollup ``` #### 命令行模式 我们执行help命令查看下rollup的常见命令行参数 ```bash rollup -help ``` ```bash -i, --input...
在电商里，什么是 sku？ 简单的来说，比如一件裙子，颜色有红色、白色，码数有 XL、XXL，我们选择红色、XL，那这个规格的组合就是一个 sku。 而 spu 则是指这件裙子，要区分开来。 以前刚开始接触到这种 sku 选择器，还以为只是简简单单的几个 tab 组合后传给后端，但是等到实际开发才知道这种 sku 选择器，是后端告诉你有什么规格，比如颜色有几种，码数有几种，然后再告诉你有几种组合方式： ```javascript this.product.skuAttrSortedList = [ { "attrName": "颜色", "attrNameId": "1", "attrValues": [ "红", "白" ] },...
## 引子 假如你用过 twitter，你应该会在 timeline 中看到过这样的卡片: 当然了，肯定也会看到朋友发过的这样的 twitter： 如果你在国内的微博上发表一个链接，那么你的发表的这篇微博可能会变成这样： 在社交类的 APP 内(例如 imo)，也会在 im 消息中与好友分享 url，此时我们也可以看到 url 会变成如此这般： 在QQ和微信内，是光秃秃的链接(微信不会自动解析url，需要依赖开发者调用jsapi来分享)；在企业微信内，url是会被解析成如上图imo内的卡片效果。 可以看到，url 发布到不同的地方，有的会变成很美观的卡片，有的则是一个光秃秃的 url 。今天，我们来聊一聊他们是如何产生这种变化的，以及我们在 twitter、Facebook、im 软件中发布的 url 链接，是如何变成上面图片所展示的这种卡片效果的。 ## 为什么会出现Open Graph...
## 【bigo】长列表在Likee年度盛典的应用 列表是页面常用的一种数据表现形式，在页面中常用写法如下 ```html ``` 但在likee2021年度盛典的这次活动中，产品给出了一个难题：在一个页面中显示一个数据量达上万的长列表，要求支持滑动至任一位置。 一个上万数据的简单列表在页面显示需要至少上万个元素，如果列表中存在交互事件，那浏览器需要花费多少时间去渲染呢？ 用一个简单列表来显示，在chrome浏览器中需要800ms左右，使用的内存为95.7m，而活动中列表显示的内容会比演示的代码更多，交互更加复杂，webview渲染的时间及占用的内存也会更多，那如何去优化呢？  ### 列表可视化渲染  用户查看页面的时候，只能看到屏幕窗口显示的界面，那再窗口外的内容我们可以选择不进行全部渲染。如下图所示，我们将长列表截取一部分数据再页面上进行渲染，用户看到的数据是在内容显示区域，当用户上滑或者下滑的时候，使用处于上滑待显示区域或者下滑待显示区域的数据替代内容显示区域的数据，再从长列表中更新上滑待显示区域或者下滑待显示区域的数据，从而实现列表的可视化渲染。 ### 实现方案  当用户打开页面查看长列表的时候，页面会向后端请求接口，获取长列表的初始数据以及列表长度，根据列表长度以及初始化子元素的高度来初始化容器的滑动高度。 设定容器的滑动高度后，将当前显示容器设定为三个区域，滑动待显示区域以及可视显示区域，计算当前的滑动高度以及可视显示区域的高度，计算当前渲染的列表长度。 ```javascript const { total, list } = await this.fetchData(); if (this.cachedHeight.length ===...
