zhoumeina99的博客

原创 一个编辑产品分多步骤

如果用 emit，基础信息页只能 emit 给它的父组件，父组件再层层传，最后还要找到另一个 tab 里的组件实例。用户点“暂不刷新”已经晚了。如果用 emit，很容易变成“基础信息一保存，所有监听者马上收到消息”，这反而会导致没打开目标 tab 也被提醒，或者后台 tab 自动刷新。核心判断是：基础产品信息保存后，价格/模板配置依赖它，但价格/模板页可能已经被用户编辑一半，所以不能偷偷重拉数据。Vue 的 emit 适合“父子组件之间”通信，比如子组件告诉父组件：我关闭了、我选中了、我输入变化了。

原创 分段创建产品，tab 页切换又要保留缓存

文章摘要：针对前端多视图同实体数据新鲜度问题，分析了keep-alive缓存下可能导致陈旧数据覆盖的隐患。指出问题根源在于路由缓存机制与数据初始化时机不匹配，提出基于事件通知、版本控制与冲突校验的解决方案：通过发布订阅模式实现同产品更新感知；保留用户草稿时进行局部合并刷新；利用版本号与保存前校验处理跨设备并发。该方案适用于后台系统、多标签SPA等需维护数据一致性的场景。（149字）

原创 前端串行合成流程 + 每张图上传接口

摘要 针对图片处理流程的性能优化分析，实测数据显示当前保存操作耗时约30.6秒，主要瓶颈在于前端串行合成和图片上传环节。优化建议包括： 上传优化：检查后端/file/upload接口，针对小于1MB的WebP图片4秒上传时间过长的问题，可考虑直传COS或批量预签名方案 前端流水线改造： 解耦合成与上传步骤，实现合成第2张时上传第1张的并行处理 采用最多2个Worker的线程池方案，避免内存溢出 优化数据传输方式，避免使用20MB的PNG base64字符串中转 内存管理： 采用ImageBitmap/Arr

原创 如何保证不同位置切换合成底图的渲染顺序

本文提出了一套防止UI渲染过程中出现旧画面残留的解决方案。核心思路是通过严格的校验机制确保只有当前目标面的最终渲染结果才能展示。具体措施包括：1) 使用目标Key校验当前画面是否符合预期；2) 切换前立即进入pending状态并清空旧画布；3) 调整状态变更顺序，先pending再修改状态；4) 强化图片校验条件，必须匹配目标URL；5) 避免使用fallback尺寸布局；6) 为recolor资源添加Key解决异步竞态问题。这些修改有效解决了旧canvas残留、中间状态闪烁等UI问题。

原创 设计器模版底图，一直渲染错误，是因为第一张图变形后内存中图片数据被改了，其他尺码一直错误

这其实是你们现在更需要的组合：不是只看 decode()，而是再确认“这次 decode 对应的还是当前这张图”。再确认“这次 decode 对应的还是当前这张图” 是怎么做到的，详细列举代码我直接从现在这次改动的代码里，把"确认图片身份"的完整链路列出来，这样你能看到每一步是怎么校验的。好，现在我完整列举"确认当前 decode 对应的还是那张图"的全套代码。

原创 【无标题】设计渲染时序错乱的问题

已使用 Chrome Devtools Image 已运行 18 条命令,已使用 Chrome Devtools 复现结果已经很明确：business 第一次 S 的蓝框还在相对正确的位置，切到 M 后再切回 S，效果图蓝框中心 Y 从约 0.593 被改成了 0.500，也就是被夹到画布中心。还是图片未加载，图片有什么问题，如何保证图片加载成功后，再做下一步处理，现在的代码还会出现渲染错乱的问题吗？这次修复后，特定的“新尺码图片未测量，旧 stage 抢先消费 raw 坐标”问题应当已经被挡住。

原创 懒加载图片

import {computed,onMounted,ref,useAttrs,});});});??});if (!});if (!el) {return;return;},});});</script><template><div<Image:src="src":alt="alt"/></div></style>

原创 缩放，旋转，拖拽用css 就行了，为什么都要用canvas

可以用 CSS 做“看起来能拖拽/缩放/旋转”的交互，但这个页面不仅是展示，还要做高精度的裁剪、测量与生成真实可上传的图片，所以用了 canvas（Konva + 原生 canvas）。CSS 只能影响 DOM 外观，不能产出最终位图、也不擅长做跨区域的裁剪/拼合与像素级计算。如果只是“页面上能拖拽/缩放/旋转看着对”，CSS 是够的；但一旦涉及“印刷尺寸、裁剪、跨区域映射、最终导出”，canvas 就是必须的，所以这里才会在多个关键环节使用。

原创 设计器区域下图片有改动才导图的实现

