吴泽彬 issues

Results 5 issues of


吴泽彬

【bigo】qiankun-JS沙箱原理解析

## qiankun-JS沙箱原理解析之前分享过qiankun在组内的落地情况，简单分析了JS沙箱的加载流程和隔离原理。本文基于之前的分享，对qiankun的JS沙箱隔离原理进一步进行解析。 qiankun提供了三种JS沙箱： 1. SnapshotSandbox 2. LegacySandbox 3. ProxySnadbox 后面两种统称为代理沙箱，因为都是基于Proxy实现的；不同场景条件下使用不同的沙箱。先回顾下JS沙箱的加载流程，简单看下qiankun是如何初始化沙箱的。 ### 沙箱加载流程当前的版本，默认情况下，不管单例还是多例，用的都是ProxySandbox，若浏览器环境不支持Proxy，则使用SnapshotSandbox，如果想要使用LegacySandbox，需要手动配置sandbox: { loose: true }。 #### 流程图 ![image-20211108210159066](https://user-images.githubusercontent.com/22595086/143217020-7fb0c170-0cd6-4707-82fc-439ae885a8a1.png) #### 源码 ```ts // https://github.com/umijs/qiankun/blob/master/src/sandbox/index.ts export function createSandboxContainer( appName:...

【bigo】微前端在基础架构组的实践

## 微前端在基础架构组的实践 ### 需求场景 Brpc服务管理平台想集成开源项目[Jaeger](https://github.com/jaegertracing/jaeger-ui)(分布式链路追踪系统)的功能，搭建自己的调用链平台，方便使用Brpc框架用户查询自己的服务调用链，以及在此基础上，二次开发，接入公司分布式日志系统的功能，用户可以在本平台便捷地查看业务trace及业务日志，掌握相关信息，快速定位问题。 ### 为什么用微前端 #### 为什么不自行开发需求与开源项目现成的功能基本一致，简单估了下开发时间，全部自己开发至少需要一个月。 #### 为什么不用iframe > 1. url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。 > 2. UI 不同步，DOM 结构不共享。想象一下屏幕右下角 1/4 的 iframe 里来一个带遮罩层的弹框，同时我们要求这个弹框要浏览器居中显示，还要浏览器 resize 时自动居中。...

【bigo】使用auto-service，拒绝any

### 背景 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...

【bigo】如何实现git-diff效果

### 需求背景 DMS DaemonSet发布，会在每个节点部署一个pod，影响面比较大。业务期望在发布的时候，可以展示当前修改的配置，与线上的配置的yaml文件diff，效果如下： ![image](https://user-images.githubusercontent.com/22595086/116334554-001c6e00-a808-11eb-83e9-3038f559d04b.png) ### 实现方案 [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。 ###...

【bigo】如何对页面进行简单的性能检测与分析

页面性能的好与坏，直接影响到用户的留存。对于前端开发者来说，不能以感官的体验进行判断，而是需要了解页面的性能指标，并且尝试将这些指标量化，根据量化的指标进行针对性的改进，才能真正达到优化的效果。一般页面的性能指标有： 1. 白屏时间 2. 首屏时间 3. 用户可操作时间 4. 页面总下载时间 5. 网络请求时间 6. 内存占用、cpu占用，等等。本文通过对Performance API、chrome 的Performace面板、Lighthouse的简介，讲解如何使用这些工具对页面进行简单的性能检测与分析。 ## Performance API > [Performace](https://developer.mozilla.org/zh-CN/docs/Web/API/Performance)是 html5的新特性之一，该接口会返回当前页面性能相关的信息。它是 High Resolution Time API 的一部分，同时也融合了 Performance Timeline API、[Navigation...