2020年09月_Coder小鹿

原创简单讲解一下http2的多路复用每日一题系列(八)

多路复用HTTP2采用二进制格式传输，取代了HTTP1.x的文本格式，二进制格式解析更高效。多路复用代替了HTTP1.x的序列和阻塞机制，所有的相同域名请求都通过同一个TCP连接并发完成。在HTTP1.x中，并发多个请求需要多个TCP连接，浏览器为了控制资源会有6-8个TCP连接都限制。HTTP2中同域名下所有通信都在单个连接上完成，消除了因多个 TCP 连接而带来的延时和内存消耗。单个连接上可以并行交错的请求和响应，之间互不干扰在 HTTP/1 中，每次请求都会建立一次HTTP连接，也就是

2020-09-14 19:33:42 507

原创 ES5/ES6 的继承除了写法以外还有什么区别? 每日一题系列(七)

继承的各种写法class 声明会提升，但不会初始化赋值。Foo 进入暂时性死区，类似于 let、const 声明变量。const bar = new Bar(); // it's okfunction Bar() { this.bar = 42;}const foo = new Foo(); // ReferenceError: Foo is not definedclass Foo { constructor() { this.foo = 42; }}clas

2020-09-13 19:06:12 348

原创请分别用深度优先思想和广度优先思想实现一个拷贝函数？每日一题系列(六)

