bigo前端-CSDN博客

原创基于 AlloyCrop 的图片手势缩放、裁剪业务实践

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

2021-05-24 10:38:19 246

原创使用原生js通过缓动函数实现抽奖转盘动画

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。前言最近接到抽奖转盘活动页开发的需求，由于转盘样式UI比较特殊，使用开源的组件又比较难定制，而转盘转动的特效其实实现起来并不复杂，因此自己使用原生的js利用缓动动画原理开发了转盘特效，在开发过程中对缓动函数相关的知识点进行的一些梳理，总结了转盘动画实现的原理，希望给大家有一些帮助。什么是缓动函数事物的运动遵循一定的规律，从生活上汽车的加速、减速、球体上抛，自由落体等可以看出，它不是一直线性的运.

2021-05-17 11:17:37 1972

原创 Google搜索下的SEO方法简介

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。前言SEO能够有效成为新的增长利器，了解SEO也是前端开发的技能点。SEO（Search Engine Optimization）搜索引擎优化是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。主要方法是：辅助搜索引擎理解网页内容，主动告知搜索引擎站点页面间的联系和引用结构，适当增加或降低不同页面的权重。具体的方法有：辅助搜索引擎理解网页内容：TDK；结构化数据；<a&.

2021-05-11 10:06:30 611

原创谈谈React Fiber与分片

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。谈谈React Fiber与分片React的理念和Fiber的出现从React的Doc上可以看到React的理念是：React is, in our opinion, the premier way to build big, fast Web apps with JavaScript.但是我们有时候一个很长很深的DOM列表(在没有做列表优化的前提下)，setState创建更新后，Rea.

2021-05-06 10:22:23 332

原创使用Intersection Observer接口实现可视区域渲染

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。背景在图文列表渲染时，在较低配置的Android手机出现内存暴涨，无法回收导致客户端崩溃的情况，我们使用Android studio进行分析发现，问题出在了webview的图层渲染引擎。我们发现，随着我们下拉加载越多，图片量增多时，图层渲染Graphics部分内存持续上涨，且不存在回收的情况。因此，这种情况下，使用图片懒加载已经不能解决问题了。经过调研，我们采用了Intersection Obse.

2021-04-27 10:45:10 1273

原创【bigo】LikeeLive年度盛典优化浅谈

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。一、背景LikeeLive首次举办线上年度盛典，不管是用户玩法内容还是主播玩法内容都是月度活动的2-3倍，安排了前端4个人投入开发，在各自开发完成后合并代码，在自测阶段发现测试环境页面加载过慢，性能评分未能到达上线要求。二、问题分析先放大图在Performance这方面的评分只有32分，一个对用户体验极差的分数。首屏的加载时间需要6.2s，阻塞时间480ms，css文件最大文件大小超过1..

2021-04-25 10:09:18 264

原创记一次伪元素动画引起的webview崩溃

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。背景前不久做了一个imo年终盛典的 h5 移动端活动项目，活动主页有三个排行榜页面，以及任务页面。在测试过程中，测试同事反馈排行榜页面在 android 4.x 的系统下会引起 webview 的崩溃，而且是必现，而任务页面是正常的，这让我纠结了很久，因为本身页面也做了很多的优化，像图片的懒加载，组件的懒加载，排行榜列表虚拟滚动（只渲染屏幕显示部分数据），所以一时也不知道问题在哪里。解决过程仔.

2021-04-20 09:49:55 297

原创活动搭建平台raptor在bigo实践

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。一，什么是raptorraptor是Bigo内部一个为开发提效、运营赋能、可视化Web活动页制作平台。二，raptor立项背景1. 传统需求上线流程如图: 从上图中肉眼可以看到的劣势：参与人员众多：运营、设计、开发、测试上线周期长，上下游依赖强2. 期望需求上线流程人员少：运营自己就可以独立完成上线快、流程短、无依赖如图：三，raptor解决业务痛点为开发提效：开.

2021-04-15 12:15:38 253

