haonan_z的博客

迭代：客户端发出一次请求，对方如果没有授权回答，它就会返回一个能解答这个查询的其它名称服务器列表，客户端会再向返回的列表中发出请求，直到找到最终负责所查域名的名称服务器，从它得到最终结果。即 Time To Live，翻译过来是生存时间，TTL是指DNS解析记录在DNS服务器上的生存时间（区别于请求包的TTL）。：向dns服务器查询一个域名，刚好这个域名是本服务器负责，返回的结果就是授权回答。迭代查询，又称作重指引,返回的是最佳的查询点或者主机地址.递归查询时，返回的结果只有两种:查询成功或查询失败.

二进制传输、多路复用、头部压缩、服务端推送

本文不对 Promise 的用法进行说明，不了解的请前往 ES6 Promise教程接下来，我们来一边分析一边手撸代码1. promise基本结构new Promise((resolve, reject) => { setTimeout(() => { resolve('FULFILLED') }, 1000)})构造函数Promise必须接受一个函数作为参数，我们称该函数为handle，handle又包含resolve和reject两个参数，它们两都是函数。.

前言一般我们谈到算法题，都会涉及到复杂度，如时间复杂度、空间复杂度。下面，我们具体讲讲复杂度是怎么表示的分析要解释复杂度的概念，我们拿最常见的冒泡排序来讲解一下：假如有一组数组 [4,3,2,1]冒泡排序的思路是两两比较大小，看是否需要换位置，因此上面的数组需要进行如下对比：(4,3),(4,2),(4,1),(3,2),(3,1),(2,1)，看出来了吗，其实就是我们学数学时的排列组合，上面这个就是C3(2)，结果是： 3*(3-1)/2=6所以冒泡排序的复杂度为：n*(n-1)/2当然

视图更新对比vue1 小粒度更新，精确追踪到数据变化所影响的dom变化，精确更新变化的dom实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。具体的实现代码可前往： 实现一个简易版的vue1也可以参考：vue早期源码学习vue2 以组件粒度为范围，组件内diff式更新