前言在前一篇已经介绍过了深度优先和广度优先现在想通过这两个去实现一个深拷贝深拷贝需要注意一些问题：环状数据先了解过什么是环状数据后，再来进行深拷贝的实现环状数据相信大多数人都是第一次听说这个词，其实挺好理解的，先上代码看一看const obj = { foo: { name: 'foo', bar: { name: 'bar' baz: { name: 'baz', aChild: null //待会让它指向obj.

2020-09-12 10:19:44 1178

原创介绍下深度优先遍历和广度优先遍历，如何实现？每日一题系列(五)

前言深度优先遍历，广度优先遍历，基本上前端人员是很少听说过的，应用场景挺少，并且也没怎么接触过数据结构，因此会觉得陌生应用场景可用于实现深拷贝所以这题目可以只做个了解，其实实现也是挺简单的，无非是一个栈，一个队列深度优先遍历深度优先遍历DFS 与树的先序遍历比较类似。假设初始状态是图中所有顶点均未被访问，则从某个顶点v出发，首先访问该顶点然后依次从它的各个未被访问的邻接点出发深度优先搜索遍历图，直至图中所有和v有路径相通的顶点都被访问到。若此时尚有其他顶点未被访问到，则另选一个未被访问的顶点作起

2020-09-11 10:12:10 1028

原创 vue源码(十三) 数组下标改变值的响应式误区以及实现

前言相信大家都知道，在vue2.0x中，使用数组下标改变值时，是不会触发响应式的以下来自:Vue官方文档Vue 不能检测以下数组的变动：当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue当你修改数组的长度时，例如：vm.items.length = newLength但是其实还是有特殊情况的，让我们来分析分析正常情况让我们看看，使用数组下标直接改变数组元素的值，是否会响应式变化(按照官方文档是不可行的)<div id="a

2020-09-10 16:03:52 5838 13

原创介绍下 Set、Map、WeakSet 和 WeakMap 的区别？每日一题系列(四)

前言Set、Map、WeakSet、WeakMap都是ES6新增的数据结构这里只是说说区别，之后会根据ES6的规范来对其详细的特性和方法等进行讲解区别Set成员唯一、无序且不重复[value, value]，键值与键名是一致的（或者说只有键值，没有键名）可以遍历，方法有：add、delete、hasWeakSet成员都是对象成员都是弱引用，可以被垃圾回收机制回收，可以用来保存DOM节点，不容易造成内存泄漏不能遍历，方法有add、delete、hasMap本质上是键值

2020-09-10 10:49:23 331 1

原创什么是防抖和节流？有什么区别？如何实现？每日一题系列(三)

前言函数的防抖与节流也是常见面试题其区别在于防抖：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行节流：指定时间间隔内只会执行一次任务实现的话可以移步防抖与节流总结这是一个挺简单的实现，只要知道思路后，也可以根据应用场景，自己进行一些更改防抖与节流也是前端性能优化中重要的一环，面试基本上都会问到...

2020-09-09 09:35:53 231

原创 (!(~+[])+{})[--[~+““][+[]][~+[]]+~~!+[]]+({}+[])[[~!+[]]~+[]] javascript类型转换的彩蛋

前言(!(~+[])+{})[--[~+""][+[]]*[~+[]]+~~!+[]]+({}+[])[[~!+[]]*~+[]]大家可以试着运行一下这串代码是不是输出的"sb"让人眼前一惊肯定都会去想这个变相的骂人是怎么实现的原始式子拆分解这种题目，当然要把他们先按运算符给拆分开来，一步一步分析了首先可以将原始的式子分为式子1 (!(~+[])+{})[–[~+""][+[]]*[~+[]]+~~!+[]]式子2 ({}+[])[[~!+[]]*~+[]]并且式子1和式子2

2020-09-08 20:08:37 2858

原创 [‘1‘, ‘2‘, ‘3‘].map(parseInt) what & why ? 每日一题系列(二)

前言[‘1’, ‘2’, ‘3’].map(parseInt)，这看上去，好像就是遍历1，2，3然后将他们都进行parseInt，所以脑海中的答案大概可能是1，2，3，但这是错误的，这里面有一个坑，涉及到parseInt的参数以及规范的问题这也是面试题中常见的一道题目接下来让我们搞清楚其运作原理mapmap方法是ES6新增的数组方法，这是MDN上的map语法var new_array = arr.map(function callback(currentValue[, index[, array

2020-09-08 10:16:52 379

原创 Vue为什么要在列表组件中写key，其作用是什么？每日一题系列(一)

前言相信大家都在v-for中使用过key，脑海中也大概有印象，这个key写在这是为了提升性能的，但是再深一步问，这个key怎么就能优化性能呢？所以这就是今天的题需要探讨的点key的作用在Vue.js官方文档中已经给出了key的作用key这个特殊的属性，主要用于Vue的虚拟dom算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，

2020-09-07 11:21:08 1991

原创 javascript类型转换(下篇)

前言不多说，这一篇全是题目和解析，直接上题目了，如果不懂得可以看javascript类型转换(上篇)[]+[]首先这两个都是对象类型，所以会执行toPrimitive内部方法，而[[DefaultValue]]的hint值为空，hint值为空相当于hint为number的时候。所以会先执行valueOf，然后根据返回值判断是否执行toString。那么来看看这里的第一个[]，执行valueOf后，因为数组的valueOf会返回数组本身，因此这个返回值还不是基本类型值，因此会执行toString，所

2020-09-04 19:52:53 1139 2

原创 javascript类型转换(上篇)

前言JavaScript中有6种数据类型：数字（number）、字符串（string）、布尔值（boolean）、undefined、null、对象（Object）。其中对象类型包括：数组（Array）、函数（Function）、还有两个特殊的对象：正则（RegExp）和日期（Date）。其中简单数据类型为：number、string、boolean、undefined、null引用数据类型为：object但是Javascript是一门弱类型的语言，它在声明时只有一种类型，只有在运行期间才能确定当前

2020-09-04 17:43:41 1386 2

原创事件驱动原理

事件驱动原理简单地说，就是由于js代码只在一个线程上运行，他容易被阻塞。例如：复杂的算法运算，js进行复杂的dom操作等等。我们试想下如果一打开页面，就有大量IO请求，都是同步执行的话，页面会有多卡，所以事件驱动最终实际上是解决单线程通道阻塞问题，通过事件队列的方式给主通道让路浏览器有两个线程，一个是js线程，一个是ui线程，两线程是互斥的，一旦一个线程阻塞，另一线程无法响应用户的操作用户在界面上进行的操作称之为事件(Event)。由用户操作引发的一连串程序的动作，称之为事件驱动(Event-Dr

2020-09-01 16:36:39 4082

原创防抖与节流

前言防抖与节流的概念通常被用于前端性能优化中了解其概念后，实现他们是很简单的防抖防抖可以举个栗子，比如电梯，在电梯载人的过程中，电梯门自动关闭前，有人要进电梯，这时电梯门会回到原始位置，等这个人进来后，电梯门继续开始自动关闭。一直到电梯门关闭时，都没有人要进电梯，这时电梯门的关闭过程执行完毕。防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间function debounce (fn, delay) { // 定时器 let timeout = nu

2020-09-01 16:34:51 331

原创回流与重绘(浏览器渲染原理)

前言回流与重绘，听起来很高深的概念，其实它们两个只是重复执行浏览器渲染的过程而已。所以，此博客将从浏览器渲染机制开始讲起浏览器渲染页面过程这里主要以webkit内核引擎的chrome浏览器进行讲解先将图中的几个名词概念解释一下：DOM Tree: 浏览器将HTML解析成树形的数据结构Style Rules: 浏览器将CSS解析成树形的数据结构(也就是常说的CSSOM)Attachment: 用来连接DOM与CSSOM以构建渲染树Render Tree: Render Tree可以

2020-09-01 15:48:21 2231 4

小鹿的博客