咩咩羊10-优快云博客

原创 JS垃圾回收机制（V8）

内存泄漏内存中的某些对象，后续不再被使用，但是代码里还在使用着引用，无法被回收。若有高频或者长时间的操作，导致该对象被不断创建，对内存的占用越来越高，导致系统剩余可用内存越来越少，这就叫内存泄漏。可能造成内存泄漏的操作绑定事件用完后并没有解绑，但是不释放也没有关系，因为这是在当前页面，生存周期本来就很短，当用户刷新页面或者关闭当前页面时所有内存都会被释放。但是需注意如下场景：高频操作：会创建很多对象，比如onscroll、onresize、setInterval、循环语句等高频场景里存在的不会

2021-08-09 23:46:26 334

原创前端异常监控、性能监控

出发点：采集用户行为数据获取用户行为以及跟踪产品在用户端的使用情况。数据分析用户行为，进行产品的功能设计。数据监控数据监控，顾名思义就是监听用户的行为。也可为异常监控提供触发行为记录。常见的数据监控包括：PV: 即页面浏览量或点击量。UV:指访问某个站点或点击某条新闻的不同IP地址的人数用户在每一个页面的停留时间用户通过什么入口来访问该网页用户在相应的页面中触发的行为用户机型统计这些数据，了解用户来源的渠道，可以促进产品的推广，知道用户在每一个页面停留的时间，可以针对停留较长的页面

2021-06-25 17:45:13 1089 2

原创模拟实现深浅拷贝

浅拷贝创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。属性值是基本类型：拷贝基本类型的值；属性是引用类型：拷贝引用类型的内存地址；特点：其中一个对象改变了引用类型的属性，会影响另一个对象。深拷贝将一个对象从内存中完整的拷贝一份出来，从堆内存中开辟一个新的区域存放新对象，且修改新对象不会影响原对象。赋值把一个对象赋值给一个新变量的时候，赋的是该对象在栈中的地址，而不是堆中的数据。即两对象指的是同一个堆存储空间，无论谁发生变化，另一个会跟着联动。浅拷贝实现代码function

2021-06-20 15:29:46 251

原创模拟实现call,apply,bind

