前端要点总结1（2021-12）

Vue相关

0、new Vue（）做了些什么？

实际它只是执行了_init()方法。
在这个方法中，首先给组件实例添加了$parent、$children、$root、$refs等属性，并对父组件传入的事件添加监听函数；声明插槽等信息；然后调用beforeCreate钩子；接着注入数据，并对数据初始化，响应式处理。最后执行created钩子。

1、组件通信

• 父子： props —- $emit ; $refs:this.$refs.children.方法名 （可以访问子组件的方法） this.$refs.parent.方法名(可以访问修改父组件内数据函数)
• 兄弟: 时间总线eventBus eventBus.$emit()————eventBus.$on()
• 祖先后辈： v-bind=“$attrs”——v-on=“$listeners”；注入 provide 接收inject
• 其他：sessionSstorage、vuex

2、$route、$router的区别？

• $router是指一个路由实例对象，Vue实例上的全局对象，可以实现路由跳转，包含所有路由信息。
• $route表示当前页面的路由信息，包括路径，meta、参数等信息。

3、vue-router的钩子函数

• 全局钩子，在main.js中使用， 有两个：
  页面进入之前：router.beforeEach((to, from, next)=>{})
  页面离开之前：router.afterEach((to, from, next)=>{})
• 组件内部钩子，与methods方法同级， 有三个：
  beforeRouterEach((to, from, next)=>{}) 当前守卫执行前组件实例还没有被创建出来，所以实例this不能被获取；
  beforeRouterLeave((to, from, next)=>{}) 可以获取实例this ；一般用作路由切换时关闭定时器，音频啥的，以免占用内存。或则是页面有未保存的内容，阻止页面跳转，去提示弹层。
  beforeRouterUpdate((to, from, next)=>{}) 可以获取实例this

addRouter动态添加

4、Vue中如何重置data

利用Object.assign()来重置data中的所有数据， vm.$data是获取当前状态下的data;vm.$options.data是获取组件初始化状态下的data。
Object.assign(this.$data,this.$options.data())

如: 如果只想修改data的某一个属性值，可以this[属性名] = this.$options.data()[属性名], 比如this.msg = this.$options.data().message

5、组件中写 name 选项有什么作用？

• 使用在keep-alive中，用做页面包含剔除标识；
• 组件做递归使用的时候，需要调用自身的name；比如左侧菜单；
• 当用vue-devtools调试工具时显示的组名就是组件的name

6、v-if v-show区别：

— 控制手段： v-show只是给元素添加css-display:none; v-if是整个元素的删除添加；
— 编译过程：v-show只是简单的css变化；v-if是进行了销毁和重建；
— 编译条件：false变true时，v-show不触发生命周期；v-if触发生命周期；

注：v-if有更高的切换消耗；v-show有更高的初始渲染消耗。

7、

放在mounted请求有可能导致页面闪动（页面dom结构已经生成），但如果在页面加载前完成则不会出现此情况建议：放在create生命周期当中进行数据请求。

8、v-for比v-if

源码位置：\vue-dev\src\compiler\codegen\index.js
可以看到v-for比v-if的优先级高。
所以不要放在同一个元素下，会带来性能上的浪费，避免的两种方式：
添加一个外层的template,用作v-if;
或则在computed中提前filter过滤元素再去渲染页面。

9、为什么data是一个函数而不是一个对象？

根实例data可以是对象也可以是函数（根实例是单例），不会产生数据污染情况
组件实例data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染。采用函数的形式，initData时会将其作为工厂函数都会返回全新data对象

10、新增数据后，页面没有变化，如何处理？

如果为对象添加少量的新属性，可以直接采用Vue.set()
如果需要为新对象添加大量的新属性，则通过Object.assign()创建新对象
如果你实在不知道怎么操作时，可采取$forceUpdate()进行强制刷新 (不建议)

11、自定义指令、过滤器：

如输入框、按钮防抖；图片懒加载；一键copy功能、拖拽指令、页面水印、权限校验等等。
9、过滤器：filter 注：vue3中已废弃
比如单位转换、数字打点、文本格式化、时间格式化之类的等