原创如何写好eggjs单元测试

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。如何写好eggjs单元测试前言笔者在平时面试前端同学时，经常遇到候选人有nodejs开发经验，但是很少有编写单元测试。希望写下这篇文章，让大家多重视单元测试，交付高质量的代码。如果你的项目单元测试分支规范率达到80%以上，我就认为这个同学的代码质量意识特别好。为什么要单元测试如测试金字塔，单元测试是底座。引用eggjs官网的话猛戳这里你的代码质量如何度量？你是如何保证代码质量.

2021-04-09 17:32:02 392

原创面试官：这位同学，请你谈谈登录

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。谈谈登录面试官简单一句提问，其实背后是希望我们能够从用户身份验证、安全防范、前后端交互流程等方面回答，本文系统性对登录涉及的知识点进行了梳理，希望大家有所收获。一、Cookie与SessionHTTP是无状态协议，它不对之前发生过的请求和响应的状态进行保存。因为无法管理用户状态，对于要登录的页面，每次跳转新页面时都需要再次登录。于是引入了Cookie来管理用户状态：首先客户端发起不带Co.

2021-04-07 15:27:26 313

原创 ⚡️利用expect，提升小小的幸福感

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。⚡️利用expect，提升小小的幸福感笔者经常要使用公司跳板机，登陆到目标服务器，查看日志等操作。要重复的复制ssh命令、ip地址等。每天来回的重复，是否有工具能够让重复的事情机器做呢？经过翻阅资料，找到了一个很好的解决方案，基于expect，实现ssh自动交互。使用expect后，自动帮我们连接服务器，输入密码，交互输入令牌验证码，跳转目标ip，一键登录。如果要批量登录机器，是不是一下.

2021-04-06 11:23:05 132

原创【bigo】浅谈Vue3新特性

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。前言Vue3的release版本终于发布了，新的Vue3在语法以及底层都进行了全新的重构，带来了更快的运行速度，更小的构建包，更友好的编程规范。更快传统的虚拟dom算法：组件patch的时候，需要重新创建整个vdom树，然后遍历整棵树进行diff，update…更快的虚拟dom算法，源自编译模板时给予更多的运行时提示：编译模板时对动态内容进行patch标记，告诉patch算法只关注被标.

2021-03-31 11:02:50 302

原创在bigo前端实习三个月的总结

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。一、整体认知1. 团队协作在家或者在学校的时候，一直都是自己独立地开发项目，前后端都是自己一个人梭哈，怎么写，任凭自己主宰，在这种独自一人开发的模式中，对于团队协作模式可谓是一无所知。后来，实习期间，经过几次版本的迭代之后，对于团队协作开发模式已经有了整体上的认知。例如一个项目的需求周期是怎样的：需求评审需求进入排期表进入开发前后端自测联调自测无误后发起提测测试提bug（最好没有.

2021-03-27 16:26:58 709

原创谈谈你的调试工具

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。window chrome devtool调试ioschrome devtool 调试微信网页chrome devtool 调试android真机fiddler抓包mumu android模拟器调试window chrome devtool调试ios使用remotedebug-ios-webkit-adapter1.github地址https://github.com/Remot.

2021-03-22 10:26:08 551

原创 javascript模块化演进及原理浅析

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。模块化解决了什么问题我们仔细想一下，Javascript编程其实很多时候就是管理变量以及变量赋值这件事，比如把一个value赋值给一个变量，给一个变量加上一个value，或者把两个变量相加的结果赋值给另外一个变量，怎样去管理这些变量对日后如何维护这些代码就显得至关重要。在开发中如果我们一次仅需要考虑几个变量，那么工作就会变得很简单。幸运的是，JavsScript有个作用域链来帮助我们解决变量过多.

2021-03-18 16:08:09 281

原创记一次页面配置化的实践

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。背景在日常项目开发中，我们可能会遇到一些项目，它们的文案可能会不定期改变，多个页面有相似之处，但是相同中又有不同，比如有的直播活动，策略逻辑没变，改了奖品、背景图和banner，也可以叫做换肤；也比如一些产品的官网，会不断加一些子页面，但是风格都是统一的，但会改变布局和文案。这个时候，做为技术，我们会思考如何能减少开发成本，避免改动一次文案替换一个图片就跑一遍繁琐的上线流程呢？大家一定能想到如果能.

2021-03-18 16:07:12 924

