李宇仓 | Li Yucang

卡顿、网络环境指标采集

如何监控网页性能

卡顿、网络环境指标采集卡顿指标采集所谓卡顿，简单来说就是页面出现卡住了的不流畅的情况。提到它的指标，你是不是会一下就想到 FPS（Frames Per Second，每秒显示帧数）？FPS 多少算卡顿？网上有很多资料，大多提到 FPS 在 60 以上，页面流畅，不卡顿。但事实上并非如此，比如我们看电影或者动画时，素虽然 FPS 是 30 （低于60），但我们觉得很流畅，并不卡顿。 ...

Posted by Li Yucang on January 5, 2024

常见编程题解析

探索编码的乐趣

常见编程题解析 list数据转成tree结构实现 convert 方法，把原始 list 转换成树形结构，要求尽可能降低时间复杂度以下数据结构中，id 代表部门编号，name 是部门名称，parentId 是父部门编号，为 0 代表一级部门，现在要求实现一个 convert 方法，把原始 list 转换成树形结构，parentId 为多少就挂载在该 id 的属性 children ...

Posted by Li Yucang on December 18, 2023

React源码分析

一文读懂 React 组件渲染核心原理

React源码分析宏观包结构基础包结构 1、react react 基础包, 只提供定义 react 组件(ReactElement)的必要函数, 一般来说需要和渲染器(react-dom,react-native)一同使用. 在编写react应用的代码时, 大部分都是调用此包的 api. 2、react-dom react 渲染器之一, 是 react 与 web 平台连接...

Posted by Li Yucang on October 17, 2023

页面首屏性能优化

从零开始做首屏性能优化

页面首屏性能优化背景页面性能一般可以分为两类，一类是首屏性能，另一类是运行时性能。前者衡量的是页面从加载开始到可以稳定交互的性能情况，后者衡量的是页面稳定后到页面关闭的性能情况。本文主要讨论首屏性能。在做性能优化这个事项之前，我们得先知道我们做的这个事情是否有价值。用户体验金字塔先来看一个用户体验金字塔，大家觉得对用户体验影响最大的内容是啥？页面的颜色? 页面...

Posted by Li Yucang on August 28, 2023

页面可视化搭建实践

低代码引擎和生态建设实战及思考

页面可视化搭建实践活动页面开发之痛活动页面特点前端业务中, 经常需要开发产品介绍页/营销页/活动页/图片展示页等页面. 这类需求有以下几个特点: 页面类似: 页面布局和业务逻辑较固定. 需求高频: 每周甚至每天有多个这种需求. 迭代快速: 开发时间短, 上线时间紧. 开发性价比低: 开发任务重复, 消耗...

Posted by Li Yucang on August 17, 2023

微前端技术原理

微前端之背景与实践

微前端技术原理微前端最早于2016年在 Micro-Frontends 被提出，并建⽴了早期的微前端模型。微前端的命名和能⼒和微服务有类似之处，微服务与微前端，都是希望将某个单⼀的单体应⽤，转化为多个可以独⽴运⾏、独⽴开发、独⽴部署、独⽴维护的服务或者应⽤的聚合，从⽽满⾜业务快速变化及分布式多团队并⾏开发的需求。如康威定律(Conway’s Law)所⾔，设计系统的组织，其产⽣的设计...

Posted by Li Yucang on August 5, 2023

深入Chrome扩展开发

Chrome扩展(插件)开发全攻略

深入Chrome扩展开发前言近几年，随着 IE 浏览器的落幕，Chrome（包括使用Chrome内核的浏览器）其实质上已经垄断整个浏览器行业了，就连微软的 Edge 都用上了 Chrome 内核。可以说，Chrome 的标准，事实上就可以看做是行业标准了。可以预见，Chrome 的发展前景将会非常广阔。而提到 Chrome 就绕不开它的扩展，或者叫插件（Chrome Extens...

Posted by Li Yucang on July 24, 2023

权限系统设计

B端产品如何设计权限系统

权限系统设计前言现代经济学理论认为，企业本质上是“一种资源配置的机制”，其能够实现整个社会经济资源的优化配置，降低整个社会的“交易成本”。权限管理系统的本质是企业内部或企业之间的资源在B端产品上以特定机制配置的映射；所以权限管理系统的贴身情况也是衡量产品商业模式好坏、用户价值高低的一杆标尺。权限管理系统的设计中常遇到的问题有：配置不规范，系统基础不稳，拓展...

Posted by Li Yucang on July 18, 2023

详解微服务架构

一文吃透何为微服务、网关、服务发现/注册

详解微服务架构通常跟微服务相对的是单体应用，即将所有功能都打包成在一个独立单元的应用程序。从单体应用到微服务并不是一蹴而就的，这是一个逐渐演变的过程。本文将以一个网上超市应用为例来说明这一过程。最初的需求几年前，小明和小皮一起创业做网上超市。小明负责程序开发，小皮负责其他事宜。当时互联网还不发达，网上超市还是蓝海。只要功能实现了就能随便赚钱。所以他们的需求很简单，只需要一个网站挂...

Posted by Li Yucang on July 15, 2023

模块联邦实战

代码复用新革命

模块联邦实战 webpack5 的 Module federation 对于深受多应用伤害的人来说，着实让人眼前一亮，这篇文章就带你了解我们项目遇到的困境以及 Module federation 可以如何帮助我们走出这个困境。背景多应用场景对于一个互联网产品来说，一般会有不同的细分应用，比如腾讯文档可以分为word、excel、ppt等等品类，抖音 PC 站点可以分为短视频站点...

Posted by Li Yucang on July 11, 2023

Li Yucang