12、Vue优化：

1、路由懒加载，即按需加载，减少打包体积；
2、keep-alive缓存页面 excluse；
3、v-show复用dom, 比如一个任务量比较大的组件，完全可以用内存换取大的重新渲染；
4、v-for遍历避免同时使用v-if；
5、页面中有长列表，如果不需要做任何改变，则不需要响应式，就可以冻结此数据object.freeze(listData)，此时数据就不会被修改；
6、事件销毁，如定时器，监听器啊，在移除周期中清除定时器等信息；
7、图片懒加载；v-lazyload；
8、第三方插件的按需引入；
9、子组件分割： 当某个数据变化比较多的时候可以单独提取出来，做为一个单独的watcher，这样不会影响其他组件重新渲染。
10、SSR服务端渲染。

11、vue3特性：

响应式proxy系统；不再分数据类型，都做代理。
Composition api

9、Vue数据双向绑定的原理？
5、Vue中$nextTick原理
6、Vue中diff算法原理
7、Vuex 有哪几种属性？
8、key值的作用

MVVM

1、在早期web1.0时代，还没有前后端之分，当时的页面都是有java、PHP程序编写的。都是在一个文件里同时包含HTML、css、js、java/PHP等混在一起编写的，这种编写方式好处是简单快捷，缺点是代码混在一起难以维护；

2、然后提出了MVC后端架构（如Spring），然后把页面分离出来了，这个时候前端人员只编写View层，html、css,俗称UI党；此时，前端页面开发效率不高，并且前后端职责还是不清楚；

3、在后来web2.0时代的到来，前端开始与后端进行数据交互，把前端的HTML css js分离出来，然后分出来的模块页开始仿造后端的MVC架构拆分编写，model层——>view层——-> controller层 但是这种方式控制起来太不方便，往往model 与 view会相互修改，造成混乱。 后台出现了变体

model: 负责保存应用数据，与后端数据进行同步；
Controller: 负责业务逻辑，根据用户行为对Model数据进行修改；
View: 负责视图展示，将Model中的数据可视化出来。

MVP p是中间控制层Presenter 连着M V 两层的数据流动，防止两者之间直接交流。 Model <——->presenter <——> view

但是应用逐渐变大之后，导致presenter的体积增大，会有很多映射关系，难以维护。

在10年angularjs出现的时候，提出了MVVM架构， model view viewmodel 完美解决了这些问题， 把中间层臃肿的问题处理的很好，
它通过一套数据响应式机制自动响应model中数据的改变(数据响应式)；
同时实现一套更新策略自动将数据变化转换为视图更新（diff）。

MVVM模式在前端领域有广泛应用，他不仅解决MV耦合问题，还同时解决了维护两者映射关系的大量复杂代码和DOM操作，使用户更加专注于业务逻辑兼顾开发效率和可维护性。

JS原生相关

1、字符判断

js数据类型： string、number、boolean、null、undefined、object(function、array)、symbol(ES10 BigInt)
typeof 主要用来判断数据类型 返回值有string、boolean、number、function、object、undefined。
instanceof 判断该对象是谁的实例。
typeof与instanceof都是判断数据类型的方法，区别如下：

• typeof会返回一个变量的基本类型，instanceof返回的是一个布尔值
• instanceof 可以准确地判断复杂引用数据类型，但是不能正确判断基础数据类型
• 而typeof 也存在弊端，它虽然可以判断基础数据类型（null 除外），但是引用数据类型中，除了function 类型以外，其他的也无法判断

null表示空对象 undefined表示已在作用域中声明但未赋值的变量
注：typeof null = object

可以看到，上述两种方法都有弊端，并不能满足所有场景的需求
如果需要通用检测数据类型，可以采用Object.prototype.toString，调用该方法，统一返回格式“[object Xxx]”的字符串

下面实现一个全局通用的数据类型判断：

function getType(obj){
  let type  = typeof obj;
  if (type !== "object") {    // 先进行typeof判断，如果是基础数据类型，直接返回
    return type;
  }
  // 对于typeof返回结果是object的，再进行如下的判断，正则返回结果
  return Object.prototype.toString.call(obj).replace(/^\[object (\S+)\]$/, '$1'); 
}