● 如果把蓝框尺寸也算进去，就会出现“只加载了一下模板详情，什么都没改，但蓝框换算出来的宽高稍微变了一点，于是被当成区域有改动”的问题。● 你的需求只关心“蓝框里面的图片有没有变”，蓝框本身（例如从模板详情换算厘米）偶尔会有一点点数值变化，但业务上不算“图片变了”；○ 如果 level 一样，再按 materialImageId/src/id 字典序排，保证签名的顺序稳定。// 原始签名，当前版本只作为辅助信息。● 后面再次保存时，拿“当前签名”和“原始签名”对比，就能知道这个区域有没有被改过。

原创 设计器分析

【代码】设计器分析。

原创 React 组件在 Vue 组件内实时渲染

问题答案是否编译运行？❌ 不是预编译，是实时运行需要加载React？✅ 是的，必须加载 React + ReactDOM开发vs生产？开发：大文件+Source Map<br>生产：压缩+分块+优化性能影响？初次加载：+140KB (gzipped)<br>后续访问：强缓存推荐方案？打包React到vendor，路由懒加载实际上，这是一个运行时集成方案，React和Vue在浏览器中共存运行，通过Veaury实现数据和事件的双向通信。

原创 React封装的Konva

, []);if (!}, [line]);if (!}, [line]);}, []);

原创 图片异步加载，渲染有一定的延迟，canvas的渲染时机不确定

图片异步加载，渲染有一定的延迟，canvas的渲染时机不确定，尺寸偶发性与图片不一致。方案 2：使用 requestAnimationFrame 轮询（备选）方案 1：使用 ResizeObserver 监听图片尺寸变化（推荐）// 使用 ResizeObserver 确保尺寸稳定后更新舞台。// 图片加载完成后取消观察（避免内存泄漏）// 最多检查 50 次（约 800ms）// 如果尺寸连续 3 次不变，认为稳定。// 1秒后断开（尺寸应该已稳定）// 旧浏览器可能不支持，忽略。

原创 流程引擎复杂联动实现方案

多对多复杂联动的实现关键响应式依赖管理：通过 DAG 管理依赖传播路径精准更新机制：基于 Proxy 的细粒度依赖追踪分层架构设计声明式配置处理简单规则（JSON Schema）命令式代码处理复杂业务逻辑（Effects）典型性能瓶颈解决方案大数据量场景：虚拟滚动 + 分页加载高频更新场景：批量更新 + 防抖处理复杂计算场景：Web Worker 分离运算通过合理运用 Formily 的响应式系统和优化策略，即使面对企业级复杂表单场景，也能实现高效、稳定的多对多联动。

原创 Lighthouse 和 Performance 面板

性能面板分析，页面函数调用时长

原创 在 Vue3 中，组件可以通过递归的方式 自身渲染自身

Vue3 支持组件在其模板中直接引用自身，但需要注意递归的终止条件，以避免无限递归。递归组件可能会导致性能问题，尤其是在数据嵌套层级很深时。必须确保递归有终止条件，否则会导致无限递归和栈溢出。通过递归组件，可以轻松实现复杂的嵌套结构渲染！必须确保递归有终止条件，否则会导致无限递归。在组件模板中，直接使用组件自身的标签名。语法，可以通过文件名隐式定义组件名称。属性定义组件名称，以便在模板中引用。属性定义名称，才能在模板中引用自身。在模板中引用自身时，组件必须定义。递归组件适用于树形结构数据的渲染。

原创 富文本通常需要前端渲染而不支持纯服务端渲染的核心原因在于其动态交互性、浏览器依赖性和实时性需求

用户进入编辑模式时，前端JavaScript初始化富文本编辑器（如Quill、TinyMCE），接管DOM操作。富文本编辑涉及大量细粒度操作（如每秒多次的键盘输入），若每次操作都通过服务端渲染，会产生海量HTTP请求。富文本内容可能包含复杂的HTML结构（如表格、嵌套列表、自定义样式），前端可以直接解析并渲染。因此，富文本的核心编辑功能必须依赖前端渲染，而服务端仅适合渲染静态内容或初始状态。若通过服务端渲染，每次输入需发送请求到服务器，再返回更新后的HTML，体验极差。

原创 函数导致多次刷新组件

直接在 :is 中调用 defineAsyncComponent 不会缓存组件，因为每次渲染都会创建一个新的异步组件实例

原创 《小小科学家的爱国梦》

