前端复习贴-CSDN博客

本文链接：https://blog.csdn.net/m0_46678809/article/details/127286769

Object.defineProperty ()详解

Object.defineProperty()详解 - 天天向上吧 - 博客园 (cnblogs.com)

arguments是什么

js的arguments到底是什么？_Shenfqqq的博客-CSDN博客_arguments js

防抖节流手写理解

手写防抖节流？洒洒水啦！！_哔哩哔哩_bilibili

Promise理解

自己手写 Promise 吗？对呀，超详细的！！_哔哩哔哩_bilibili

闭包

宏任务微任务

setTimeout(function() {
  console.log(1)
}, 0);
new Promise(function(resolve, reject) {
  console.log(2);
  resolve()
}).then(function() {
  console.log(3)
});
process.nextTick(function () {
  console.log(4)
})
console.log(5)
//25431

第一轮：主线程开始执行，遇到setTimeout，将setTimeout的回调函数丢到宏任务队列中，在往下执行new Promise立即执行，输出2，then的回调函数丢到微任务队列中，再继续执行，遇到process.nextTick，同样将回调函数扔到为任务队列，再继续执行，输出5，当所有同步任务执行完成后看有没有可以执行的微任务，发现有then函数和nextTick两个微任务，先执行哪个呢？process.nextTick指定的异步任务总是发生在所有异步任务之前，因此先执行process.nextTick输出4然后执行then函数输出3，第一轮执行结束。

第二轮：从宏任务队列开始，发现setTimeout回调，输出1执行完毕，因此结果是25431

JS宏任务与微任务；看了这个视频，还不理解的请来打我【后盾人】_哔哩哔哩_bilibili

VUE组件中的data为什么是一个函数

Object是引用数据类型，如果不用function返回，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了，这就造成了数据污染。如果data是一个函数，每个实例的data都在闭包中，就不会各自影响了

使用面向对象编程时,new关键字做了什么？

新建了一个Object对象

修改构造函数this的指向，是其指向新建的Object对象，并且执行构造函数

为Object对象添加了一个proto属性，是其指向构造函数的prototype属性

将这个Object对象返回出去

javascript原型与原型链

每个函数都有一个prototype属性，被称为显示原型

每个实例对象都会有_ _proto_ _属性,其被称为隐式原型

每一个实例对象的隐式原型_ _proto_ _属性指向自身构造函数的显式原型prototype

每个prototype原型都有一个constructor属性，指向它关联的构造函数。

原型链:获取对象属性时，如果对象本身没有这个属性，那就会去他的原型__proto__上去找，如果还查不到，就去找原型的原型，一直找到最顶层(Object.prototype)为止。Object.prototype对象也有proto属性值为null。链式查找机制叫原型链。

使用基于token的登录流程

1. 客户端使用用户名跟密码请求登录

2. 服务端收到请求，去验证用户名与密码

3. 验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端

4. 客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者 Local Storage 里

5. 客户端每次向服务端请求资源的时候需要带着服务端签发的 Token

6. 服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就向客户端返回请求的数据

http状态码

http常见状态码有哪些？_爱编程的梨清的博客-CSDN博客_http状态码

浏览器从输入url到渲染页面，发生了什么？

这玩意一定要说全了装逼

用户输入阶段
合成 URL：浏览区会判断用户输入是合法 URL，比如用户输入的是搜索的关键词，默认的搜索引擎会合成新的，如果符合url规则会根据url协议，在这段内容加上协议合成合法的url

查找缓存
网络进程获取到 URL，先去本地缓存中查找是否有缓存资源，如果有则拦截请求，直接将缓存资源返回给浏览器进程；否则，进入网络请请求阶段；

DNS 解析：
DNS 查找数据缓存服务中是否缓存过当前域名信息，有则直接返回；否则，会进行 DNS 解析返回域名对应的 IP 和端口号，如果没有指定端口号，http 默认 80 端口，https 默认 443。如果是 https 请求，还需要建立 TLS 连接；

