silvia_frontend-优快云博客

原创夯实前端基础之CSS篇

盒模型的转换方式（标准盒模型） |border-box（IE盒模型）;单位长度（通常指每英寸）所包含的像素数量经典设备宽高, 物理像素=>1242/414=3=> 逻辑像素：物理像素 = 1：3 =>像素密度3=> 3倍屏Block Formatting Context 块级格式化上下文，规定内部的块级盒子的布局方式，独立的渲染区域，与外面的元素相互隔离，互不影响。如何触发BFC？根元素（html）：本身就是一个BFC浮动元素（float不为none。

2025-01-10 19:30:26 1122

原创什么是Shadow DOM？和普通DOM树有什么区别？

天然与用户隔离，真正意义上的CSS scope。标签，我们通常只能在DOM结构中看到一个。和普通DOM树有什么区别？的时候，能看到它真正的结构。标签，但在设置中选择显示。- 原生规范，无需框架。

2025-01-08 15:46:18 223

原创夯实前端基础之HTML篇

概念h5提供的标签，允许用JavaScript在画布上绘图（形状、线条、曲线、方框、文本和图像，以及颜色、旋转、透明度和其他像素操作）canvas是基于像素的，有一个二维的网格系统，原点为（0，0）在左上角，x轴水平向右，y轴垂直向下。与SVG相比，SVG是可缩放矢量图形，使用XML来描述图形，可以方便的缩放，修改。canvas绘制的图形基于像素修改比较困难。使用场景游戏开发：简单的休闲游戏，如连连看，绘制图形。可视化开发：柱状图，折线图等各种图表。

2025-01-08 15:42:30 1237

原创秒懂：使用js验证hash, content hash , chunk hash的区别

这篇文章我们通过js验证了一下hash, content hash , chunk hash的区别，并对比了一下webpack中的使用场景，希望对对webpack这里配置有疑惑的伙伴有帮助。场景：这种块哈希的计算方式常用于大型文件传输等场景，在传输或存储过程中可以分别验证每个块的完整性，通过对比每个块的哈希值与原始的块哈希是否一致来判断块数据是否准确。改变txt文件中的后面一点内容，然后观察到前面的chunk的hash都没变，只有后面的两个hash改变了。

2024-12-05 17:03:43 1043

原创 getBoundingClientRect介绍及使用场景

getBoundingClientRect是一个 DOM 元素的方法，用于获取元素相对于视口（viewport）的位置和尺寸信息。它返回一个DOMRect对象，这个对象包含了元素的左上角和右下角的坐标（相对于视口），以及元素的宽度和高度等属性。

2024-12-02 20:40:07 607

原创 ElTooltip虚拟触发+initGlobalState实现qiankun主应用与子应用组件共享

有时候我们想把 tooltip 的触发元素放在别的地方，而不需要写在一起，这时候就可以使用虚拟触发。这就比较符合我们的需求，触发的元素在子应用，触发后显示的元素在主应用。getBoundingClientRect是一个 JavaScript 中的 DOM API 方法，它返回一个 DOM 元素的大小及其相对于视口（viewport）的位置信息。这个方法在处理页面布局、元素定位以及碰撞检测等场景中非常有用。例如，在一个很长的页面中有一个固定位置的导航栏，当页面滚动时，可以通过getBoundingClient

2024-12-02 19:54:02 842

原创 qiankun实现主应用与微应用间通信的常用方式

原理：利用浏览器的事件机制，主应用和微应用可以通过发布 / 订阅自定义事件来传递消息。例如，主应用可以发布一个事件，微应用订阅这个事件并在事件触发时执行相应的操作，反之亦然。主应用App.vue文件：detail: {message: '这是主应用发送的消息'});子应用App.vue文件console.log('微应用收到消息:', event);});然后运行在页面上点击按钮，向子应用发送消息，控制台就能看到子应用收到了。

2024-11-29 22:27:04 961

原创 qiankun+vite+vue3从零搭建一个微前端架构系统

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。技术栈无关。微应用可以是你喜欢的任意技术栈，Vue、React or Angular…独立部署独立运行。微应用之间状态隔离。

2024-11-28 10:21:02 1106

原创 cloneDeep 与 computed “联手搞破坏”：揭开不当使用导致性能崩溃的真相

typeScript既然用了ts，就要遵循它的规则，传值时候类型一定要统一，避免带来一些不必要的问题。cloneDeep深拷贝要慎重使用，它会递归地遍历对象的所有属性，如果对象结构很复杂，有多层嵌套的对象、数组等，这个过程会消耗大量的时间和内存。在一些情况下，深拷贝可能会破坏对象之间原有的引用关系。computed使用computed就是想利用它缓存能节省开销的特性，但是有些情况下使用不当反而会带来性能问题，比如复杂的逻辑计算，依赖的参数变化较多，不必要的计算等。

2024-11-19 15:36:49 972 1

原创跨团队合作之如何使用 Koa 为自己的前端项目起一个 node 服务

工作项目中遇到这样一个问题：我们的项目是由一个主应用和很多微应用组成，主应用由我们团队开发，微应用有很多不同 Team 开发，微应用 Team 想运行主应用测试，但是又不能把源代码给他们，那如何方便合作，提高效率呢？这种情况下，我们就可以新建一个新的 node 项目，使用 koa 为我们的中台项目起一个 node 服务，供其他 Team 调试，自测。

2024-11-12 19:44:28 235 1

原创面试：bind原理及手写bind和apply

将newBind挂载到Function的原型上，这样所有函数都能调用该新方法参数：使用arguments处理入参，数组第一位是this要指向的对象，第二个到最后一个是函数传参返回：返回一个新的函数，返回原函数的结果并继承参数// 1. 挂载到Function.prototype// 记录当前执行态的this// 2. 入参： args特点 => 第一个参数是要绑定this的对象，第二项-最后一项是函数传参// 2.1 因为arguments对象是伪数组，先转成真正的数组。

2024-09-30 20:11:02 442 1