鱼与前端🐟

前言有一天小明高兴的去面试，突然间面试官抛出一个问题：什么是TCP粘包？这下子好了，小明脑袋搜索了TCP的内容，发现只搜索到TCP和UDP的区别，流量控制，拥塞控制，和三握四挥这几个内容，小明尴尬的说：我不知道。于是回来恶补了TCP粘包的内容 关键词：TCP粘包、拆包 什么是TCP粘包现在假设客户端连续发了两个数据包给服务端，用pack1和pack2来表示，那么就有以下几种情况： 接收端正常收到了两个数据包，没有发生异常 接收端只收到一个数据包，因为TCP不会丢包所以这个数据包包含了发送端发送的两个数据包，这就是粘包。服务端不知道怎么划分这两个数据包所以很难处理。 接收端收到两个数据包，但它们都不完整。这种情况下可能是pack1丢了一点到pack2，也有可能是pack2丢了一点到pack1，此时发生了粘包拆包 为什么会发生粘包拆包原因如下： 本身套接字缓冲区大小不足，一次写入的数据多了，就发生了拆包 本身套接字缓冲区过大，多次写入数据，就发生了粘包 TCP连接复用，本来单独的连接中双方规定好了数据格式，但是因为复用导致多个进程以及不同的数据格式传输，就造成了粘包 接收方没及时 ...

