webLion200

2025年3月20日

摘要：背景：公司的后台管理系统存在严重的性能问题，大部分是接口请求时间过长导致，但前端也确实存在很大的问题。比如：未对状态进行缓存，而是不同组件多次调用同一个接口项目入口文件过大，首屏加载时间过长 vue路由被破坏，直接在路由拦截函数里面进行大量业务逻辑判断静态资源存储过大，有的图片甚至超过5M大小阅读全文

posted @ 2025-03-20 10:16 webLion200 阅读(39) 评论(0) 推荐(0)

2025年3月19日

referrerpolicy-以最小的成本实现系统的图片上传

摘要：背景系统上传图片一般有以下三种方案：购买云存储（比如 AWS S3、阿里云 OSS、腾讯云 COS），获取图片URL 直接将图片上传到服务器，存储在本地作为静态资源使用第三方的图片服务（比如有道、博客园），借用对方资源结合本系统需求：自建博客尽可能减少预算，方案1放弃；方案二似乎可行，但随着阅读全文

posted @ 2025-03-19 15:48 webLion200 阅读(64) 评论(0) 推荐(0)

一次100W+数据级别的渲染优化

摘要：组织架构的列表页有关于公司人员架构的树形结构展示，某大客户有10万员工，造成组织架构的列表渲染卡顿，用户点击经常造成页面崩溃。需求背景：左边是树形目录，多层级展示，层级结构未作限制。点击左边目录会展示对应的列表，点击右边对应用户的组织属性，也会联动左边的目录展示。技术背景：vue2 + elem 阅读全文

posted @ 2025-03-19 15:39 webLion200 阅读(82) 评论(0) 推荐(0)

2022年7月26日

build-mini-react

摘要： createElement 原码： const element = ( <div id="foo"> <a>bar</a> <b /> </div> ) const container = document.getElementById("root") ReactDOM.render(element 阅读全文

posted @ 2022-07-26 15:13 webLion200 阅读(37) 评论(0) 推荐(0)

2022年6月30日

typescript 高级用法

摘要：运算符非空断言运算符 ! !放在变量名或函数名后，用来强调该变量名或函数名非null|undefined。这个符号特别适用于我们已经明确知道不会返回空值的场景。 function onClick(callback?: () => void) { callback!(); // 参数是可选入参，加阅读全文

posted @ 2022-06-30 19:43 webLion200 阅读(265) 评论(0) 推荐(0)

2022年3月25日

react-router

摘要：单页面应用单页面应用是使用一个 html 前提下，一次性加载 js ， css 等资源，所有页面都在一个容器页面下，页面切换实质是组件的切换。路由原理请看https://www.cnblogs.com/renzhiwei2017/p/16051483.html React的路由 History 阅读全文

posted @ 2022-03-25 10:41 webLion200 阅读(81) 评论(0) 推荐(0)

2022年3月24日

前端路由

摘要：前端路由主要分为两种模式：hash 和 history。这两种模式都不会触发页面的刷新 Hash模式 hash模式就是用#号将路由的路径拼接在 url 后面，当#号后面的路径发生改变时，会触发 onhashchange 事件。 <!DOCTYPE html> <html lang="en"> <h 阅读全文

posted @ 2022-03-24 19:46 webLion200 阅读(72) 评论(0) 推荐(0)

webpack原理

摘要： Tapable webpack最主要的两大模块：负责编译的Compiler和创建bundle的Compilation。而这两个模块都是继承自Tapable。 Tapable内部通过对事件的注册监听，触发webpack生命周期的函数方法。 Compiler 每次执行webpack构建的时候，在webp 阅读全文

posted @ 2022-03-24 09:47 webLion200 阅读(243) 评论(0) 推荐(0)

2022年1月4日

原理篇：事件系统

摘要： React为什么要实现一套自己的事件系统？ A：为了兼容各浏览器对事件处理的差异性/ 冒泡和捕获冒泡：事件从最内层的元素开始，一直向上传播，直到document对象。捕获：事件从最外层开始，直到最具体的元素。 addEventListener(event, function,useCapture 阅读全文

posted @ 2022-01-04 09:27 webLion200 阅读(189) 评论(0) 推荐(0)

原理篇：fiber

摘要：一、Fiber基础什么是fiber fiber是react中最小的执行单位，可以理解为fiber就是虚拟DOM。更新 fiber 的过程叫做 Reconciler（调和器） element,fiber, DOM 之间的关系？ element 就是jsx语法，通过React.createEleme 阅读全文

posted @ 2022-01-04 09:27 webLion200 阅读(771) 评论(0) 推荐(0)

公告