yeyeye0525的博客

HLS协议由苹果公司提出并推广，下面是来自维基百科的定义。HTTP Live Streaming，缩写为HLS，是由苹果公司提出基于HTTP的流媒体网络传输协议。是苹果公司QuickTime X和iPhone软件系统的一部分。它的工作原理是把整个流分成一个个小的基于HTTP的文件来下载，每次只下载一些。当媒体流正在播放时，客户端可以选择从许多不同的备用源中以不同的速率下载同样的资源，允许流媒体会话适应不同的数据速率。

IGO前端CICD平台，是一个服务于前端团队的全研发周期管理平台，已经是我们团队日常都要使用的工具了。该平台实现了一键创建项目、发布编排、新建迭代、checklist、快速发布、快速回滚等能力。统一了前端研发规范、脚手架治理、升级流程管控，打通内部多个研发系统，简化了升级步骤。

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。egret是一款小游戏开发引擎，支持跨平台开发，之前使用这款引擎开发了一款捕鱼游戏，在这里简单聊下再egret中关于对象池的使用，虽然该引擎已经停止维护了，但是对象池的概念适合通用的游戏场景，不限框架。

主要的作用就是当后端响应的内容是html的时候，跳转到登录页面。这种方案让我感觉有点别扭，于是具体了解了这段代码出现的原因。功能的核心在于用户鉴权，后端设想的方案是：当前端发起接口请求，后端识别到用户未登录的时候，就会给前端响应302的状态码，以为很方面，前端不用处理就直接跳转到了登录页面。然而，他们不知道的是，前端发起的ajax请求，并不能直接跳转，甚至连302状态码都捕获不到。

从上面babel实践和的一些实践总结来看的话，可以将library和webapp最佳实践做如下的总结：对于类库开发来说，比如我们要给公司或者github上开发一个开源类库。可能我们大部分"要照顾性能的场景下"最好就把polyfill设置为false， 只把helper设置为true。然后编码时只用es5语法写类库，或者使用es6但要通过文档告诉调用者。如果主web项目的依赖库是以ES5的形式释出的，同时依赖库若使用了ES6+特性。此时，要看该依赖库的作者是否"在文档中声明了其依赖的polyfill"。...

痛点，是指尚未被满足的，而又被广泛渴望的需求，英文名叫painpoint。在做技术规划或者是OKR的时候，往往会问自己一个问题当前阶段的主要痛点是什么？然后针对痛点，寻求解决方案，最后就能得出较为实际的阶段性目标。显然，从痛点出发，可以让付出得到的收益更高。我们都知道，通过ReactHooks，可以将组件的逻辑提取到可重用的函数中作为自定义Hooks。业界也有很多优秀的hook库，比如react-use、ahooks等。在我们目前的开发模板中，引入了ahooksuseRequest传送门。.........

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。背景bigo前端开始推广bff，hello农场作为首个bff落地项目，历经2个月，完成了从0-1的落地实践。【node实战系列】按照小模块拆分，从开发者的角度讲叙，如何进行bff高可用编码。本系列文章，基于eggjs框架编码，使用ts语法，为了提升阅读体验，建议大家先了解一下eggjs。系列文章【node实战系列】编写一个重试装饰器【node实战系列】自行实现应用缓存【node实战系.

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。引言项目开发时，有开发分支，测试分支，主干分支等。一般不能把测试分支合并到其他分支里，然而可能一不小心（手抖）合并了，甚至在不知情的情况下还加了新的东西，后面上线时才发现（或者没发现，直接把测试分支的代码带到了线上），后果可大可小，回滚时也麻烦。那能不能在合并阶段直接禁止合并非法分支呢？答案是可以的。只要解决了下面问题即可。是否在合并中？当前分支名叫啥？要合并进来的分支名又叫啥？当前.