前言各厂很喜欢考的async和await题，一般不了解他的做法都很容易踩坑。下面用三道题来讲解怎么解这类型的题目关键词:async、await、题解 题一123456789101112131415161718192021async function async1() { console.log('async1 start') await async2() console.log('async1 end')}async function async2() { console.log('async2')}console.log('script start')setTimeout(() => { console.log('setTimeout')}, 0);async1()new Promise(resolve => { console.log('promise1') ...

前言web前端你必须了解的DNS，下面讲解DNS的一些过程和由来以及产生的安全问题关键词：DNS是什么、DNS的分布式、层次数据库、本地DNS服务器、DNS递归查询和迭代查询、DNS缓存、DNS劫持 什么是DNSDNS即域名系统，全称是Domain Name System。当我们在浏览器输入一个URL地址的时候，浏览器要向这个URL的主机名对于的服务器发起请求，就得知道服务器的IP。对于浏览器来说，DNS的作用就是将主机名转换为IP地址。 DNS是： 一个由分层的DNS服务器实现的分布式数据库 一个使得主机能够查阅分布式数据库的应用层协议 也就是 DNS是一个应用层的协议，我们发送一个请求，其中包含我们要查询的主机名，他就会给我们返回这个主机名对应的IP。 其次，DNS是一个分布式数据库，整个DNS由分散在世界各地的很多台DNS服务器组成，每台DNS服务器上面都保存了一些数据，这些数据可以让我们查到最终主机名对应的IP 所以DNS的查询过程，本质上就是去向这些DNS服务器访问，直到查到这个IP为止。 分布式、层次数据库什么是分布式因为所有的主机不可能全部ip都放在一台dns服 ...

[toc] 前言详细记录flex弹性布局的具体属性和常考题。关键词：flex属性、 flex概念弹性盒子是一种按行或者按列布局元素的一种以为布局方法，容器里面的元素可以膨胀填充额外的空间，收缩来适应更小的空间，适用于任何元素。 元素使用flex布局就会在内部形成BFC，目前flex已经适配所有常规浏览器 拓展：BFCBFC：块级格式化上下文，是一个完全独立的空间，里面的子元素不会影响到外面的布局。 触发BFC的方式： overflow:hidden display:inline-block,table-cell,flex position:absolute,fixed BFC解决的问题： 高度塌陷 margin边距重叠 flex和inline-flexdisplay有两种设置方式：flex和inline-flex。 区别在于：flex元素和宽度是父容器的100%inline-flex是所有元素的宽度和 那么在元素溢出的情况下是怎么样呢？可见inline-flex会撑大flex容器，造成溢出 使用inline-flex的时候，注意配合min-width和min-height一起 ...

前言将2w字长文分成了七个模块，方便今后补充内容，详见传送门。 传送门你所不知道的JavaScript①—数据类型及周边你所不知道的JavaScript②—this及周边你所不知道的JavaScript③—原型及周边你所不知道的JavaScript④—异步任务与事件你所不知道的JavaScript⑤—垃圾回收与内存泄漏你所不知道的JavaScript⑥—面向对象与模块化

关键词面向对象、迭代器、模块化 面向对象对象遍历 for in Object.keys(xxx)把key取出来作为一个数组。 Object.values(xxx)遍历对象的值作为一个数组编程思想 基本思想是使用对象，类，继承，封装等基本概念来进行程序设计 优点： 易维护：采用面向对象思想设计的结构，可读性高，由于继承的存在，即使改变需求，维护也只是在局部模块，所以维护起来非常方便，成本较低 易拓展 开发工作的重用性，继承性高，降低重复工作量 缩短了开发周期一般面向对象包括：继承，封装，多态，抽象 对象形式的继承讲深浅拷贝之前，我们需要知道，基本数据类型在栈里面，被复制了就算修改也不会改变原来的的值，引用数据类型在堆里面，因为共享内存所以复制后被修改会改变源对象的值，至此引申出深浅拷贝。 浅拷贝基本的浅拷贝就是对象的赋值，但我们需要注意，实际上我们的需求是复制源对象上面的属性，那么单纯的赋值，会把新对象的值给覆盖掉。参见下面 12345678910111213141516171819202122232425262728var Person = { ...

关键词垃圾回收、内存泄漏 垃圾回收 为什么要垃圾回收？js的变量没有固定大小，是动态分配的，所以需要进行垃圾回收，避免内存占用满了之后造成系统崩溃。 垃圾回收的机制/特点对于栈内存 切换到别的上下文就回收对于堆内存 分为新生代和老生代 含义：新生代指的是只经过一次垃圾回收的对象，老生代指的是经过多次垃圾回收的对象 具体：新生代被分为from和to两个空间。to一般闲置，在from的空间满了之后执行scavenge算法进行垃圾回收。 执行垃圾回收的时候应用逻辑将停止，等垃圾回收结束后继续执行 什么时候回收?利用浏览器的空闲时间 scavenge算法算法分为三步： 检测from空间的存活对象，查看是否满足老生代条件（to是否超过25%/是否经历过一次垃圾回收）?老生代:移动到to空间 如果对象不存活则释放对象的空间 最后将from和to空间进行角色交换 新生代到老生代条件有两个 我们知道新生代的条件是只经过一次垃圾回收，也就意味着它经历了一次Scavenge to空间的内容使用占比。因为scavenge算法结束之后会交换fromto的位置，所以to的空间不能太小，影响到后 ...

关键词事件机制、Promise、Generator、async/await、事件循环 事件机制事件的触发过程？事件代理？ 简介事件流是一个事件沿着特定数据结构传播的过程。冒泡和捕获是事件流在DOM中的两种不同的传播方式。 事件流的三个阶段 事件捕获阶段 目标阶段 事件冒泡阶段 事件捕获事件捕获通俗的理解就是鼠标点击或者触发dom事件的时候，浏览器从根节点开始由外到内的进行事件传播，即点击了子元素。如果父元素通过捕获方式注册了对应的事件的话，会先触发父元素绑定的事件 事件冒泡事件冒泡和事件捕获相反，顺序是由内到外直到根节点 无论是事件捕获还是冒泡，都有一个共同的特征就是事件传播 事件流阻止在一些情况下要阻止事件流的传播，阻止默认动作的发生 event.preventDefault()取消事件对象的默认动作以及继续传播 event.stopPropagation()/event.cancelBubble = true阻止事件冒泡在不同浏览器的处理 在IE下使用 event.returnValue= false， 在非IE下则使用 event.preventDefault() ...

关键词原型、原型链、继承 原型、原型链__proto__和prototype的关系：__proto__和constructor是对象独有的，prototype是函数独有的。 在js中我们使用构造函数来新建一个对象，每一个构造函数的内部都有一个prototype属性，这个属性是一个对象，这个对象包含了可以由该构造函数的所有实例共享的方法和属性。当我们使用构造函数新建一个对象之后，在这个对象的内部将包含一个指针，这个指针指向构造函数的prototype属性对应的值，在es5中这个指针被称为对象的原型。一般来说不能获取到这个值，但是浏览器下载都实现了proto属性让我们来访问，但是最好是不要使用这个属性，因为他不是规范的，最好使用Object.getPrototypeOf()来获取对象的原型 当我们访问一个对象的属性的时候，如果这个对象内部不存在这个属性，那么他就会去他的原型对象里面找这个属性，这个原型对象又会有自己的原型，于是就一直找下去，也就是原型链的概念。原型链的尽头一般来说是Object.prototype所以这就是我们新建的对象为什么能够使用toString等方法的原因 特点： ...

关键词this关键字、apply/call/bind 原理、变量提升、执行上下文、作用域、闭包、new关键字 Thisthis指向调用其的对象。顺带一提，es6中的箭头函数没有this,argument,super等。这些只依赖包含箭头函数最接近的函数。 先来看适用场景 12345678910111213function foo() { console.log(this.a)}var a = 1foo()//指向window window没有a 输出undefinedconst obj = { a: 2, foo: foo}obj.foo() //指向obj 输出2const c = new foo() //指向c new绑定了c c没有a 输出undefined 箭头函数中的this 123456789function a() { return () => { return () => { console.log(this) } }} ...