- 博客(29)
- 收藏
- 关注
RSS订阅原创 前端面经-浏览器原理 & 性能优化篇--Event Loop、宏任务 vs 微任务、浏览器渲染流程、回流和重绘、性能优化指标（FCP、TTI、LCP）、浏览器多进程架构、页面生命周期
Event Loop（事件循环）是 JavaScript 引擎中处理同步与异步任务的一种机制。JavaScript 是单线程语言，只能同时处理一个任务，但它通过 Event Loop 机制，使得异步操作（如定时器、网络请求、Promise）可以非阻塞执行，让我们“看起来像是并发”。CSSOM 是将所有样式信息（包含外部样式、内联样式）解析为结构化的对象规则树，供后续渲染逻辑使用。外部样式表（link 标签）内联样式（style标签）行内样式（style属性）JavaScript 动态样式（如。
2025-05-08 21:20:53
833
原创 前端面经--网络通信与后端协作篇--XMLHttpRequest、axios、fetch、AbortController
fetch场景适用性简单数据请求✅ 适合精细控制请求头/体✅ 灵活前端自己封装统一请求模块✅ 推荐项目已有 axios 等库❌ 不建议重复使用 fetchAxios 是一个基于 Promise 的浏览器和 Node.js 的 HTTP 客户端。它封装了（XHR）请求，在语法、功能、兼容性和错误处理方面都更友好，是前端项目中使用最广泛的请求库之一。
2025-05-08 15:17:42
1010
原创 前端面经-网络与安全基础篇--HTTP/HTTPS、缓存、跨域、CDN、Cookie、Token、Session、JWT、XSS、CSRF 攻击原理及防护、CSP
✅ 定义：HTTP（超文本传输协议）是一种应用层协议，用于 Web 浏览器和服务器之间进行通信，是 Web 的基石。简单理解：你在浏览器访问网页，背后其实就是浏览器通过 HTTP 向服务器“请求”网页内容。HTTPS =它是 HTTP 的“加密版本”，所有数据在浏览器与服务器之间都是加密传输的，用它保证：传输的数据被加密（防窃听）内容完整性校验（防篡改）服务器真实身份验证（防伪造）✅ 定义：是一种面向连接、可靠传输的传输层协议，它保证数据包按顺序、无丢失、无重复地传输到目标主机。
2025-05-07 20:53:20
828
原创 前端面经-VUE3篇（五）--内置组件
你也可以向让你自己控制使用的 CSS 类名，而不是默认的等。结合 Animate.css 第三方库：👉 Vue 不会再用默认的 .v-xxx 类，而会用你传的 class。是 Vue 提供的内置组件，用于在列表中的元素添加“进入/离开/移动”的动画效果。<Teleport>场景描述弹窗 / 模态框避免被父组件的样式影响，如Toast / 消息提示放在固定区域（如右上角）不受限制下拉菜单 / 选择器保证在最上层显示、避免被遮挡多层嵌套时需要脱离结构限制比如点击卡片出现独立对话框。
2025-05-07 16:02:08
874
原创 前端面经-VUE3篇（四）--pinia篇-基本使用、store、state、getter、action、插件
在 Pinia 中，store 是用来集中管理状态、逻辑和数据的地方。它就像是一个“全局的数据容器”，供多个 Vue 组件共享和操作。每一个storestate（状态数据）getters（计算属性）actions（行为函数）Store 是用定义的，它的第一个参数要求是一个独一无二的名字。这个名字，也被用作id，是必须传入的， Pinia 将用它来连接 store 和 devtools。为了养成习惯性的用法，将返回的函数命名为use...是一个符合组合式函数风格的约定。
2025-05-07 15:25:56
992
原创 前端面经-VUE3篇（三）--vue Router（二)导航守卫、路由元信息、路由懒加载、动态路由
路由独享守卫是定义在某一个路由配置项中的钩子函数，只在进入该路由时触发。📌区别于全局守卫，它不会影响其他页面，适合只对特定路由做控制。语法格式// 只会在进入 /admin 时触发next() // 放行} else {next('/no-access') // 重定向组件内守卫是直接定义在组件内部的路由钩子函数，用于在“进入当前组件”、“更新当前组件参数”或“离开当前组件”时执行逻辑。它和全局守卫 / 路由独享守卫相比，更适用于组件内部逻辑控制，如弹窗提示、数据加载、组件状态管理等。
2025-05-04 20:15:37
903
原创 前端面经-VUE3篇（三）--vue Router（一)基本使用、route和router、动态路由、路由匹配算法、嵌套路由、命名路由、命名视图、重定向与别名、路由组件传参、路由的历史模式
route是“你现在在哪”，router是“你怎么去别的地方”。名称说明$route表示当前“路由信息对象”，包含当前路径、参数、查询等$router表示“路由控制器实例”，用于跳转、返回、导航等行为两个都是 Vue Router 自动挂载到组件实例（即this）上的属性。只在使用选项式 API（非）时有效。很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个User组件，它应该对所有用户进行渲染，但用户 ID 不同。
2025-05-04 18:27:21
745
原创 前端面经-VUE3篇（二）--vue3组件知识（二）依赖注入、异步组件、生命周期、组合式函数、插件
组件不是立即加载的，而是在需要时才异步地被加载。它的核心思想是：“用的时候才加载”，这对以下场景非常有用：页面拆分（如路由页面）大型组件库懒加载多个组件中只有部分在运行中用到组合式函数是一个以useXxx()命名的普通 JavaScript 函数，在其中使用 Vue 的组合式 API（如refreactivewatchcomputed等），然后将这些逻辑封装并返回供多个组件使用。简化理解就是：“把多个组件中重复的响应式逻辑、状态、侦听器等代码封装成函数，复用它们。
2025-05-03 22:20:04
816
原创 前端面经-VUE3篇（二）--vue3组件知识（一）组件注册、props 与 emits、透传、插槽（Slot）
propsemitVue 在v-model修饰符功能.trim去除字符串前后空格.number将输入转换为数字.lazy延迟到change时才更新在 Vue 原生组件中，这些由 Vue 自动处理。但在自定义组件中，我们需要显式实现支持这些修饰符。透传属性指的是父组件向子组件传递的、子组件没有声明为 props 的属性。Vue 会将这些属性自动收集到$attrs中，你可以选择是否让它们传递到组件的某个元素上。最常见的例子就是classstyle和id。示例说明：-- 父组件 -->
2025-05-03 21:10:46
1314
原创 前端面经-VUE3篇（二）--vue3基础知识（二）计算属性(computed)、监听属性（Watch）
计算属性（Computed Properties）是 Vue 中一种特殊的响应式数据，它能基于已有的响应式数据动态计算出新的数据。计算属性有以下特性：自动缓存：只有当它依赖的响应式数据发生变化时，才会重新计算。响应式更新：依赖的数据变化后，会自动触发计算属性重新计算。简化模板：在模板中使用计算属性可以减少复杂逻辑，让模板更清晰、易读。简单来说：注意默认计算属性是只读的，但也可以定义成可写。当你尝试修改一个计算属性时，你会收到一个运行时警告。只在某些特殊场景中你可能才需要用到“可写”的属性，你可以通过同
2025-05-02 21:48:52
1093
1
原创 前端面经-VUE3篇（一）--vue3基础知识- 插值表达式、ref、reactive
在 Vue 中，指令（Directives）是带有前缀v-的特殊属性，用于在模板中提供特定的行为或功能。Vue 的指令本质上是一种模板语法扩展。用来在模板中声明式地控制 DOM 的行为、渲染逻辑以及响应式交互。当内置指令不能满足需求时，用户可以创建自定义指令。注册示例（Vue 3.x）el.focus()})指令的生命周期钩子（自定义指令专用）钩子函数描述created指令绑定元素后调用元素插入到 DOM 前调用mounted元素插入到 DOM 后调用更新前调用updated更新后调用。
2025-05-02 20:26:18
1115
原创 前端面经-webpack篇--定义、配置、构建流程、 Loader、Tree Shaking、懒加载与预加载、代码分割、 Plugin 机制
Loader 是 Webpack 的模块转换器，用于将各种非 JavaScript 文件转换为 Webpack 可以理解的模块（JavaScript 模块）。懒加载是指将模块延迟加载——不是在首页就加载，而是在用户需要它的时候再去加载对应资源（chunk）。Webpack 提供了两种注释魔法指令，来控制动态模块的“提前加载行为。
2025-05-01 21:26:43
1339
原创 前端面经-JS篇（四）--回调地狱、promise异步编程、Proxy 与 Reflect 、模块化
提供了一种优雅的方式来处理异步操作，避免了回调地狱问题。
2025-04-24 18:06:51
707
原创 前端面经-JS篇（一）--基础知识（2）对象原型与原型链、深拷贝和浅拷贝、对象的this关键字
构造函数本质上是一个普通的函数，只是它有一个特殊的用法：当你使用new操作符来调用它时，它会创建一个新对象并返回这个对象。在构造函数内部，你通常会用this来为对象添加属性和方法。构造函数通常是一个大写字母开头的函数名，以便与普通函数区分。构造函数内部使用this来为新创建的对象添加属性和方法。构造函数在使用new关键字时，会自动返回一个新的对象。// 定义一个构造函数// 创建一个 Person 的实例// 输出: Alice// 输出: 30我们现在了解构造函数以后，我们就会想。
2025-04-21 15:32:02
807
原创 前端面经-CSS篇(六）---层叠上下文
层叠上下文(stacking context)，是HTML中一个三维的概念。在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的X轴，Y轴以及表示层叠的Z轴。一般情况下，元素在页面上沿X轴Y轴平铺，我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。如果一个元素含有层叠上下文，(也就是说它是层叠上下文元素)，我们可以理解为这个元素在Z轴上就“高人一等”，最终表现就是它离屏幕观察者更近。这里就有个关键属性登场z-index。
2025-04-08 20:56:52
1060
原创 前端面经-CSS篇(五）---布局（3）浮动、table布局、响应式布局
在 CSS 中，float）是一个用于将元素从文档的常规流中移出的布局技术，最初用于实现文本环绕效果（如文本围绕图片）。浮动元素会向左或向右浮动，直到其容器的边界为止。虽然浮动最初主要用于图文排版，但随着时间的推移，浮动也被用作布局的一种手段。然而，浮动布局虽然曾经广泛用于网页布局（特别是多列布局），但它有一些局限性和缺点，因此在现代 CSS 布局中，flexbox和grid等新布局模型已逐渐取代了浮动。
2025-04-08 16:27:07
906
原创 前端面经-CSS篇(五）---布局（2）网格布局（grid）
和控制网格项在列方向上的起始和结束位置。和控制网格项在行方向上的起始和结束位置。可以使用简写和grid-row来同时设置起始和结束位置，简化代码。span关键字用于设置网格项跨越的列数或行数。简写属性grid-area你可以用grid-area。
2025-04-08 14:54:54
633
原创 前端面经-CSS篇(五）---布局（1）正常布局（Normal Flow）、display属性、flex布局
正常布局流（normal flow）是指在不对页面进行任何布局控制时，浏览器默认的 HTML 布局方式。HTML 元素完全按照源码中出现的先后次序显示出现在另一个元素下面的元素被描述为元素，出现在另一个元素旁边被描述为二、display属性display决定了元素在布局流中的，比如它是像段落、块级容器那样独占一行，还是像文字一样内联排布，或者干脆不显示。：一个块级元素会在其前后自动生成换行（与其兄弟块分行），默认情况下它不会与其他元素并排；：能够设置widthheightmarginpadding。
2025-04-07 16:11:59
1025
原创 前端面经-CSS篇(四）---定位
面试官问这些问题，关键想考察你对定位在不同场景下的原理掌握和灵活应用。你回答时要尽量结合示例代码或亲身经历过的布局问题来说明。还会看你对兼容性、实际案例、维护成本有没有一定的认识。
2025-04-06 21:37:55
588
原创 前端面经-CSS篇(三）---伪元素和伪类选择器
伪元素是 CSS 创建的“假元素”，它不是 HTML 中真实存在的标签，是一种由 CSS 创建出来的“虚拟元素节点”，它并不真实存在于 HTML 的 DOM 结构中，但浏览器在渲染时会像处理普通元素一样，把它插入进渲染树中。你可以用来添加一些装饰、内容、布局结构等。::before：用于在元素内容之前插入内容。::after：用于在元素内容之后插入内容。：用于选中文本内容的第一个字母。：用于选中文本内容的第一行。借助::before，我们可以实现很多“视觉增强效果”，无需在 HTML 中多加一层。
2025-04-06 19:02:52
871
原创 前端面经-CSS篇(二）---标准盒模型和IE盒模型、margin（margin合并和margin塌陷）、padding
子元素的垂直margin想“跑出”父元素 → 父元素就塌了！父元素没有实际内容（空），又没有padding或border，就容易发生高度塌陷。解决方法就是给父元素加点“内容”或用overflow处理掉。100vwpadding是给内容加内部空白，它属于盒子自己，会占空间、继承背景色、影响排版。
2025-04-06 17:29:06
666
原创 前端面经-CSS篇(一）---BFC、浮动塌陷
✔️适合用来“在浮动元素下方开始排”，✔️ 而BFC 更强大，它还能：自动包裹浮动内容（防止高度塌陷）阻止外边距折叠创建独立布局区在刚才那个“让文字不环绕浮动”的案例里，确实可以不使用 BFC 也达到目的。但如果你要同时解决多个问题（浮动+margin折叠+高度塌陷），那就建议用 BFC。4、制作两栏布局BFC的区域不会与浮动的元素区域重叠。我们可以利用这个特性来创建CSS中常用的两栏布局（左边宽度固定，右边宽度自适应）。.left {.right {/* 创建BFC */
2025-04-04 22:23:48
855
1
原创 CMake Error at /usr/share/cmake-3.22/Modules/CMakeDetermineCompilerId.cmake:726 (message):
这是因为cmake没有办法识别服务器的架构号，因此在colmap的根目录上的CMakeLists.txt文件添加。set(CUDA_ARCHITECTURES "你自己的架构号就行")安装colmap时报错。
2024-07-05 17:25:09
1563
1
原创 如何在pycharm连接实验室服务器
6.如何想要重新创建同一个新的环境，就按照正常的anaconda的环境创建就可以了。3.点击映射 里面的home文件夹 选择自己对应的文件夹>>新建目录>>确定。4.打开pycharm终端上面的向下的箭头>>新建SSH会话。2.点击+号>>点击SFTP>>创建自己想要建立的名字。1.使用pycharm中的工具>>部署>>配置。
2024-03-16 19:08:24
570
1
原创 如何创建以及标注自己的数据集
不过我是通过Anaconda进行下载的，在我已有的pytorch环境进行以下库的依次安装。我都存放在桌面上的一个名叫winkyyxx的文件夹，里面包含了以后我自己创建和标注的所有数据集。成功啦~点击save即可看到之前创建的文件夹Annotation里面有我们标注图片的XML文件。由于我是准备预测火焰，同时我的数据是png格式，所以我存放在PNGImage文件夹。我的predictive_classes.txt里面存放需要检测的类别。我也不知道为啥会报错，有知道的可以评论告诉我一下。2.创建存放的文件夹。
2024-03-05 21:51:22
388
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人