本文由前端翻译小组翻译，首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。原文链接：How to Learn Machine Learning – Tips and Resources to Learn ML the Practical Way如何学习机器学习 - 实践中学习 ML 的建议和资源如今很多人想要学习机器学习。但是大多数ML老师提供的自下而上的课程令人生畏，足以让很多新手产生挫败感。在这个教程里面我把课程倒过来了，我会概述我认为牢牢掌.

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。一、首先安装expressnpm install express安装express是为了示范。二、创建example.js文件// example.jsconst express = require('express')const app = express()const port = 3000app.get('/', (req, res) => { res.send(.

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。JSON Schema入门和应用何为JSON Schema？JSON数据格式对于web开发者都为所熟悉，在平时的开发中离不开它，例如前后端数据传输格式，webpack配置文件，对象序列化等实际应用场景，通常都以JSON格式定义和储存。它以简洁易懂的结构、体积小的优点得以在各类编程语言中广泛流行。那么什么是JSON Schema?JSON Schema其实是对json数据格式的描述和规范，是对.

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。微前端的实践分享需求场景Brpc服务管理平台想集成开源项目Jaeger(分布式链路追踪系统)的功能，搭建自己的调用链平台，方便使用Brpc框架用户查询自己的服务调用链，以及在此基础上，二次开发，接入公司分布式日志系统的功能，用户可以在本平台便捷地查看业务trace及业务日志，掌握相关信息，快速定位问题。为什么用微前端为什么不自行开发需求与开源项目现成的功能基本一致，简单估了下开发时间，全部.