2、new关键字

new

首先创建了一个新的空对象
设置原型，将对象的原型设置为函数的prototype对象。
让函数的this指向这个对象，执行构造函数的代码（为这个新对象添加属性）
判断函数的返回值类型，如果是值类型，返回创建的对象。如果是引用类型，就返回这个引用类型的对象。

3、EventLoop

JS是单线程的，为了防止一个函数执行时间过长阻塞后面的代码，所以会先将同步代码压入执行栈中，依次执行，将异步代码推入异步队列，异步队列又分为宏任务队列和微任务队列，因为宏任务队列的执行时间较长，所以微任务队列要优先于宏任务队列。微任务队列的代表就是，Promise.then，MutationObserver，宏任务的话就是setImmediate setTimeout setInterval

接下来要知道执行顺序。

HTTPS、网络协议、优化等相关问题：

1、主流浏览器

主流浏览器 有五个：IE(Trident内核)、Firefox(火狐：Gecko内核)、Safari(苹果：webkit内核)、Google Chrome(谷歌：Blink内核)、Opera(欧朋：Blink内核)
四大内核：Trident(IE内核)、Gecko(Firefox内核)、webkit内核、Blink(Chrome内核)
问题处理的思路：
要不要做？——->做到什么程度？——->如何做？（渐进增强or优雅降级）
JS兼容：
1、attachEvent、addEventListener区别？
attachEvent ——兼容：IE7、IE8；不兼容firefox、chrome、IE9、IE10、IE11、safari、opera。
addEventListener——兼容：firefox、chrome、IE、safari、opera；不兼容IE7、IE8

2、const问题
fireFox下，可以使用const、var定义常量；而IE下只能使用var定义。

3、访问的父元素的区别？
在IE下，使用 obj.parentElement 或 obj.parentNode 访问 obj 的父结点；
在FireFox下，使用obj.parentNode 访问 obj 的父结点

CSS兼容:
1、不同浏览器默认的margin padding 不同；统一设置* {margin:0;padding:0;}
2、默认img之间有默认间距，用float处理；

2、DNS域名解析的过程，从用户点击一个URL开始发生的一系列事情？

DNS （Domain Names System）域名系统
即是一个翻译官，负责将域名翻译成IP地址。
URL解析——DNS 查询——TCP 连接——HTTP 请求（三次握手）——响应请求——（后四次挥手）——页面渲染

3、上述介绍HTTP中，了解到HTTP传递信息是以明文的形式发送内容，这并不安全。而HTTPS出现正是为了解决HTTP不安全的特性。

HTTPS === HTTP + SSL/TLS
HTTP 和 HTTPS 使用连接方式不同，默认端口也不一样，HTTP是80，HTTPS是443。

4、UDP与TCP区别？

• UDP(user datagram protocol)，用户数据包协议。是一个简单的面向数据包的通信协议。
• TCP(transmission control protocol)，传输控制协议，是一种可靠的面向字节流的通信协议。
• TCP 是面向连接的协议，建立连接3次握手、断开连接四次挥手，UDP是面向无连接，数据传输前后不连接连接，发送端只负责将数据发送到网络，接收端从消息队列读取
  TCP 提供可靠的服务，传输过程采用流量控制、编号与确认、计时器等手段确保数据无差错，不丢失。UDP 则尽可能传递数据，但不保证传递交付给对方
  TCP 面向字节流，将应用层报文看成一串无结构的字节流，分解为多个TCP报文段传输后，在目的站重新装配。UDP协议面向报文，不拆分应用层报文，只保留报文边界，一次发送一个报文，接收方去除报文首部后，原封不动将报文交给上层应用
  TCP 只能点对点全双工通信。UDP 支持一对一、一对多、多对一和多对多的交互通信
  可以看到，TCP 应用场景适用于对效率要求低，对准确性要求高或者要求有链接的场景，而UDP 适用场景为对效率要求高，对准确性要求低的场景

3、OSI有7层

