- 博客(176)
- 收藏
- 关注
RSS订阅原创 关于this的这些你都掌握了吗
this 是在函数被调用时确定的，它的指向取决于函数调用的地方，而不是它被声明的地方（除箭头函数外）默认绑定、隐式绑定、显式绑定、new绑定。new 绑定 > 显示绑定 > 隐式绑定 > 默认绑定。
2025-03-15 14:56:38
1016
原创 Vue 3 vs Vue 2：深入解析从性能优化到源码层面的进化
领域Vue 2Vue 3响应式系统ProxyDiff 算法优化全量遍历VNodePatchFlag进行静态标记组件更新优化重新渲染整个组件仅更新变更部分构建工具Webpack热更新重新编译整个 bundle模块级 HMR，速度提升数倍代码组织TypeScript 支持限制类型推导完全支持Vue 3 带来了显著的性能优化、构建工具的改进，以及更灵活的开发体验。
2025-03-15 14:55:09
1091
原创 深入理解 GPU 渲染加速与合成层（Composite Layers）
GPU 非常擅长执行此类基于纹理的转换，因此，我们得到了非常流畅、高性能的动画，这称为“硬件加速”。例如，电商轮播图中复杂动画的元素会被提升为合成层，仅更新该层内容，而无需重绘整个页面。简单来说，浏览器为了提升动画的性能，为了在动画的每一帧的过程中不必每次都重新绘制整个页面。）时，浏览器将元素的位图纹理上传至 GPU。：若页面滚动时仅固定导航栏（合成层）需要更新，GPU 可直接复用其他层的纹理，跳过 CPU 的重排和重绘阶段。元素在动画开始前被提升为合成层，利用 GPU 加速动画渲染，确保动画流畅。
2025-03-10 20:51:49
941
原创 React 合成事件与 Vue 事件机制的对比
React 的合成事件是其基于自身设计理念和性能优化目标的独特创造，而 Vue 未采用合成事件，是由其设计理念、性能考量以及生态文化等多方面因素共同决定的。随着 Vue 的不断发展，它与 React 在应用场景上的界限逐渐模糊，二者都已成为能够支撑各种规模项目开发的优秀框架。开发者在选择使用 React 或 Vue 时，需要深入理解它们的事件机制和设计差异，根据项目的具体需求、规模以及团队技术栈等因素，做出最为合适的选择。
2025-03-05 21:13:26
842
原创 React 合成事件与 Vue 事件机制的对比
React 的合成事件是其基于自身设计理念和性能优化目标的独特创造，而 Vue 未采用合成事件，是由其设计理念、性能考量以及生态文化等多方面因素共同决定的。随着 Vue 的不断发展，它与 React 在应用场景上的界限逐渐模糊，二者都已成为能够支撑各种规模项目开发的优秀框架。开发者在选择使用 React 或 Vue 时，需要深入理解它们的事件机制和设计差异，根据项目的具体需求、规模以及团队技术栈等因素，做出最为合适的选择。
2025-03-05 21:07:01
774
原创 ESLint 深度解析：原理、规则与插件开发实践
在团队协作项目中，统一的代码风格和规范至关重要。除了常规的代码格式与最佳实践，还可能存在一些特殊要求。例如，为了维护代码的文明性与专业性，我们要求代码中不得出现诸如 “sb250”“fuck” 等不文明、不专业的词汇。这类需求无法通过 ESLint 的默认规则实现，因此需要开发自定义插件来满足。初始化项目首先确保全局安装了yo和generator - eslint。
2025-03-05 21:01:19
1397
原创 js的继承你了解多少
因为我们刚开始child的info是引用类型，存的是相同的地址，后面直接给info了一个新对象，相当于生成了一个新对象的地址，两个info此时指向了不同的地址，互不干扰了。所有方法都定义在构造函数中，每次都需要重新创建，方法无法复用（对比原型链继承的方式，方法直接写在原型上，子类创建时不需要重新创建方法）原型链继承通过修改子类的原型为父类的实例，从而实现子类可以访问到父类构造函数以及原型上的属性或者方法。上面的例子是修改的原型对象上的引用数据类型的属性，如果改成下面这样，就不会有影响。
2025-03-05 20:53:07
861
原创 CSS 真的会阻塞文档解析吗？从浏览器渲染原理深入探究一下
在网页开发领域，一个常见的疑问是 CSS 是否会阻塞文档解析。理解这一问题对于优化网页性能、提升用户体验至关重要。要深入解答这个问题，需要从浏览器渲染网页的原理说起。
2025-02-24 11:14:38
900
原创 XSS 与 CSRF 攻击你了解多少呢
例如，网页中存在一段 JavaScript 代码，它根据 URL 参数动态修改页面元素的 innerHTML 属性，攻击者可构造恶意 URL，使得该代码在处理 URL 参数时，将恶意脚本插入到 innerHTML 中，从而在浏览器渲染页面时执行恶意脚本。此外，结合请求的时间戳、用户行为模式等信息，建立动态的请求来源验证模型，提高验证的准确性与可靠性。当用户在已登录状态下，访问恶意网站时，恶意网站通过精心构造的请求，诱使浏览器自动携带用户在目标网站的身份认证信息（如 Cookie），向目标网站发送请求。
2025-02-20 15:56:11
384
原创 深度剖析 DNS 劫持
DNS 劫持作为一种常见的网络安全威胁，给用户的网络安全和个人信息安全带来了极大的风险。了解 DNS 劫持的成因、案例和常见场景，掌握有效的解决方法，对于保障我们的网络安全至关重要。无论是个人用户还是企业组织，都应该高度重视 DNS 劫持问题，采取积极有效的措施，加强网络安全防护，共同营造一个安全、稳定的网络环境。
2025-02-07 14:54:06
905
原创 深度解析 React 合成事件：机制、作用及与 Vue 事件机制的对比
React的合成事件是其基于自身设计理念和性能优化目标的独特创造，而Vue未采用合成事件，是由其设计理念、性能考量以及生态文化等多方面因素共同决定的。随着Vue的不断发展，它与React在应用场景上的界限逐渐模糊，二者都已成为能够支撑各种规模项目开发的优秀框架。开发者在选择使用React或Vue时，需要深入理解它们的事件机制和设计差异，根据项目的具体需求、规模以及团队技术栈等因素，做出最为合适的选择。
2025-01-20 13:39:36
653
原创 深度解析 React 中 setState 的原理：同步与异步的交织
相反，React 会将这五次状态更新合并，仅在循环结束后进行一次统一的状态更新与组件重新渲染，最终count的值为 5。当在 React 合成事件（如onClick、onChange等由 React 包装的事件）之外，例如在原生 DOM 事件或setTimeout回调函数中调用setState时，setState会同步执行。在绝大多数场景下，setState呈现出异步的行为模式。这意味着，当调用setState时，组件状态并不会立即更新，React 会对多个setState调用进行批量处理，以优化性能。
2025-01-15 16:23:22
625
原创 React 中的受控组件与非受控组件：深度剖析与实战应用
同时，用useEffect钩子监听内容合法性和有没有值，条件满足就启动定时自动保存，模拟真实应用里的数据保存操作，保存过程中切换状态显示保存状态，最后记录并显示上次保存时间，全方位展示了受控组件在复杂业务场景下的本事。用户批量选文件再提交的时候，handleUpload函数靠fileInputRef.current.files拿到文件，转成数组存到fileList状态里，实时显示要上传的文件列表，既尊重了文件输入框 DOM 的原生行为，又把它融进了 React 的数据管理，给文件上传流程搭了个好框架。
2025-01-02 16:33:55
911
原创 从0到1手写实现Event Emitter
本文通过从0到1的方式实现了一个简单的事件中心，并讲解了如何在前端应用中使用它来解耦组件之间的通信。事件中心可以帮助我们处理异步事件、提高系统扩展性并简化代码结构，尤其适合用于大型前端应用中的组件间通信。通过本文的代码实现，相信你已经能掌握事件中心的基本原理和使用方法，并能在实际项目中加以应用。
2024-12-23 16:51:50
683
原创 手把手带你从0到1手写实现Event Emitter
本文通过从0到1的方式实现了一个简单的事件中心，并讲解了如何在前端应用中使用它来解耦组件之间的通信。事件中心可以帮助我们处理异步事件、提高系统扩展性并简化代码结构，尤其适合用于大型前端应用中的组件间通信。通过本文的代码实现，相信你已经能掌握事件中心的基本原理和使用方法，并能在实际项目中加以应用。
2024-12-23 14:31:33
1050
原创 深入剖析 DOM 操作成本与优化策略
DOM 操作虽然是前端开发中不可避免的一部分，但由于其成本较高，应该尽量避免频繁的 DOM 操作。通过理解 DOM 操作的成本和影响，以及采用合理的优化策略，可以提高前端应用的性能、可维护性和用户体验。在实际开发中，应根据具体情况选择合适的优化方法，如使用文档片段、数据绑定、虚拟 DOM、CSS 动画和过渡等，以减少对真实 DOM 的直接操作，从而提升应用的整体质量。
2024-12-19 13:50:24
804
原创 深入理解作用域与作用域链
作用域和作用域链是 JavaScript 语言的核心特性，它们共同决定了变量的可见性和生命周期，以及函数之间的变量共享和访问机制。变量提升虽然是 JavaScript 的一个特性，但也可能带来一些代码理解和维护上的困扰，通过合理的代码书写习惯可以有效避免。闭包为 JavaScript 编程带来了强大的功能，如数据隐藏、函数柯里化和事件处理等，但也需要注意内存管理问题，避免因不当使用闭包导致内存泄漏。
2024-12-19 13:48:51
695
原创 深拷贝，浅拷贝和赋值的区别
ECMAScript 的数据类型在将深拷贝和浅拷贝之前，我们先来重新回顾一下 ECMAScript 中的数据类型。主要分为基本数据类型（undefined，boolean，number，string，null）基本数据类型主要是：undefined，boolean，number，string，null。基本数据类型存放在栈中存放在栈内存中的简单数据段，数据大小确定，内存空间大小可以分配，...
2019-02-14 23:49:09
328
原创 2018年度总结
毕业首先我经历了毕业，我当时很荣幸的校招进入了美团，在美团实习了两个月之后，我选择了回到学校写毕业设计。我当时的想法是我希望能够在大学毕业之前把数据库和后端的东西捡一捡，于是尝试的做了几个毕业设计，发现自己设计的数据库真是蹩脚，难用的很，通过尝试发现自己确实做出了几个（虽然现在看起来很垃圾），也算是把数据库，php的一些东西重新复习了一下。不过最后总算顺利毕业了入职7月，我回到了美团，在前...
2019-02-11 17:22:57
244
原创 类和原型
多态并不表示子类和父类有关联，子类得到的只是父类的一份副本，类的继承其实就是复制。构造函数：函数本身并不是构造函数，然而，当你在普通的函数调用前面加上new关键字之后，就会把这个函数调用变成一个“构造函数调用”。实际上，new会劫持所有普通函数并用构造对象的形式调用它。来看下面两张图 a.constructor === Foo为真看起来意味着a确实有一个指向Foo的.constr...
2018-09-10 17:44:34
1749
1
原创 js对象小结
对象是javascript的技术·，一共有六种主要类型string，number，boolean，null，undefined，object注意，简单基本类型（string，boolean，number，null和undefined）本身不是对象。null有时会被当作一种对象类型，但是这其实只是语言本身的一个bug，即对null执行typeof null时会返回字符串“object”，实际...
2018-09-06 10:31:47
199
原创 https与对称加密和非对称加密算法
本文参考：https://showme.codes/2017-02-20/understand-https/我的理解是https就是在在对称加密不够保险的情况下，外层套了一堆非对称机密算法来保证对称加密算法的那些东西不会被劫持首先我们来聊一聊为什么要用https？http协议没有任何的加密以及身份验证的机制，非常容易遭遇窃听、劫持、篡改，因此会造成个人隐私泄露，恶意的流量劫持等严重...
2018-09-02 19:27:49
535
1
原创 vue小结
data:组件的定义只接受 function。,but,why?当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函...
2018-08-25 16:46:42
279
原创 this及词法作用域
js只有词法作用域没有动态作用域 词法作用域意味着作用域是由书写代码时函数声明的位置来决定的。编译的词法分析阶段基本都够知道全部标识符在哪里以及是如何声明的，从而能够预测在执行过程中如何对它进行查找。 eval()，with可以“欺骗“词法作用域，会导致代码运行变慢，不要使用它们 需要明确的是，事实上，javascript并不具有动态作用域，它只有词法作用域，简单明了，但是this机制某种程...
2018-08-14 23:20:23
1805
原创 变量，作用域和内存问题
5种基本类型：undefined，null，Boolean，Number，String引用类型的值是保存在内存中的对象，与其他语言不同，js不允许直接访问内存中的位置，也就是说不能直接操作对象的内存空间，在操作对象时，实际上是操作对象的引用而不是实际的对象，为此，引用类型的值是按引用访问的（这种说法不严密，当复制保存着对象的某个变量时，操作的是对象的引用。但再为对象添加属性时，操作的是实际的对...
2018-08-05 14:42:35
188
原创 js基础
每个函数对象都有一个prototype 属性，这个属性指向函数的原型对象。 每个对象都有 proto 属性，但只有函数对象才有 prototype 属性
2018-07-30 16:38:56
158
原创 react小记
每当组件第一次加载到DOM中的时候，这在React中被称为挂载同样，每当组件生成的这个DOM被移除的时候，这在React中被称为卸载。关于setState()这里有三件事情需要知道不要直接更新状态例如，此代码不会重新渲染组件：// Wrong this.state.comment= ‘Hello’; 应当使用setState()：// Correct this.setS...
2018-07-29 15:53:31
183
原创 路由懒加载
这里面是实现了路由的懒加载（实现的方式有很多，这里就不一一说明了，这是根据webpack的版本特制的，不同的版本可能会不通用）那么我们为什么要用路由的懒加载呢？当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。（刚开始的时候是说如果分成好多个js，一起加载的话会很慢...
2018-07-26 23:20:35
1545
原创 Mac系统运行XAMPP出现Access forbidden!和403
！[这里写图片描述]（https://img-blog.youkuaiyun.com/20180520183435936?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pjbWFydGluMjAxNDIxNDI4Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70）这是因为，Mac中有些文件夹...
2018-05-20 18:37:44
1702
2
原创 Mac的xampp下的mysql不好使怎么办
1.sudo /Applications/XAMPP/xamppfiles/bin/mysql.server start(其实我感觉没什么用) 2.http://www.itbulu.com/xampp.html 试过几次，没用 3.重新安装，时而好使，时而不好使 4。在xampp中修改端口号，比如改为3307（试过一次，不过还有其他的问题因为卸载重装之后数据库出现了问题，不过按理来说是好使...
2018-04-16 23:29:16
419
原创 vue-cli在使用axios时候的一点小坑
安装axios： npm install axios --save起来是很正常的npm安装依赖，axios官方也是这样推荐安装。但是，这时候坑就出来了。报错了!!!,图片暂时找不到了，反正是说什么美团的源之类的，我也是一脸懵逼，然后尝试着安装了好几遍就是不好使，后来看网上博客，发现需要用cnpm install axios –save， 也就是所谓的淘宝镜像，那么如下就可以了...
2018-04-16 23:05:45
790
原创 git小结
首先让我们先看一下这张图 git近乎所有操作都是本地执行，时刻保持数据完整性，直接记录快照，而非差异比较 git配置●/etc/gitconfig 文件：系统中对所有用户都普遍适用的配置。若使用 git config 时用–system 选项，读写的就是这个文件。●~/.gitconfig 文件：用户目录下的配置文件只适用于该用户。若使用 git config 时用–global 选项，读写的
2017-12-18 12:09:40
1137
原创 href和src的区别
href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。 src是source的缩写，src的内容是页面必不可少的一部分，是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe。
2017-08-06 15:43:55
338
原创 BFC
BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。虽然我知道如何利用 BFC 解决这些问题，但当别人问我 BFC 是什么，我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BFC。 一、BFC是什么？ 在解释 BFC 是什么之前，需要先介绍 B
2017-08-05 16:37:35
448
原创 js垃圾回收机制
js垃圾回收: 目前JS的垃圾回收机制无非就是两种：1.标记清除（make-and-sweep） 2.引用计数（reference counting） 1.标记清除： 标记清除简单的来说就是给各个变量名打上 YES or NO的标签以供JS引擎进行处理（当然打什么标签自己理解即可）。在和执行上下文类似的的环境中当变量名称进入环境的时候，那么变量会被打上 YES。一般来说
2017-08-05 16:33:20
350
原创 重绘和回流（重排）
一、html页面的呈现流程 1. 浏览器把获取到的HTML代码解析成1个DOM树，HTML中的每个tag都是DOM树中的1个节点，根节点就是我们常用的document对象。DOM树里包含了所有HTML标签，包括display:none隐藏，还有用JS动态添加的元素等。 2. 浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式，比如IE会去掉
2017-08-05 16:13:23
575
转载 判断JS数据类型的四种方法
本文章转载自http://www.cnblogs.com/onepixel/p/5126046.html 说到数据类型，我们先说一下JavaScript 中常见的几种数据类型：基本类型：string,number,boolean特殊类型：undefined,null引用类型：Object,Function,Function,Array,RegExp,Date,…很多时候我们都需要通过判断变量的数据
2017-08-05 13:53:15
395
原创 浏览器缓存机制
之前一直对浏览器缓存只能描述一个大概，深层次的原理不能描述上来；终于在前端的两次面试过程中被问倒下，为了泄恨，查阅一些资料最终对其有了一个更深入的理解，废话不多说，赶紧来看看浏览器缓存的那些事吧，有不对的地方，请各位不吝赐教啊。 本文主要讲解浏览器端的缓存，缓存的作用是不言而喻的，能够极大的改善网页性能，提高用户体验。 1、浏览器缓存 缓存这东西，第一次必须获取到资源后，然后根据返回的信息来
2017-08-05 13:44:44
358
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人