本文由前端翻译小组翻译，首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。原文链接：Advanced frontend Interview topics with React首先，请让我明确一点，这篇文章没有教你任何东西。这只对主题和想法进行了组织，并对每个主题和想法进行了简单总结。目录：Axios懒加载（Lazyload）错误边界（Error Boundaries）WebworkerIndexDBToken、cookies 和 .

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。一、前言入职的第一个需求是跟着一位前端大佬一起完成的一个活动项目。由于是一起开发，当然不会放过阅读大佬的代码的机会。因为我的页面中需要使用到倒计时功能，发现大佬的已经写了个现成的倒计时组件，于是直接就拿过来用了。传个参数就实现了功能的感觉真是太棒了。项目完成后，就膜拜了一下大佬的倒计时组件的代码。真是让我学到了不少。列举如下：计时器为什么要用setTimeout而不用setInterva.

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。问题起因    公司的设计小姐姐突然找我说我做的一个图片合成工具透明的区域变成黑色了。    第一步想法是背景初始化存在问题，导致透明区域黑化。但试了下通过浏览器选中canvas元素下载图片透明区域是生成正常的，那就是在绘制完成后到下载这一步中间发生了问题。检索了一下整个步骤，再绘制完成到下载过程中有将canv.

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。需求分析：组件可设置弹出位置（placement），支持top、bottom气泡弹窗弹出位置计算，边界计算，支持设置边界范围支持点击弹窗元素之外的区域，弹窗关闭支持弹窗内容自定义效果预览：实现方案实现自定义组件， 我们一般都会想到Vue.extend，vue.extend相当于一个扩展实例构造器，用于创建一个具有初始化选项的Vue子类，在实例化时可以进行扩展选项，最后使用$mou.

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。如何使用泛型写一个自动提示api方法及参数的功能最近在使用ts开发vue应用，在开发过程中遇到泛型这个概念。基于对于泛型的理解和认识，突发奇想，如果能够利用泛型的特点，实现一个api自动提示的功能多好，这样不但对同一个项目中的其他开发者起到提示作用，省去查看文档的功夫；还可以把这一套方法放到我们公司的typescript项目模板中，方便其他同事开发使用，提高公司的研发效率。说干就干，下面就讲讲咋.

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。React单元测试实践单元测试（unit testing），是指对软件中的最小可测试单元进行检查和验证。单元测试是由程序员自己来完成，最终受益的也是程序员自己。执行单元测试，就是为了尽量证明这段代码的行为和期望的一致。其实我们每天都在做单元测试，包括那些认为自己从来没有写过单元测试的同事。你写了一个函数，log一下或者在界面上点一下，这，也是单元测试，把这种单元测试称为临时单元测试。临时单元测试.

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。前言Bigo计算平台前端组其中的两个产品，前端的框架都使用了 Amis，一个百度开源的低代码前端框架，公司之前也有几篇文章介绍了 Amis，其适用场景、使用方式以及项目中的落地和最佳实践等等。这里，我主要想借 Amis 来表达一些我对 Low Code 前端的想法。从概念出发LCDP，引用 Wiki 的解释：A low-code development platform (LCDP) pr.

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。js函数的防抖与节流防抖节流概念debounce：把触发非常频繁的事件（比如按键）合并成一次执行。throttle：保证每 X 毫秒恒定的执行次数，比如每 200ms 检查下滚动位置，并触发 CSS 动画。requestAnimationFrame：可替代 throttle ，函数需要重新计算和渲染屏幕上的元素时，想保证动画或变化的平滑性，可以用它。注意：IE9 不支持。.

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。使用auto-service，拒绝any背景bigo brpc服务管理平台，是笔者首个基于react纯ts开发的项目。初期的时候，由于迭代较快，项目中有很多any类型的数据，主要是api request以及response data。any太多，一方面不规范，另一方面绕过校验，ts的优势也就不复存在了。基于上述问题，解决方案如下：使用auto-service，结合开源mock平台yapi，自.

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。封装Vue浮动弹出的图片查看器组件前言早年在开发内部技术论坛时，为了实现一种流程的图片浏览体验，基于 Vue 开发了一个图片查看器组件，简单梳理了实现思路，希望能给大家提供一下帮助。先来看看效果图：从交互上来说内容很简单，点击页面上的图片，从图片当前的位置弹出图片浮动层，以便达到图片浏览的目的。原理分析根据点击事件，取得点击的图片元素使当前图片元素不可见（通过 visibility.

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。基于短信场景一键唤起app技术原理解剖场景多数APP的卸载量在提高，各家面临的情况大同小异。流失的用户需要召回，短信引流是相对有效的方式之一。​产品要求：在短信中放入链接，用户点击链接如果用户已安装app则直接唤起app（且不需要经过浏览器），如果用户未安装app则打开浏览器显示app下载页面。链接需要尽可能的短（短信有字数限制，超出长度按多条收费）相关技术一、web唤起app技.

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。需求分析：主要有两点，滚动，以及可视范围的判断滚动即提供一个组件，接收两个参数from与to，组件实现从数字from变为数字to，变化过程为上下滚动可视范围的判断即，当组件位于可视范围时，才开始滚动其余实现要求包括，当组件渲染后，数字to的变化，会触发下一次滚动，用vue实现效果如下图实现方案：首先拆解需求，999可以视为3个9组成的数字，所以一串数字的滚动，其实相当于一组单个.

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。多进程/多线程模型主要进程类型浏览器进程：浏览器主进程，仅有一个，用于进程、资源调度和控制。渲染进程：基本每个浏览器标签页都是一个渲染进程，在内存紧张的时候会合并成一个进程GPU进程：用户绘制3D图形和动画绘制第三方插件进程：浏览器有很多插件，都运行在第三方插件进程里，防止插件进程影响到主进程等其他进程打开 Chrome 的任务管理器的窗口，如下图:渲染进程的主要线程类型U.

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。背景为了应对Chrome对Flash播放的限制，在2020年我们对Bigo Live直播官网进行了一次重构，将原本的Flash直播转为HTML5播放，将一个原本是前后端耦合的项目重构成了一个基于Nuxt的服务端渲染项目。由于服务端渲染依赖了一个node后台做页面渲染，因此，保证后台可以顺利完成页面组装，不会在项目运行阶段出现错误是至关重要的，为了了解node后台的运行情况，检测后台的运行健康状况，.

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。背景bigo前端开始推广bff，hello农场作为首个bff落地项目，历经2个月，完成了从0-1的落地实践。【node实战系列】按照小模块拆分，从开发者的角度讲叙，如何进行bff高可用编码。本系列文章，基于eggjs框架编码，使用ts语法，为了提升阅读体验，建议大家先了解一下eggjs。系列文章【node实战系列】编写一个重试装饰器【node实战系列】自行实现应用缓存【node实战系.

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。需求背景DMS DaemonSet（bigo k8s系统）发布，会在每个节点部署一个pod，影响面比较大。业务期望在发布的时候，可以展示当前修改的配置，与线上的配置的yaml文件diff，效果如下：实现方案jsdiff + diff2htmljsdiff获取文本差异。diff2html将差异转化为html。diff2html提供了2种方式展示diff效果：parse+html.

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。需求分析：需要提供一个组件，可以根据子元素的宽度，自动决定是否进行滚动(跑马灯功能)滚动的时候，有首尾相连的效果，即滚动到队尾的时候，队头同时从另一端出现(即循环播放，中间不断开)滚动的同时，可以通过触摸拖动元素(即可向左也可向右拖拽)考虑多语言的阅读方向，如汉语是从左往右阅读，则marquee从右往左滚动，阿拉伯语是从右往左阅读，marquess从左往右滚动利用vue开发实现.

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。本文由bigo前端翻译小组翻译，原文链接：The “Checkbox Hack” (and things you can do with it)什么是Checkbox HackCheckbox Hack技术就是复选框 <input type=“checkbox”>结合<label>标签，通过复选框的选中来控制一些元素的样式，比如：<label for="toggl.

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。前言bigo作为全球化的互联网企业，产品体验要求国际化，本地化，所面向的用户来自世界各地，他们在产品使用习惯各有不同。尤其对于使用诸如阿拉伯语、乌尔都语、希伯来语等用户，拥有着庞大的数量群体，他们的阅读习惯与中、英文大为不同，是从右到左的顺序进行阅读，从产品使用上需要兼顾这部分用户需求。为了更好地符合用户习惯，作为一名前端开发，我们更应该在页面针对不同语言进行布局适配，努力地提高用户使用体验。何.

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。前言放之四海皆准的方法是不存在的，不同的深浅拷贝实现方法和实现粒度有各自的优劣以及各自适合的应用场景。本文会从实现原理进行分析，并将在 JavaScript 中实现深浅拷贝所需要考虑的问题呈现给大家。让大家对深浅拷贝有个更深刻的认识，以便大家可以更好的选择适合自己的拷贝方法。什么是浅拷贝/深拷贝浅拷贝：创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型.

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。背景bigo前端开始推广bff，hello农场作为首个bff落地项目，历经2个月，完成了从0-1的落地实践。【node实战系列】按照小模块拆分，从开发者的角度讲叙，如何进行bff高可用编码。本系列文章，基于eggjs框架编码，使用ts语法，为了提升阅读体验，建议大家先了解一下eggjs。系列文章【node实战系列】编写一个重试装饰器【node实战系列】自行实现应用缓存【node实战系.

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。我们做了啥Bigo前端组计算平台前端组基于amis框架，参考之前的文章：https://github.com/bigo-frontend/blog/issues/17 ，有很好的研发效率提升，但是构建速度却很慢，亟需进行优化。优化之后达到了将webpack构建速度提升80%左右的一个成绩，以下是优化前后的对比????30965ms ➡️ 6545ms团队做了3件事情来达到这样的一个效

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。【node实战系列】自行实现应用缓存背景bigo前端开始推广bff，hello农场作为首个bff落地项目，历经2个月，完成了从0-1的落地实践。【node实战系列】按照小模块拆分，从开发者的角度讲叙，如何进行bff高可用编码。本系列文章，基于eggjs框架编码，使用ts语法，为了提升阅读体验，建议大家先了解一下eggjs。系列文章【node实战系列】编写一个重试装饰器【node实战系.

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。背景bigo前端开始推广bff，hello农场作为首个bff落地项目，历经2个月，完成了从0-1的落地实践。【node实战系列】按照小模块拆分，从开发者的角度讲叙，如何进行bff高可用编码。本系列文章，基于eggjs框架编码，使用ts语法，为了提升阅读体验，建议大家先了解一下eggjs。系列文章【node实战系列】编写一个重试装饰器【node实战系列】自行实现应用缓存【node实战系.

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。前言上一篇我们讲到了 sku 选择组件利用矩阵算法解决动态变化选项的需求，依旧遗留了一个大问题：就是当规格大于 2 个的时候，你会发现这个算法存在 bug举个例子"skuList": [ { "showPrice": "6.00",//优惠展示价格 "favType": 1,// 优惠类型 "skuId": "1234", .

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。前言在电商里，什么是 sku？简单的来说，比如一件裙子，颜色有红色、白色，码数有 XL、XXL，我们选择红色、XL，那这个规格的组合就是一个 sku。而 spu 则是指这件裙子，要区分开来。以前刚开始接触到这种 sku 选择器，还以为只是简简单单的几个 tab 组合后传给后端，但是等到实际开发才知道这种 sku 选择器，是后端告诉你有什么规格，比如颜色有几种，码数有几种，然后再告诉你有几种组.

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。前言页面性能的好与坏，直接影响到用户的留存。对于前端开发者来说，不能以感官的体验进行判断，而是需要了解页面的性能指标，并且尝试将这些指标量化，根据量化的指标进行针对性的改进，才能真正达到优化的效果。一般页面的性能指标有：白屏时间首屏时间用户可操作时间页面总下载时间网络请求时间内存占用、cpu占用，等等。本文通过对Performance API、chrome 的Performace.

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。前言最近经常接到活动页面需要给用户定制化图片的需求，于是对之前所做过的图片裁剪业务功能、踩过的一些坑做一个总结梳理，希望对大家有参考价值。需求描述我们先来看一下整体的需求功能：点击固定的区域可以让用户选中拍照/图库中的照片随后用户可以对已选择的照片进行缩放、拖动来调整照片展示区域待调用户对图片整完成后还可以选择不同的活动主题封面进行合成，生成活动相关的直播封面功能实现第一步调.