- 博客(165)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
RSS订阅
原创 浏览器页面缓存 - Cache【性能篇】
如果【停用缓存】被勾选了，浏览器发送的请求中就会自带 Cache-Control：no-cache和Pragma：no-cache两个请求头。会强制要求缓存把请求提交给原始服务器进行验证 (协商缓存验证)。假如 Cache-Control 在请求头中不存在的话，Pragma：no-cache的行为与 Cache-Control: no-cache 一致。在Demo演示之前，切记将浏览器中的 【网络 -> 停用缓存】选项不要勾选。否则浏览器不会从本地缓存取数据。
2023-04-09 20:45:35
2160
原创 浏览器页面安全-CSRF【安全篇】
CSRF （Cross-site request forgery），又称为“跨站请求伪造”，是指黑客引诱用户打开黑客的网站，在黑客的网站中，利用用户的已登录状态发起的跨站请求。简单来讲，CSRF 攻击就是黑客利用了用户的登录状态，并通过第三方的站点来做一些坏事。目标站点存在漏洞用户要登录过目标站点黑客需要通过第三方站点发起攻击根据这三个必要的条件，介绍了如何避免CSRF。利用Cookie中的 SameSite 属性利用请求头中的Origin来判断请求的来源CSRF Token的方式。
2023-04-02 20:14:02
785
原创 浏览器页面安全-XSS【安全篇】
XSS （Cross Site Scripting），为了与“CSS”区分开来，故简称 XSS，翻译过来就是“跨站脚本”。XSS 攻击是指黑客往 HTML 文件中或者 DOM 中注入恶意脚本，从而在用户浏览页面时利用注入的恶意脚本对用户实施攻击的一种手段。最开始的时候，这种攻击是通过跨域来实现的，所以叫“跨站脚本”。
2023-04-01 23:20:35
829
原创 Lighthouse组合Puppeteer检测页面
如上一篇文章结尾提到的一样，我们在实际使用Lighthouse检测页面性能时，通常需要一定的业务前置条件，比如最常见的登录操作、如果没有登录态就没有办法访问其他页面。再比如有一些页面是需要进行一系列的操作，点击某些按钮，调用某些接口完成一些业务之后才能打开某个页面。
2023-02-26 16:36:21
1431
原创 mac终端给常用命令设置别名--让开发变得更方便
在平时开发中会使用终端操作各种命令，比如cd 到某个路径下，用vscode或者sublime或者webstorm 打开某个工程。比如需要cd到某个路径下去干点什么，需要自己查看该路径，这时候我们就可以为自己常用的shell命令设置常用的命令别名，让这一切都变得更加简单。查看本地已登记的别名在登记自己自定义的别名之前，最好查看一下本地中已有的别名，避免重复可以使用 下面的命令开查看本地已登记的...
2019-05-11 14:42:50
10047
原创 一个好玩的浏览器插件
背景是我们在开发过程中有时需要做一些测试验证，需要修改请求头字段和响应头字段的内容，有时需要在页面做测试，反复请求同一个接口，并修改一些字段。的生产环境获取的(或者其他的一个资源服务)，此时需要从测试环境获取这个配置文件来帮我们快速的做一些验证或者测试的话，那我们就可以使用这个代理，将原本请求A服务的资源重定向到B服务。服务，所以就抽时间开发了一个浏览器插件，只需要安装好这个插件，按需将需要修改的请求地址和修改的请求头/响应头配置之后就可以了。就会被拦截，此时只需要配置一下修改的规则，就可以把。
2023-09-12 10:05:56
438
原创 Redux中间件源码解析与实现
本文中涉及到的关键npm包的版本信息如下：react 的版本为18.2.0redux的版本为4.1.2redux-thunk版本为2.4.2redux-promise版本为0.6.0redux-logger版本为3.0.6在Redux源码解析与实现（一）Redux源码解析与实现（二）这两篇文章中，详细讲解了怎么实现一个Redux的核心功能，而Redux默认只能够处理的参数，所以我们需要引用各种中间件来加强dispatch,使其能够传递异步函数或者是promise。
2023-09-06 18:30:32
792
原创 ReactRedux源码解析与实现
在Redux源码解析与实现（一）Redux源码解析与实现（二）两篇文章中我们知道了通过可以帮助我们在大型复杂的应用中解决状态管理的问题，但我们也发现，只是分析的基本使用和源码之后，梳理了整个逻辑图如下所示：react-redux的基本使用ract-redux的核心实现Redux源码解析与实现（一）Redux源码解析与实现（二）
2023-08-30 21:56:17
280
原创 RC-Field-Form源码解析与实现
本文中涉及到的关键npm包的版本信息如下：react 的版本为18.2.0rc-field-form的版本为1.37.0是一个非常受欢迎的前端表单组件库，AntDesign中的Form表单就是基于实现的。今天就来解析一下的源码部分，并且会自己实现一个相同功能的。
2023-08-30 21:46:55
824
原创 我是怎么从0到1搭建性能门禁系统的
一个常见的场景就是我们自己的产品使用lighthouse进行检测的时候，往往需要用户先登录，此时我们就可以使用Puppeteer来帮助我们先模拟用户登录，登录之后，利用Cookie的同源策略再次检测我们的页面就可以了。这里又会引申出另一个问题，由于我们的业务场景各不相同，导致我们的页面也是各有各的特点，比如音视频类型的网站里面的流媒体比较多，而淘宝、天猫京东，这些电商网站他的图片就非常多还有可能会做成长页面的效果，而一般的业务系统可能表格和弹框比较多。他的性能模型主要采集6个不同的和时间相关的指标。
2023-08-23 20:15:39
375
原创 全链路质量保障体系的实践
我在年终给老板们汇报时画了这一张图来表示我们建设的全链路质量保障系统：圈越大表示越重要，中间是一个三角形，下面的三个大问题分别是：安全、质量、性能问题需要解决。这三个问题如果能够得到解决或者是有效的控制，那就是一个三角形的底座，进而保障我们产品对外的稳定性，对内也表明我们现在的保障流程是有效的。再进一步也就提高了我们产品的整体体验目前所在的公司算是比较传统类型的公司，各个基础设置都比较欠缺，很多基建或者是基建的基建都需要自己去建设。
2023-07-29 15:15:34
643
原创 Redux源码解析与实现（二）
就是一个React的合成事件，React就会对其对应的映射值做以上三步骤的处理。React内部将所有的方法都做了一个映射表。比如我们通常写的业务代码中。，之所有React有自己的合成事件系统可以总结成三个原因。React 中有自己的事件系统模式，通常被称为。，那么在Ract内部的所有方法的映射对象中查找。那就不会走React的合成事件系统了。，发现有在映射对象中有登记，那。映射的结果了，或者使用原生的。那在映射表中自然就找不到。
2023-07-29 13:59:10
177
原创 Redux源码解析与实现（一）
通过自定义Hook的方式我们就解决了组件之间状态共享的问题，没有给原本的组件增加复杂度。2、还有一点就是我们可能在组件的某个生命周期做很多事情，比如在组件加载完成时进行一些事件的订阅，发出一些请求。但这类的方案需要重新组织组件的结构，也就是会影响到我们原本的组件之间的结构。表单数据收集时（比如点击了表单的submit，此时表单组件需要把各个子组件的状态收集放回给你注册的回调事件中）就会比较麻烦。在Antd3中的解决方案其实是把表单内的子组件的转态都存储在顶层的父组件组件。的方式解决的，但也有弊端。
2023-07-29 13:36:56
195
原创 Node中的的util.promisify()方法的介绍和基本实现
其实我们做的事情只是将回调函数的逻辑做了修改，原本是直接在回调中处理业务逻辑，这里我们修改为在回调函数中把异步事件处理的结果通过给返回出去我们也可以看一下在NodeJS。
2023-07-16 22:08:52
705
原创 将node服务打包成可执行文件-PKG
有时我们需要写一些node的服务或者是工具，但这些工具&服务可以运行的前提条件是当前环境需要安装好node，有时候我们把这些工具&服务发送给别人，在别人的电脑中未必有安装好的node版本，即便有也可能不是期望的指定的Node版本，在这样的场景下我们可以把写好的node 服务 & 工具打包成一个可执行文件发送给对方，将程序需要依赖的所有的东西，比如node环境，再比如跑RPA需要的浏览器环境也可以打包到我们自己的可执行文件中。也一起打包进我们的可执行文件，这样才能在运行。是一个很强大的打包工具，这里是以。
2023-07-12 19:47:37
1671
原创 HTML5 WebSocket介绍与基本使用（解析服务端返回的二进制数据）
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
2023-07-11 19:41:13
2205
2
原创 设计模式之装饰者模式-TS中装饰器介绍
装饰器是一种特殊类型的声明，它能够被附加到类声明，方法，访问符，属性或参数上。装饰器使用@expression这种形式，expression求值后必须为一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入方法装饰器声明在一个方法的声明之前（紧靠着方法声明）。它会被应用到方法的属性描述符上，可以用来监视，修改或者替换方法定义对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。成员的名字。成员的属性描述符。类装饰器在类声明之前被声明（紧靠着类声明）。
2023-07-06 10:35:43
5909
原创 阿里的一道面试题按需求写代码 - 【函数】
先过滤，在排序，最后在分组，然后得到这个处理之后的数据。原题大意是接受一个数组，然后一顿捯饬之后对入参。我们使用面向对象，使用class的写法。
2023-07-04 19:40:32
132
原创 并发数为N，最快完成任务 -【Promise】
代码运行的结果也是符合预期的，最开始并发n个请求任务，在每个请求任务完成后再发送一个新的请求，使用递归方法直至全部请求都发送完成（递归的出口）。并按照发送的顺序收集了每个请求的响应结果。并发数为n，意味着同一时间可以处理n个请求任务。这些任务中有完成的，就可以从未完成的任务中选择一个发送，直至所有请求发送完即可。比如有若干个请求，设置最大的并发数为n。怎样才能最快的完成这一批请求。函数就可以获得n个异步任务，这些任务的完成时间在。内，下面我们看看怎么最快的完成上面的这些任务。
2023-07-04 19:18:42
189
原创 异步的终极方案Async-Await 和Generator
之前解决异步我们一直使用Promise的方案，虽然解决了回调地狱的情况，但使用链式写法也并不特别优雅。比如看下面的代码。所以就出现了一种号称异步的终极方案AsyncAwait。我们看他的定义async 函数是使用async关键字声明的函数。async 函数是 AsyncFunction 构造函数的实例，并且其中允许使用await 关键字。async 和 await 关键字让我们可以用一种更简洁的方式写出基于 Promise 的异步行为，而无需刻意地链式调用promise。
2023-07-03 19:38:23
374
原创 深入了解Promise机制并使用JS实现一个Promise（二）
Promise 实例的 catch() 方法用于注册一个在 promise 被拒绝时调用的函数。它会立即返回一个等效的 Promise 对象，这可以允许你链式调用其他 promise 的方法。此方法是 Promise.prototype.then(undefined, onRejected) 的一种简写形式。我们看下原生promise.catch的效果finally() 方法返回一个 Promise。
2023-07-02 23:48:08
219
原创 深入了解Promise机制并使用JS实现一个Promise（一）
关于为什么会有Promise以及Promise的一些用法和基本机制可以参考之前的文章JS中的异步与Promise使用整体来说，Promise可以帮助我们很好的解决异步的问题，号称是异步的终极解决方案。在浏览器中Promise是使用C++实现的，今天就使用js来实现一个JS版本的Promise。这样可以更深层次的帮助我们理解Promise每一个Promise对象都有三种状态： pending 、resolve 和 rejectPENDING : 进行中，Promise 对象的初始状态。
2023-07-01 23:50:09
576
原创 JS中的异步与Promise使用
Promise是JavaScript异步编程的一种流行解决方案（号称是终极解决方案），掌握Promise的使用是js开发者不可或缺的一项基本技能。但是要想熟练掌握并深入的理解它，还是必须要知道它的实现原理的。在浏览器中Promise的实现是通过C++实现的，我们这里就使用js来实现一个js版本的Promise。
2023-07-01 14:30:43
486
原创 Electron中启动node服务
在electron 应用启动之后，会调用startServer方法，在这个方法中会使用exec执行npm run server命令，这个命令会启动一个koa的node 服务。记一次遇到的问题，我们知道Electron 中主进程是在node环境中，所以打算在node环境中再启动一个node服务。但是会发现electron应用的窗口没有正常打开，但这个node 服务已近启动起来了。后来发现是应为使用了同步的命令导致的，只需要把execSync命令缓存exec或者是spawn就可以解决了。
2023-06-27 20:08:20
2280
原创 Node环境中调用Python脚本
今天遇到一个需要在Node服务中调用Python脚本的需求，这里就把这个场景单独抽离出来汇总一下方法在node中的child_process中有execSync, exec两个方法来创建一个子进程，然后在子进程里执行对应的python命令，这两个命令可以让我们执行一个脚本命令。
2023-06-27 19:58:31
1833
原创 函数式编程相关概念介绍
函数式编程（Functional Programming）也称函数程序设计是一种编程范式，它将电脑运算视为函数运算，并且避免使用程序状态以及可变物件在js中，函数是一等公民，函数本身既可以作为其他函数的入参，也可以作为一个函数的返回值。而函数式编程强调函数执行的结果而非过程。倡导利用若干简单的执行单元让计算结果不断渐进，逐层推导复杂的运算结果，而不是设计一个复杂的执行过程。
2023-06-26 20:17:22
364
原创 HTTPS协议-保障数据安全【安全篇】
实现完整性的手段主要是摘要算法（Digest Algorithm），也就是常说的散列函数、哈希函数（Hash Function）。我们可以把摘要算法理解为一种特殊的信息压缩算法，能达到的效果就是把任意长度的数据通过摘要算法变为固定长度、而且独一无二的字符串。就好像是生成了一个数字指纹一样。并且这个过程是单向的，即只有算法，而没有秘钥。加密之后的数据无法解密。不可能从加密之后的信息摘要逆推出原文。具有单向性的特点除了单向性特点之外还具有一个雪崩效应，即原信息如果发生了微小的变化都会导致输出的剧烈变化。
2023-06-14 22:02:31
1118
原创 浏览器唤醒本地应用
我们可以通过自定义协议来唤起本地应用，只要协议和应用对接好久ok。query]scheme: 应用的表示，需要在本地注册过。比如这里使用自定义标识 x-worldpath: 对应的是应用中的某个功能模块的页面。query:就和URL中的查询参数一样，需要传递给应用的参数直接上代码//Electron main.js 主进程中 // 自定义协议名 const agreement = 'x-world' // 注册自定义协议 function setDefaultProtocol() {
2023-06-14 22:01:58
1969
原创 网络安全 - Web应用防护墙（WAF）
web 服务部署在公网容易受到来自黑客的各种攻击，所以有必要使用WAF来加以保护WAF工作在第七层，是一种根据HTTP请求报文来检测入侵和防御的系统WAF实质上是解析HTTP的请求报文来进行各种模式匹配和数据过滤，所以会消耗一定的CPU，有一定的计算成本。需要我们再安全和性能之间找到一个”平衡点“
2023-04-08 11:34:24
1263
3
原创 浏览器用户身份-Cookie【知识篇】
HTTP cookie，简称cookie，是用户浏览网站时由网络服务器创建并由用户的网页浏览器存放在用户电脑或其他设备上的小文本文件。浏览器存储这样的信息之后，会为每个请求添加Cookie的HTTP请求头。将Cookie发送回服务器。
2023-04-06 20:50:33
1037
原创 使用Ant Design Anchor组件的一个坑
因为使用的是hash路由，所以在页面使用这Anchor组件时，就会自动的去react-router这个组件中去寻找对应的路由，而不是去页面找对应的锚点，所以就会报找不到的错误。在使用Ant Design@4.21.3版本中Anchor组件时，遇到一个问题。点击左侧菜单锚点时，页面总报错没有找到对应的路由。将hash路由换成history路由即可解决。最终修复完之后效果就正常了。
2023-04-05 20:13:09
509
原创 网络安全-信息泄露和社会工程学
社会工程学是指在信息安全方面操纵人的心理，使其采取行动或泄露机密信息。有别于社会科学中的社会工程，这是种以收集信息、欺诈或入侵系统为目的的信任骗局，已发展出各种技术手段，并可能用于犯罪。了解保护个人信息的重要性，并在平时上网，中介登记信息…等其他社会行为的时候，注意自己一些隐私信息的泄露。各种购物网站，APP，是用户无意识泄露信息最多的地方。火车票，快递信息也是包含了用户的个人信息。
2023-04-05 19:29:24
152
原创 网络安全-重放攻击（Replay Attack）
API重放攻击（Replay Attacks）又称重播攻击、回放攻击，这种攻击会不断恶意或欺诈性地重复一个有效的API请求。攻击者利用网络监听或者其他方式盗取API请求，进行一定的处理后，再把它重新发给认证服务器，是黑客常用的攻击方式之一。
2023-04-04 21:22:32
3841
原创 网络安全-拒绝服务（DDOS）
拒绝服务攻击（英语：denial-of-service attack，简称DoS攻击），是一种网络攻击手法，其目的在于使目标电脑的网络或系统资源耗尽，使服务暂时中断或停止，导致其正常用户无法访问。当黑客使用网络上两个或以上被攻陷的电脑作为“僵尸”向特定的目标发动“拒绝服务”式攻击时，称为分布式拒绝服务攻击（distributed denial-of-service attack，简称DDoS攻击）亦称洪水攻击。DOS: 一台or几台机器发生攻击。
2023-04-03 20:18:53
2477
原创 浏览器页面安全-同源策略【安全篇】
为了让我们的页面变得更加安全，浏览器会使用 同源策略隔离不同源的DOM、网络数据、和网络通信。但我们在实际开发应用中对于上述的场景都有实际的需要，所以就需要再安全性和便利性之间取得一个平衡。既要保障安全，也要保障一定的灵活性。两个不同源的DOM之间也是不能相互通信 / 操纵的，于是在此之上引入了夸文档消息通信机制。让其可以比较安全的通信页面中可以引用第三方资源，由此而导致的很多诸如XSS之类的问题可以通过CSP来限制。
2023-03-26 12:52:15
1031
原创 HTTP协议发展历程-HTTP2【协议篇】
在http1.x时代遗留的三个问题。TCP慢启动多条TCP连接竞争带宽队头阻塞这些问题在H2中是如何通过多路复用的方式解决的。多路复用是通过在协议栈中添加二进制分帧层来实现的，有了二进制分帧层还能够实现请求的优先级、服务器推送、头部压缩等特性，从而大大提升了文件传输效率。据统计使用 HTTP/2 能带来 20%～60% 的效率提升，至于 20% 还是 60% 要看优化的程度了。
2023-03-21 19:45:00
860
TA创建的收藏夹 TA关注的收藏夹
TA关注的人