自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(80)
  • 收藏
  • 关注

原创 如果用户被诱导添加了证书甚至根证书,那哪怕用了 HTTPS,使用中间人攻击就可以窃取用户所有信息了?

HTTPS 的实现是通信前,服务器给 client 返回一个证书,其中包括签发机构、证书主体(有域名,与client 请求的进行校验)、公钥等信息,签发机构相当与上一级的证书,循环验证,依赖操作系统本身自带的根证书保证证书可靠,保证跟你通信的这个服务器确实是这个服务器而不是进行中间人攻击的黑客。像网页上可以进行网银转账,早期可能是要用 U 盾,还得在 U 盾输入金额啥的,U 盾生成的数字可能还带了转账人的信息,这样哪怕有中间人攻击也得把 U 盾也破解了才能转别人的号的钱。或者如何识别出证书是假的?

2024-03-08 13:09:46 405

原创 什么时候要用到Reflect API?

里说 receiver是调用时 this 的指向,第一个参数 target 是目标对象,在上面的例子里,因为 b 没有 name 属性,所以沿着原型链去找,在 a 找到了,此时 get 方法里,obj 就是 a,recevier 仍是 b,我们按照预期应该是用 b 的 secondName 才对。,但 Proxy 还有很多其他的 API,如果这些 API都 要重新实现一次原本的行为比较麻烦,也不清晰。同时,b 是没有 firstName 的,看结果最后也从 a 里取到 firstName 的值了。

2024-02-26 20:19:23 462

原创 HTMLElement.click()的回调触发踩坑

每个宏任务之间会先清空所有微任务,因此打印顺序是 1- 》 microtask1- 》 2-》 microtask2。点击按钮后,分别进入两个回调,进入第一个回调时,先加到微任务,然后打印 1。问了下 gpt,说是 click 会立即把回调同步执行的,那就符合预期了。而当按钮是用户点击触发时,回调就分为多个宏任务触发了。那如果按钮点击不是用户触发,而是代码触发呢?按理说输出应该一样才对,但输出竟然变了!是 click 这个函数有什么特别吗?

2024-02-23 15:48:25 344

原创 简单实现节流函数踩的小坑

这里是变量作用域导致的,一开始_args的作用域在 throttle 返回的函数里,当调用了一次函数 t,setTimeout 里存着_args的值。下次调用函数 t,_args重新定义,就是新的内存地址了,再去改变他的值并不改变之前 setTimeout 传入参数的值。场景参考:周期上报,有的数据不急着报,只要定时上报即可,开发者可能在多个地方调用周期上报,只需把数据存起来一起报即可。setTimeout 的_args就一直用的同一份,之后多次调用函数 t,更新_args的值就生效了。

2024-02-22 15:49:06 134

原创 使用playwright进行自动化端到端测试

项目希望能接入自动化端到端测试提高可靠性,发现微软的 playwright 还挺好用的,推荐一下,顺便说下遇到的一些难点以及最佳实践。

2024-02-15 20:41:42 863

翻译 【读书笔记】 JavaScript 引擎基础:shapes和Inline Caches

这是这篇文章的翻译,帮助了解 JS 引擎基础部分内容。这篇文章介绍了一些关于 JS 引擎的基本概念Shapes和 Inline Caches,这有助于你理解代码性能。

2024-02-13 23:36:14 29

原创 nodejs 事件循环

node.js的事件的循环

2024-02-03 22:04:52 860

原创 前端构建变更:从 webpack 换 vite

前端构建变更,从 webpack 换到 vite,加深对构建工具的理解

2024-02-01 20:53:57 1646

原创 try catch不能捕获promise的错误

我们知道try catch能捕获try代码块的异常,但如果异常在promise里抛出,那外层的try catch是捕获不了的。

2023-07-25 16:07:50 660

原创 闭包可能导致的内存泄漏

闭包是函数可以保留和访问其外部变量,闭包可能会导致内存泄漏,下面介绍其中一种case,加深对闭包的理解

2023-02-15 15:11:01 360

原创 实现固定表头和表列的table组件

实现固定表头和表列的table组件

2022-12-13 19:53:39 2098 2

原创 vue 计算属性未重新计算 / computed 未触发 / computed 原理&源码分析

vue computed源码分析

2022-11-30 18:11:53 13024

原创 搭建内置内部库的vue3组件在线解释交互器

搭建内置内部库的vue3组件在线解释交互器

2022-06-17 17:51:44 1125

原创 小程序包体积优化

小程序包体积优化思路分享

2022-02-11 17:38:42 791

原创 HTTP/3是什么

