- 博客(320)
- 资源 (12)
- 收藏
- 关注
RSS订阅
原创 前端知识点梳理
HTML语义化的理解meta标签和的区别link 和 @import 有什么区别defer 和 asyncHTML5离线储存CSS3 新特性CSS选择器和优先级权重CSS 中哪些属性可以继承CSS 预处理器盒子模型居中常见方法BFCflex布局grid布局em 和 rem的区别CSS中position定位三栏布局transition和animation的区别伪元素和伪类字符串 数组处理数据类型检测ES6新特性作用域闭包原型和原型链继承thisPromiseasync 和 await事件循环：宏任务、微任务深
2023-08-29 18:54:33
546
原创 整理大厂高频核心前端面试题，五万多字，面试必考
如果 Vue 组件中的 data 是个对象，那么所有复用这个组件的地方，都在使用这个组件里面唯一的一个 data，所有使用组件的地方的 data 都会指向栈内这一个 data 的地址，那么会造成。等待执行栈和微任务队列都执行完毕才会执行，并且在执行完每一个宏任务之后，会去看看微任务队列有没有新添加的任务，如果有，会先将微任务队列中的任务清空，才会继续执行下一个宏任务。异步：是指不进入主线程，而进入任务队列的任务，只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程。
2021-09-13 11:07:08
2735
2
原创 ES6之新特性汇总
ES6之 let 和 const 关键字ES6之 解构赋值ES6之 扩展运算符ES6之 字符串String新特性ES6之 数值Number新特性ES6之 数组Array新特性ES6之 函数优化(默认参数、剩余参数、 箭头函数)ES6之 PromiseES6之 async/awaitES6之 Class（类）ES6之 Map、Set 和 WeakMap、WeakSetES6之 Module 语法(import 和 export)ES6之 Generator 函数ES6之高阶函数ES6之 for…of 循环
2020-05-09 21:35:30
611
1
原创 yarn详细入门教程
Yarn是 Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript包管理工具。安装的时候无法保证速度/一致性安全问题，因为 npm 安装时允许运行代码Yarn 同样是一个从 npm 注册源获取模块的新的 CLI 客户端。注册的方式不会有任何变化 —— 你同样可以正常获取与发布包。
2018-01-31 11:51:47
76758
5
原创 npm、pnpm、cnpm、yarn、npx之间的区别
在 NPM 的扁平化结构中，你的代码可能直接引用 B（即使未声明依赖 B），导致潜在风险；结构是非扁平化的，每个依赖只能访问其显式声明的依赖，避免了“幽灵依赖”（Phantom Dependencies）问题。早期 npm 安装依赖时是顺序下载且无缓存复用，速度较慢（NPM 5+ 已改进，但 Yarn 仍有一定优势）。文件，严格锁定依赖树中每个包的具体版本和哈希值，确保不同环境下安装的依赖完全一致，防止恶意代码注入。新项目安装依赖时，若全局已有该包，直接创建硬链接，无需重新下载。
2025-03-12 18:43:34
488
原创 requestAnimationFrame（请求动画帧）
（简称 RAF）是浏览器提供的 JavaScript API，用于在浏览器下次重绘前执行指定的回调函数。它专门为动画设计，能实现更流畅的视觉效果。通过与浏览器刷新频率同步，显著提升了动画的流畅性和性能，是前端动画开发的首选方案。在需要高精度和低资源消耗的场景下，应优先使用它。的步伐跟着系统的刷新步伐走。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次，这样就不会引起丢帧现象。如果屏幕刷新率是60Hz（即每秒 60 次重绘），那么回调函数就每16.7ms被执行一次。
2025-03-11 12:59:05
924
原创 Vue 与 Nuxt 的区别
如果需要 SEO、服务端渲染或快速搭建标准化项目，Nuxt.js 是更优解；若追求轻量或完全控制技术栈，则直接使用 Vue.js。
2025-03-05 10:28:44
921
原创 你用过最好用的AI工具有哪些？
而AI翻译软件则让我在旅行和学习中受益匪浅，它让我能够轻松地与不同语言的人交流，拓宽了我的视野和经历。它们不仅提高了我的工作效率和生活质量，还让我更加深刻地认识到了AI技术的强大和重要性。AI智能家居：通过物联网和AI技术的结合，智能家居系统能够智能地控制家中的各种设备，如灯光、空调、窗帘等。这些常用AI工具的便利之处在于它们能够智能地识别我们的需求，提供精准的服务，从而节省我们的时间和精力。简介：探讨人们在使用AI工具时，最喜欢的和认为最好用的工具是哪些，展示AI技术的实际应用和影响。
2024-10-25 09:19:29
462
原创 Git 代码提交规范
用于提交仅格式化、标点符号、空白等不影响代码运行的变更。例如：ci: 修改GitHub Actions配置文件。例如：revert: 回滚feat: 增加用户注册功能。用于提交构建过程、辅助工具等相关的内容修改。例如：test: 增加用户模块的单元测试。例如：fix: 修复登录页面崩溃的问题。例如：feat: 增加用户注册功能。例如：style: 删除多余的空行。用于提交CI配置文件和脚本的修改。用于提交提升性能的代码修改。用于提交仅文档相关的修改。用于提交回滚之前的提交。
2024-10-24 16:03:54
556
原创 error An unexpected error occurred: “https://registry.npm.taobao.org/ :certificate has expired“ 证书过期
今天在使用`yarn install` 时出现淘宝镜像证书过期问题`error An unexpected error occurred: "https://registry.npm.taobao.org/@dcloudio%2funi-app: certificate has expired".`
2024-10-15 10:07:28
1265
原创 Pinia详解
Pinia官网Pinia的设计灵感来源于Vuex，但相比Vuex，Pinia更加轻量级、简单易用和灵活。Pinia 是 Vuex 的进化版本，由 Vue 核心团队维护，并推荐用于新项目。Vuex 的未来：Vue 官方已明确表示，Pinia 的实现对 Vuex 5 的提案有直接影响（Vuex 5 的提案已冻结，Pinia 成为事实上的“Vuex 5”Pinia是一个基于Vue 3的状态管理库，专为Vue 3设计。它提供了一种简单、直观且可扩展的方式来组织和访问应用程序的状态。
2024-06-25 17:12:20
1425
原创 通俗讲解 发布-订阅模式
发布-订阅模式是一种消息传递模式，它允许发送者（发布者）发送消息而不关心谁将接收这些消息，同样地，接收者（订阅者）可以监听他们感兴趣的消息，而不需要知道这些消息来自哪里。这种模式在JavaScript中常用于实现事件处理系统，如DOM事件监听或自定义事件系统。
2024-06-24 19:05:29
1459
原创 React 扩展
Render props是一种在React组件之间共享代码的模式。一个组件接收一个返回React元素的函数作为prop，并在其渲染方法中调用该函数。这使得父组件能够动态地决定子组件应该渲染什么内容。返回 false，则 React 不会触发组件的重新渲染过程，这可以避免不必要的渲染和可能带来的性能开销。Vue.js的插槽允许你在子组件的模板中预留一些占位符，这些占位符可以由父组件来填充内容。然而，React通过其组合和props传递的特性，提供了类似的功能，但实现方式略有不同。内部的两个节点插入到。
2024-06-24 17:04:53
1110
原创 React组件通信方式总结
Redux 是一个用于管理 JavaScript 应用程序中状态（state）的库，它提供了一种可预测的方式来更新应用程序的状态，类似 Vue 中的。：父组件维护一个状态（state），这个状态将被传递给两个兄弟组件。无论是类组件还是函数式组件，父组件向子组件传递数据的方式都是使用。无论是类组件还是函数式组件，子组件向父组件传递数据的方式都是通过。例如：组件为父组件，B组件为子组件，C组件为孙子组件，现在通过。：（即：组件A是订阅者，组件B是发布者，先订阅再发布）），然后在组件树中的某个位置。
2024-06-11 15:56:23
837
原创 React 18
有时，npm 或 yarn 的缓存可能会导致问题。你可以尝试清理缓存并重新安装或者检查是否有多个版本的 Node.js或简写或简写使用命令来创建一个新的React项目。例如，如果你想要创建一个名为进入目录：cd my-react-app运行项目：yarn start。
2024-06-07 18:11:39
822
原创 前端常见的加密方式
Base64btoa()atob()MD5sha.jsAESCryptoJS“是否可逆” 表示加密后是否可以解密回原始数据。“安全性” 是指算法抵抗攻击的能力。Base64不是加密算法，因此安全性低。MD5已被证明存在碰撞，因此安全性中等。SHA系列和AES、HMAC则具有更高的安全性。评分为综合安全性评分（0-10分）只有AES(称加密)和RSA(非称加密)属于加密算法，可逆，可加密可解密Base64是编码，可逆，可编码可解码MD5和SHA属于哈希算法，HMAC。
2024-06-05 12:02:10
1188
原创 Webpack 开发快速入门
分析依赖Webpack 需要从入口文件开始，递归地解析和加载项目中的所有模块，分析它们的依赖关系，并构建出一个依赖图（Dependency Graph）。这个过程可能需要花费一些时间，特别是对于大型项目或具有复杂依赖关系的项目。编译代码在构建依赖图的过程中，Webpack 会遇到各种不同类型的文件（如 JavaScript、CSS、图片等）。对于某些文件，Webpack 可能需要使用 loader 进行预处理或转换（如将 ES6 代码转换为 ES5 代码，或将 Sass 代码转换为 CSS 代码）。
2024-06-03 11:54:34
728
原创 如何一次性渲染十万条数据
虚拟滚动（也称为窗口化、无限滚动或按需加载）是一种优化技术，用于在大量数据需要渲染到滚动容器中时，仅渲染当前视口（viewport）内可见的部分数据，从而大大提高页面性能。，是一种“轻量级”或“最小”的 Document 对象，它可以包含 DOM 节点，但它本身并不是 DOM 树的一部分。在虚拟滚动中，需要维护一个与视口大小相对应的固定数量的 DOM 元素，并随着用户滚动动态地更新这些元素的内容。的技术来优化性能，只需要渲染少部分区域的内容，减少重新渲染组件和创建 dom 节点的时间。
2024-05-30 18:40:51
1194
原创 DNS 解析过程
DNS（Domain Names System），域名系统，是互联网一项服务，是将域名转换为IP地址。简单来讲，DNS相当于一个翻译官，负责将域名翻译成ip地址。IP 地址：一长串能够唯一地标记网络上的计算机的数字。域名：是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称，用于在数据传输时对计算机的定位标识。域名域名是一个具有层次的结构，从上到下一次为根域名、顶级域名、二级域名、三级域名…例如www为三级域名baidu为二级域名com为顶级域名。
2024-05-27 15:55:23
1370
原创 WebSocket 断网重连、心跳检测功能封装
WebSocket协议是基于TCP协议上的独立的通信协议，在建立WebSocket通信连接前，需要使用HTTP协议进行握手，从HTTP连接升级为WebSocket连接。浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。一旦WebSocket连接建立，服务器和客户端就可以通过发送消息来进行实时通信。这种双向通信机制。Websocket 协议与 HTTP 协议没有关系，它是一个建立在 TCP 协议上的全新协议。
2024-05-27 12:07:52
1510
原创 React 组件三大核心 ref、state、props
虽然 PropTypes 是在开发时使用的，并且不会影响生产环境的代码，但它是一个很好的实践，因为它可以帮助你确保组件的 props 符合预期的格式和类型，从而减少了因 prop 类型错误导致的运行时错误。这意味着在并发模式下，调用 setState 后，React 不会立即更新组件的状态，而是将这个更新排队，并在后续的渲染中应用。在React中，state 是一个JavaScript对象， 是组件中存储和管理数据的一种方式。) 中是异步的，这里说的异步实际上是react的批量更新，达到了提升性能的目的。
2024-05-23 14:50:12
642
原创 假如有几十个请求，如何去控制并发？
创建一个请求队列，将所有的请求按照优先级或依赖关系放入队列中。这样可以确保请求按照预期的顺序执行，并有效地防止同时发送过多的请求。使用 async/await 和 Promise 结合队列（Queue）来实现请求的并发控制。浏览器的最大并发连接数限制因浏览器和版本而异，大多数浏览器限制每个域名的最大并发连接数为6个。当运行这个示例时，会看到请求按照预期的顺序执行，并且同时运行的请求数量不会超过设定的并发限制。上例中创建了一个 RequestQueue 类，它可以限制同时运行的请求数量。
2024-05-20 17:14:36
471
原创 uni-app 路由跳转方式
uni-app页面路由为框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式。需要跳转的 tabBar 页面的路径（需在 pages.json 的 tabBar 字段定义的页面），路径后不能带参数。，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数。需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。，如果跳转的页面路径是 tabBar 页面则不能带参数。
2024-05-15 15:07:18
2692
原创 uni-app 生命周期
uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期函数名说明平台差异在实例初始化之前被调用created在实例创建完成后被立即调用在挂载开始之前被调用mounted挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTick数据更新时调用，发生在虚拟 DOM 打补丁之前仅H5平台支持updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
2024-05-14 20:48:01
6986
原创 CDN的工作原理及流程
当用户向本地DNS服务器发起请求本地DNS服务器会将域名解析权交给CNAME指向的CDN专用的DNS服务器CDN专用的DNS服务器将CDN的全局负载均衡设备IP地址返回给用户，用户对这个全局负载均衡设备发起访问请求CDN全局负载均衡设备会选择一个最优的缓存服务器节点（边缘节点），并获得该边缘节点的IP地址。全局负载均衡设备再把该边缘节点的IP地址返回给用户。用户使用从这个IP地址发起请求，并获取到内容。
2024-05-13 16:39:09
980
原创 图片懒加载
懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。这样可以减少初始页面的加载时间，提高网站的响应速度，尤其对于移动设备和网络条件较差的用户，可以显著地提高用户的体验。
2024-05-10 19:10:53
817
原创 HTTP/1.0、HTTP/1.1、HTTP/2.0区别
如果前面的一个请求在服务器端处理的时间很长，生成响应需要很多时间，那么后面的请求即使已经处理完毕并生成了响应，也需要等待前面的响应发送完毕后才能发送。HTTP/1.1引入了更强大的缓存机制，允许客户端和服务器缓存请求和响应的内容。的概念，以及服务器推送等功能，进一步解决了HTTP/1.1中的队首阻塞问题，并提供了更好的性能和用户体验。HTTP/1.1是HTTP协议的一个版本，相较于HTTP/1.0，它在多个方面进行了改进和优化。服务器会根据请求的优先级来分配资源，优先处理重要的请求，从而提高了用户体验。
2024-05-10 14:29:31
1098
原创 Vue Router 路由hash和history模式
在 Vue 中，路由的两种主要模式是和，默认的路由模式是hash模式。。这两种模式决定了 URL 的外观以及浏览器如何处理 URL 的变化。
2024-05-08 16:40:07
1863
原创 TypeScript type类型别名
type 最简单的用法是为现有的基本类型（如 string、number、boolean 等）创建别名。2. 对象类型别名可以使用 type 来定义对象的形状，这类似于 ，但 type 允许你在单个声明中定义更复杂的类型。3. 交叉类型（Intersection Types）type 可以用来创建交叉类型，它结合了多个类型的所有成员。这类似于 的 extend4. 联合类型（Union Types）联合类型允许一个变量可以是几种类型中的任意一种。5. 映射类型（Mapped Types）映
2024-05-07 11:41:17
953
原创 垃圾回收机制
前端垃圾回收机制是JavaScript引擎自动管理内存的一种方式，主要目的是识别和释放不再使用的内存，以防止内存泄漏。JavaScript引擎通过特定的垃圾回收算法（如标记-清除、引用计数等）来判断哪些对象已经不再被引用，从而将其占用的内存释放。前端垃圾回收机制是JavaScript引擎内部实现的一部分，开发者通常无需直接操作。然而，了解垃圾回收机制的工作原理可以帮助开发者编写更高效、更安全的代码。
2024-05-06 15:10:39
1224
原创 HTTP 与 HTTPS
HTTPS：是HTTP的安全版，它在HTTP的基础上加入了SSL/TLS协议，SSL/TLS依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。据ACM CoNEXT数据显示，使用HTTPS协议会使页面的加载时间延长近50%，增加10%到20%的耗电，此外，HTTPS协议还会影响缓存，增加数据开销和功耗，甚至已有安全措施也会受到影响也会因此而受到影响。然而，HTTP协议传输的数据都是未加密的，也就是明文的，因此使用HTTP协议传输隐私信息非常不安全，容易导致数据被窃取或篡改。
2024-04-30 17:21:01
1465
原创 浅谈 HTTPS
HTTPS (Hypertext Transfer Protocol Secure) 是一种安全的通信协议，以安全为目标的HTTP通道，简单讲是HTTP的安全版。HTTPS 通过在 HTTP 协议的基础上添加 SSL/TLS 来提供加密通信和身份验证，HTTPS的安全基础是 SSL/TLS。这意味着，当使用 HTTPS 访问一个网站时，与该网站之间的所有通信都是加密的，从而保护数据免受中间人攻击和其他形式的网络攻击。现在它被广泛用于万维网上安全敏感的通讯，例如交易支付方面。
2024-04-30 16:30:48
1130
原创 TCP和UDP
TCP向上层提供面向连接的可靠服务 ，UDP向上层提供无连接不可靠服务。虽然 UDP 并没有 TCP 传输来的准确，但是也能在很多实时性要求高的地方有所作为对数据准确性要求高，速度可以相对较慢的，可以选用TCP。
2024-04-29 19:03:45
604
原创 函数柯里化
柯里化（Currying）是一个在函数式编程中常见的概念，它指的是将一个接受多个参数的函数转换成一系列使用一个参数的函数。柯里化的主要优势在于它可以增加函数的复用性，并使得函数的组合更加灵活。举例来说，一个接收3个参数的普通函数，在进行柯里化后， 柯里化版本的函数接收一个参数并返回接收下一个参数的函数， 该函数返回一个接收第三个参数的函数。最后一个函数在接收第三个参数后， 将之前接收到的三个参数应用于原普通函数中，并返回最终结果。Javascript实际应用中的柯里化函数，可以传递一个或多个参数。
2024-04-26 18:36:39
560
原创 Grid 布局
Grid布局是一种用于网页布局的CSS技术，它允许开发者定义一个元素内部的行和列，并在这些网格中放置子元素。这是一个强大的布局方式，可以看作是二维布局，也是唯一的二维布局方案。
2024-04-25 20:19:13
2919
原创 HTML中meta标签属性详解
meta>标签是一种用于在 HTML 文档头部提供元数据的标签。它通常位于标签内，用于向浏览器和搜索引擎提供关于网页的信息，而不是直接展示给用户是HTML标记head区的一个关键标签，用于描述一个HTML网页文档的属性，提供有关页面的元信息。它并不会显示在页面上，但对于机器是可读的，可用于浏览器（如何显示内容或重新加载页面）、搜索引擎（SEO）或其他web服务。
2024-04-25 14:21:48
2351
原创 CSS 伪元素和伪类的用法和区别
在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。伪元素通常用双冒号来表示 （在实际使用中，一些旧的伪元素如:before和:after仍然被广泛接受）::before和::after：用于在选定元素的内容之前和之后插入内容通常与content属性一起使用，可以插入文本、图像或其他内容。它们不占用DOM节点，使得CSS能够解决一部分JavaScript的问题，同时避免增加无意义的页面元素。
2024-04-17 15:05:53
579
aes.js小程序加密解密
2021-05-07
JavaScript实现图片上传并预览并提交ajax（完整demo）
2021-03-31
AngularJS权威教程
2017-11-03
ECMAScript6入门
2017-11-03
JQuery源码详细中文注释!
2017-11-03
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人