深拷贝和浅拷贝的区别、垃圾回收机制、缓存策略、输入URL到显示页面的步骤(简述)、事件循环(event loop)、

深拷贝和浅拷贝的区别

浅拷贝只是增加了一个指针指向已存在的内存地址；
深拷贝是增加了一个指针并且申请了一个新的内存，使这个增加的指针指向整个新的内存。
浅复制仅仅是指向被复制的内存地址，如果原地址发生改变，那么浅复制出来的对象也会相应的改变。
深复制在计算机中开辟一块新的内存地址用于存放复制的对象。

如何实现深拷贝

常用：使用JSON.parse(JSON.stringify(obj)) 序列化

原理：把一个对象序列化成为一个JSON字符串，将对象的内容转换成字符串的形式再保村在磁盘上，再用JSON.parse()反序列化将字符串变成一个新的对象

缺点：会忽略 undefined、symbol、function

实现：递归 + 判断类型

//数字 字符串 function是不需要拷贝的 都是对边界的判断
function deepClone(value){
	if(value == null) return value;
	if(typeof value !== 'object') return value;
	if(value instanceof Date) return new Date(value);
	// 要判断value是对象还是数组 如果是对象 就产生对象 是数组就产生数组
	let obj = new value.constructor;
	for(let key in value){
	// 当前的值是不是一个对象
	obj[key] = deepClone(value[key]);
		}
		return obj;
}

javascript 的垃圾回收机制

定义：指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。
JavaScript 在创建对象(对象、字符串等)时会为它们分配内存，不再使用对时会“自动”释放内存，这个过程称为垃圾收集。
内存生命周期中的阶段:
分配内存：操作系统先分配内存，程序可以使用它
使用内存：程序中的变量会占用内存，运行时会发生读和写的操作。
释放内存：当不再需要使用的内存时，释放内存，使之成为自由内存，并可以被重复利用。是一种机制

常见的内存泄漏

全局变量，未清除的定时器，闭包，以及 dom 的引用

promise的特性、优缺点

cookies,sessionStorage和localStorage的区别？

cookie是浏览器自动携带在请求里发送给服务端去验证的,sessionStorage和localStorage不会自动携带
体积：cookie小于sessionStorage和 localStorage
cookie可以设置过期时间
cookie是做状态保持，
用户首次访问服务器会颁发给浏览器，第二次请求就会携带
后面两者是存储在内存中的，sessionStorage 关闭浏览器数据会消失，localStorage关闭不会消失，需要手动清除

浏览器缓存策略

浏览器发请求时，会在本地缓存中查找结果以及缓存标识，根据标识来判断是否使用本地缓存。如果有，则使用，相反，发起请求，并携带缓存标识。过程分为：强缓存和协商缓存。

-强缓存，服务器通知浏览器一个缓存时间，在缓存时间内，下次请求，直接用缓存，不在时间内，执行比较缓存策略。

协商缓存，让客户端与服务器之间能实现缓存文件是否更新的验证、提升缓存的复用率，将缓存信息中的Etag和Last-Modified 通过请求发送给服务器，由服务器校验，返回304状态码时，浏览器直接使用缓存。

HTTP缓存都是从`第二次`请求开始的

首次请求资源时，服务器返回资源，并在response header中回传资源的缓存策略
当第二次请求时，浏览器判断这些请求参数，击中强缓存就直接200，否则就把请求参数加到 request header头中传给服务器，看是否击中协商，击中则返回304，否则返回新的资源。

事物的发展是一步一步来完善的

强缓存命中则直接读取浏览器本地的资源，在`network`中显示的是from memory或者from disk

控制强制缓存的字段有：`Cache-Control`（http1.1）和`Expires（http1.0）`

Cache-control是一个相对时间，用以表达自上次请求正确的资源之后的多少秒的时间段内缓存有效。
Expires是一个绝对时间。用以表达在这个时间点之前发起请求可以直接从浏览器中读取数据，而无需发起请求
Cache-Control的优先级比Expires的优先级高。前者的出现是为了解决Expires在浏览器时间被手动更改导致缓存判断错误的问题。如果同时存在则使用Cache-control

简述同源策略与跨域

同源策略是一种约定，它是浏览器最核心的也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能会受到影响。
当协议，主机，和端口号有一个不同时，就是跨域

跨域解决方案

服务器配置CORS(跨域资源共享)
一般是使用这个 node.js或nginx,反向代理，把跨域改造成同域
（前端）将JSON升级成JSONP,在JSON的基础上，利用script 标签可以跨域的特性，加上头设置

简述从浏览器地址栏输入URL到显示页面的步骤

1.浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；
2.服务器交给后台处理完成后返回数据，浏览器接收文件（html，js，css，图像等）;
3.浏览器对加载到的资源（html，js，css等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）;
4 载入解析到的资源文件，渲染页面，完成。

JavaScript 中的`作用域`（scope）是指什么？

