文章探讨了WebSocket的全双工通信特性和工作原理，以及它如何改进了HTTP的短连接问题。接着讨论了JavaScript中Object.defineProperty用于对象属性定义和修改的机制。此外，解释了Vue框架中的mixin概念，它是代码复用的一种方式。还涉及React的render方法和事件循环机制，以及前端跨域解决方案和React性能优化策略。
说说你对webSocket的理解？
**理解**
`WebSocket`是`HTML5`下一种新的协议（`websocket`协议本质上是一个基于`tcp`的协议）
它实现了浏览器与服务器**全双工通信**，能更好的节省服务器资源和带宽并达到实时通讯的目的
**Websocket是一个持久化的协议**
**原理**
`websocket`约定了一个通信的规范，通过一个握手的机制，客户端和服务器之间能建立一个类似`tcp`的连接，从而方便它们之间的通信
在`websocket`出现之前，`web`交互一般是基于`http协议`的**短连接**或者**长连接**
**`websocket`是一种全新的协议，不属于http无状态协议，协议名为"ws"**
说说你对Object.defineProperty()的理解？
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
该方法接受三个参数
第一个参数是 obj：要定义属性的对象，
第二个参数是 prop：要定义或修改的属性的名称或 Symbol，
第三个参数是 descriptor：要定义或修改的属性描述符
函数的第三个参数 descriptor 所表示的属性描述符有两种形式：数据描述符和存取描述符。
数据描述符是一个具有值的属性，该值可以是可写的，也可以是不可写的。
存取描述符是由 getter 函数和 setter 函数所描述的属性。
一个描述符只能是这两者其中之一；不能同时是两者。
这两种同时拥有下列两种键值：
configurable： 是否可以删除目标属性或是否可以再次修改属性的特性（writable, configurable, enumerable）。设置为true可以被删除或可以重新设置特性；设置为false，不能被可以被删除或不可以重新设置特性。默认为false。
enumerable： 当且仅当该属性的 enumerable 键值为 true 时，该属性才会出现在对象的枚举属性中。默认为 false。
Js数据类型判断都有哪几种方式？至少说出5种？它们的区别是什么？
1. typeof判断typeof返回的类型都是字符串形式2. Constructor实例constructor属性指向构造函数本身constructor 判断方法跟instanceof相似,但是constructor检测Object与instanceof不一样,constructor还可以处理基本数据类型的检测,不仅仅是对象类型3. Instanceofinstanceof可以判类型是否是实例的构造函数instanceof 后面一定要是对象类型，并且大小写不能错，该方法适合一些条件选择或分支。4. Object.prototype.toString.call()判断类型的原型对象是否在某个对象的原型链上5. 通过object原型上的方法判断比如array.isArray()来判断是不是一个数组6. ===（严格运算符）通常出现在我们的条件判断中，用来判断数据类型的话就会非常的有局限性，比如判断一个变量是否为空,变量是否为数据等
说说你对vue中mixin的理解？
`mixin`是一种类，在`vue`中就是`js`文件，主要的作用是作为功能模块引用。因为在项目中，可能不同组件会有相同的功能，比如控制元素的显示和隐藏，如果他们的变量和规则也完全相同的话，就可以把这个功能单独提取出来，放在`mixin.js`中，再引入，就可以实现一样的功能了。引入的方法也分为全局混入和局部混入，局部混入就是在每个组件中引入，全局混入就是在main.js中通过`Vue.mixin()`引入。
React render方法的原理，在什么时候会触发？
**原理：**
在类组件中`render`函数指的就是`render`方法；而在函数组件中，指的就是整个函数组件
`render`函数中的`jsx`语句会被编译成我们熟悉的js代码，在`render`过程中，`react`将新调用的`render`函数返回的树与旧版本的树进行比较，这一步是决定如何更新 DOM 的必要步骤，然后进行 `diff` 比较，更新dom树
**触发时机：**
类组件调用 `setState` 修改状态
函数组件通过`useState hook`修改状态
一旦执行了`setState`就会执行`render`方法，`useState` 会判断当前值有无发生改变确定是否执行`render`方法，一旦父组件发生渲染，子组件也会渲染
说说你对事件循环event loop的理解？
任务在主线程不断进栈出栈的一个循环过程。任务会在将要执行时进入主线程，在执行完毕后会退出主线程。
前端跨域的解决方案？
通过jsonp跨域 document.domain + iframe跨域 location.hash + iframe window.name + iframe跨域 postMessage跨域 跨域资源共享（CORS） nginx代理跨域 nodejs中间件代理跨域 WebSocket协议跨域
React性能优化的手段有哪些？
使用纯组件；
使用 React.memo 进行组件记忆（React.memo 是一个高阶组件），对 于相同的输入，不重复执行；
如果是类组件，使用 shouldComponentUpdate（这是在重新渲染组件之前触发的其中一个生命周期事件）生命周期事件，可以利用此事件来决定何时需要重新渲染组件；
路由懒加载；
使用 React Fragments 避免额外标记；
不要使用内联函数定义（如果我们使用内联函数，则每次调用“render”函数时都会创建一个新的函数实例）；
避免在Willxxx系列的生命周期中进行异步请求，操作dom等；
如果是类组件，事件函数在Constructor中绑定bind改变this指向；
避免使用内联样式属性；
优化 React 中的条件渲染；
不要在 render 方法中导出数据；
列表渲染的时候加key；
在函数组件中使用useCallback和useMemo来进行组件优化，依赖没有变化的话，不重复执行；
类组件中使用immutable对象；
扫一扫
28万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