https://www.smashingmagazine.com/2021/08/http3-core-concepts-part1/跟HTTP/2有什么不同HTTP/3的传输层不是TCP,而是UDP+QUIC。为什么不用TCP?因为TCP不是按最高效率设计的,比如在传输数据前要先握手,握手要先来一个RTT,如果两端地理位置比较远,这可能要超过100ms。而且TCP传输数据时,把数据当成一个文件或者一个字节流,这意味着如果中间有数据丢失,那后面的数据也会堵住,这叫队头阻塞,HTTP/2在应用层解决.

2022-02-11 17:10:04 2016

原创 web前端工程发展史阅读笔记

https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html看了一篇文章挺有意思的,介绍web前端工程是如何演化到现在使用npm、webpack、babel这一系列工具的,把关键点翻译为中文,方便自己之后看。原始时代最早就像大学学的,直接写<!-- index.html --> <!DOCTYPE html> <html lang="en"> <head&.

2022-02-09 19:42:11 552

原创 浏览器如何决定一个请求是用HTTP1还是HTTP2?

HTTP2众所周知的很方便,多路复用、二进制协议、优先级控制、服务器推送、头压缩,那在浏览器,怎么知道一个请求是用http1还是http2呢?难道是先用http1试下,问问能不能upgrade,可以再升级到http2? 这样听上去很慢?要多一个请求。或者浏览器本地存一个表,存的是服务器ip+请求url,记录哪些是支持http2的? 但这样开销似乎挺大的,不现实。查文章才发现有这个说法https://hpbn.co/http2/在tls握手的时候就去协商能不能用http2,这样就不会造成浪费了,不

2021-12-07 16:44:12 2321

原创 滚动条自动显示和隐藏

mac的chrome的滚动条会在停止滚动后自动隐藏,开始滚动时显示。但windows的滚动条会一直显示,在设置里设置了自动隐藏也是一样。这里有个统一的实现,可以使得不同系统在chrome上的滚动条显示一致。原理是用了伪类和伪元素选择器,使滚动条在不hover时透明色,hover时显色。实现了鼠标hover上去时显示滚动条,离开时隐藏。<div class="container"> <div style="overflow-y:auto;"> </div><

2021-08-06 16:14:52 4563

原创 脚手架yo遇到错误Current yeoman-environment is not compatible with current generator

最近想把公用的代码抽出来,传到git,然后写个脚手架自动拉代码,copy代码。这样在做新项目的时候,如果想复用一些公用的函数、组件、库,直接用脚手架输入几个yes就可以了。随便搜了下,先试下用yeoman,按官网的教程安装并写一个demo,运行时却一直提示Current yeoman-environment is not compatible with current generator, min required: 3.0.0 current version: 2.10.3. Some feature

2021-03-23 11:12:24 481

原创 快速切换浏览器dns hosts

有频繁切换hosts的需求,一开始用的是switchhost!,的确方便,不用注释,只需要打开开关,但经常浏览器要等几分钟才生效,哪怕打开chrome://net-internals 清hosts的缓存也没用之后了解到whistle这个工具,配合Proxy SwitchyOmega可实现快速切换代理,原理就是Proxy SwitchOmega把特定请求转到代理服务器whistle,whistle再把特定域名的请求使用配置的ip进行请求。安装whistle, sudo npm install -g wh

2020-07-30 21:12:50 1511

原创 小程序为什么要使用双线程模型

https://developers.weixin.qq.com/ebook?action=get_post_info&token=935589521&volumn=1&lang=zh_CN&book=miniprogram&docid=0006a2289c8bb0bb0086ee8c056c0a以前以为小程序跟网页一样,都是单线程,如果js有耗时高的操作,页面可能就会不响应,后来了解机制才发现,小程序的逻辑层和渲染层是在两个不同的线程的,为什么要这么分开呢?除.

2020-07-21 21:15:56 1156 1

原创 web前端轮询获取数据的定义及优劣

什么是轮询轮询一开始应该是CPU调度算法里的概念,通俗来说就是CPU每隔一段时间都问下需不需要服务。这个概念延伸到web服务中也类似,前端每隔一段时间去向服务器请求信息。为什么需要轮询那为什么要用轮询呢?其实这里说的也算是轮询的优点。当前端每隔一段时间都要确认一些信息是否有变化时,就需要用到轮询。毕竟前端要获取到服务器状态变更,要么主动拉、要么让服务器推。主动拉的情况,又分为用户行为触发和我们定时去拉,要想信息尽可能新,肯定不能只等用户的行为去触发,也需要我们每隔一段时间去拉。所以我们就得出轮询第一

2020-06-07 13:48:37 2980