翻译【译】彩！纯CSS版打地鼠

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。本文由bigo前端翻译小组翻译，原文链接：Whack-a-Mole: The CSS Edition前言我们之前介绍过如何对checkbox改造(译者注：“checkbox hack”，即通过隐藏checkbox标签，展示lable标签，并用for属性将两者关联，最后根据checkbox上的CSS伪类选择器“:checked”来区分以及定义各种状态)，来实现一个纯CSS的完全状态机。今天我们将沿.

2021-03-18 16:06:10 164

原创 bigolive2020年度盛典技术总结

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。背景年末将至，各直播平台都会上线了相应的年末活动，各公会、主播也都纷纷参加活动冲年终业绩，而BigoLive作为YY旗下的海外直播平台当然也不落下步伐，相比与国内已经成规模的直播带货，海外发展形式则更为偏向于传统直播的“秀场”，所以我们的年末活动也都围绕这直播打赏模式做活动，并将各个用户/主播福利点满，争取早日业绩达标；为了完成这一目标，早在9月1号便密锣紧鼓地开发年度盛典的首个活动——区域家族赛.

2021-03-18 16:05:01 2999

翻译【译】2021年十大热门编程语言

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。本文由bigo前端翻译小组翻译，原文链接：Top 10 Striking ⚡ Programming Languages 2021????前言编程已成为当下的一项热门的技能。近些天来听到很多人在问2021应该学哪门编程语言呢？所以我们Themeselection 在这里跟大家分享下2021排名前十的编程语言。本文会详细介绍在排名榜上的每种语言给你能带来什么，为什么会火。所有提到的最火爆的编程语言

2021-03-18 16:03:55 1378

原创 PWA实践总结

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。bigo likee出海产品寻找新的增长突破口，在技术侧尝试pwa方案，也收获了不少经验，现总结分享一下。1.什么是PWA？PWA（Progressive web apps，渐进式 Web 应用）运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。如何理解渐进式？渐进式构建。构成 PWA 的标准都来自 Web 技术，它们都是浏览器提供的、向下兼容的、没有额外.

2021-03-18 16:01:59 370

原创如何排查nuxt的内存泄露问题 & 优化

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。背景stalar电商平台是bigo 2020年的新业务，目标市场主要是中东五国，主要技术栈为nuxt。一次常规需求上线后，偶然打开了chrome memory面板，打了几个内存快照，发现内存一直在涨，且无论跳转到什么页面，内存都稳定增长；为排除干扰因素，再快照前手动点击了gc，发现内存的增量仅仅下降了一点点，总体还是呈稳定增长趋势。意识到这是一个比较严重的问题，因为商详页面是有推荐商品模块的，也.

2021-03-18 16:00:23 1519

原创 amis在bigo人工智能训练平台落地实践

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。前言首先介绍一下什么是amis？https://baidu.gitee.io/amis/amis 是由百度开源的一个低代码前端框架，基于React，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。amis 的解决方案是基于 JSON 来配置，它的独特好处是：不需要懂前端：在百度内部，大部分 amis 用户之前从来没写过前端页面，也不会 JavaScript，却能做.

2021-03-18 15:58:20 1196

原创【bigo】前端配置系统pear

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。前言现在市面上比较流行前端搭建，通过可视化拖拽，快速生成页面，配置简单的数据源以及交互事件，就能快速交付业务。但是前端搭建业务落地成本高，需要维护大量业务组件，并且基于其render引擎，很难二次编码，定制开发。故对于大型、复杂前端页面，前端搭建不是很好的解决方案。另外纯手工开发前端页面时，对于多变的产品需求，每次都要走代码变更，测试回归，发布上线。费时费力，效能低下，并且有发布风险。big.

2021-03-18 15:53:16 296

原创【bigo前端】如何截取gif首帧图片

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。前言先介绍一下js文件类型的知识点，后面要多次转换文件类型。一.什么是Blob、File、DataURLBlob 类型Blob 类型是 File 文件类型的父类，它表示一个不可变、原始数据的类文件对象。如何得到 blob 对象？new Blob(array, options)let hiBlob = new Blob([`<h1>Hi gauseen!<h1>`.

2021-03-18 15:45:02 660 1

yeyeye0525的博客