作用域基本上是变量以及如何通过名称访问这些变量的规则的集合。每个函数都有自己的作用域。只有函数中的代码才能访问函数作用域内的变量。
一个作用域可以嵌套在另一个作用域内。
如果一个作用域嵌套在另一个作用域内，最内部作用域内的代码可以访问另一个作用域的变量。
同一个作用域中的变量名必须是唯一的.

JavaScript 中的 null 和 undefined

null表示一个空的对象,什么也没有
undefined 表示声明为赋值
undefined是从null派生出来的
null == undefined //true
null === undefined //false
typeof null // ‘object’
typeof undefined // ‘undefined’

浏览器的事件循环(event loop)

为什么需要

JavaScript的任务分为两种同步和异步，它们的处理方式也各自不同，

同步任务是直接放在主线程上排队依次执行，
异步任务会放在任务队列中，若有多个异步任务则需要在任务队列中排队等待，任务队列类似于缓冲区，任务下一步会被移到调用栈然后主线程执行调用栈的任务。

调用栈：

调用栈是一个栈结构，函数调用会形成一个栈帧，帧中包含了当前执行函数的参数和局部变量等上下文信息，函数执行完后，它的执行上下文会从栈中弹出。

js是`单线程`，线程是指 `引擎`中`解析`和`执行`代码的线程`只有一个`(主线程)，意味着每次只能做`一件事`情，但是ajax请求中，主线程在等待响应的过程中会做其他事情，浏览器先在事件表注册ajax的回调函数，响应回来后回调函数被添加到任务队列中等待执行，不会造成线程阻塞，所有js处理ajax请求的方式是异步的。

`检查调用栈是否为空`以及某个任务添加到调用栈中的`过程` 称之为事件循环 (Event Loop) 是js实现异步的`核心`。

浏览器中的 Event Loop

Micro-Task 与 Macro-Task

浏览器端事件循环中的异步队列有两种：macro（宏任务）队列和 micro（微任务）队列。
常见的 macro-task：setTimeout、setInterval、script（整体代码）、I/O 操作、UI 渲染等。
常见的 micro-task: new Promise().then(回调)、MutationObserve等。

event loop过程

1.检查宏任务(macrotask)队列是否为空，非空则到2，为空则到3
2.执行宏任务(macrotask)中的一个任务
3.继续检查微任务(microtask)队列是否为空，若有则到4，否则到5
4.取出microtask中的任务执行，执行完成返回到步骤3
5.执行视图更新

解释事件冒泡以及如何阻止它？

事件冒泡：嵌套最深的元素触发有一个事件，顺着嵌套顺序在父元素上触发。
防止事件冒泡的一种方法是使用 event.cancelBubble或event.stopPropagation()

什么是防抖和节流？有什么区别？如何实现？

防抖:

应用场景：当用户进行了某个行为(例如点击)之后。不希望每次行为都会触发方法，而是行为做出后,一段时间内没有再次重复行为，才给用户响应。
实现原理 : 每次触发事件时设置一个延时调用方法，并且取消之前的延时调用方法。（每次触发事件时都取消之前的延时调用方法）

节流

应用场景:用户进行高频事件触发(滚动)，但在限制在n秒内只会执行一次。
实现原理: 每次触发事件的时候，判断当前是否存在等待执行的延时函数

区别:

防抖是只在最后一次事件触发后才会执行一次函数
节流``不管事件触发多频繁保证在一定时间内一定会执行一次函数。

JSONP 的原理是什么？

尽管浏览器有同源策略，但是 script 标签的 src 属性不会被同源策略所约束，可以获取任意服务器上的脚本并执行。jsonp 通过插入 script 标签的方式来实现跨域，参数只能通过 url 传入，仅能支持 get 请求

异步加载JS的方式有哪些？

defer，只支持IE
async：
创建script，插入到DOM中，加载完毕后callBack

常见web安全及防护原理

XSS：跨站脚本攻击
攻击者想尽一切办法将可以执行的代码注入到网页中。
场景：见于带有用户保存数据的网站功能，如论坛发帖、商品评论、用户私信等。

预防方案：（防止攻击者提交恶意代码，防止浏览器执行恶意代码）

对数据进行严格的输出编码：
避免拼接 HTML
输入验证
开启浏览器XSS防御：Http Only cookie，禁止 JavaScript 读取某些敏感 Cookie，攻击者完成 XSS 注入后也无法窃取此 Cookie。
验证码

CSRF：跨站请求伪造

攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。

预防方案：

通过增强自己网站针对CSRF的防护能力来提升安全性。
同源检测
Token 校验
双重cookie验证

流程：

步骤1：在用户访问网站页面时，向请求域名注入一个Cookie，内容为随机字符串（例如csrfcookie=v8g9e4ksfhw）
步骤2：在前端向后端发起请求时，取出Cookie，并添加到URL的参数中（接上例POST https://www.a.com/comment?csrfcookie=v8g9e4ksfhw）
步骤3：后端接口验证Cookie中的字段与URL参数中的字段是否一致，不一致则拒绝。