携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第21天，点击查看活动详情
我在车上，不知道更新什么，那就把我的备忘录复制粘贴过来吧，大概是大二上的记下一些我碰到的问题。
从简历里做过的项目入手，做过哪些方面的性能优化？
【1】减少http请求，让加载更快，合并 JavaScript、CSS 等文件，将浏览器一次访问需要的javascript和CSS合并成一个文件，这样浏览器就只需要一次请求。减少资源体积:压缩代码 图片
【2】让渲染更快，css放在head,js放在body最下面，懒加载，对DOM查询进行缓存
一个容器里只有一个元素，怎么让它右对齐？（浮动、绝对定位、flex）
// 第一种方法float: right;
// 第二种方法text-align: right;
flex：1 表示什么？
flex实际上是flex-grow、flex-shrink和flex-basis三个属性的缩写
数据类型检测的方式？
（typeof、instanceof、Object.prototype.toString.call，Array isArray）
箭头函数有什么特点？
箭头函数是匿名函数，不能使用new，没有constructor，没有原型属性。
没有自己的this，指向外层普通函数的作用域
没有arguments伪数组。
let、const、var的区别；如果const定义的是个对象，能够修改对象的属性吗？
const实际上保证的并不是变量的值不得改动，而是变量指向的那个指针不得改动，可以给对象添加属性。如果真的想将对象冻结，应该使用Object.freeze方法。
\
301、302的区别？
301,302都是http请求重定向状态码。
301是永久重定向，而302是临时重定向。
301用途：
301请求是可以缓存的，浏览器会存在缓存。当该重定向基本不会发生变化时，采用301.如域名的解析：一个域名跳转到另一个域名。这时往往采用301.permenent标识301。切记301跳转在浏览器上是有缓存的。调试过程更换跳转地址，需清除浏览器的缓存。
302用途：
302 比如未登陆的用户访问用户中心重定向到登录页面。访问404页面会重新定向到首页。
\
webpack，除了gzip还有哪些压缩格式，配过tree-shaking吗
压缩比越高，压缩速率越慢，压缩时间越长，压缩比Snappy<LZ4<LZO<GZIP<BZIP2
不同的场景选择不同的压缩方式，肯定没有一个一劳永逸的方法，如果选择高压缩比，那么对于cpu的性能要求要高，同时压缩、解压时间耗费也多；选择压缩比低的，对于磁盘io、网络io的时间要多，空间占据要多；对于支持分割的，可以实现并行处理。
vue2和vue3响应式差别
vue的data为什么是函数 而不是一个对象？
js中的对象是引用类型的数据，当多个实例引用同一个对象是，只要其中一个实例对这个对象进行操作，其他实例中的数据也会发生改变。而在vue中，我们更多的是想要复用组件，那就需要每个组件都有自己独立的数据这样组件之间才不会相互干扰。所以组件中的数据要写成函数的形式。数据以函数返回值的形式定义，这样当我们每次复用组件时，就会返回一个新的data，也就是说每个组件都有自己的私有数据空间，各自维护自己的数据，不会干扰其他组件的正常运行。
懒加载原理
现将img标签中src链接设置成空白图片，将其真正的图片地址存储在自定义属性中例如data-img，当js监听到该图片进入可视区域后，将自定义属性中的地址存储到src属性中，达到懒加载的效果。
这样做能防止一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或者崩溃等问题。
解决跨域的方式？
AJAX跨域方案一：CORS
当发送ajax请求时，服务器会返回一个响应头，相当于服务器指定了可以访问该接口的白名单，通常，只对于那些公开的非隐私的数据接口，才会使用CORS。
AJAX跨域方案二：jsonp
jsonp是json的一种使用模式，可以让网页从别的域名那里获取数据。
AJAX跨域方案三：服务器转发
服务器端向第三方服务器发起请求，得到数据，并返回给客户端。
和跨域有关的cors几个请求头和响应头？
请求头 响应头
Origin Access-Control-Allow-Credentials
Access-Control-Request-Headers Access-Control-Allow-Headers
Access-Control- Request- Method Access-Control-Allow-Methods
Access-Control-Allow-Origin
Access-Control-Expose-Headers
Access-Control-Max-Age
说说px，em，rem，vw，vh的区别？
px代表物理屏幕上能显示出的最小的一个点,
em 是相对于父级的字体大小,
rem是相对于HTML根元素的字体大小,
vh 和vw相对于视口的高度和宽度,1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度
css 实现水平/垂直居中
1、利用flex，将父元素设置为display:flex，
并且设置align-items:center;justify－content:center;
2、子元素设置position:absolute; top: 0; left: 0; bottom: 0; right: 0; margin:auto;
3、子元素绝对定位，距离顶部 50%，左边50%，
然后使用css3 transform:translate(-50%; -50%)
4、设置父元素的display:table-cell,并且vertical-align:middle，这样子元素可以实现垂直居中。
z-index不起作用的几种情形
（1）当前设置z-index元素的父元素position:relative/absolute;
(2) 当前设置z-index元素为浮动元素。
position:sticky是css定位新增属性
可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
使用条件：
1、父元素不能overflow:hidden或者overflow:auto属性。
2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3、父元素的高度不能低于sticky元素的高度
\
XSS攻击和csrf攻击
1、xss攻击：跨站脚本攻击
三种攻击方式：注入式攻击、反射型攻击、基于DOM的xss攻击
解决方式：过滤及转码；csp内容安全策略，通过头部或meta指定哪些脚本可以执行；httponly，只允许http请求携带cookie，不允许javascript获取cookie
2、csrf攻击：跨站请求伪造攻击
漏洞在于发送http请求会自动携带同源的cookie
所在在用户登录一个A网站后，再去浏览器一个恶意B网站的过程中，如果发起了对A网站的请求，即使是由B网站发起的，也会自动携带A网站的cookie，从而完成csrf攻击
解决方法：
不允许第三方网站携带cookie，头部samesite字段
验证发送请求的网站来源，头部origin字段
csrf token，在发送A网站的请求时，需要携带这个token，第三方网站无法携带这个token
浏览器缓存机制？？？
JavaScript 中共有 6 种基本数据类型：Undefined、Null、Boolean、Number、String、Symbol (new in ES 6) ！
引用类型了，统称为 Object 类型。细分的话，有：Object 类型、Array 类型、Date 类型、RegExp 类型、Function 类型 等。
typeof：经常用来检测一个变量是不是最基本的数据类型
instanceof：用来判断某个构造函数的 prototype 属性所指向的对象是否存在于另外一个要检测对象的原型链上
== : 只进行值的比较
=== : 不仅进行值得比较，还要进行数据类型的比较
快速排序的基本思想是：
1．先从数列中取出一个数作为基准数，记为x。
2．分区过程，将不小于x的数全放到它的右边，不大于x的数全放到它的左边。（这样key的位置左边的没有大于key的，右边的没有小于key的，只需对左右区间排序即可）
3．再对左右区间重复第二步，直到各区间只有一个数
采用双指针法，从数组的两端分别进行比对。时间平均复杂度很容易计算得到为O(NlogN)。空间复杂度为O(logn)
浏览器渲染机制
1、在浏览器中输入URL。
2、浏览器向相应的服务器发送请求，接受响应。
3、HTML解析器自上而下地将HTML文件解析成一棵DOM树，树上的节点就是相应的元素。
4、CSS解析器将CSS解析成CSSOM树。
5、根据DOM树和CSSOM树构建相应的Render树（渲染树）。
6、Layout（布局）：计算出每个节点在屏幕中的位置。
7、Paint（绘制）：将内容显示在屏幕上。
http 2.0有什么新的特性？
01 二进制分帧
HTTP 2.0最大的特点：不会改动HTTP 的语义，HTTP 方法、状态码、URI 及首部字段，在应用层和传输层之间增加一个二进制分帧层。在二进制分帧层上，HTTP 2.0 会将所有传输的信息分割为更小的消息和帧,并对它们采用二进制格式的编码。当我们建立连接的时候，就可以承载任意数量的双向数据流。
02 多路复用
HTTP 1.0的模式是，建立连接请求数据完毕之后就立即关闭连接；后来采用了keep-alive保活模式使得可以复用连接不断开，可以利用这次连接继续请求数据。但是始终会有一个缺点，就是你必须等待服务器返回上一次的请求数据你才可以进行下一次的请求。HTTP 2.0就提出了多路复用的技术，就是你可以连续发送多个请求，可以不用收到回复就继续发送请求。
03 首部压缩
HTTP 1.x首部是没有压缩的，Gzip只会对请求体进行压缩。首部压缩可以使得头部帧可以最大程度复用，减少头部的大小，有利于减少内存和流量。比如我们第一次发送请求，里面包含头部的各种信息；但是后来我们又发送另外的请求，发现大部分的字段是可以复用的，我们只要发送一个当前请求特有的头部帧即可。
04 流量控制
05 请求优先级
客户端明确指定优先级，服务端可以根据这个优先级作为交互数据的依据，比如客户端优先设置为.css>.js>.jpg。服务端按此顺序返回结果更加有利于高效利用底层连接，提高用户体验。
06 服务器推送
一般HTTP请求都是由客户端发起，服务器收到请求进行返回。但是HTTP 2.0 可以使服务器主动返回资源给客户端用户。比如前端请求 /index.html 资源，但服务器把 /index.css ， index.png 都返回了。这样就可以提高了性能。
寻找第k大？
arr.sort((a,b) => a - b)
return arr[arr.length - K]
谈谈你对MVVM开发模式的理解？
MVVM分为Model、View、ViewModel三者。
Model代表数据模型，数据和业务逻辑都在Model层中定义；
View代表UI视图，负责数据的展示；
ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作；
Model 和 View 并无直接关联，而是通过 ViewModel 来进行联系的，Model 和 ViewModel 之间有着双向数据绑定的联系。因此当 Model中的数据改变时会触发 View 层的刷新，View 中由于用户交互操作而改变的数据也会在 Model 中同步。
这种模式实现了 Model 和 View 的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作 dom。
什么叫同源策略？
两个页面中的协议，域名，端口号一致，则表示同源。
为什么浏览器要使用同源策略？
设置同源策略的主要目的是为了安全，如果没有同源限制，在浏览器中的cookie等其他数据可以任意读取，不同域下的dom可以任意操作，ajax任意请求其他网站的数据，包括意思数据。
行内元素与块级元素的区别？
display inline 与 display block
行内元素与其他元素在一条水平线上排列，块级元素每一个独占一行虽然可以使用浮动。
行内元素不可以设置宽高，但可以设置行高，margin padding上下无效，左右有效。
块级元素可以设置宽高，有宽度高度外边距等等。
