web 开发
文章平均质量分 72
wen_rc
这个作者很懒,什么都没留下…
展开
-
如果用户被诱导添加了证书甚至根证书,那哪怕用了 HTTPS,使用中间人攻击就可以窃取用户所有信息了?
HTTPS 的实现是通信前,服务器给 client 返回一个证书,其中包括签发机构、证书主体(有域名,与client 请求的进行校验)、公钥等信息,签发机构相当与上一级的证书,循环验证,依赖操作系统本身自带的根证书保证证书可靠,保证跟你通信的这个服务器确实是这个服务器而不是进行中间人攻击的黑客。像网页上可以进行网银转账,早期可能是要用 U 盾,还得在 U 盾输入金额啥的,U 盾生成的数字可能还带了转账人的信息,这样哪怕有中间人攻击也得把 U 盾也破解了才能转别人的号的钱。或者如何识别出证书是假的?原创 2024-03-08 13:09:46 · 405 阅读 · 0 评论 -
什么时候要用到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 阅读 · 0 评论 -
HTMLElement.click()的回调触发踩坑
每个宏任务之间会先清空所有微任务,因此打印顺序是 1- 》 microtask1- 》 2-》 microtask2。点击按钮后,分别进入两个回调,进入第一个回调时,先加到微任务,然后打印 1。问了下 gpt,说是 click 会立即把回调同步执行的,那就符合预期了。而当按钮是用户点击触发时,回调就分为多个宏任务触发了。那如果按钮点击不是用户触发,而是代码触发呢?按理说输出应该一样才对,但输出竟然变了!是 click 这个函数有什么特别吗?原创 2024-02-23 15:48:25 · 347 阅读 · 0 评论 -
简单实现节流函数踩的小坑
这里是变量作用域导致的,一开始_args的作用域在 throttle 返回的函数里,当调用了一次函数 t,setTimeout 里存着_args的值。下次调用函数 t,_args重新定义,就是新的内存地址了,再去改变他的值并不改变之前 setTimeout 传入参数的值。场景参考:周期上报,有的数据不急着报,只要定时上报即可,开发者可能在多个地方调用周期上报,只需把数据存起来一起报即可。setTimeout 的_args就一直用的同一份,之后多次调用函数 t,更新_args的值就生效了。原创 2024-02-22 15:49:06 · 134 阅读 · 0 评论 -
使用playwright进行自动化端到端测试
项目希望能接入自动化端到端测试提高可靠性,发现微软的 playwright 还挺好用的,推荐一下,顺便说下遇到的一些难点以及最佳实践。原创 2024-02-15 20:41:42 · 866 阅读 · 0 评论 -
nodejs 事件循环
node.js的事件的循环原创 2024-02-03 22:04:52 · 860 阅读 · 0 评论 -
前端构建变更:从 webpack 换 vite
前端构建变更,从 webpack 换到 vite,加深对构建工具的理解原创 2024-02-01 20:53:57 · 1663 阅读 · 0 评论 -
闭包可能导致的内存泄漏
闭包是函数可以保留和访问其外部变量,闭包可能会导致内存泄漏,下面介绍其中一种case,加深对闭包的理解原创 2023-02-15 15:11:01 · 360 阅读 · 0 评论 -
实现固定表头和表列的table组件
实现固定表头和表列的table组件原创 2022-12-13 19:53:39 · 2101 阅读 · 2 评论 -
vue 计算属性未重新计算 / computed 未触发 / computed 原理&源码分析
vue computed源码分析原创 2022-11-30 18:11:53 · 13078 阅读 · 0 评论 -
搭建内置内部库的vue3组件在线解释交互器
搭建内置内部库的vue3组件在线解释交互器原创 2022-06-17 17:51:44 · 1130 阅读 · 0 评论 -
小程序包体积优化
小程序包体积优化思路分享原创 2022-02-11 17:38:42 · 793 阅读 · 0 评论 -
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 · 2032 阅读 · 0 评论 -
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 阅读 · 0 评论 -
浏览器如何决定一个请求是用HTTP1还是HTTP2?
HTTP2众所周知的很方便,多路复用、二进制协议、优先级控制、服务器推送、头压缩,那在浏览器,怎么知道一个请求是用http1还是http2呢?难道是先用http1试下,问问能不能upgrade,可以再升级到http2? 这样听上去很慢?要多一个请求。或者浏览器本地存一个表,存的是服务器ip+请求url,记录哪些是支持http2的? 但这样开销似乎挺大的,不现实。查文章才发现有这个说法https://hpbn.co/http2/在tls握手的时候就去协商能不能用http2,这样就不会造成浪费了,不原创 2021-12-07 16:44:12 · 2330 阅读 · 0 评论 -
滚动条自动显示和隐藏
mac的chrome的滚动条会在停止滚动后自动隐藏,开始滚动时显示。但windows的滚动条会一直显示,在设置里设置了自动隐藏也是一样。这里有个统一的实现,可以使得不同系统在chrome上的滚动条显示一致。原理是用了伪类和伪元素选择器,使滚动条在不hover时透明色,hover时显色。实现了鼠标hover上去时显示滚动条,离开时隐藏。<div class="container"> <div style="overflow-y:auto;"> </div><原创 2021-08-06 16:14:52 · 4573 阅读 · 0 评论 -
脚手架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 · 482 阅读 · 0 评论 -
快速切换浏览器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 · 1514 阅读 · 0 评论 -
小程序为什么要使用双线程模型
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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
当前端的一次操作会调用多个有关联的后台接口
由于历史原因,前端的一次操作需要调用多个后台接口,以前写的一般都是调用一个的,或者哪怕是多个,接口之间也不会有依赖。但最近做的需求里,前端一次操作需要调用两个后台接口,且这两个接口是有关联的,需要先调用接口A,再调用接口B。一开始直接写两个Promise,一个成功后调用另一个,类似于这样子 fetch(urlA) .then((res) => { if (res.ret == 0) { fetch(urlB) .then(() => { ///原创 2020-05-31 18:10:42 · 5563 阅读 · 0 评论 -
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 阅读 · 0 评论 -
web的缓存
缓存就是用空间换时间,提前把可能要加载的数据,放到读取速度更快的存储空间中,加快下次读取效率。web前端的缓存有哪些呢?DNS缓存dns解析可能很费时间,针对dns解析,浏览器有缓存或预读取机制。预读取机制看https://developer.mozilla.org/zh-CN/docs/Controlling_DNS_prefetching缓存机制也分为多级:浏览器缓存系统缓...原创 2019-08-31 21:25:03 · 180 阅读 · 0 评论 -
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 阅读 · 0 评论