2020年10月_前端同学

原创 ajax原理以及六大解决跨域的方法

前端通信类的问题，主要包括以下内容：1、什么是同源策略及限制同源策略是一个概念，就一句话。有什么限制，就三句话。能说出来即可。2、前后端如何通信如果你不准备，估计也就只能说出ajax。3、如何创建AjaxAjax在前后端通信中经常用到。做业务时，可以借助第三方的库，比如vue框架里的库、jQuery也有封装好的方法。但如果让你用原生的js去实现，该怎么做？这就是考察你的动手能力，以及框架原理的掌握。如果能写出来，可以体现出你的基本功。4、跨域通信的几种方式这部分非常重要。无非就是问你：什么

2020-10-22 16:53:06 586

原创前端页面性能优化的几种方式(强烈推荐)

提升页面性能优化的常见方式：1、资源压缩合并，减少http请求2、非核心代码异步加载 --> 异步加载的方式 --> 异步加载的区别3、利用浏览器缓存 --> 缓存的分类 --> 缓存的原理缓存是所有性能优化的方式中最重要的一步【重要】有的人可能会回答local storage 和session storage，其实不是这个。浏览器缓存和存储不是一回事。4、使用CDN浏览器第一次打开页面时，缓存是起不了作用的。这个时候，CDN就上场了。5、DNS预解析一、资源压缩合

2020-10-20 11:51:50 6613

原创 css垂直水平居中的7种实现方式及最优解

一、固定宽高：1、margin根据已知的宽高写死，不推荐2、定位 + margin-top + margin-left .box-container{ position: relative; width: 300px; height: 300px;}.box-container .box { width: 200px; height: 100px; position: absolute; left: 50%; t

2020-10-20 10:37:18 271

原创 http cors简单请求和非简单请求

在开发中，我们会发现出现了一个options请求的错误，如果第一次看到的小伙伴就会很疑惑了，http请求方式什么时候出现了options，这是因为CORS请求的简单请求和非简单请求的原因。简单请求：同时满足两大条件请求方式：GET、POST、HEAD（注：什么是HEAD请求？HEAD请求和GET本质是一样的，但是HEAD请求不含数据，只有HTTP头部信息）HTTP头部信息不超过以下几种字段：无自定义头部字段、Accept、Accept-Language、Content-Language、Las

2020-10-19 17:41:57 349

原创 react this.setState 异步和同步原理

React 中 setState 什么时候是同步的，什么时候是异步的？isBatchingUpdates 判断是否批量更新，默认值为 false，当更新完成时又会被复原为 false在React中，如果是由React引发的事件处理（比如通过onClick引发的事件处理，自身的事件处理函数或 react 生命周期触发时），isBatchingUpdates 会被赋值为 true，调用setState不会同步更新this.state。绕过React通过addEventListener直接添加的事件处理函

2020-10-15 11:06:43 1157

原创 TCP 3次握手 4次挥手

三次握手在TCP/IP协议中，TCP 协议提供可靠的连接服务，连接是通过三次握手进行初始化的。（1）第一次握手：Client将同步标志位SYN设置为1，随机生成一个序列号x，并将数据包发送给Server。此时Client进入SYN_SENT状态，等待Server确认。（2）第二次握手：Server接收到数据包之后，由SYN=1得知这是Client请求建立连接。Server将同步标志位SYN设置为1，将确认标志位ACK设置为1，ack = x+1，随机生成一个序列号y，并将数据包发送给Client确认请

2020-10-15 10:33:54 105

原创 set weakSet map weakMap重点详解

Set本身是一个构造函数，用来生成 Set 数据结构,Set函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。可以遍历特点: 1.它类似于数组，但是成员的值都是唯一的，没有重复的值。const set = new Set([1, 2, 3, 4, 4,'4',NaN,NaN]);[...set]// [1, 2, 3, 4,'4',NaN] 注:向 Set 加入值的时候，不会发生类型转换,所以4和"4"是两个不同的值。Set原理对比类似于‘===’运算

2020-10-09 11:30:34 137

原创 [‘1‘, ‘2‘, ‘3‘].map(parseInt) what & why ?

第一眼看到这个题目的时候，脑海跳出的答案是 [1, 2, 3]，但是真正的答案是**[1, NaN, NaN]。**首先让我们回顾一下，map函数的第一个参数callback：var new_array = arr.map(function callback(currentValue[, index[, array]]) { // Return element for new_array }[, thisArg])1.这个callback一共可以接收三个参数，其中第一个参数代表当前被处理的元素，而第二

2020-10-07 11:08:39 69

cxz