4、TCP/IP 传输控制协议/网际协议

TCP 传输控制协议，是一种面向连接的、可靠的、基于字节流的传输控制协议；
IP 网际协议，用于封包交换数据网络的协议；
注意：TCP/IP不仅仅指的是TCP 与IP两个协议；而是指一个由FTP、SMTP、TCP、IP、UDP等构成的协议族。

5、CDN （Content Delivery Network）内容分发网络

目的是为了改善互联网的服务质量，即提高访问速度。

6、网络协议：TCP协议、HTTP协议

传输控制协议、超文本传输协议

7、HTTP历程

HTTP1.0：
浏览器与服务器只保持短暂的连接，浏览器的每次请求都需要与服务器建立一个TCP连接
HTTP1.1：
引入了持久连接，即TCP连接默认不关闭，可以被多个请求复用
在同一个TCP连接里面，客户端可以同时发送多个请求
虽然允许复用TCP连接，但是同一个TCP连接里面，所有的数据通信是按次序进行的，服务器只有处理完一个请求，才会接着处理下一个请求。如果前面的处理特别慢，后面就会有许多请求排队等着
新增了一些请求方法 delete、options等
新增了一些请求头和响应头
HTTP2.0：
采用二进制格式而非文本格式
完全多路复用，而非有序并阻塞的、只需一个连接即可实现并行
使用报头压缩，降低开销
服务器推送

8、http状态码：

1xx: 正常进行，继续
2xx：成功执行完
3xx：地址重定向（301永久移动；302临时移动；304请求是头部带有附加条件，常用来做协商缓存。）
4xx：客服端请求错误 （400参数有误，401无权限，403拒绝请求 404找不到网页 405请求方式错误）
5xx：服务端错误

注: 简要解释⼀下 301, 302, 304 的区别 ?

• 301 永久性重定向。该状态码表示请求的资源已经被分配了新的URI，并且以后使⽤资源现在所指的URI。并且根据请求的⽅法有不同的处理⽅式。
• 302 临时性重定向。该状态码表示请求的资源已被分配了新的URI，希望⽤户本次能使⽤新的URI访问。
• 304 该状态码表示客户端发送附带条件请求时，服务器端允许请求访问资源，但未满⾜条件的情况。
• 304状态码返回时，不包含任何响应的主题部分。附带条件的请求指的是采⽤GET⽅法的请求头中包含：If-Match、If-Modified-Since、If-None-Match、If-Range、If-Unmodified-Since中任⼀⾸部。

GET和POST区别
无论 GET还是 POST，用的都是同一个传输层协议，所以在传输上没有区别。

不同：

• 当携带参数的时候，我们都知道GET请求是放在url中，POST则放在body中；注意：这里只是约定，并不属于HTTP规范，所以我们也可以不这样放置参数，即POST也可以放在URL中。
• HTTP协议没有Body和 URL 的长度限制，对 URL限制的大多是浏览器和服务器的原因；不同浏览器限制不同；
• POST比GET 安全，因为数据在地址栏上不可见。然而，从传输的角度来说，他们都是不安全的，因为HTTP 在网络上是明文传输的，只要在网络节点上捉包，就能完整地获取数据报文！只有使用HTTPS才能加密安全；
• 对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok！但并不是所有浏览器都会在POST中发送两次包，Firefox就只发送一次!

9、列举⼀下 HTTP 中关于 “资源缓存” 的头部指令 (Head) 有哪些 ? 并简要介绍⼀下设置的规则 ?

强制缓存

• Expires 指定⼀个缓存的过期时间，如果当次请求的资源在该过期时间之前，则命中缓存。缺点是因为这个时间是⼀个绝对时间，所以当客户端本地时间被修改后，服务器与客户端时间偏差变⼤会导致缓存混乱。
• Cache-Control ⼀般通过 max-age 指定⼀个相对时间，单位是秒。优先级⾼于 Expires 。其他常⽤的取值有：
  ------- public 表示响应可以被任何对象缓存
  ------- private 表示只能被单个⽤户缓存，⾮共享的，不能被代理服务器缓存
  ------- no-cache 强制所有缓存了该响应的⽤户，在使⽤已缓存的数据钱，发送待验证器的请求到服务器。
  ------- No-store 禁⽌缓存