原创 QQ浏览器referrerPolicy无效

关键词: QQ浏览器 referrerPolicy 无效 不生效 no-referrer有个需求写个iframe显示其他域名的网页,其他域名的页面也要带上登陆态,但是如果有referer的话,其他域名页面的后台发现有referer,且不是本域名就会报错,所以需要删掉iframe请求的refer头部。当然也可以后台对特定域名不校验refer。不过这个要后台同事改,不够快捷。一开始是直接在iframe里加属性referrerPolicy="no-referrer",在chrome是ok的,iframe的请

2020-06-03 16:24:41 785

原创 当前端的一次操作会调用多个有关联的后台接口

由于历史原因,前端的一次操作需要调用多个后台接口,以前写的一般都是调用一个的,或者哪怕是多个,接口之间也不会有依赖。但最近做的需求里,前端一次操作需要调用两个后台接口,且这两个接口是有关联的,需要先调用接口A,再调用接口B。一开始直接写两个Promise,一个成功后调用另一个,类似于这样子 fetch(urlA) .then((res) => { if (res.ret == 0) { fetch(urlB) .then(() => { ///

2020-05-31 18:10:42 5559

原创 小程序iOS Promise不支持finally语法 TypeError: undefined is not a function .finally is not a function

小程序iOS Promise不支持finally语法一开始知道finally语法是在Java,以为是很基本的语法,所以在JavaScript应该也支持,不需要考虑兼容性,后来查MDN才发现并不是。Promise的finally和try…catch…finally不是同一个东西,只是都叫finally而已。在小程序的iOS中,更是直接不支持Promise的finaly语法,会报TypeError: undefined is not a function或.finally is not a functio

2020-05-27 14:21:20 2051 8

原创 同一个链接在浏览器打开与iframe引用表现不同

做项目时发现,同一个链接在浏览器打开与iframe引用表现不同。这个页面需要登录态信息,之前已经有登陆过,有cookie,在浏览器能正常打开,但iframe引用却发现打开失败,需要重新登录。打开开发者工具观察请求参数,发现iframe引用多了个referer字段,于是在iframe那加个属性referrerPolicy="no-referrer",没想到竟然ok了……看来是后台校验了一下refer...

2020-03-20 17:05:05 1372

原创 pthread_join / __pthread_internal_find 函数发生SIGABRT的crash (Android)

pthread_join等待一个线程结束才返回。他会先调用__pthread_internal_find函数查找这个线程是否存在,但在android 26之后,__pthread_internal_find函数对找不到的线程会crash。https://stackoverflow.com/questions/46457800/android-oreo-8-0-native-c-crash-i...

2019-10-30 20:59:04 1818 2

原创 OC里NSMutableURLRequest/NSURLRequest里的cookie

OC里NSMutableURLRequest/NSURLRequest没有设置cookie会用默认cookieOC里cookie用二级域名存,如qq.com(存储时是.qq.com),就是说v.qq.com可以用sports.qq.com的cookie,在浏览器这我记得是不允许的问题:下付费视频需要鉴权,鉴权其中一环是请求时需要带cookie,但我使用NSMutableURLRequest...

2019-10-23 15:34:44 640

原创 JavaScript里的this

https://wangdoc.com/javascript/oop/this.htmlJavaScript里的this知识点问题来了解决方案this在有些地方会让人感觉很困惑,这里记录下。知识点this指向谁,是实际运行时才决定的。this指向当前运行环境(这里的运行环境是一个JavaScript对象)。比如下面代码的this指向对象A。var A = {...

2019-09-21 20:59:55 137

原创 运行时遇到libstdc++.so.6: version `GLIBCXX_3.4.21' not found

跨平台编译,运行时遇到libstdc++.so.6: version `GLIBCXX_3.4.21’ not found网络都说是这个新的so在更新g++后没有更新下来,或者没有更新链。但我这边情况有点不同,运行环境不在我这,而且运行环境一般不会变更,我也无法便捷的更新运行环境系统的库,且以前都跑得好好的,怎么突然就出问题?查到这个so是跟g++一起的,我这边的场景是跨平台编译,在Ubunt...

2019-09-12 17:13:28 776

原创 Unicode 和 UTF-8的区别

Unicode 和 UTF-8他们是两种不同的编码方式吗?不。先搞清楚什么是编码方式,在计算机中,不管是程序还是数据,实际上都是一段二进制,看你如何看待它而已。而编码规则,我的理解是,首先确认这是一段文本数据,不同的编码规则会把这段01二进制转换为不同的字符。这里的字符就是我们人能看到的数据,比如字母、数字、中文、符号等。比如我创建了一套编码规则,当遇到一段二进制时,观察每个字节的内容,将...

2019-09-10 23:05:39 692 1

原创 web的缓存

缓存就是用空间换时间,提前把可能要加载的数据,放到读取速度更快的存储空间中,加快下次读取效率。web前端的缓存有哪些呢?DNS缓存dns解析可能很费时间,针对dns解析,浏览器有缓存或预读取机制。预读取机制看https://developer.mozilla.org/zh-CN/docs/Controlling_DNS_prefetching缓存机制也分为多级:浏览器缓存系统缓...

2019-08-31 21:25:03 180

原创 HTTP状态码301、302的区别

301与302的区别参考资料:https://blog.csdn.net/zhouchangshun_666/article/details/79354193https://www.cnblogs.com/cswuyg/p/3871976.html301,永久重定向。302,暂时重定向。重定向就是你发送一个请求,服务器返回30x状态码,然后把新的地址放在Response的Locat...

2019-08-31 21:21:26 475

原创 前端安全-XSS攻击、CSRF攻击

先来玩一个小游戏,输入一定的值,令到XSS攻击成功,执行alert(1)的代码https://alf.nu/alert1warmup,第一题很简单,直接");alert(1);("就能过adobe,第二题对"进行了转义,但可以用\令到转义字符\失效,之后再加上alert(1)即可过关。参考答案\");alert(1);//json,第三题尝试把输入数据转换为JSON,但没有对<...

2019-07-22 00:12:35 423

原创 把文件删掉不是真的删掉

以前Windows误删了文件,能用DiskGenius恢复,因为只是在磁盘那删了索引,实际的内容要等新的数据写入才会删除。这也合理,磁盘读写是有寿命的,普通的删除没必要再写一次去覆盖数据。最近在macOS上写测试代码,其中有个测试是模拟用户清理空间行为,把视频文件删掉后,能否重新下载下来。测试的时候发现,文件在磁盘删掉后,也确认从内存删掉后,竟然没有再次下载数据就读到。调试了很久之后发现,数据是...

2019-06-18 20:40:37 305

原创 视频技术基础

视频技术基础与演进基础概念色彩空间RGB红绿蓝,RGB24就是常见的用24位,每个用0~255表示。 RGB32就是加上Alpha通道,好像就是透明值。YCbCR/YUV解决黑白电视不能接收彩色信号问题。Y是亮度,U、V是色彩。视频即图像叠加帧I帧 关键帧,参考帧。压缩效率低,无需参考其他图像,可作为参考图像。P帧 前向预测帧,依赖前面的帧,可作为参考图像B帧 双向预...

2019-04-03 14:25:54 381

原创 git merge 与 rebase, 还有stash概念

git merge 与 rebase, 还有stash概念来源 https://git-scm.com/book/en/v2/Git-Branching-Rebasinghttps://www.jianshu.com/p/c17472d704a0git merge 与 rebase, 还有stashmergerebase应用场景注意点stash在git中,有两种...

2019-03-26 13:24:29 979

原创 论文Optimizing the Throughput of Data-Driven Peer-to-Peer Streaming读书笔记

论文Optimizing the Throughput of Data-Driven Peer-to-Peer Streaming读书笔记论文链接看这篇论文想解决的问题为什么要解决哪个block由哪个结点下载的问题笔记疑惑结论论文链接http://ieeexplore.ieee.org/document/4509427看这篇论文想解决的问题P2P时,确定某个block由哪个结点下载。bl...

2019-03-14 21:00:13 271

原创 JavaScript也会内存泄漏

一直没时间写,本来想着晚上写的,但晚上又有其他问题。先简单写写吧,用chrome的devTools的memory发现内存一直增大。顺着函数查下去,发现前端同事用一个数组存储了没来得及处理的事件,这些事件有对下载数据(一直有下载,且量大)的引用,然后事件处理完后却没有把事件从数组中清除,有引用导致GC回收不了这部分内存,造成内存泄漏。甚至内存爆掉影响用户体验。JS也会有内存泄漏问题,数组存放东西...

2018-11-05 20:50:54 209

原创 一个隐藏层的简单神经网络代码框架

https://www.deeplearning.ai/ 上第一课第三周的编程作业介绍了如何实现一个隐藏层的神经网络。 https://github.com/stormstone/deeplearning.ai 这里可以获得编程作业整体框架 这里做的是一个二分分类问题,X是input的特征,Y是分类标记,n_h是样本数。 这里把训练一个模型分为五步:初始化参数W1、b1、W2、b2...

2018-04-17 10:29:45 1164

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除