闭包函数
简单概括：声明在一个函数中的函数，内部函数总是可以访问期所在外部函数的参数和变量，即使外部函数执行完毕后。
特点：让外部访问函数内部变量成为可能，但局部变量会长存在内存中，有一块内存空间被长期占用，而不被释放，从而导致内存泄露。
使用场景
1.原生的setTimeout传递的第一个函数不能带参数，通过闭包可以实现传参效果。
2.做回调，自定义行为，然后把它关联到某个用户事件上（点击或者按键），代码通常会作为一个回调（事件触发时调用的函数）绑定到事件。
3.函数防抖，比如项目中的倒计时，在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。实现的关键就在于setTimeOut这个函数，由于还需要一个变量来保存计时，考虑维护全局纯净，可以借助闭包来实现。
4.封装私有变量，比如用js创建一个计数器
销毁方式：引用这个函数后 把函数置为null
———————————————————END————————————————————
递归函数
简单概括：就是在函数里边调用函数本身
特点：一般用于阶乘和深拷贝，就容易造成栈溢出，另一定要有结束条件，否则会导致死循环
使用场景：使用循环发送ajax请求，可用于多个条件筛选情况下向后台发送请求，具体
———————————————————END————————————————————
浅拷贝和深拷贝
简单概括：假设B复制了A，当修改A时，看B是否会发生变化，B变了这是浅拷贝，B没变就是深拷贝。
浅拷贝：拷贝一层，深层次的对象级别的就拷贝引用，当改变拷贝的对象里面的引用类型时，源对象也会改变（可以理解为用了一个内存）
深拷贝：重新开辟一个内存空间，拷贝多层，每一级别的数据都会拷贝，当改变拷贝的对象里面的引用类型时，不会相互影响。
使用场景：主要用于数据处理，map进行数据重组与filter进行数据过滤等。
实现方式：阅读此文
———————————————————END————————————————————
函数防抖（会用到闭包函数）和 函数节流
函数防抖
简单概括： 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
使用场景： 比如dom拖拽功能，但是在绑定拖拽事件的时候发现每当元素稍微移动一点便触发了大量的回调函数，导致浏览器直接卡死情况发生。
函数节流
简单概括： 规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。
使用场景：防止事件多次触发、模糊查询防止服务端请求过多导致性能消耗过大等问题。
小结
函数防抖 和 函数节流是在时间轴上控制函数的执行次数。防抖可以类比为电梯不断上人，节流可以看做限制用户每秒可访问次数。
具体代码：可从此文阅读
———————————————————END————————————————————
作用域
简单概述：变量与函数的可访问范围
使用场景：全局作用域、局部作用域、块级作用域
全局作用域：函数外面定义的变量、未定义直接赋值的变量、window对象的属性等
局部作用域：作用于函数内部的变量，外部无法访问
块级作用域：let和const声明的变量是私有的，外面访问不到
小结
for循环下let声明的变量不会泄露，但var声明的变量会泄露出去
另：提到作用域会关联闭包，闭包外部函数能够读取内部函数的变量
for(var i=0; i<5; i++) { /* console.log(i)*/ }
console.log(i) // 5for(let i=0; i<5; i++) { /* console.log(i)*/ }
console.log(i) // undefined
作用域链
简单概述：当声明一个函数时，局部作用域一级一级向上包起来，就是作用域链。
当执行函数时，总是先从函数内部找寻局部变量，如果内部找不到（局部作用域中没有），则会向创建函数的作用域（声明函数的作用域）寻找，依次向上
作用：保证执行环境有权访问的所有变量和函数的有序访问。
———————————————————END————————————————————
工厂模式（详细）
简单概述：给你一个批量对象的工厂，来帮助你获取对象。
使用场景：需要大量产出对象（例如jQuery 典型的工厂模式）。
小结
建造者模式：用于多人合作（例如Vue、react等,注：Vue3使用函数式）。
———————————————————END————————————————————
HTTP
五种状态码：
1xx：信息提示，表示请求已被成功接收，继续处理。
2xx：请求被成功提交。
3xx：客户端被重定向到其他资源。
4xx：客户端错误状态码，格式错误或者不存在资源。
5xx：描述服务器内部错误。
常见的状态码描述如下：
200：客户端请求成功，是最常见的状态。
302：重定向。
404：请求资源不存在，是最常见的状态。
400：客户端请求有语法错误，不能被服务器所理解。
401：登录超时，请求未经授权。
403：服务器收到请求，但是拒绝提供服务。
500：服务器内部错误，是最常见的状态。
502：服务器请求失败。（可能在重启服务 doge...）
503：服务器当前不能处理客户端的请求。
HTTP 缓存机制
简单概述（Web缓存大致可以分为）：数据库缓存、服务器端缓存（代理服务器缓存、CDN 缓存）、浏览器缓存。
浏览器缓存
LocalStorage
简单概述：HTML5设计出来专门用于浏览器存储的空间
作用：浏览器本地缓存方案，可存储Js、Css
限制：大小为5M左右
SessionStorage
简单概述：会话级浏览器存储，关闭页面就会被销毁。
作用：仅在客户端使用，不和服务端进行通讯，可存储Js、Css
限制：大小为5M左右
Cookie（深入理解）
简单概述：因为HTTP请求的无状态，需要去维持客户端状态的这就是Cookie。（并不是每个文件都必须携带cookie，某些静态文件不需要携带cookie）
生成：http response header 中的 set-cookie。
获取：Js中可以通过document.cookie可以读写cookie（设置httponly 则不允许Js读写）。
作用：用于浏览器端和服务器端的交互，客户端自身数据的存储，维护用户信息。
限制：大小4KB左右，需要设置过期时间expires（没有设置expires属性，那么 cookie 的生命周期只是在当前的会话中，关闭浏览器意味着这次会话的结束，此时 cookie 随之失效。）。
缺点：在相关域名下面 CDN的流量存在损耗
解决方法：cdn的域名和主站的域名要分开
indexDB
简单概括：一种低级API，用于客户端存储大量结构化数据，该API使用索引来实现对该数据的高性能搜索。（虽然Web Storage对于存储教少量的数据很有用，但对于存储更大量的结构化数据来说，这种方法不太有用。indexDB提供了这个解决方案）
使用场景：应用比较少，主要用于离线访问本地数据存储
Service Worker
简单概括：一个脚本，可以做离线应用
原因：JavaScript是单线程,无法多线程在主线执行js,在巨量的运算中非常影响前端渲染。
作用：处理大规模运算场景 不阻塞渲染。（3D模型渲染 用于大于几M数据）
能力：
1.使用拦截和处理网络请求的能力，实现一个离线应用。
2.在后台运行同事能和页面通信，去实现大规模后台数据运算处理。
应用：离线缓存，页面通信，twitter为实例。
———————————————————END————————————————————
重绘与回流
Css 性能让Js变慢 （频繁触发重绘与回流，会导致UI频繁渲染，最终导致Js变慢）
浏览器：一个线程 => JS解析 一个线程 => UI渲染
重绘（不一定会引起回流）
当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如：background-color。则就叫称为回流。
回流（必将引起重绘）
当render tree 中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，这就成为回流(reflow)。
当页面布局和集合属性改变时就需要回流。
小结
触发页面重布局的属性：盒子模型、定位属性、改变节点内部文字结构也会触发重新布局
———————————————————END————————————————————
懒加载与预加载（控制资源的加载时机）
懒加载（相当于延迟加载）
简单概括：进入可视区域后 请求资源
使用场景：列表数据使用懒加载，对于电商等图片很多，页面很长的业务场景适用
预加载
简单概述：图片等静态资源在使用之前的提前请求，资源使用到时能从缓存中加载，提升用户体验，需要页面展示的依赖关系维护。
使用场景：大量图片动画等
———————————————————END————————————————————
垂直居中方式（参考）
HTML结构：
<div class="box"><span>垂直居中</span></div>
方法一：display: table-cell; 会使元素表现的类似一个表格中的单元格td
.box{ display: table-cell; vertical-align: middle; text-align: center; }
方法2：display:flex
.box{ display: flex; justify-content:center; align-items:Center; }
方法3：绝对定位和负边距
.box{ position:relative; }
.box span{
width:100px; height: 50px; text-align: center;
position: absolute; top:50%; left:50%;
margin-left:-50px; margin-top:-25px;
}
方法4：绝对定位和0（简单说几个就好）
.box span{
width: 50%; height: 50%;
overflow: auto; margin: auto;
position: absolute; top: 0; left: 0; bottom: 0; right: 0;
}
———————————————————END————————————————————
Vue
常用生命周期
1.beforeCreate: 实例初始化之后，数据观测和事件配置之前调用
2.created：实例创建完成后立即调用
3.beforeMount：在挂载开始之前调用
4.mounted：挂载成功之后调用
5.beforeUpdate：数据更新调用
6.updated：组件Dom已更新，组件更新完毕
组件生命周期
1.activated：keep-alive组件激活时调用
2.deactivated：keep-alive组件停用时调用
3.beforeDestroy：页面（实例）销毁之前调用
4.destroyed：页面（实例）销毁之后调用
5.errorCaptured：捕获子组件错误调用
———————————————————END————————————————————
常问细节：
1.一般浏览器并发资源的加载量：6个
2.加Key的目的？加key(一定要具有唯一性，跟踪每一个节点的身份) id的checkbox跟内容进行了一个关联，解决警告。深入理解
3.为什么key尽量不要用index？因为index具有唯一性，如果在数组中插入一条数据，这条数据往后的数据会进行重绘回流 深入理解
4.虚拟DOM 是什么?在 React 中, React 会先将代码转换成一个 JS 对象, 然后再将这个 JS 对象转换成真正的 DOM. 这个 JS 对象就是所谓的虚拟 DOM.它可以让我们无须关注 DOM 操作, 只需要开心地编写数据,状态即可
5.css中兼容浏览器的前缀是什么? 谷歌: -webkit、火狐: -moz、opera: -o、ie: -ms
6.函数式和工厂模式区别？在工厂模式中 还是要实例化一个对象的，函数式编程是所有的API在源码里都是一个独立的方法，然后挂在到window上。
7.Vue3为什么改为函数式？满足更小的目标，组合大于继承，使用组合开发的方式会比继承更好。（因为webpack打包的时候会有tree-shaking过程，它会过滤没有使用的方法）
8.tree-shaking打包的优点？压缩的时候独立方法压缩会更小（类上的方法是没法进行压缩的），只筛选export文档流的方法（函数式方法），没法过滤挂在到原型链上的方法。
9.jQuery中(funcion(window){ })(window) 为什么传入Window？减少查找的性能损耗(减少作用域链的查找时间)
———————————————————END————————————————————
性能优化
Css
1.Link的css放入<head>中 进行页面阻塞
2.Css 会阻塞后续JS 执行（利用执行先后顺序进行性能优化）
3.Css模块化（@import引入Css可以更好的模块化，但如果@import的Css层级较多，会导致页面渲染较慢，所以需要合理的设计）
4.Css样式表置顶：放head中 阻塞页面渲染 使页面没有css 也不会渲染出来；
JS
1.动态添加JS 资源 使用defer执行顺序依旧
2.尽量少去改变作用域链(with、try catch)
3.减少DOM操作（操作DOM会引发重回回流）
图片
1 . 安卓建议使用webp格式图（ios 不支持 webp）
2 . Logo、icon 使用 SVG （适用于比较简单的图）
3. 针对只是图片情况，舍弃一些相对无关紧要的色彩信息
4. 雪碧图（需要保证雪碧图的大小）
优点：减少http请求数量（一次加载长期受益）
缺点：整合图片比较大时，一次加载比较慢
5.使用Image inline：将图片的内容内嵌到html当中，减少网站http请求。（建议循环中减少这种使用）
小结：对html、Css、Js的代码压缩，Css、Js的阻塞。
未完待续....
