基础复习2

JS基础

1. js的数据类型

2. null/undefined/NaN区别
   NaN是一种特殊的number, null特殊的object, 未声明或声明未赋值undefined

3. JS中成员(属性)查找机制
   原型链查找

4. JS中变量查找机制
   作用域链查找(左查找/右查找)-- https://www.jianshu.com/p/2f5839edc63f
   LHS: LHS查询会自动创建未找到的目标变量; RHS查询时，如果在作用域链中都无法找 到目标变量，那么，引擎会抛出ReferenceError异常
   console.log(b); // ReferenceError
   b = 4;
   console.log(b); //4

5. JS为什么是单线程
   什么是进程和线程: 进程(公司)：是cpu分配资源的最小单位；（是能拥有资源和独立运行的最小单位）; 线程(公司里的员工)：是cpu调度的最小单位；（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程）
   js是作为浏览器的脚本语言，主要是实现用户与浏览器的交互，以及操作dom；这决定了它只能是单线程，否则会带来很复杂的同步问题。 举个例子：如果js被设计了多线程，如果有一个线程要修改一个dom元素，另一个线程要删除这个dom元素，此时浏览器就会一脸茫然，不知所措。所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变

6. js实现两个超大数相加- https://blog.csdn.net/weixin_43443341/article/details/92773769

7. 什么是内存泄漏

8. 造成内存泄漏的原因
   闭包/意外的全局变量/定时器不清除/从外向内appendChild/死循环

9. 原型链

沿着原型链网上找, 找不到原型对象时返回null,找不到属性时返回undefined
10. JS的继承方法
主要是靠原型链继承,像类extend到类,实例对象和类,实例对象和构造函数之间会自动生成原型链; 还可以手动给两个对象(or构造函数)之间添加原型链,但有坑要注意
坑1:obj.prototype也是指针,如果son.prototype=obj.prototype直接把父亲的也改了,所以不能直接赋值原型对象,得通过new实例对象来建桥: 让son.prototype = new Father();
利用这个Father实例对象的__proto__指向Father.prototype, son实例也能够继承fa的属性了.
好处是: 尽情修改son.prototype,增加儿子独有的属性,而不会影响父亲;
坑2: son.prototype指向了Father实例对象, 那么,son.prototype.constructor变成了Father实例对象里的constructor,也指向了Father构造函数,这样是不行的, 我们想son.prototype.constructor指向son构造函数自己; 做法: Son.prototype.constructor=Son;即可,总结如下:

还有一种继承方式原理不一样, 父子构造函数之间可以通过call(this,形参)函数继承

JS进阶/ES6

1. 面向对象的三大特征

2. 什么叫面向对象的多态性:
   父子类之间继承,但子类重写父类方法,那么给子类一个对象调用方法时,既可以用父类的方式也可以用子类的方式

3. ES5/6/7/8有哪些不同- https://zhuanlan.zhihu.com/p/297959175

4. let/var/const区别
   a. let,const都是块级作用域, var函数内/全局
   b. 变量提升方式不同- https://www.xinran001.com/frontend/214.html

c. const可修改吗—指针栈内存/对象堆内

5. 箭头函数和普通函数区别
   写的方式不同 (参数)=>{执行语句}; this指向不同, 箭头函数不绑定this；箭头函数里没有prototype原型对象，因此不能new一个实例；每一个普通函数调用后都具有一个arguments对象，用来存储实际传递的参数。但是箭头函数并没有此对象。
6. promise

函数进阶

1. this指向

2. call, apply, bind
   call:1.调用函数,2.改变函数this指向为call里的第一个值;
   apply: 1. 调用函数,2. 改变函数this指向为里的第一个值;区别,传参必须是数组形式,但打印出来会把数组去掉,留下数组内元素
   bind: 1.不会调用函数;2.改变函数this指向为第一个值;3.返回一个原函数改造完的拷贝

3. 利用apply手写一个bind函数， bind函数返回的是一个什么东西

4. 严格模式特点

6. 高阶函数

7. 闭包作用

8. 递归的条件

9. 深拷贝/浅拷贝区别
   浅拷贝:只把指针复制过来了,对于复杂数据类型来说修改复制件会影响堆内存里的实际内容,es6有个语法糖,Object.assign(o, obj);把obj浅拷贝给o
   深拷贝: 递归拷贝(手写深拷贝)

浏览器:

1. 页面渲染过程(href/src DOM/CSSOM-renderTree 渲染脚本操作DOM不断重来 最后布局-绘制)

2. 刚说的重绘repaint/重排(回流)reflow区别
   repaint:改变外观属性如color, reflow:操作DOM树,改布局-
   https://www.jianshu.com/p/390e4e4cf75e

