前端相关知识点总结

**

1.sessionstorage和localstorage的联系和区别

**
相同点：两者都是用于本地存储
不同点：sessionstorage
1.生命周期为关闭浏览器窗口
2.在同一个窗口（页面）下数据可以共享
3.以键值对形式存储使用
localstorage
1.生命周期永久有效，除非手动清除，否则关闭页面也会存在
2.可以在多窗口（页面）共享数据(同一浏览器可以共享）
3.以键值对形式存储使用
存储数据：localstorage.setItem(key,value)
获取数据：localstorage.getItem(key)
删除数据：localstorage.removeItem(key)
删除所有数据：sessionstorage.clear()
sessionstorage同上

2.new关键字在执行后会做四件事：

1.在内存中创建一个新的空对象
2.让this指向这个新对象
3.执行构造函数里的代码，给这个空对象添加属性和方法
4.返回这个新对象（所有构造函数里不需要return语句）

3.for…in…和for…of的区别

1.for…in 遍历键名(key)，for…of遍历键值（value)
2.for…in会遍历原型链上的属性和方法，for…of不会遍历原型链

4.事件委托

事件委托是利用了事件冒泡的原理，将事件添加到父元素或者祖先元素身上，从而达到执行效果。
优点：1.提高性能：大量减少内存占用，减少事件注册。
2.动态绑定：新增元素实现动态绑定事件

5.js的基本数据类型

五中可包含值的类型：字符串（string）数字（number）布尔值（boolen）对象（object）函数（function）
三种对象类型： 对象（Object） 日期（Date）数组（Array）
两种不能包含值的类型：null undefined

6.let,const,var的区别。const定义的对象是否可以修改

var 声明变量 可以进行变量提升
let 声明变量 不能进行变量提升 作用域比var更小 形成块级作用域
const 声明常量 定义的变量不能修改，但对象可以修改

7.地址（this）指向问题

this指向当前函数的主人
全局函数：this指向window
对象：this指向当前对象
特殊的需要上下文判断

8.实现一个垂直水平居中

1.margin:0 auto;
2.用position实现
3.用flex布局实现
4.用表格实现

9.dispaly:none和visibility:hidden的区别

1.占据空间与否：
display:none：该元素不占据任何空间，即该对象在页面上彻底消失，跟v-if类似，通俗来说就是看不见也摸不到。
visibility:hidden：使对象在网页上不可见，跟v-show类似，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。
2.是否继承
display:none，display不是继承属性，元素及其子元素都会消失。
visibility:hidden，visibility是继承属性，若子元素使用了visibility:visible，则不继承，这个子孙元素又会显现出来。
3.是否被读取器读取
读屏器不会读取display：none的元素内容，而会读取visibility：hidden的元素内容。
4.是否渲染
display:none：会触发reflow（回流），进行渲染。
visibility:hidden：只会触发repaint（重绘），因为没有发现位置变化，不进行渲染。

10.闭包是什么以及使用闭包的好处

1.函数嵌套函数，即有权访问另一个函数作用域中的局部变量
2.内部函数访问外部函数的形参和变量
3.被引用的形参和变量不会被【垃圾回收机制所回收】
好处：1.延伸变量的作用范围
2.避免全局变量污染（尽量不使用全局变量）
3.可以声明私有变量

11.深拷贝和浅拷贝

浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用
深拷贝拷贝多层，每一级别的数据都会拷贝
Object.assign(target，sources) ES6新增方法可以浅拷贝

11.关于定时器的实现

1.我们有2组方法：
（1）setTimeout()和clearTimeout()；
（2）setInterval()和clearInterval()；
2、setTimeout()方法内的代码只会执行一次，而setInterval()方法内的代码会重复性执行。

12.vue2和vue3双向数据绑定原理

vue2 的双向数据绑定是利用ES5 的一个 API Object.defineProperty()对数据进行劫持 结合 发布订阅模式的方式来实现的。
vue3 中使用了 es6 的 ProxyAPI 对数据代理。

13.js中的回流和重绘

回流(reflow)：也叫做重排。当元素的尺寸或者位置发生了变化，就需要重新计算渲染树，这就是回流，比如元素的宽高、位置，浏览器会重新渲染页面，称为回流，又叫重排（layout）。
重绘(repaint)：当元素样式的改变不影响页面布局时，比如元素的颜色，浏览器将对元素进行的更新，称之为重绘。
关系：回流必定会触发重绘，重绘不一定会触发回流。重绘的开销较小，回流的代价较高
触发页面回流的属性：
1、盒子模型相关属性的改变：
width、height、padding、border、margin、display、border-width、min-height
2、定位属性及浮动元素位置的心迹：
top、right、bottom、left、position、float、clear
3、节点内部文字结构，行内属性的改变
font-size、line-height
4、读写元素位置属性时（offsettop等），会触发回流
但当你获取元素位置信息的时候，队列中可能有会影响元素位置的操作，
即使没有，浏 览器也会强制清空队列，触发回流与重绘来确保返回正确的值
5、DOM 元素移动、删除、增加
触发页面重绘的属性
color、background-color、visibility、opacity、
border-style、border-radius、
box-shadow、outline

14.从输入URL请求网页到渲染的过程

1、输入网址
2、发送到DNS 服务器 ，并确定域名对应的web服务器的 ip 地址
3、与浏览器建立tcp 连接(三次握手，四次挥手)
4、浏览器向web服务器发送http 请求
5、web服务器响应请求，并返回指定的url 的数据（或者错误信息）或者重定向的新url地址
6、浏览器下载web服务器返回的数据及解析 html 文件
7、生成dom 树，解析css 和 js 渲染页面直至 显示完成

15.DNS解析过程

1、客户机发出查询请求，在本地计算机缓存查找，若没有找到，就会将请求发送给dns服务器
2、本地dns服务器会在自己的区域里面查找，找到即根据此记录进行解析，若没有找到，就会在本地的缓存里面查找
3、本地服务器没有找到客户机查询的信息，就会将此请求发送到根域名dns服务器
4、根域名服务器解析客户机请求的根域部分，它把包含的下一级的dns服务器的地址返回到客户机的dns服务器地址
5、客户机的dns服务器根据返回的信息接着访问下一级的dns服务器
6、这样递归的方法一级一级接近查询的目标，最后在有目标域名的服务器上面得到相应的IP信息
7、客户机的本地的dns服务器会将查询结果返回给我们的客户机
8、客户机根据得到的ip信息访问目标主机，完成解析过程

16.防抖和节流

防抖：所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
节流：所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。两种方式可以实现，分别是时间戳版和定时器版。