小明妈妈：小朋友们，这是飞机的机翼，仔细观察，可以发现机翼的上表面是凸起的，当机翼上、下表面产生气压差时，就会生成“升力”。无人机游戏，无人机服务员，无人机烟花，火星探测无人机，扫雷无人机，手势操控无人机，蜜蜂无人机，无人机出租车，快递无人机，急救无人机，农用无人机，水中无人机，救援无人机，无人机足球等。小明妈妈：对呀，我们国家有很多厉害的科学家，他们发明了很多先进的科技，让我们的国家变得更强大。小明妈妈操作遥控器的左右侧操纵杆，调整无人机的飞行方向，还有油门杆调节无人机的速度。小明同学：原来如此。

转载 js从编译到执行过程

之前写博客，经常需要引用一些基础的内容，每次都花不少时间找合适的文章，索性花点时间自己写。于是有了这个系列的文章。执行上下文是对JavaScript代码执行环境的一种抽象，每当JavaScript运行时，它都是在执行上下文中运行。全局执行上下文— 这是默认或者说基础的上下文，任何不在函数内部的代码都在全局上下文中。它会执行两件事：创建一个全局的window对象（浏览器的情况下），并且设置this的值等于这个全局对象。一个程序中只会有一个全局执行上下文。函数执行上下文— 当执行一个js函数时，js。

转载 页面渲染：性能分析

Chrome DevTools的performance面板可以记录和分析页面在运行时的所有活动。配合无痕模式，可以避免chrome插件的影响。

转载 promise 或 async 函数作为 forEach()

参数，最好对造成的执行顺序影响多加考虑，否则容易出现错误。则表示其后面的表达式需要等待结果，函数最终返回一个。函数的语义，它表示函数中有异步操作，我们可以使用 for…可能没办法到达预期目的哦。这样就能输出预期结果。

转载 浏览器工作原理和实践

《浏览器工作原理与实践》是极客时间上的一个浏览器学习系列，在学习之后特在此做记录和总结。未激活的页面，setTimeout执行最小间隔是1000毫秒。为了协调这些任务有条不紊地在主线程上执行，页面进程引入了消息队列和事件循环机制，渲染进程内部会维护多个消息队列，比如延迟执行队列和普通的消息队列。把这些消息队列中的任务称为宏任务。

转载 WebAssembly

一旦把 SessionStack 整合进网络应用或网站的生产环境，它会开始记录所有的一切：所有的 DOM 变化，用户交互，JavaScript 异常，堆栈追踪，失败的网络请求和调试数据。当你想在生成的 JavaScript 代码中查询特定的行和列的代码的时候，可以在源码映射中进行查找以获得代码的原始位置。现在，我们将会剖析 WebAssembly 的工作原理，而最重要的是它和 JavaScript 在性能方面的比对：加载时间，执行速度，垃圾回收，内存使用，平台 API 访问，调试，多线程以及可移植性。

转载 浏览器工作原理与实践

好了，今天就讲到这里，下面我来总结下今天所讲的内容。如果有一些确定好的任务，可以使用一个单线程来按照顺序处理这些任务，这是第一版线程模型。要在线程执行过程中接收并处理新的任务，就需要引入循环语句和事件系统，这是第二版线程模型。如果要接收其他线程发送过来的任务，就需要引入消息队列，这是第三版线程模型。如果其他进程想要发送任务给页面主线程，那么先通过IPC把任务发送给渲染进程的IO线程，IO线程再把任务发送给页面主线程。消息队列机制并不是太灵活，为了适应效率和实时性，引入了微任务。

转载 了解浏览器是如何工作的，能够让你站在更高的角度去理解前端

引起回流的因素，第一是dom节点增加或者是删除，第二是元素的尺寸，边距，填充，边框，宽高，第三dom节点位置变化，第四dom节点display显示与否，第五，页面渲染初始化，浏览器窗口尺寸变化，向浏览器请求某些样式信息。前端是个很大的概念，是用户能够看到，直接接触到的层面都算是前端，比如IOS客户端界面，安卓客户端界面，网页界面，甚至PC/MAC 桌面端软件界面，现在的说法一般是指Web前端，也就是针对于网页端开发的工作。多线程可以并行处理任务，但是线程是不能单独存在的，它是由进程来启动和管理的。

转载 宏任务和微任务

我们用js建几个div，之后添加到一个节点下，再立刻打印一下这个节点下子元素的个数，这几行执行完之后，我们可以看出打印了5，页面上也显示了五段话，这没有什么问题。有些了解的可以看出，先打印出100 400肯定是没有毛病的了，问题应该就出在200跟300上，它俩之间300为什么要比200打印的早呢？会阻断js执行，也会阻断DOM渲染，利用这一点，我们可以直观的去看出谁先谁后和DOM渲染在什么时候执行的。首先我们知道，js是单线程了，按照顺序一行一行执行，如果某行报错则停止后续执行，然后就是。

原创 浏览器重排重绘

转载 CSS animation 和 transition 的性能探究