bindFunction.prototype.bind = function (context) { if (typeof this !== "function") { throw new Error("Function.prototype.bind - is not a function"); } var self = this; var args = Array.prototype.slice.call(arguments, 1); var fNO

2021-06-20 15:04:10 133

原创对象字面量替代if-else与switch

背景不知道大家项目中是否经常遇到多条件分支判断逻辑，如果你还是用if-else 或者 switch写了一长串的话，不妨试试用对象字面量的方式，能很大程度简化代码。demo原始function switchWay(type) { switch(type) { case 't1': return [1]; case 't2': return [2]; case 't3': re

2021-06-19 17:16:29 289

原创 BFC知识点

BFC是什么块级格式化上下文，一个独立的块级渲染区域。不影响外部元素的布局创建BFCfloat： != none;position: != static/relativedisplay: inline-block | flex | inline-flexoverflow: hiddenBFC 其他作用BFC可以取消盒子margin塌陷#fa{width: 200px;height: 300px;background-color: blueviolet;}.son{

2021-06-19 16:51:43 120

原创前端面试算法-高频

反转链表输入：{1,2,3}返回值：{3,2,1}function ReverseList(pHead){ let nex = null, cur=pHead, pre = null; while(cur) { nex = cur.next; cur.next = pre; pre = cur; cur = nex; } return pre}排序数组//1.大顶堆var bigHeap =

2021-06-17 23:11:34 203 2

原创虚拟DOM中key的原理总结

1.虚拟DOM中key的作用：key是虚拟DOM对象的标识，key 帮助 React 识别哪些元素改变了，比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】，随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：旧虚拟DOM中找到了与新虚拟DOM相同的key：1）若虚拟DOM中内容没变，则直接使用之前的真实DOM2）若虚拟DOM中的内容变了，则生成新的真实DOM，随后替换掉页面

2021-06-14 16:14:56 292

原创前端面试知识点清单【JS+Webpack+浏览器】

模拟实现一个 Promise.finally介绍下 Promise.all 使用、原理实现及错误处理设计并实现 Promise.race()ES6 代码转成 ES5 代码的实现思路是什么介绍下 webpack 热更新原理，是如何做到在不刷新浏览器的前提下更新页面的为什么普通 for 循环的性能远远高于 forEach 的性能，请解释其中的原因使用 JavaScript Proxy 实现简单的数据绑定跨域的解决方案详细介绍一下cors本地开发页面，需要请求后台接口，如何跨域传递cookie.

2021-06-13 17:21:22 136

原创 Redux考点清单

redux 为什么要把 reducer 设计成纯函数

2021-06-13 17:09:00 144

原创 React考点清单

待上传……

2021-06-13 16:42:57 199

原创事件执行机制-代码题

async function async1() { console.log('a'); await async2(); console.log('b');}async function async2(){ console.log('c');}console.log('d');setTimeout(function(){ console.log('e')}, 0);async1();new Promise(function (resolve) {

2021-06-12 17:51:29 108

原创节流与防抖函数——代码题

防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行防抖触发高频事件后n秒函数执行一次，如果n秒内高频事件再次被触发，则重新计算时间。每次触发事件时都取消之前的延时调用方法.应用：INPUT输入框自动补全function debounce(fn) { let timeout = null; // 创建一个标记用来存放定时器的返回值 return function () { let args=[...arguments]; timeout &

2021-06-12 17:41:31 136

原创原型继承——代码题【持续更新】

var A = function(){};A.prototype.n = 1;var b = new A();A.prototype = { n:2, m:3}var c = new A();console.log(b.n);console.log(b.m);console.log(c.n);console.log(c.m);1undefined23async function async1() { console.log('a'); awa

2021-06-12 17:35:52 372

原创预编译相关-代码题【持续更新】

预编译阶段万能口诀1.创建了ao对象2. 找形参和变量的声明,作为AO对象的属性名，值是undefined3. 实参和形参相统一4. 找函数声明会覆盖变量的声明拓展：AO对象——函数作用域创建阶段，有一个与之对应的叫做JS的变量对象，在函数作用域创建阶段称为AO对象，供JS引擎自己去访问。题目合集function fn(a,c) { console.log(a); //function a() {} var a = 123; console.log(a); //1

2021-06-12 16:35:31 131

原创作用域相关-代码题【持续更新】

var array = [];for(var i = 0; i <3; i++) { array.push(() => i);}var newArray = array.map(el => el());console.log(newArray); 答案：3 3 3解析：执行到var newArray = array.map(el => el());时候，i在当前作用域的值均变为3...

2021-06-12 16:13:40 181

原创 this指向相关-代码题【持续更新】

var x = 10;var foo = { x: 90, getX: function() { return this.x; }};foo.getX(); var xGetter = foo.getX;xGetter();答案：// 90 10xGetter();this是属于函数调用而非对象调用,此时相当于xGetter.call(window)

2021-06-12 16:11:02 163

原创变量提升-代码题【持续更新】

(function(){ var x = y = 1;})();console.log(y); // 1console.log(x); // ReferenceError: x is not defined以上代码等同于：var y = 1;function fn() {var x = y;}x在外部无法访问到，因此打印 x is not defined

2021-06-12 16:05:44 217

原创发布-订阅模式实现【js设计模式】

代码demovar Event = (function() { var _callbacks = {}, listen, emit, remove; //_callbacks 缓存所有订阅者的回调函数 listen = function(eventName, fn) { if(!_callbacks[eventName]) { _callbacks[eventName] =[fn]; } else{ _call

2021-06-08 17:21:30 138

原创 B函数继承A函数的4种方法

方法一： (直接prototype等号赋值，缺点：地址相同，修改B原型链，A同步被修改)function A(opt){ this.name = opt.name this.age = opt.age}//A的函数方法A.prototype.sayName = function(){ console.log(this.name)} /********实现B继承A的变量 ******/function B(opt){ A.call(this,opt)

2021-05-31 21:00:07 1320

原创 ECMAScript2020【ES11】使用教程

2015.6：正式发布ES6ES2016还包括了一个新的乘方运算的支持，并增加了一个新的方法Array.prototype叫includes。ECMAScript 2017引入了异步功能异步函数通过为承诺返回函数提供语法来改善异步编程体验。它还包括对象的静态方法：Object.values，Object.entries，和Object.getOwnPropertyDescriptors。ECMAScript 2018通过AsyncIterator协议和异步生成器引入了对异步迭代的支持。它还包括四个新

2021-05-17 17:42:17 562

原创浏览器的重绘与回流（Repaint、Reflow）

React 中 setState 什么时候是同步的，什么时候是异步的？下面的代码输出什么？class Example extends React.Component { constructor() { super(); this.state = { val: 0 }; } componentDidMount() { this.setState({val: this.state.val + 1}); console.log(this.s

2021-04-28 19:54:19 209

原创前端算法题【持续更新】

1.代码执行题['10','10','10','10','10'].map(parseInt);// [10, NaN, 2, 3, 4]2.什么是防抖和节流？有什么区别？如何实现？防抖触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。每次触发事件时都取消之前的延时调用方法.function debounce(fn) { let timeout = null; // 创建一个标记用来存放定时器的返回值 return function () {

2021-04-28 17:50:49 301

原创算法之位运算的应用

位运算应用总结异或【^】异或的特点任何数和 00 做异或运算，结果仍然是原来的数，即a⊕0=a。任何数和其自身做异或运算，结果是 00，即 a⊕a=0。异或运算满足交换律和结合律，即 a⊕b⊕a=b⊕a⊕a=b⊕(a⊕a)=b⊕0=b异或的应用【力扣】只出现一次的数字数组中的全部元素的异或运算结果即为数组中只出现一次的数字。...

2021-04-21 17:46:20 71

原创二叉树遍历模板总结【前中后+层级遍历】

递归常规遍历1.简易版【前+中+后】var traversal= (root) => { if (root) { // 前序遍历 return [root.val, ...traversal(root.left), ...traversal(root.right)] //中序遍历 return [ ...traversal(root.left), root.val, ...traversal(root.right)] //后序遍历 retur

2021-04-20 16:42:18 212

原创多维数组扁平化-实现flat函数

答案见末尾实现多维数组拍平（数组扁平化）多维数组拍平答案递归（forEach）var flat = (arr) => { let ans = []; arr.forEach((item, index) => { ans = Array.isArray(item) ? ans.concat(flat(item)) : ans.concat(item); }) return ans;}var arr = [1,[2,3],[4,[5.

2021-04-14 10:50:17 871

原创二叉树中序遍历

Problem输入: 给定一个二叉树的根节点 root返回：它的中序遍历Answer莫里斯遍历【推荐】用递归和迭代的方式都使用了辅助的空间，而莫里斯遍历的优点是没有使用任何辅助空间。缺点是改变了整个树的结构，强行把一棵二叉树改成一段链表结构。/** * Definition for a binary tree node. * function TreeNode(val, left, right) { * this.val = (val===undefined ? 0 :

2021-04-12 17:36:55 80

原创二叉树的后序遍历

Problem输入: 一个整数数组（假设输入的数组的任意两个数字都互不相同）任务：判断该数组是不是某二叉搜索树的后序遍历结果返回：布尔值递归分治思路划分左右子树遍历数组arr [i, j]区间元素，寻找第一个大于根节点的节点arr[x] ，划分左子树区间 [i,x-1]右子树区间 [x, j - 1],根节点 j判断是否满足二叉搜索树条件条件：左子树中所有节点的值 < 根节点的值；右子树中所有节点的值 > 根节点的值因左子树必满足，只需判断右子树终止条件i≥j，遍历

2021-04-09 19:47:11 170

原创二叉树理解

二叉搜索树定义左子树中所有节点的值 << 根节点的值；右子树中所有节点的值 >> 根节点的值；其左、右子树也分别为二叉搜索树。二叉树的遍历先序遍历定义[ 根节点 |左子树 | 右子树 ]中序遍历定义[ 左子树 | 根节点 | 右子树 ]后序遍历定义[ 左子树 | 右子树 | 根节点 ]二叉树涉及算法见后文...

2021-04-09 17:11:40 102

原创前端经验

元素在设置为display:inline-block;后元素之间会产生间距解决方法就是在包含这些元素的父元素上设置CSS属性font-size: 0;Chrome浏览器img标签在没有图片的情况下会显示边框img[src=""], img:not([src]){ opacity: 0;}css实现单行、多行文本溢出显示省略号的方法单行省略号overflow: hidden;text-overflow: ellipsis;white-space: nowrap;这种方式一般都

2021-04-08 12:37:13 92

转载 flex布局浏览器兼容处理

浏览器兼容的flex语法/* 子元素-平均分栏 */.flex1 { -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ width: 20%; /* For old syntax, otherwise collapses. */ -webkit-flex: 1;

2021-04-02 12:46:15 709

原创调用 setState 之后发生了什么？

调用 setState 之后发生了什么？React 会为当前节点创建一个 updateQueue 的更新列队。然后会触发reconciliation 过程，在这个过程中，会使用名为 Fiber 的调度算法，开始生成新的 Fiber 树， Fiber 算法的最大特点是可以做到异步可中断的执行。然后 React Scheduler 会根据优先级高低，先执行优先级高的节点，具体是执行 doWork 方法。在 doWork 方法中，React 会执行一遍 updateQueue 中的方法，以获得新的节点

2021-03-31 20:15:35 1263

原创 react生命周期-各阶段详解

装载阶段装载阶段组件被创建，然后组件实例插入到 DOM 中，完成组件的第一次渲染，该过程只会发生一次，在此阶段会依次调用以下这些方法：constructorgetDerivedStateFromPropsrendercomponentDidMountconstructor用处组件的构造函数，第一个被执行。若没有显式会有一个默认的构造函数，若显式定义必须在构造函数中执行 super(props)，否则无法在构造函数中拿到 this。原因见constructor里面为什么必须写super(

2021-03-26 12:19:02 349

原创 react一些容易混淆的点

React 中列表渲染需要设置key, key 的作用React 自己用的一个特殊属性，即使为一个组件设置 key 之后，我们也无法获取这个组件的 key 值。它是一种身份标识，每个 key 对应一个组件。React 中 key 值在兄弟元素之间必须是唯一的，不过，不用全局唯一React 中的唯一标识 key 在更新 DOM 时会用到，与虚拟 DOM diff 算法强关联v16.3 && v16.4 生命周期v16.3v16.4主要改动getDerivedState

2021-03-26 11:04:57 152

原创 state更新不生效之——派生状态

更新当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：static getDerivedStateFromProps()shouldComponentUpdate()render()getSnapshotBeforeUpdate()componentDidUpdate()getDerivedStateFromProps静态方法，所以不能在这个函数里使用 thisstatic getDerivedStateFromProps(props, sta

2021-03-19 18:05:19 393

原创 React16.4以上生命周期【新】

挂载当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：constructor()static getDerivedStateFromProps()render()componentDidMount()componentWillMount 即将在v17.0版本废弃，慎用！getInitialState\getDefaultProps 已被弃用更新当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：static getDerive

2021-03-19 17:19:38 180

原创 constructor里面为什么必须写super(props)

class Son extends Fa { constructor(props) { super(props); // 调用父类的constructor()，必须放在前面 this.attr1 = attr1;//必须放在super(props)之后，否则报错 } toString() { return this.attr1 + ' ' + super.toString(); // 调用父类的toString() }}了解constructorES6中每个类

2021-03-19 16:22:30 850

原创 render函数不能使用setState()

render函数应该是一个纯函数，完全根据this.state和this.props来决定返回的结果，而且不要产生任何副作用。在render函数中去调用this.setState是错误的，因为一个纯函数不应该引起状态的变化。render函数并不做实际的渲染动作，它只负责返回一个JSX描述的结构，最终由React来操作渲染过程。...

2021-03-16 17:06:07 1751

原创 Error during WebSocket handshake: Unexpected response code: 400

websocke偶尔中途断连，重新连接报跨域问题描述在开发环境正常使用，测试、生产环境报错，生产环境配置了nginx反向代理。具体报错截取部分：Websocket connection to 'ws://*****' faild: Error during WebSocket handshake: Unexpected response code: 400解决方案原项目中使用了Nginx。在配置反向代理时，若需要使用WSS，还需在nginx.conf文件加上websocket的配置如下：{

2021-03-15 17:13:29 4769 1

原创 webscoket实时通信实现demo【node模拟服务端】

开工前准备工作1.前后端约定好长链接的URL（本文举例：域名-127.0.0.1，端口号-8081，路径-/test）2.前后端约定好发送message指令的格式（本文格式为 {‘userId’:’ ', ‘message’: ’ '} ）前端封装可保持长链接的websocket构造函数1.创建一个普通的websocket连接var ws = null;var createWebsocket = function(url) { // 检查浏览器是否支持websocket if (!('W

2021-01-28 20:08:40 459