深拷贝和浅拷贝的区别
- 浅拷贝 只是增加了一个指针指向已存在的内存地址；
- 深拷贝 是增加了一个指针并且申请了一个新的内存，使这个增加的指针指向整个新的内存。
- 浅复制 仅仅是指向被复制的内存地址，如果原地址发生改变，那么浅复制出来的对象也会相应的改变。
- 深复制 在计算机中开辟一块新的内存地址用于存放复制的对象。
如何实现深拷贝
常用：使用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参数中的字段是否一致，不一致则拒绝。
优点：
- 无需使用Session，适用面更广，易于实施
- 储存于客户端中，不会给服务器带来压力
- 相对于Token，实施成本更低，可以在前后端统一拦截校验，而不需要一个个接口和页面添加。
2486
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