3. 浏览器缓存机制-详见http缓存里

4. 浏览器加载一个页面的简单流程如下：

5. 浏览器怎么知道DOM位置变了
   考点：DOM中监听节点变化的事件(变动事件)的用法-
   浏览器自带的监听DOM https://blog.csdn.net/flyingpig2016/article/details/53677679
   DOMSubtreeModified(DOM结构任何变化都会触发)；DOMNodeInserted/ DOMNodeRemoved
   JS监控DOM大小、位置变化：
   https://blog.csdn.net/ddkddkchen/article/details/83343512?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&dist_request_id=1329188.9682.16178611802084379&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control
   mutationObserver对象自带的方法可以实现监听“显式变化”，元素修改自己的宽高变化：
   https://blog.csdn.net/weixin_45412353/article/details/107176246
   “隐式变化（class变、动画）”：每一帧都对比

web前端安全

1. 什么是cookie
   (提会话跟踪)

2. 什么是session
   跟cookie一样都是前端缓存技术,但session能把信息存放在服务端，所以安全可以保障，它的原理是通过session id来识别客户端，这个session id是存放在cookie中的（当然session id让用户看见没无妨），服务端会通过session id来识别客户端进行匹配和判断。它和cookie对比起来差距就很明显了，一个是把数据存在客户端；一个存在服务端，从安全性考虑的话一般像用户名密码这种私密信息一般放在session中。

3. cookie的优缺点
   优:保持状态,存本地服务器压力比session小/缺点:不安全

4. 不安全的原因-本地易被修改

5. 解决cookie安全问题的方法
   HttpOnly设置为true,决定客户端不可写;cookie加密;cookie分短期和永久,设置有效期不要过长;尽量用https;重要信息如密码放session里

6. H5新增前端缓存有哪些
   localStorage: 永久保存; 除非主动删除数据，否则数据是永远不会过期的。同源可以读取并修改localStorage数据。
   sessionStorage: 会话级别保存,仅当前会话和会话窗口有效; sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问
   并且当会话结束后数据也随之销毁。

7. 跟cookie的区别

8. 怎么发送跨域请求

9. CSRS怎么设置头部

10. CSRF防御方式：验证码、anti CSRF token，

11. XSS防御方式： 也就是对提交的所有内容进行过滤，对url中的参数进行过滤，过滤掉会导致脚本执行的相关内容；然后对动态输出到页面的内容进行html编码，使脚本无法在浏览器中执行。虽然对输入过滤可以被绕过，但是也还是会拦截很大一部分的XSS攻击。

12. 跨域请求头怎么设置?返回报文有什么不一样的地方

13. JSONP的原理和缺点https://www.jianshu.com/p/a17cb17d3bba
    利用src，发送跨域GET请求，服务器接收callback函数，用参数值包装要返回的数据，原网页上调用这个同名函数，就能log出来
    无返回、只支持get请求、但兼容性好

HTTP详细

1. http1.0，1.1和2.0区别- https://zhuanlan.zhihu.com/p/266578819
2. http头部有哪些- https://www.cnblogs.com/Joans/p/3956490.html
   Accept（-charset、-encoding，-language），cache-control：http1.1新增，指定应该遵循的缓存机制；connection：是否长连接；cookie；host：http1.1新增，包含域名端口号，支持断点续传；if-modified：协商缓存304；强缓存不会发送请求200；
3. http缓存- https://www.cnblogs.com/ranyonsue/p/8918908.html
4. 浏览器加载一个页面的简单流程如下：-
   https://blog.csdn.net/zl399615007/article/details/84534884

首先通过头部的expires和cache-control判断资源是否过期，决定是否触发强缓存；
如果触发，则不发送新请求，状态码200；如果没有触发，则发送请求；然后服务器根据if-modified、last-modified这些信息，判断资源是否被更改，缓存是否有效；如果有效，则命中协商缓存，状态码304，服务器不传资源，依然从缓存里读。
5. get post区别
HTTP请求方式：
get和post都能
区别1：get能缓存，post不能缓存；比如qq空间编辑了说说没提交，然后关闭网页再打开，依然存在，这就是缓存到本地了；
区别2：携带数据的格式；浏览器直接发出的GET只能由一个url触发，所以get请求的参数一般在URL里直接显示了，参数也能写在body里，但要做额外的操作；浏览器POST请求一般来自表单提交，次提交，表单的数据被浏览器用编码到HTTP请求的body里。
区别3：如果是get提交的表单，参数直接放url里的话，复制url能打开提交的表单；如果是post，提交后服务器返回的是一个新页面，复制url再打开也看不到提交的信息；

前端优化

1. html优化
2. css优化- https://www.cnblogs.com/heroljy/p/9412704.html