CSS animation 和 transition 的性能探究

转载 JavaScript ArrayBuffer和Blob

图片来源：https://zhuanlan.zhihu.com/p/97768916这篇主要介绍Blob和ArrayBuffer相关的一些API之间的关系和用途，并不会详细介绍每个属性和方法，更多的是想讲述清楚一些概念。

转载 在nginx上部署vue项目(history模式)；

route history模式为什么要重定向页面

原创 make sure to exclude it from component resolution via compilerOptions.isCustomElement

If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.TypeError: Cannot set properties of undefined (setting 'Fld_ST_00020_r')一直报这个错误，找了很久，才发现原来一个标签写错了，太粗心了template 写成了 tempalte 导致认为.

原创 vue3 Cannot set properties of undefined (setting ‘Code‘)

需要动态添加属性，一直报错不能添加某个属性为undefined，原来我设置的是一个字符串ref()默认是普通类型，需要变成ref({})默认对象的才行 let formRule = ref<any>({}); // 保存input表单验证规则function changedItem(key, val){ formRuleData.value[key] = val }报错图片如上...

转载 vue页面添加锚点

本文实例为大家分享了vue实现锚点定位的具体代码，供大家参考，具体内容如下这里主要是实现了一个简单的滚动触发锚点高亮，以及点击锚点触发滚动的功能如果是获取浏览器的滚动高度，各个浏览器有所差异，使用以下几种方式：Chrome： document.body.scrollTopFirefox： document.documentElement.scrollTopSafari： window.pageYOffset我这里是局部元素滚动，因此稍有差异。先附上html及css代码块：scroll-

转载 2021中高级前端面试题总结

总结了一下最近面试遇到的一些题目，比较偏React。1.HTML中居中的方式text-align:center方式，水平居中块级元素中的行内元素，如inline，inline-block margin:0 auto方式，这种对齐方式要求内部元素是块级元素，并且不能脱离文档流（如设置position:absolute）,否则无效。 display:table-cell，配合width，text-align:center,vertical-align:middle让大小不固定元素垂直居中,这个方式将

转载 什么是脏检查？

脏检查的全名是 脏数据检查。是AngularJS命名的。脏数据也就是产生了变化的数据。脏检查因一个原因而被称为脏。它定时检查而不是直接监听属性变化。我们把这个检查称为摘要周期(digest)。angularJS监测对象变化不是像vue.js那样通过Object.defineproperty这种接口，而是在某些情况下制定策略，通过复制保存一份数据，进行快照对比，来监测变化。脏检查这个东西，其实在三大主流前端框架中或多或少都有涉及。React 每次生成新的Virtual DOM，与旧Vi..

转载 JS常用内置方法1——slice()和splice()的区别

JS常用内置方法1——slice()和splice()的区别　　以前还是纯小白的时候，总会搞混JS数组的 slice() 和splice() 方法。因为这2个方法名字太像了，就差一个字母，语法也有类似之处。　 现在久了没用，有时候也会忘记，所以做一个总结来区分一下。　　slice()　　　　slice()定义：从已有的数组中返回你选择的某段数组元素　　　　 slice()语法：arrayObject.slice(start,end)　　　　　　注：　　　　　　①...

转载 理解并实现PubSub模式

理解并实现PubSub模式假如我们正在构建一个类似于 Google Docs 的应用程序，当用户按下一个按键时，需要做的事情有很多： 新字符显示到屏幕上；插入点向后移动；将本次动作加入到撤销的历史记录中； 保持与服务器同步；拼写错误检查；统计字数和页数等等。按照传统的做法，假如我们监听 keypress 事件，并在一个处理中完成所有的任务，这想想都觉得可怕了。 那么有没有什么方法可以更好的解决这个问题，答案就是分布式事件。PubSub 模式，是 Publish/Subscribe 的缩写，意为.

转载 前端开发怎么用node和nginx？

node和nginx组合那些事对于前端开发，了解nodejs和nginx是有必要的。前端开发者自己构建项目时，更多的是自己使用nodejs+mongoDB搭建后端接口，使用nginx作为反向代理服务器。为何选用nginx？对于前端来说，我觉得它是便于学习的，方便配置的。下面是node和nginx组合的一点心得。nodejsnodejs搭建简易的前端服务接口...

转载 node搭建简单的本地服务器

首先要安装node，方法很多，可以去网上找找，可以直接去官网下载安装，新版本的node是自带npm的；安装好以后，新建一个js文件，名为server.js： 1 let http = require('http'); 2 let fs = require('fs');//引入文件读取模块 3 4 let documentRoot = 'E:/webserver'; 5 //需要访问的文件的存放目录 6 7 let server= http.createServer(functi