- 博客(42)
- 收藏
- 关注
RSS订阅原创 Gzip：性能优化
Gzip是Web性能优化中一件简单而强大的武器。通过科学地应用它，我们可以为用户提供更快、更流畅的体验。作为开发者，我们应该：理解其原理： 知道它通过LZ77和霍夫曼编码来高效压缩文本。制定合理策略： 为不同大小的文件采取不同的压缩策略，并善用预压缩。知其局限： 避免对已高度压缩的二进制文件进行无效压缩。希望这篇指南能帮助你在项目中更高效地使用Gzip，让你的网站飞起来！
2025-11-27 01:57:36
803
原创 IntersectionObserver API
scroll 是 “同步事件”，只要用户滚动页面，事件就会 高频触发（每秒几十次），且所有回调逻辑都在 主线程 执行主线程要一边处理你的 scroll 回调（计算元素位置），一边还要处理其他 JS、渲染页面、响应用户操作；一旦回调逻辑复杂（比如遍历多个元素计算位置），主线程就会被 “占满”，导致页面卡顿（比如滚动不流畅、点击没反应）。
2025-11-16 22:31:08
1019
原创 Lodash 的 merge 与 Object.assign差异
如果你使用的是 ES2020+ 环境，还可以考虑原生的实现简单合并，但它本质仍是浅合并，且语法繁琐。对于深合并，Lodash.merge 仍是最稳定、最易用的选择（ Lodash 对边缘场景的处理非常完善，如循环引用、特殊对象等）。
2025-09-20 01:20:36
835
原创 前端实现埋点的方式
Vue中的directive是用来设计自定义指令的，允许直接在DOM元素上添加特殊行为。bind是自定义指令钩子函数之一，它在指令第一次绑定到元素时调用，通常用于初始化设置。directive文档：https://cn.vuejs.org/guide/reusability/custom-directives// 在 main.js 中注册全局自定义指令 track// 埋点逻辑，例如发送请求或记录日志console.log("埋点事件：" + event);
2025-09-07 17:46:20
1160
原创 ES Module 和 CommonJS的区别
前端项目：优先使用 ES Module，配合工程化工具实现树摇和优化。Node.js 项目：新项目推荐 ES Module（“type”: “module”），旧项目兼容 CommonJS。需动态加载模块（如根据条件导入）：可在 ESM 中使用 import() 函数（返回 Promise，支持动态加载），兼具静态分析和动态能力。
2025-08-18 02:04:16
866
原创 Vue的路由模式的区别和原理
Vue Router 提供两种路由模式：Hash 模式和 History 模式。Hash 模式是默认选项，基于 window.location.hash 实现，通过监听 hashchange 事件实现无刷新路由切换，不会向服务器发送请求，兼容性好但URL带#号不美观。History 模式利用 HTML5 History API，通过 pushState 改变 URL 且不刷新页面，但需要后端配置支持，否则直接访问子路由会返回404。两种模式各有优劣：Hash 模式无需服务器支持但SEO不友好，History
2025-07-19 12:50:44
926
原创 vue2和vue3的响应式原理
Vue响应式系统的核心是通过数据劫持建立响应式数据与副作用函数之间的依赖关系。Vue2使用Object.defineProperty实现数据劫持，通过getter收集依赖，setter触发更新；Vue3改用Proxy代理机制，能拦截更多操作类型。两者都依赖副作用函数（如渲染函数、watchEffect等）来收集依赖关系，当数据变化时自动触发相关函数更新。Vue2的响应式原理还包含发布-订阅模式，通过Dep和Watcher管理依赖追踪，其中Dep负责存储订阅者，Watcher作为中介触发更新。相比Vue2，V
2025-07-12 17:38:02
1203
原创 iframe内嵌框架元素
iframe 是一个强大但需要谨慎使用的工具，适用于需要强隔离性的场景。在使用时，应优先考虑安全性、性能优化和跨域通信方案，并根据具体需求权衡是否使用 iframe 或其他替代技术（如 Web Components、微前端）。
2025-06-22 11:38:11
1250
原创 vue中的h渲染函数
动态组件生成：根据 API 数据动态决定组件结构（如表单生成器、可视化编辑器）。高阶组件封装：实现权限控制、加载状态等通用逻辑的复用。性能敏感场景：高频更新的列表或图表组件，避免模板编译开销。一般不使用h函数，大多数情况下，当我们使用的第三方库不满足我们需要的api时，但是有需要对其样式进行修改，可以使用h函数动态修改。
2025-06-15 18:38:47
1487
原创 react基础知识（下）
本文摘要了React开发中的核心知识点与应用技巧，包括：常用命令与工具库（classnames、lodash）表单处理与DOM操作（受控组件、useRef）组件通信4种方案（父子props/回调、兄弟父中转、跨层Context）useEffect深度解析（依赖项控制、异步处理限制、清理机制）状态管理工具简介（为后续Redux铺垫）内容涵盖React基础到进阶，强调实际开发中的关键技术与最佳实践，如props只读原则、副作用清理时机等，适合作为React开发的速查手册。
2025-05-26 20:23:27
1180
2
原创 前端常见的安全问题
XSS跨站脚本攻击：分反射型（非持久）、存储型（持久）和DOM型三种，通过注入恶意脚本窃取数据，防范措施包括输入过滤、HTML编码和使用CSP策略。CSRF跨站请求伪造：利用用户会话发送伪造请求，可通过Token验证、Referer检查和双重认证防范。DoS攻击：通过流量过载使服务不可用，需部署防火墙、负载均衡和请求频率限制。会话劫持：窃取会话ID冒充用户，应使用HTTPS、HttpOnly Cookie和会话超时机制。
2025-05-25 15:00:59
739
原创 cookie和session的区别
2.Session的工作流程三、核心区别Cookie 的属性控制HttpOnly：禁止 JavaScript 通过访问 Cookie，防止 XSS 攻击窃取敏感信息（如 Session ID）Secure：强制 Cookie 仅通过 HTTPS 协议传输，防止 HTTP 明文传输时被中间人窃听。SameSite：控制 Cookie 在跨站请求中是否发送，防御 CSRF 攻击。Session 的存储后端内存：快速但重启丢失，不适合分布式系统。数据库：持久化但性能较低。
2025-05-11 14:34:45
1018
原创 React基础知识（上）
React 是由 Facebook（现 Meta）开发并开源的 JavaScript 库，专门用于构建用户界面（UI）。在传统的 Web 开发中，当页面内容发生变化时，往往需要重新渲染整个页面，这会造成性能浪费。而 React 打破了这种模式，它采用组件化开发思想，将复杂的 UI 拆解成一个个独立、可复用的组件。这些组件就像是搭建房屋的积木，开发者可以根据需求自由组合，大大提升了代码的可维护性与扩展性。React专注于 UI 层的构建不负责处理应用的整体状态和复杂逻辑（当然，通过搭配其他库可以实现）。
2025-04-20 11:36:29
1256
原创 使用FormData格式上传图片
如果你不想使用 FormData，可以通过其他方式实现文件上传，但。FormData 是一种专门用于构建表单数据的对象，它能够以。格式发送数据，这是文件上传的。
2025-04-13 10:52:50
888
原创 ts基础知识总结
TypeScript 作为 JavaScript 的超集，为开发者带来了很多好处，特别是在大型项目中，它的类型系统和面向对象特性可以让代码更加稳健和易于维护。通过合理使用 TypeScript 的类型、类和泛型等特性，可以提高开发效率，减少错误的发生。希望通过这篇博客，你对 TypeScript 有了更深入的了解，在今后的开发中能够充分发挥 TypeScript 的优势，编写出高质量的代码。
2025-04-05 18:59:53
736
原创 防抖和节流
例如：设定1000毫秒执行，当你触发事件了，他会1000毫秒后执行但是在还剩500毫秒的时候你又触发了事件，那就会重新开始1000毫秒之后再执行。例如:设定1000毫秒执行，那你在1000毫秒触发在多次，也只在1000毫秒后执行一次。节流就是指连续触发事件但是在设定的一段时间内中。防抖就是连续触发事件但是在设定的一段时间内。
2025-03-30 11:41:13
182
原创 浏览器自动携带cookie注意事项
Domain 属性决定了 cookie 属于哪个域，只有当请求的域与 cookie 的 Domain 匹配时，才会被携带。Path 属性限制了 cookie 在该域下的路径范围。SameSite 属性，它控制 cookie 是否在跨站请求中被发送，比如 Lax 或 Strict 模式。Secure 属性要求 cookie 只能通过 HTTPS 连接发送，而 HttpOnly 属性则防止 cookie 被 JavaScript 访问。过期时间：如果 Cookie 已经过期，不会发送。
2025-03-22 21:59:19
1141
原创 gitflow工作流
当我们新建git仓库之后，默认会创建一个主分支也就是master分支，由于master分支是用于发布生产环境，所有必须保证master上代码的稳定性，所以我们。Master分支是仓库的主分支，这个分支包含最近发布到生产环境的代码，最近发布的Release， 这个分支只能从其他分支合并，这个分支是我们的主开发分支，包含所有要发布到下一个Release的代码，这个主要合并与其他分支，比如Feature分支。release分支合并到master分支之后，在master分支上。，首先基于develop分支。
2025-03-16 13:23:55
401
原创 dayjs使用
当使用+运算符进行字符串拼接时，JavaScript会尝试将对象转换为原始值（Primitive Value）。Day.js对象在转换时会调用valueOf()方法，而Day.js的valueOf()默认返回的是时间戳（自1970年1月1日以来的毫秒数）‘*’+dayjs(date) //时间戳。date()和set()使用。使用字符串拼接时，会触发。使用String函数。
2025-03-07 15:35:26
1194
原创 vue3基础知识
Vue 3 的生命周期钩子在 Composition API 中通过函数形式调用（如 onMounted），与 Options API 钩子对应但更灵活。是 Vue 3.2 引入的语法糖，旨在简化组合式 API（Composition API）的使用，让代码更简洁、类型推导更友好。ref 通过 RefImpl 类实现，对基本类型使用 getter/setter，对对象类型内部转为 reactive。基本类型（ref）、对象（reactive）、函数返回值、数组多源监听。复杂逻辑封装（如表单校验）。
2025-03-02 14:51:36
487
原创 vueRouter(路由)
执行/根目录路由地址时，就跳转执行/home路由地址 ，进而把对应的组件给显示出来。使得一个路由地址A与另一个路由地址B联系起来，执行A的时候会跳转执行B。
2025-02-16 16:16:14
629
原创 vue指令
没有参数的情况下, 可以不写();当选中option中一个时, 会将它对应的value赋值到mySelect中。如果传入某个参数, 同时需要event时, 可以通过$event传入时间。2 但真实开发中, input的值可能是从网络获取或定义在data中的。1 在前面的value中的值, 都是在定义input的时候直接给定的。3 可以通过v-bind:value动态的给value绑定值。v-if: 指令的元素, 不会渲染到dom中。含义: 动态的给value赋值。v-model绑定的是一个值。
2025-02-09 20:00:03
603
原创 this指向
方法时，函数只会考虑其参数列表中定义的参数数量，对于超出函数参数数量的数组元素，它们会被忽略，并且。apply方法的第2个参数,必须是一个数组（或类数组对象）使用call方法调用函数时，第一个参数为this指定的值。call方法的其余参数会依次自动传入函数作为函数的参数。属性且元素可通过数字索引访问的对象，例如。不用改变this指向，所以第一参数为null。只是创建一个新函数，并不立即调用。第一个参数为this指定的值。属性不会作为参数传递给函数。是立即调用函数并设置。
2025-01-22 21:17:12
533
原创 this指向
方法时，函数只会考虑其参数列表中定义的参数数量，对于超出函数参数数量的数组元素，它们会被忽略，并且。apply方法的第2个参数,必须是一个数组（或类数组对象）使用call方法调用函数时，第一个参数为this指定的值。call方法的其余参数会依次自动传入函数作为函数的参数。属性且元素可通过数字索引访问的对象，例如。不用改变this指向，所以第一参数为null。只是创建一个新函数，并不立即调用。第一个参数为this指定的值。属性不会作为参数传递给函数。是立即调用函数并设置。
2025-01-22 21:15:20
635
原创 服务器问题
找到 live--server，打开设置，点击设置，在搜索框里输入port,然后观察左侧栏目，找到live-server_config ,找到port(第一个)，然后打开settings.json ,--------------------------------- 所有的前提是要使用英文命名，不要使用中文命名 ---------------------------将 0 改成 8080，就可以了，保存，将VSCode关闭再重新打开（这样在使用时，就相当于在本地服务器里创建项目，直接运行就可以了）
2024-11-25 11:28:54
267
原创 遇见的问题
word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap。是： 认为英文文本的最小单位是字符，而不是单词，换行时不保留单词的完整。然而，当点击事件实际发生时，循环已经结束，变量。，注意，我这里的“单词”包括连续的中文字符（还有日文、韩文等），或者可以理解为。变量，所以之前的定时器引用就会丢失，导致无法正确清除定时器。的长度，一个超出数组索引的值）。这样很短的单词，只要碰到边界，都会被强制拆分换行。时，实际上是在访问一个不存在的元素（
2024-11-17 16:56:33
1104
原创 grid布局
Grid 布局与Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
2024-11-05 08:36:06
1510
原创 常见界面样式
以前是用 li 做的，现在可以用行内块 ，添加text-align ： center(行内块会自然居中对齐，不需要使用margin/padding之类的，之间会自动有缝隙) 1. 给图片添加vertical-align:middle top bottom等（只要不是基线对齐）------- 比较提倡。如果孩子们都垂直居中，给他们的父亲添加line-height （line-height会继承）可以解决细线边框重叠的问题-----另一种方法。当前浮动元素的顶边，不能超过上一个元素的顶边。
2024-10-19 10:54:13
1005
原创 css圆角边框
其中top和left顺序不可以颠倒） 、右上角 、 右下角 、 左下角。圆形的做法（盒子高度的一半 / 50%）—前提是盒子是正方形。一个盒子的角默认为90° ，圆的半径原理。两个值—左对角线两个角 ，右对角线两个角。length可以是数值，也可以是百分比。圆角矩形（设置成高度的一半）用来设置元素的外边框圆角。个角 ，右对角线两个角。
2024-09-28 17:32:21
333
原创 传统布局方式--定位
必须添加top left right bottom其中一个才有效（如果不加，就相当于相对定位），（刚开始是相对定位，等达到这些值时，就不再移动） 轮播图的按钮：如果图片先插入，用浮动来塑造位置，导致按钮下移（浮动影响后面的图片，不会影响前面的图片，而且浮动的图片会在一行显示）固定定位（fixed) ,是元素固定于浏览器可视区的位置，（使用场景：可以在浏览器页面滚动时元素的位置不会改变）自己绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
2024-09-28 17:18:46
723
原创 CSS盒子
当上下相邻的两个块元素相遇时，如果上面的元素有margin-bottom,下面的元素也有则它们之间的垂直间距取二者之间较大者。子标签会继承父标签的一些样式,继承的样式（text- font- line- color 这些元素开头的可以继承）高度，内外边距不可以继承。则此时子元素的行高为， 当前元素的文字大小*1.5。外边距可以实现让块级盒子水平居中(对行内元素和行内块元素无效-----行内块应用text-align:center)层叠性---主要解决样式冲突的问题---就近原则，样式不冲突，就不重叠。
2024-09-28 16:58:01
992
原创 选择器和常见属性
2em(em是一个相对单位，当前元素一个文字的大小，如果当前元素没有设置大小，则会按照父元素的一个文字大小)-可以选择父元素里面的子元素，外层标签写前面，内层标签写在后面，中间用空格分割，当标签发生嵌套时，内层标签就成为外层标签的后。none:一般用于取消链接下划线 underline：下划线（超链接自带下划线，）font复合属性，顺序不可变，size/family不可省略，否则font不可用。可以选择多组标签，同时为他们定义相同的样式，通常用于集体声名，用 ， 分割。（.）类：开发最常用；
2024-09-28 15:50:19
345
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人