建立 TCP 连接：
TCP 三次握手与服务器建立连接，然后进行数据的传输；（三次握手开喷）

发送 HTTP 请求：
浏览器首先会向服务器发送请求行，它包含了请求方法、请求 URI 和 HTTP 协议的版本；另外还会发送请求头，告诉服务器一些浏览器的相关信息，比如浏览器内核，请求域名；

服务器处理请求：
服务器首先返回响应行，包括协议版本和状态码，比如状态码 200 表示继续处理该请求；如果是 301，则表示重定向，服务器也会向浏览器发送响应头，包含了一些信息；

页面渲染:

查看响应头的信息，做不同的处理，比如重定向，存储cookie 看看content-type的值，根据不同的资源类型来用不同的解析方式

浏览器渲染原理直接开干.....

浏览器将获取的HTML文档解析成DOM树。
处理CSS标记，构成层叠样式表模型CSSOM(CSS Object Model)。
将DOM和CSSOM合并为渲染树(rendering tree)，代表一系列将被渲染的对象。
渲染树的每个元素包含的内容都是计算过的，它被称之为布局layout。浏览器使用一种流式处理的方法，只需要一次绘制操作就可以布局所有的元素。
将渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting。

断开 TCP 连接：

数据传输完成，正常情况下 TCP 将四次挥手断开连接。但是如果浏览器或者服务器在HTTP头部加上 Connection: keep-alive，TCP 就会一直保持连接。

rem、px、em区别

rem是一个相对单位，rem的是相对于html元素的字体大小，没有继承性

em是一个相对单位，是相对于父元素字体大小有继承性

px是一个“绝对单位”，就是css中定义的像素，利用px设置字体大小及元素的宽高等，比较稳定和精确。

什么是回流什么是重绘以及区别？

回流:

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree.

重绘:

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘.

区别:

回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流，当页面布局和几何属性改变时就需要回流

简单说一下H5新增了哪些新特性

语义化标签：header、footer、section、nav、aside、article

增强型表单：input 的多个 type calendar、date、time、url、search、tel、file、number 新增表单属性：placehoder、required、min 和 max

音频视频：audio、video

canvas 画布

kan wa si 地理定位（Geolocation）

拖拽释放：拖拽是一种常见的特性，即抓取对象以后拖到另一个位置，在HTML5中，

本地存储： localStorage 没有时间限制的数据存储； sessionStorage， session 的数据存储，当用户关闭浏览器窗口后，

数据会被删除新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause

WebSocket：建立持久通信协议，新的技术：webworker、websocket、Geolocation

css3新增了那些特征？

1、颜色：新增RGBA、HSLA模式

2、文字阴影：（text-shadow）

3、边框：圆角（border-radius）边框阴影：box-shadow

4、盒子模型：box-sizing

5、背景：background-size,background-origin background-clip(削弱)

6、渐变：linear-gradient(线性渐变):

eg: background-image: linear-gradient(100deg, #237b9f, #f2febd);

radial-gradient (径向渐变)

7、过渡：transition可实现动画

8、自定义动画： animate@keyfrom

9、媒体查询：多栏布局@media screen and (width:800px)

10、border-image

11、2D转换:transform:translate(x,y) rotate(x,y)旋转 skew(x,y)倾斜 scale(x,y)缩放

12、3D转换

13、字体图标：font-size

14、弹性布局：flex

Vue组件间传值方式

vue中组件之间传值的六种方式（完整版）_小邱程序员的博客-CSDN博客_vue组件之间传值

reduce数组去重

var arr = [1,1,1,4,5,2,2,4,8,5,8,8,6]
 //pre以前的值,cur当前值
var newArr = arr.reduce((pre,cur)=>{
    if(pre.indexOf(cur) < 0){
        pre.push(cur)
    }
    return pre
},[])