
javaScript
文章平均质量分 76
橙蚊镜0819
Step by step becoming an architect
展开
-
前端跨域解决方案
同源指的是两个URL的协议、域名、端口号一致,反之则是跨域。出现跨域的根本原因:浏览器的同源策略不允许非同源的URL之间进行资源的交互。原创 2023-07-28 20:07:18 · 342 阅读 · 0 评论 -
接口并发请求控制
Gmail开发人员发现IE里面有个对象来请求数据时,,所以使用这个特性,进行网络数据请求,这就是AJAX的由来。AJAX不是一个单词,他的全称是,就是异步的JavaScript和XML,它是一套用于创建快速动态网页的技术标准,使用步骤如下:创建异步对象设置请求参数,包括请求的方法和URL等发送请求注册事件,事件状态变更会及时响应监听在监听里面获取并处理返回数据所以AJAX的核心就是。原创 2023-07-27 17:45:39 · 1077 阅读 · 0 评论 -
从输入URL到页面呈现
客户端与服务器建立好连接通道之后,客户端把数据传递给服务器,开始发送释放tcp的操作服务器拿到标识后返回给客户端信息 回馈、准备数据给客户端的数据,由于准备数据的时间比较长,所以分两次传递回去。虽然增加了dns解析的时间,但是实现了资源合理利用:每个服务器承受的压力不同,服务器分布式、服务器集群共享,高可用高并发。协商缓存就是强制缓存失效后,浏览器携带缓存表示向服务器发起请求,由服务器根据缓存表示决定是否使用缓存的过程。dns也是有缓存的,如果之前解析过,会在本地有缓存(不一定,有周期会消失)原创 2023-07-17 11:41:57 · 283 阅读 · 1 评论 -
js-防抖与节流
本质上是优化高频率执行代码的一种手段如:浏览器的 resize、scroll、keypress、mousemove 等事件在触发时,会不断地调用绑定在事件上的回调函数,极大地浪费资源,降低前端性能为了优化体验,需要对这类事件进行调用次数的限制,对此我们就可以采用 防抖(debounce) 和 节流(throttle) 的方式来减少调用频率举例说明:1、想象每天上班大厦底下的电梯。把电梯完成一次运送,类比为一次函数的执行和响应假设电梯有两种运行策略 debounce 和 throttle,超时设定为15秒原创 2022-08-28 09:16:54 · 122 阅读 · 0 评论 -
js - ?. ??的使用
允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。?.操作符的功能类似于.链式操作符,不同之处在于,在引用为空(nullish)(null或者undefined)的情况下不会引起错误,该表达式短路返回值是undefined。与函数调用一起使用时,如果给定的函数不存在,则返回undefined。value1??value2??在value1和value2之间,只有当value1为null或者undefined时取value2,否则取value1,0,false,""???...原创 2022-07-27 16:02:30 · 303 阅读 · 0 评论 -
async与await与Promise看这一篇就够了
由宿主(浏览器、Node)发起的,而微任务由JS自身发起宏任务(Macrotask)微任务(Microtask)setTimeoutrequestAnimationFrame(有争议)MutationObserver(浏览器环境)I/O,事件队列process.nextTick(Node环境)setImmediate(Node环境)script(整体代码块)......原创 2022-07-15 15:33:25 · 934 阅读 · 0 评论 -
js给base64图片加水印
base64Img: 原始图片base64位数据。wmConfig:水印配置,参考如下。new Image()创建img对象,通过 img.src = base64Img 加载图片,加载成功(img.onload)后,作为canvas的参数,在画布中绘制原始图片 ctx.drawImage(img, 0, 0)。0,0表示从canvas的左上角开始绘制。drawWaterMark(ctx, img.width, img.height, wmConfig)方法实现在原始图片上绘制水印,具体参考下面第二部转载 2022-07-12 13:38:08 · 1415 阅读 · 1 评论 -
js - this练习题
空白占位符最后一个person1.show4.call(person2)()有点复杂,我们来一层一层的剥开。1、首先是var func1 = person1.show4.call(person2),这是显式绑定,调用者是person2,show4函数指向的是person2。2、然后是func1(),箭头函数绑定,this指向外层作用域,即person2函数作用域首先要说明的是,箭头函数绑定中,this指向外层作用域,并不一定是第一层,也不一定是第二层。因为没有自身的this,所以只能根据作用域链往上层原创 2022-07-04 15:17:07 · 419 阅读 · 1 评论 -
js -- 内存
js的内存空间分为栈、堆、池基本类型------>栈内存(不包含闭包中的常量)引用类型------>堆内存JavaScript有自动垃圾收集机制,垃圾收集器会每隔一段时间就执行一次释放操作,找出那些不再继续使用的值,然后释放其占用的内存。对垃圾回收算法来说,核心思想就是如何判断内存已经不再使用,常用垃圾回收算法有下面两种。上面代码中,div元素已经从DOM树中清除,但是该div元素还绑定在email对象中,所以如果email对象存在,那么该div元素就会一直保存在内存中。对于持续运行的服务进程(dae原创 2022-06-29 13:27:25 · 767 阅读 · 0 评论 -
js(八)闭包
闭包的理解闭包让你可以在一个内层函数中访问到其外层函数的作用域嵌套在函数作用域中的函数,称为闭包函数。该作用域称为闭包环境。通过闭包函数可以访问闭包函数所在函数作用域中的形参与变量工作原理:利用了js中的垃圾回收机制,当一个函数被调用时,开辟空间,函数调用结束,释放空间,垃圾回收机制释放被调用结束的函数时,发现函数的变量正在被其他的函数调用,这些变量不会被释放,而且被永久驻留在内存,只有退出程序,才会被释放,或者是手工释放(=null)闭包的使用场景例如计数器、延迟调用、回调等闭包的应用,其核心原创 2022-03-07 15:02:10 · 609 阅读 · 0 评论 -
js(七)this
当函数引用有上下文对象时,隐式绑定规则会把函数中的this绑定到这个上下文对象。默认绑定:独立函数调用,可以把默认绑定看作是无法应用其他规则时的默认规则,this指向全局对象。这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象。this执行主体,谁把它执行的「和在哪创建&在哪执行都没有必然的关系」拿不到,所以判断如果传入的this上下文不是对象,转为对象。可以有多个参数,剩余参数被认为是传递给方法的参数。的唯一区别是参数,第一个参数都是要绑定的上下文。原创 2023-07-14 16:14:03 · 339 阅读 · 0 评论 -
js(六)js三类循环对比和性能分析
使用let声明 for比while快的原因:(while循环在var和let下时间接近的原因)forEach 比 for性能差,推荐使用是因为看重函数式编程和命令式编程,忽略了性能。FOR循环是自己控制循环过程。上的}也有部分是可枚举的」for in更适合遍历对象。原创 2022-03-10 20:28:43 · 691 阅读 · 0 评论 -
js(五)深拷贝和浅拷贝
深拷贝开辟一个新的栈,两个对象属完成相同,但是对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性。基本数据类型无深浅拷贝之分,引用类型的浅拷贝是指将引用的地址拷贝过去。自己用for in遍历的时候不支持对 Symbol属性 的处理。创建一个引用类型,数据存贮在堆中,栈中存储的是指向的堆的地址。创建一个基本数据类型,基本数据类型的数据直接存储在栈中。如果数组对象的元素是引用类型的元素,那么还是浅拷贝。如果是一层的数组或者对象,则可以实现深拷贝。如果想要自己写的浅拷贝可以遍历Symbol。原创 2022-03-02 15:48:22 · 133 阅读 · 0 评论 -
js(四)类型转换机制
显式转换Number()原始值转换结果UndefinedNaNNull0true1false0String根据语法和转换规则来转换SymbolThrow a TypeError exceptionObject先调用toPrimitive,在调用toNumberNumber(324) // 324// 字符串:如果可以被解析为数值,则转换为相应的数值Number('324') // 324// 字符串:如果不可以被解析为原创 2022-02-25 10:43:28 · 278 阅读 · 0 评论 -
js(三)常用的字符串方法
操作方法增这里增的意思并不是说直接增添内容,而是创建字符串的一个副本,再进行操作除了常用+以及${}进行字符串拼接之外,还可通过concatconcat用于将一个或多个字符串拼接成一个新字符串let stringValue = "hello ";let result = stringValue.concat("world");console.log(result); // "hello world"console.log(stringValue); // "hello"删这里的删的意原创 2022-02-24 19:53:35 · 256 阅读 · 0 评论 -
js(二)常用的数组方法
增pushpush()方法接受任意数量的参数,并将他们添加到数组末尾,返回数组的最新长度let colors = [];let count = colors.push('red','green');console.log(count) //2原创 2022-02-23 09:59:53 · 159 阅读 · 0 评论 -
js (一)数据类型与判断
typeof null "object" 对象存储在计算机中,都是以000开始的二进制存储,null也是,所以检测出来的结果是对象 实际上不是对象,可以理解为浏览器的一个bug js会把null理解为一个空对象引用原创 2023-07-12 18:01:08 · 196 阅读 · 0 评论