/** * 实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。 * 实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。 * 实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。　 */function Vue (options) { var self = this; this.data = options.data; this.methods = op

前言我们先来看看vue对应数组更新检测的文档：数组更新检测1、Vue.js 包装了被观察数组的变异方法，故它们能触发视图更新。被包装的方法有：push()pop()shift()unshift()splice()sort()reverse()2、Vue.js 不能检测到下面数组变化：直接用索引设置元素，如 vm.items[0] = {}；修改数据的长度，如 vm.items.length = 0。解析Q：数组更新检测的整体思路是什么呢？A：通过重新包装数据中数组的pus

先来一段代码var a = 1function handle(){ if(true){ var a = 1 let b =2 const c = 3 }}handle()然后我们来看下执行过程中，各个作用域的表现从上面的截图我们可以看到有三种作用域，分别是全局作用域Global（一般指window）函数作用域Local（局部作用域）块状作用域Block全局变量会挂载在window上面局部变量在函数内部创建，一旦函数执行完释放后就会被回

1.Fragment在Vue2中: 组件必须有一个根标签在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中好处: 减少标签层级, 减小内存占用2.Teleport什么是Teleport？—— Teleport 是一种能够将我们的 组件html结构 移动到指定位置的技术。<teleport to="移动位置"> <div v-if="isShow" class="mask"> <div class="dialog"

一、shallowRef,shallowReactive浅层次的响应式对象，当一个对象嵌套层数过多，可以用来性能优化，一般用不到二、readonly,shallowReadonly让一个响应式数据变为只读的，readonly是深只读，shallowReadonly是浅只读，例如应用于某些封装的数据或组件中引出的数据不希望被改const user = reactive({ name:"henry", job:{ c:'1', a:{ b:222 } }

总结：当我们的style里面写上scoped时，会给class加上命名的哈希值，否则是全局样式覆盖首先我们思考一下vue的生命周期里说的，挂载的时候是从里到外，那么组件里的哈希值的class也是由里到外创建，此时父组件的class会写在子组件后面，所以当两个class在同一个元素上时，父组件的class会覆盖子组件的classvue2中template里面只能有一个元素，我们称之为根元素，vue3中可以有多个元素，所以说vue3中组件可以没有根元素；如果有根元素存在的情况下，父组件中子组件的元素上面

前言现实开发中，我们可能会遇到参数被串改的情况，所以一般一些重要的接口都会进行签名校验，用的比较多的是MD5。实现过程是前端和后端进行统一的签名方式和秘钥去生成签名，后端对比签名是否一致，不一致则直接拒绝访问，不再进行操作。思考上面的方式一直有个问题，私钥放前端，那不是很容易被有心的人给获取到，从而绕过签名校验吗，那要怎么样才能隐藏秘钥呢？方式直到我看到了一个预约的网页，他们的方式是先采取提前用一个不需要签名校验的接口去获取相关参数和对应的参数生成的签名，即由服务端先生成好，然后下一步的时候传相关

在js中，继承的方法有以下几种：构造函数继承function Parent() { this.name = 'parent';}function Child(age) { Parent.call(this); this.age = age;}var c = new Child(12);console.log(c.name); //输出parent原理是在Child构造函数中利用call改变了this指向，使得Child对象增加了name属性，值为’parent’，完

JS的继承

事实上

最近我在面试一些5年的前端，问他们有哪些对闭包的应用，竟然一个都搭不上来，问他们用过防抖节流吗，他们说用过，但不会写真的，作为一个5年的前端，这样真的不行，他们我们从思路上去讲防抖和节流的做法一、防抖（debounce）首先我们介绍一下什么是防抖，防抖就是当多次事件产生时，只需要最后一次真实的触发事件最经典的应该是，模糊匹配搜索，即用户在搜索框里输入，我们会去模糊搜索出用户可能想搜索的内容的列表这个时候为了减少搜索频次，我们就会加入防抖，以便在用户停在输入的一段时间后再触发搜索，减少服务端压力说

以下内容全部参考与 图解浏览器的基本工作原理一、CPU，进程与线程CPU，好比工厂，内存大小好比电力进程，好比车间，会占用电力用于工作线程，好比工人每个车间的容纳人数有限，怕挤爆了，于是有了Mutex（“互斥锁”）以及Semaphore（“信号量”）的防冲突的方法然后提供了每个车间之间的通信方法叫IPC（Inter Process Communication）二、Chrome（谷歌）浏览器的工作流程：谷歌浏览器软件好比一家影视公司，它主要有以下4个部门（进程）：信息部门（浏览器进程），拍摄

很多小伙伴会被this的指向问题弄得焦头烂额，或者这次记住了，下次别人一问，又答不上来，那么这次就让我们彻底捋清楚首先，要清楚一点，this的指向在函数声明的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁this永远指向的是最后调用它的对象，这里强调最后window是浏览器中js中的全局对象，globalwindow是nodejs的全局对象，我们创建的变量实际上是给全局对象添加属性非严格模式下，例如user()其实等价于window.user()，所以默认指向是window，

很多小伙伴其实对prototype这个东西都是一知半解的，更别说__proto__，今天就让我们来梳理一下他们的关系，首先我们通过一段代码来看下这几个属性的概念function User(name){ this.name=name}User.prototype.getName = function(){ return this.name}const user = new User('henry')console.log(user.getName()) //打印出 henryconsol.

什么是跨域？当一个请求url的 协议、域名、端口 三者之间任意一个与当前页面url不同即为跨域当前页面url被请求页面url是否跨域原因http://www.test.com/http://www.test.com/index.html否同源（协议、域名、端口号相同）http://www.test.com/https://www.test.com/index.html是协议不同（http/https）http://www.test.com/http://

实现一个LazyMan, 可以按下列方式调用：LazyMan("Hank")输出:Hi! This is Hank!LazyMan("Hank").sleep(10).eat("dinner") 输出:Hi! This is Hank!Wake up after 10Eat dinner~LazyMan("Hank").eat("dinner").eat("supper") 输出:Hi This is Hank!Eat dinner~Eat supper~LazyMan("Han