协商缓存
若未命中强缓存，则浏览器会将请求发送⾄服务器。服务器根据http头信息中的Last-Modify/If-ModifySince或Etag/If-None-Match来判断是否命中协商缓存。如果命中，则http返回码为304，浏览器从缓存中加载资源。

Last-Modify/If-Modify-Since 浏览器第⼀次请求⼀个资源的时候，服务器返回的header中会加上Last-Modify，Last-modify是⼀个时间标识该资源的最后修改时间，当浏览器再次请求该资源时，发送的请求头中会包含If-Modify-Since，该值为缓存之前返回的Last-Modify。服务器收到IfModify-Since后，根据资源的最后修改时间判断是否命中缓存。
ETag/If-None-Match ETag可以保证每⼀个资源是唯⼀的，资源变化都会导致ETag变化。ETag值的变更则说明资源状态已经被修改。服务器根据浏览器上发送的If-None-Match值来判断是否命中缓存。

10、websocket 是一种网络传输协议，位于OSI模型的应用层。

客户端与服务端只需要进行一次握手，就可以创建持久性的连接，可以双向发送信息。

在websocket出现以前，开发实时web应用的方式为轮询。就是不停的向服务端发送HTTP请求，主动问有没有数据，有数据就响应，当轮询的频率比较高即可以近似的实现“实时通信”效果。
当然轮询的缺点就是：需要反复发送请求，会消耗大量的带宽和CPU资源。
websocket特点：
全双工：A—>B的同时B—>A，可同时传递数据；
二进制帧：
协议名: ws wss
握手：一次握手，然后正式收发数据
应用场景：弹幕、媒体聊天、协同编辑、体育实况更新、股票基金报价实时更新。
优点
较少的控制开销：数据包头部协议较小，不同于http每次请求需要携带完整的头部
更强的实时性：相对于HTTP请求需要等待客户端发起请求服务端才能响应，延迟明显更少
保持创连接状态：创建通信后，可省略状态信息，不同于HTTP每次请求需要携带身份验证
更好的二进制支持：定义了二进制帧，更好处理二进制内容
支持扩展：用户可以扩展websocket协议、实现部分自定义的子协议
更好的压缩效果：Websocket在适当的扩展支持下，可以沿用之前内容的上下文，在传递类似的数据时，可以显著地提高压缩率

11、优化的话，可以从几个方面来说吧：

—-— 网络加载类：
减少http请求次数和大小：图片合并、压缩；文件的压缩；移除注释等。（这也是webpack中的plugin中作用 如JavaScript：UglifyPlugin
CSS ：MiniCssExtractPlugin
HTML：HtmlWebpackPlugin
，还有compression-webpack-plugin压缩插件gzip）
页面中避免有空的href或src属性：因为不管他是否为空，浏览器都会去加载，直到加载失败，这样就会堵塞其他资源下载。
在页面meta中设置Cache-Control或Expires：可以在规定时间内，减少向服务器端发送请求。

—-— 页面渲染类：
CSS动画使用translate、scale代替top、height，即用重绘代替回流；
尽量避免在选择器末尾添加通配符，因为CSS解析匹配过程是从右到左的逆向匹配，
图片懒加载的使用；
降低图片质量：在线压缩 或则是引用loader，如image-webpack-loader;

12、安全

XSS (Cross Site Scripting) 跨站脚本攻击：
将恶意代码植入到. 比如浏览器遇到 html 中的 script 标签时，会解析并执行其中的js代码。
预防方案：
1、对用户输入内容和服务端返回内容进行过滤和转译
2、重要内容加密传输
3、合理使用get/post等请求方式
4、对于URL携带参数谨慎使用
CSRF（Cross-site request forgery）跨站请求伪造：
攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。
预防方案：
1、涉及到数据修改操作严格使用 post 请求而不是 get 请求；
2、请求地址添加 token ，使黑客无法伪造用户请求