后面会不断往这里面写东西的，学的东西太浅了，慢慢记录
-
http无状态
- http不会为了下次连接所需要的信息而维护这次连接
-
扁平化数据转树状
- 遍历数据
- 判断当前的元素是否为子级
- 为子级则插入到父级的
children数组中 - 递归
-
元素位置互换
- 假设：A与B位置互换
- 保存父节点
- 获取各节点的下一个节点并保存
- 利用
insertBefore插入到各下一节点的前面
-
CSS3新特性- 属性选择器
border-radiusrgba、opacitytransformanimation（动画）- 阴影
-
移动端适配
rem+ 媒体查询- 媒体查询修改字体大小（有阶梯性）或者是通过
JavaScript动态控制根元素字体大小 - rem根据
根元素字体大小进行响应
-
CSS中
animation、transition、transform、translate区别animation：动画（类似一种设置好播放时间、次数的动画）transition：过渡(hover等)，是需要人为触发且是一次性的（重复需要重新触发，比如：鼠标移动到元素上等）transform：变形translate：移动
-
animation、transition区别：- 触发：
animation无需触发，自动执行；transition需要手动触发 - 重复：
animation可重复发生；transition重复发生需要再次触发 - 状态：
animation有多个状态；transition仅有开始和结束状态 - 暂停：
animation可暂停；transition不可暂停 animation像是一种动画的播放，而transition更像是一种过渡状态的展示
- 触发：
-
伪元素和伪类
- 形式方面：伪类
:、伪元素:: 伪类用于添加元素的特殊效果、伪元素用于添加文档流之外的元素伪类常用于一些元素的过渡效果、伪元素常用与添加图标以及清除浮动等操作
- 形式方面：伪类
-
load、DOMContentLoaded的区别DOMContentLoaded：DOM被完全加载及解析之后触发load：除DOM完全解析外，其他资源、依赖均加载完成后触发
-
Vue生命周期beforeCreate:实例创建阶段（方法、computed、watch、method、data无法使用）created:实例创建完成，方法、数据可使用，可在此进行异步请求beforeMounte:页面挂载阶段，此时页面还未进行渲染与挂载mounted:页面挂载完成，可以对元素进行操作beforeUpdate:页面更新前，可在此进行提醒updated:页面更新完成，可在此进行提醒beforeDestroy:实例销毁前，可在此进行定时器清除操作destroyed:实例销毁，无法进行任何操作- keep-alive：
deactivated:组件被缓存activated:组件激活
-
路由守卫
- 全局守卫
- 全局前置守卫：
beforeEach，进入路由前触发，常用于检测登录状态 - 全局解析守卫：
beforeResolve,在beforeRouteEnter完成后触发 - 全局后置守卫：
afterEach，进入路由后触发
- 全局前置守卫：
- 路由守卫（为某个路由操作单独配置）
beforeEnter
- 组件守卫
- 进入路由前：
beforeRouteEnter - 此路由复用：
beforeRouteUpdate - 离开当前路由：
beforeRouteLeave
- 进入路由前：
- 全局守卫
-
Vue2与Vue3的一些区别
- 生命周期
vue3：beforeCreate+created->setup- 其他周期仅是改了名称，功能不变
- 响应式：
vue2：Object.defineProperty+ 观察者模式vue3：Proxy
Diff算法优化
- 生命周期
-
Vue原理
- 将
template转换为抽象语法树AST树 - 优化：遍历
AST树，标记静态节点，下次渲染跳过对比 - 将
AST树转换为可执行的代码
- 将
-
Diff算法流程- 同级比较，不相同则直接移除，进行渲染，相同再比较子节点
- 判断子节点是否存在，存在情况不一样则进行移除或添加操作
- 如果存在子节点，深度递归比较子节点
Vue2的Diff:双端比较
-
虚拟
DOMJavaScript利用对象将真实DOM抽象化Diff算法实现两棵虚拟DOM树的差异比较Patch算法将两棵虚拟DOM树之间的差异应用到真实DOM上
-
Vue2响应式- 三个重要角色：
Observer(添加getter、setter)、Dep(进行依赖收集与更新派发)、Watcher（观察者对象，数据改变后观察者收到派发更新，进行更新操作） Dep的作用：仅有在当前变量在页面有绑定时才进行正常的派发更新，若是无用变量则无需进行派发更新、重新渲染- 主要步骤：
- 通过
Observer对监听的数据添加getter和setter - 利用
getter进行依赖收集,存放在Dep、利用setter通过Dep.notify()进行派发更新 Watcher收到派发更新，进行响应操作
- 通过
- 三个重要角色：
-
三种观察者对象
- 渲染：
render watcher - 计算属性：
computed watcher - 侦听器：
user watcher
- 渲染：
-
Ajax设置Headerxhr.setRequestHeader("key",value)
-
Ajax请求携带cookie- 服务端配置响应头
Access-Control-Allow-Origions（跨域） - 服务端配置响应头
Access-Control-Allow-Credentials - 配置请求头
WithCredentials:true
- 服务端配置响应头
-
其他跨域方法
jsonp：利用了<script>标签不受跨域影响，后端返回函数名及参数，前端对此进行执行（缺点：只有GET方法）cors：如19node中间件、nginx反代理：接了一层服务器转发，服务器没有同源策略iframe、postMessage、websocket
-
event.target和event.currentTarget之间的区别event.target是触发该事件的元素（例如事件委托，点击了某个元素向上冒泡触发事件，指的就是这个元素）event.currentTarget是绑定该事件的元素（假如我绑在了ul上，则不管怎么触发都是指向ul）
-
如何添加一个点击事件
addEventListener- 标签中的
onclick JavaScript获取标签，div.onclick = function(){}
-
v-if和v-showv-show实际上是通过display:none来控制元素显隐，不管条件是否正确都会创建元素（有渲染开销），隐藏也能获得该标签v-if实际上是通过对元素进行DOM元素的加载和卸载控制显隐，不符合条件则不创建元素，且v-if会触发生命周期（有切换开销），隐藏后不能获得该标签
-
CSS隐藏某个元素display:none不会占据最初位置，触发回流visibility:hidden会占据最初位置，触发重绘，且是继承的，子元素可以取消hiddenrgba透明(继承，子元素可改变)、opacity:0透明(父+子看成一整体)- 移动元素到页面外
- 让元素到最下层(
z-index:-1)
-
数组和链表的区别
- 数组在栈区，链表在堆区
- 数组在内存中连续，链表在内存中不连续
- 数组静态分配内存，链表动态分配内存
- 查找性能相同
- 链表插入、删除性能高（数据不连续存储，因此插入删除不会导致元素大量移位）
- 数组的读取性能高（数据存储空间连续，可以快速定位）
-
各继承方法的缺点：
- 原型链继承：
- 实例无法向构造函数传参
- 所有实例会共享父类的实例属性
- 构造函数继承：
- 只能够继承父类构造函数的属性
- 不能够复用
- 每个新实例都有父类构造函数的副本
- 组合继承
- 调用了两次父类构造函数，生成了两份实例，耗内存
- 原型链继承：
-
垃圾回收
- 标记清除
- 基本数据类型存放在栈中
- 引用数据类型的指针存放在栈中，内容存放在堆中
GC自动执行，将没有被引用的变量标记为垃圾数据,有被引用的变量标记为活动数据,随后将垃圾数据清除释放
- 引用计数
- 标记清除
-
Promise与async/await的区别Promise:ES6、async/await:ES7- 错误捕捉
Promise错误通过catch捕捉async/await错误可通过then和try-catch捕捉
-
异步
- ES5:
setTimeout、setInterval、回调函数、发布订阅、事件监听 - ES6:
Promise - ES7:
async/await
- ES5:
-
事件委托
- 利用事件冒泡机制
- 定位目标元素：
event.target、event.srcElement - 事件兼容：
event || window.event
-
ES5中类与ES6中
class的区别class在必须严格模式下，不存在变量提升,内部属性和方法不可枚举ES5的构造函数可以当做函数使用，而class不行（必须使用new调用）class通过super、extends进行继承,ES5通过构造函数或原型链进行继承- 继承方面：
class是将父类属性和方法加到this上，再由子类来修改指向ES5是先创造子类对象实例，再将父类方法添加到this上
-
用
ES5实现ES6的class- 从以下方面进行解决：
- 禁止直接调用，必须使用
new操作符 - 不允许内部方法与属性枚举
- 创建出
class - 实现原型链上的继承和静态方法的继承
- 使用父类实例对象的
this - 子类继承
- 禁止直接调用，必须使用
- 从以下方面进行解决：
-
Promise的输出问题- 查看以下代码
new Promise((resolve,reject)=>{ { //此处是同步代码，立即执行 resolve(); //同步执行代码，立即执行，立即执行 //此处也是同步代码，立即执行 } }).then(()=>{ { //此处是异步代码 } }) -
基本有序的数组用什么排序方法进行排序最快
- 堆排序
-
Flex- 属性：
flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content - 重要：
flex:0 1 autoflex-grow:伸缩(放大)比例- 值为
0(默认):不放大也不缩小 - 值为
1:放大填充空位（等分剩余空间，若有2，则以2:1比例分配剩余空间）
- 值为
flex-shrink:收缩(缩小)比例- 值为
0:不缩小 - 值为
1(默认):空间不足则缩小
- 值为
flex-basis:缺省尺寸- 值为
auto(默认):按原来的尺寸显示
- 值为
- 属性：
-
tcp为什么是可靠的- 停止等待协议
- 发送出一段数据后，设置一个定时器，如果在定时器触发前还没有收到另一端的确认接收消息时，重新发送
- 连续ARQ
- 采用累积确认的方式进行数据发送，分组发送多个数据，另一端会对按序到达的最后一个分组进行确认(如
[1,2,3,4,5]，只发送了[1,2,3,5],则会确认接收到3，重新发送4与5)
- 采用累积确认的方式进行数据发送，分组发送多个数据，另一端会对按序到达的最后一个分组进行确认(如
- 停止等待协议
-
ref- 在子组件上使用：是对子组件实例的一个引用，可以通过
ref去调用子组件的方法 - 在
DOM上使用：对DOM元素的引用
- 在子组件上使用：是对子组件实例的一个引用，可以通过
-
如何判断
null类型Object.prototype.toString.call===
-
各种请求方法
GET：向指定服务端请求资源POST：向指定服务端提交资源PUT：向指定地址存储资源（更新）HEAD：获取资源响应首部DELETE：从服务端删除资源OPTION：获取可以请求的方法
-
hash路由和history路由hash路由：将#拼接在真实的url后，#后路径有变化时，浏览器并不会重新发起请求，而是触发onhashchange事件，根据onhashchange事件去进行一些操作，hash路由有以下特点：hash变化触发网页跳转- 会改变
url但是不会重新发起请求，所有的页面跳转均在客户端内操作 - 通过
onhashchange事件进行hash的监听，实现无刷新跳转 hash永远不会提交到server端
history路由：新的url可以是与当前url同源的任一地址（与当前地址相同也可），但是会重复记录此操作- 方法
pushState:将url推入栈顶 - 方法
replaceState:更改url - 方法
window.onpopstate:响应pushState、replaceState的更改 - 存在的问题：
- 对当前页面刷新时重新发起请求，若
nginx未匹配到当前url，则会报404
- 对当前页面刷新时重新发起请求，若
- 方法
- 路由选择：
- 浏览器端使用
hash - 客户端使用
history
- 浏览器端使用
-
Promise.all、Promise.racePromise.all：返回一个Promise对象，全部成功则res为一个数组，数组内是结果，其中一个失败则返回失败结果Promise.race：返回最快得出结果的，不论成功失败
