2023年8月1日发(作者：)

b站前端⽼猫总结⾯试题⽂章⽬录在浏览器中输⼊URL并回车后都发⽣了什么？⼀、解析URLURL（Universal Resource Locator）：统⼀资源定位符。俗称⽹页地址或者⽹址。URL⽤来表⽰某个资源的地址。（通过俗称就能看出来）URL主要由以下⼏个部分组成：· a.传输协议· b.服务器· c.域名· d.端⼝· e.虚拟⽬录· f.⽂件名· g.锚· h.参数现在来讨论URL解析，当在浏览器中输⼊URL后，浏览器⾸先对拿到的URL进⾏识别，抽取出域名字段。⼆、DNS解析DNS解析（域名解析），DNS实际上是⼀个域名和IP对应的数据库。IP地址往都难以记住，但机器间互相只认IP地址，于是⼈们发明了域名，让域名与IP地址之间⼀⼀对应，它们之间的转换⼯作称为域名解析，域名解析需要由专门的域名解析服务器来完成，整个过程是⾃动进⾏的。可以在浏览器中输⼊IP地址浏览⽹站，也可以输⼊域名查询⽹站，虽然得出的内容是⼀样的，但是调⽤的过程不⼀样，输⼊IP地址是直接从主机上调⽤内容，输⼊域名是通过域名解析服务器指向对应的主机的IP地址，再从主机调⽤⽹站的内容。在进⾏DNS解析时，会经历以下步骤：1. 查询浏览器缓存（浏览器会缓存之前拿到的DNS 2-30分钟时间），如果没有找到，那么->2. 检查系统缓存，检查hosts⽂件，这个⽂件保存了⼀些以前访问过的⽹站的域名和IP的数据。它就像是⼀个本地的数据库。如果找到就可以直接获取⽬标主机的IP地址了。没有找到的话，那么->3. 检查路由器缓存，路由器有⾃⼰的DNS缓存，可能就包括了这在查询的内容；如果没有，那么->4. **查询ISP DNS 缓存：**ISP服务商DNS缓存（本地服务器缓存）那⾥可能有相关的内容，如果还不⾏的话，那么->5. 递归查询：从根域名服务器到顶级域名服务器再到极限域名服务器依次搜索对应⽬标域名的IP。通过以上的查找，就可以获取到域名对应的IP了。接下来就是向该IP地址定位的HTTP服务器发起TCP连接。三、浏览器与⽹站建⽴TCP连接（三次握⼿）第⼀次握⼿：客户端向服务器端发送请求（SYN=1） 等待服务器确认；第⼆次握⼿：服务器收到请求并确认，回复⼀个指令（SYN=1，ACK=1）；第三次握⼿：客户端收到服务器的回复指令并返回确认（ACK=1）。通过三次握⼿，建⽴了客户端和服务器之间的连接，现在可以请求和传输数据了。四、请求和传输数据响应头中有⼀个：Set-Cookie:“PHPSESSID=c882giens9f7d3oglcakhrl994; path=/”，说明浏览器中没有关于这个⽹站的cookie信息。当我们下⼀次访问相同的⽹站时：可以看到，请求头中包含了这个cookie信息，Cookie:"PHPSESSID=c882giens9f7d3oglcakhrl994; CNZZDATA1253283365=1870471808-1473694656-%7C1473694656"cookie可以⽤来保存⼀些有⽤的信息：Cookies如果是⾸次访问，会提⽰服务器建⽴⽤户缓存信息，如果不是，可以利⽤Cookies对应键值，找到相应缓存，缓存⾥⾯存放着⽤户名，密码和⼀些⽤户设置项。通过这种GET请求，和服务器的响应。可以将服务器上的⽬标⽂件传输到浏览器进⾏渲染。五、浏览器渲染页⾯客户端拿到服务器端传输来的⽂件，找到HTML和MIME⽂件，通过MIME⽂件，浏览器知道要⽤页⾯渲染引擎来处理HTML⽂件。1. 浏览器会解析html源码，然后创建⼀个 DOM树。在DOM树中，每⼀个HTML标签都有⼀个对应的节点，并且每⼀个⽂本也都会有⼀个对应的⽂本节点。2. 浏览器解析CSS代码，计算出最终的样式数据，形成css对象模型CSSOM。⾸先会忽略⾮法的CSS代码，之后按照浏览器默认设置——⽤户设置——外链样式——内联样式——HTML中的style样式顺序进⾏渲染。3. 利⽤DOM和CSSOM构建⼀个渲染树（rendering tree）。渲染树和DOM树有点像，但是是有区别的。DOM树完全和html标签⼀⼀对应，但是渲染树会忽略掉不需要渲染的元素，⽐如head、display:none的元素等。⽽且⼀⼤段⽂本中的每⼀个⾏在渲染树中都是独⽴的⼀个节点。渲染树中的每⼀个节点都存储有对应的css属性。4. 浏览器就根据渲染树直接把页⾯绘制到屏幕上。你是如何理解html语义化标签的？1. 语义化标签的出现不是为了⽅便我们⽤户去阅读，⽽是⽅便我们的机器去阅读我们的代码，在没有样式的前提下，语义化标签同样会呈现出⼀个清晰的结构。2. 爬⾍搜索，搜索引擎的爬⾍是靠语义化标签内部的关键字确定它的上下⽂和权重，在写代码时适当的去使⽤，那么就会加⼤我们整个页⾯的权重，能够让我们的页⾯的排名在搜索引擎上的名词更靠前。3. 语义化标签极⼤提⾼了我们代码的可读性，在我们协同化开发的过程中，那么我们开发⼈员之间就可以很清晰的看懂互相的解构，然后提⾼我们的开发效率。闭包闭包是有权访问其他函数的局部变量的⼀个函数。1. 为什么其他不是闭包的函数不能访问另外函数内的作⽤域？为什么闭包有这个权限？由于在js中，变量的作⽤域属于函数作⽤域，在函数执⾏后，作⽤域就会被清理、内存说也随之被收回，但是由于闭包是建⽴在另⼀个函数内部的⼦函数，由于其可访问上级作⽤域的原因，即使上级函数执⾏完，作⽤域也不会随之销毁，这是的⼦函数就是闭包，也就拥有了访问上级作⽤域中的变量的权限，即使上级函数执⾏完后，作⽤域的值也不会被销毁。闭包的作⽤？1. 可以读取函数内部的变量2. 可以让这些变量的值始终保存在内存中闭包有哪些应⽤场景？闭包随处可见，⼀个ajax的请求的成功回调，⼀个事件绑定的回调⽅法，⼀个setTimeout的延时回调，或者⼀个函数内部返回另⼀个匿名函数，这些都是闭包。简⽽⾔之，⽆论使⽤何种⽅式对函数类型的值进⾏传递，当函数在别处被调⽤时都有闭包的影⼦。闭包的注意点？由于闭包会使得函数中的变量都保存在内存中，内存消耗很⼤，所以不能滥⽤闭包，否则会造成⽹页的性能问题，在ie中可能导致内存泄漏，解决⽅法是，在退出函数之前，将不使⽤的局部变量全部删除。内存泄漏： 程序的运⾏需要内存。对于持续运⾏的服务进程，必须及时释放不在⽤到的内存，否则占⽤越来越⾼，轻则影响系统性能，重则导致进程崩溃。不在⽤到的内存。没有及时释放，就叫做内存泄漏。什么是作⽤域链？当代码在⼀个环境中执⾏时，会创建变量对象的⼀个作⽤域链（scope chain）。作⽤域链的⽤途，是保证对执⾏环境有权访问的所有变量和函数的有序访问。作⽤域链的前端，始终都是当前执⾏的代码所在环境的变量对象。如果这个环境是函数，则将其活动对象（activationobject）作为变量对象。活动对象在最开始时只包含⼀个变量，即 arguments 对象（这个对象在全局环境中是不存在的）。作⽤域链中的下⼀个变量对象来⾃包含（外部）环境，⽽再下⼀个变量对象则来⾃下⼀个包含环境。这样，⼀直延续到全局执⾏环境；全局执⾏环境的变量对象始终都是作⽤域链中的最后⼀个对象。作⽤域链是在调⽤函数时，创建函数上下⽂，⽣成的作⽤域链。对vue⽣命周期的理解开场可以这么说，vue实例从创建到销毁的过程就是⽣命周期。即指从创建、初始化数据、编译模板、挂载Dom到渲染、更新到渲染、销毁等⼀系列过程。它主要分为8个阶段，创建前后、载⼊前后、更新前后、销毁前后以及⼀些特殊场景的⽣命周期（activated keep-alive缓存的组件激活时、deactivated keep-alive缓存的组件停⽤时调⽤、errorCapured 捕获⼀个来⾃⼦孙组件时的错误时调⽤），在说⼀下vue⽣命周期的整体流程。如图说⼀下在createed和mouted获取数据的区别？在created获取数据，是在组件实例⼀旦创建完成的时候，⽴刻调⽤这时候页⾯dom节点还未⽣成。mounted 是在页⾯dom节点渲染完毕之后就⽴刻执⾏的两者的相同点是都能拿到实例对象的属性和⽅法，但是如果放在mounted请求，有可能导致页⾯闪动，但是如果在页⾯加载前完成就不会出现此情况。vue数据绑定的理解⾸先要了解vue的响应式原理：1. vue会遍历此data中对象所有的属性2. 并使⽤Object。defineProperty把这些属性全部转化为getter/setter3. ⽽每个组件实例都有watcher对象4. watcher对象它会在组件渲染的过程中把属性记录为依赖5. 之后当依赖项的setter被调⽤时候，会通知watcher重新计算，从⽽导致使它关联的组件得意更新以上回答也是不⾏的，我们要抓住响应式原理中三个最最要的对象：Observer、Wathcer、Dep这三个对象的含义分别是：Observer对象：vue的数据对象在初始化过程中转换为Observer对象。Watcher对象：将模板和Observer对象结合在⼀起⽣成Watcher实例，Watcher是定阅者。Dep对象：Watcher对象和Observer对象之间纽带，每⼀个Observer都有⼀个Dep实例，⽤来储存订阅者Watcher。当属性变化时会执⾏主题对象Oberver的⽅法，这个⽅法会遍历订阅者Watcehr列表向其发送消息。watcher会执⾏run⽅法去更新视图。接着我们需要补充的是：模板编译过程中的指令和数据绑定都会⽣成Watcher实例，vm实例中的watce属性也会⽣成Watcher实例。具体总结看下图：webpack中的loader和plugin的区别⾸先，loader是什么?loader是⽂件加载器，能够加载资源⽂件，并对这些⽂件进⾏⼀些处理，诸如编译、压缩等，最终⼀起打包到指定的⽂件中plugin⼜是什么？在webpack运⾏的⽣命周期中会⼴播出许多事件，plugin可以监听这些事件，在合适的时机通过webpack提供的API改变输出结果。那有什么区别？对于loader，它是⼀个转换器，将A⽂件进⾏编译形成B⽂件，这⾥操作的是⽂件，⽐如将转换为，单纯的⽂件转换过程。plugin是⼀个扩展器，它丰富了webpack本⾝，针对是loader结束后，webpack打包的整个过程，它并不直接操作⽂件，⽽是基于事件机制⼯作，会监听webpack打包过程中的某些节点，执⾏⼴泛的任务。基本数据类型和引⽤数据类型的区别⾸先来说⼀下基本数据类型。基本数据类型的值是不可变的，这⾥你就可以联想到，是不是所有关于字符串和数字的⽅法，都是带有返回值的，⽽不是改变原字符串或数字。基本数据类型不可以添加属性和⽅法，虽然不会报错，但也只是⼀瞬间转为了相应包装对象，操作完⼜转化回原基本数据类型，不会保存结果。基本数据类型的赋值是简单赋值,基本数据类型的⽐较是值的⽐较。基本数据类型是存放在栈区的。下⾯来说⼀下，引⽤数据类型。引⽤类型的值是可以改变的，例如对象就可以通过修改对象属性值更改对象。引⽤类型可以添加属性和⽅法。引⽤类型的赋值是对象引⽤，即声明的变量标识符，存储的只是对象的指针地址。引⽤类型的⽐较是引⽤(指针地址)的⽐较。引⽤类型是同时保存在栈区和堆区中的，栈区保存变量标识符和指向堆内存的地址var 和let和const的区别从以下三个⽅⾯来说：第⼀点：变量提升⽅⾯。var声明的变量存在变量提升，也就是变量可以在声明之前调⽤，值为undefined。let和const不存在变量提升问题即它们所声明的变量⼀定要在声明后使⽤，否则报错。注意，这⾥的let和const，其实是有提升的，只不过是let和const具有⼀个暂时性死区的概念，也就是没有到其赋值时，之前就不能⽤。第⼆点：块级作⽤域⽅⾯。 var不存在块级作⽤域，let和const存在块级作⽤域。第三点：声明⽅⾯。 var允许重复声明变量，let和const在同⼀作⽤域内，不允许重复声明变量。其中const声明⼀个只读的常量，因此，其声明时就⼀定要赋值，不然报错。常量⼀旦声明，它的值就不能改变。可能⾯试官会问你：如何使const声明的对象内属性不可变，只可读呢？我们要知道，如果const声明了⼀个对象，对象⾥的属性是可以改变的。来看这样⼀段代码，因为const声明的obj只是保存着其对象的引⽤地址，只要地址不变，就不会出错。接着，我们使⽤(obj) 冻结obj，就能使其内的属性不可变，但它有⼀定的局限性，就是obj对象中要是有属性是对象，该对象内属性还能改变，要使全不可变，就需要使⽤递归等⽅式⼀层⼀层全部冻结。ajax、fetch、axios的区别Ajax是什么，Ajax是Asynchronous JavaScript and XML的缩写。现也就是，允许浏览器与服务器通信⽽⽆须刷新当前页⾯的技术都被叫做Ajax。核⼼使⽤XMLHttpRequest对象。axios是什么，axios 是⼀个基于Promise ⽤于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原⽣XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。fetch是什么，Fetch被称为下⼀代Ajax技术,采⽤Promise⽅式来处理数据。是⼀种简洁明了的API，⽐XMLHttpRequest更加简单易⽤。所以其主要区别是 axios、fetch请求后都⽀持Promise对象API，ajax只能⽤回调函数。ansyc和defer的区别在script标签内有这两个属性，async和defer。defer，中⽂意思是延迟。⽤途是表⽰脚本会被延迟到整个页⾯都解析完毕后再运⾏。因此，在ansyc await 对⽐promise的区别⾸先来说⼀下async await的优点。它做到了真正的串⾏的同步写法，代码阅读相对容易。对于条件语句和其他流程语句⽐较友好，可以直接写到判断条件⾥⾯。处理复杂流程时，在代码清晰度⽅⾯有优势。缺点就是。⽆法处理promise返回的reject对象，要借助try catch。⽤ await 可能会导致性能问题，因为 await 会阻塞代码，也许之后的异步代码并不依赖于前者，但仍然需要等待前者完成，导致代码失去了并发性。try catch内部的变量⽆法传递给下⼀个try catch。Promise和thencatch内部定义的变量，能通过then链条的参数传递到下⼀个then catch，但是async await的try内部的变量，如果⽤let和const定义则⽆法传递到下⼀个try catch，只能在外层作⽤域先定义好。但async await确确实实是解决了promise⼀些问题的。更加灵活的处理异步。最后来说⼀下，promise的⼀些问题。⼀旦执⾏，⽆法中途取消，链式调⽤多个then中间不能随便跳出来。错误⽆法在外部被捕捉到，只能在内部进⾏预判处理，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。Promise内部如何执⾏，监测起来很难，当处于pending状态时，⽆法得知⽬前进展到哪⼀个阶段，是刚刚开始还是即将完成。cookie和session的区别cookies和session的区别。第⼀点，存储位置不同。cookie的数据信息存放在客户端浏览器上，session的数据信息存放在服务器上。第⼆点，存储容量不同。单个cookie保存的数据⼩于等于4KB，⼀个站点最多保存20个Cookie，⽽对于session来说并没有上限，但出于对服务器端的性能考虑，session内不要存放过多的东西，并且设置session删除机制。第三点，存储⽅式不同。cookie中只能保管ASCII字符串，并需要通过编码⽅式存储为Unicode字符或者⼆进制数据。session中能够存储任何类型的数据，包括且不限于string，integer，list，map等。第四点，隐私策略不同。cookie对客户端是可见的，别有⽤⼼的⼈可以分析存放在本地的cookie并进⾏cookie欺骗，所以它是不安全的，⽽session存储在服务器上，对客户端是透明的，不存在敏感信息泄漏的风险。第五点，有效期不同。开发可以通过设置cookie的属性，达到使cookie长期有效的效果。session依赖于名为JSESSIONID的cookie，⽽cookieJSESSIONID的过期时间默认为-1，只需关闭窗⼝该session就会失效，因⽽session不能达到长期有效的效果。第六点，服务器压⼒不同。cookie保管在客户端，不占⽤服务器资源。对于并发⽤户⼗分多的⽹站，cookie是很好的选择。session是保管在服务器端的，每个⽤户都会产⽣⼀个session。假如并发访问的⽤户⼗分多，会产⽣⼗分多的session，耗费⼤量的内存。第七点，跨域⽀持不同。cookie⽀持跨域名访问。session不⽀持跨域名访问。get和post的区别GET 是将参数写在 URL 中问号（?）的后⾯，并⽤and符号（&）分隔不同参数；⽽ POST 是将信息存放在 Message Body 中传送，参数‘不会’显⽰在 URL 中，Restful规范中是这样，但post在有需要时可以把参数放URL⾥。GET⽅式需要使⽤tring来取得变量的值，⽽POST⽅式通过来获取变量的值。也就是说Get是通过地址栏来传值，⽽Post是通过提交表单来传值。GET请求提交的数据有长度限制，POST请求没有内容长度限制。HTTP 协议本⾝没有限制 URL 及正⽂长度，对 URL 的限制⼤多是浏览器和服务器的原因。GET请求返回的内容会被浏览器缓存起来。⽽每次提交POST请求，浏览器不会缓存POST请求返回的内容。GET对数据进⾏查询，POST主要对数据进⾏增删改！简单说，GET是只读，POST是写。关于安全性，GET 请求⽅式从浏览器的 URL 地址就可以看到参数；所以post更安全，其实⽆论是 GET 还是 POST 其实都是不安全的，因为 HTTP 协议是明⽂传输，只要拦截封包便能轻易获取重要信息。想要安全传输资料，必须使⽤ SSL/TLS来加密封包，也就是HTTPS。那为什么推荐使⽤post来处理敏感数据呢？因为get的记录会保存在浏览器，上传⽇志中，⽽使⽤Post，因为数据不会记录存储在浏览器的记录和⽹址访问记录中，这样会有更⼤的安全性。这⾥有⼀个误区，说GET产⽣⼀个TCP数据包；POST产⽣两个TCP数据包。其说法是，对于GET⽅式的请求，浏览器会把http header和data⼀并发送出去，服务端响应200，请求成功。对于POST⽅式的请求，浏览器会先发送http header给服务端，告诉服务端等⼀下会有数据过来，服务端响应100 continue，告诉浏览器我已经准备接收数据，浏览器再post发送⼀个data给服务端，服务端响应200，请求成功。上⾯所说的post会⽐get多⼀个tcp包其实不太严谨。多发的那个expect 100 continue header报⽂，是由客户端对http的post和get的请求策略决定的，⽬的是为了避免浪费资源，如带宽，数据传输消耗的时间等等。所以客户端会在发送header的时候添加expect 100去探探路，如果失败了就不⽤继续发送data，从⽽减少了资源的浪费。所以是否再发送⼀个包取决了客户端的实现策略，和get/post并没什么关系。有的客户端⽐如fireFox就只发送⼀个包。px em rem vw vh的区别px: px就是pixel的缩写，意为像素。px就是⼀张图⽚最⼩的⼀个点，⼀张位图就是千千万万的这样的点构成的。em: 参考物是⽗元素的font-size，具有继承的特点。如果⾃⾝定义了font-size按⾃⾝来计算，浏览器默认字体是16px，整个页⾯内1em不是⼀个固定的值。rem: css3新单位，相对于根元素html（⽹页）的font-size，不会像em那样，依赖于⽗元素的字体⼤⼩，⽽造成混乱。vw: css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。举个例⼦：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。vh: css3新单位，viewpoint height的缩写，视窗⾼度，1vh等于视窗⾼度的1%。举个例⼦：浏览器⾼度900px, 1 vh = 900px/100 = 9 px。http和ttpps的区别1，HTTP 是明⽂传输，数据都是未加密的，安全性较差，HTTPS即SSL+HTTP，数据传输过程是加密的，安全性较好。2，使⽤ HTTPS 协议需要到 CA申请证书，CA就是Certificate Authority，数字证书认证机构；⼀般免费证书较少，因⽽需要⼀定费⽤。3，HTTP 页⾯响应速度⽐ HTTPS 快，主要是因为 HTTP 使⽤ TCP 三次握⼿建⽴连接，客户端和服务器需要交换 3 个包，⽽ HTTPS除了 TCP 的三个包，还要加上SSL握⼿需要的 9 个包，所以⼀共是 12 个包。4，HTTP和HTTPS使⽤的是完全不同的连接⽅式，⽤的端⼝也不⼀样，前者是 80，后者是 443。5，HTTPS 其实就是建构在 SSL/TLS 之上的 HTTP 协议，所以，要⽐较 HTTPS ⽐ HTTP 要更耗费服务器资源。什么是http⽆状态协议？如何客服http⽆状态协议的缺陷？⽆状态协议对于事物处理没有记忆能⼒，缺少状态，意味着如果后续需要处理，需要前⾯提供的信息。克服⽆状态协议缺陷的办法是⽅向代理（Reverse Proxy）是指通过代理服务器来接受互联⽹上的连接请求。然后请求转发给内部⽹络上的服务器，并把从服务器上得到的结果返回给互联⽹上请求连接的客户端，此时代理服务对外就表现为⼀个反向代理服务器http与https有什么联系？他们的端⼝号是多少？http通常承载与tcp之上，在http和tcp之间添加⼀个安全协议层（ssl或tsl）这时候就成了我们常说的https。http默认端⼝号为80，https默认端⼝号为443为什么https更安全在⽹络请求中有很多服务器，路由器的转发其中的节点可能篡改信息，如果使⽤https秘钥在终点站才有，https之所以⽐http更安全，是因为他⾥⽤了ssl/tsl协议传输，它包含证书、卸载、流量转发、负载均衡、页⾯适配、浏览器适配、refer传输保障了传输过程中的安全性js中的栈和堆和队列的区别1. 栈和堆的区别栈先进后出，动态分配空间，⼀般由程序员分配释放，若程序员不释放，程序结束时可能由os回收，分配⽅式类似链表。堆先进先出，由操作系统⾃动分配释放 存放函数的参数值，局部变量的值等，其操作⽅式类似于数据结构中的栈。2. 栈和队列的区别栈只允许表尾⼀端进⾏插⼊和删除，队列只允许在表尾⼀端进⾏插⼊，在表头⼀端进⾏删除，栈是先进后出，队列是先进先出三次握⼿四次挥⼿

2023年8月1日发(作者：)

b站前端⽼猫总结⾯试题⽂章⽬录在浏览器中输⼊URL并回车后都发⽣了什么？⼀、解析URLURL（Universal Resource Locator）：统⼀资源定位符。俗称⽹页地址或者⽹址。URL⽤来表⽰某个资源的地址。（通过俗称就能看出来）URL主要由以下⼏个部分组成：· a.传输协议· b.服务器· c.域名· d.端⼝· e.虚拟⽬录· f.⽂件名· g.锚· h.参数现在来讨论URL解析，当在浏览器中输⼊URL后，浏览器⾸先对拿到的URL进⾏识别，抽取出域名字段。⼆、DNS解析DNS解析（域名解析），DNS实际上是⼀个域名和IP对应的数据库。IP地址往都难以记住，但机器间互相只认IP地址，于是⼈们发明了域名，让域名与IP地址之间⼀⼀对应，它们之间的转换⼯作称为域名解析，域名解析需要由专门的域名解析服务器来完成，整个过程是⾃动进⾏的。可以在浏览器中输⼊IP地址浏览⽹站，也可以输⼊域名查询⽹站，虽然得出的内容是⼀样的，但是调⽤的过程不⼀样，输⼊IP地址是直接从主机上调⽤内容，输⼊域名是通过域名解析服务器指向对应的主机的IP地址，再从主机调⽤⽹站的内容。在进⾏DNS解析时，会经历以下步骤：1. 查询浏览器缓存（浏览器会缓存之前拿到的DNS 2-30分钟时间），如果没有找到，那么->2. 检查系统缓存，检查hosts⽂件，这个⽂件保存了⼀些以前访问过的⽹站的域名和IP的数据。它就像是⼀个本地的数据库。如果找到就可以直接获取⽬标主机的IP地址了。没有找到的话，那么->3. 检查路由器缓存，路由器有⾃⼰的DNS缓存，可能就包括了这在查询的内容；如果没有，那么->4. **查询ISP DNS 缓存：**ISP服务商DNS缓存（本地服务器缓存）那⾥可能有相关的内容，如果还不⾏的话，那么->5. 递归查询：从根域名服务器到顶级域名服务器再到极限域名服务器依次搜索对应⽬标域名的IP。通过以上的查找，就可以获取到域名对应的IP了。接下来就是向该IP地址定位的HTTP服务器发起TCP连接。三、浏览器与⽹站建⽴TCP连接（三次握⼿）第⼀次握⼿：客户端向服务器端发送请求（SYN=1） 等待服务器确认；第⼆次握⼿：服务器收到请求并确认，回复⼀个指令（SYN=1，ACK=1）；第三次握⼿：客户端收到服务器的回复指令并返回确认（ACK=1）。通过三次握⼿，建⽴了客户端和服务器之间的连接，现在可以请求和传输数据了。四、请求和传输数据响应头中有⼀个：Set-Cookie:“PHPSESSID=c882giens9f7d3oglcakhrl994; path=/”，说明浏览器中没有关于这个⽹站的cookie信息。当我们下⼀次访问相同的⽹站时：可以看到，请求头中包含了这个cookie信息，Cookie:"PHPSESSID=c882giens9f7d3oglcakhrl994; CNZZDATA1253283365=1870471808-1473694656-%7C1473694656"cookie可以⽤来保存⼀些有⽤的信息：Cookies如果是⾸次访问，会提⽰服务器建⽴⽤户缓存信息，如果不是，可以利⽤Cookies对应键值，找到相应缓存，缓存⾥⾯存放着⽤户名，密码和⼀些⽤户设置项。通过这种GET请求，和服务器的响应。可以将服务器上的⽬标⽂件传输到浏览器进⾏渲染。五、浏览器渲染页⾯客户端拿到服务器端传输来的⽂件，找到HTML和MIME⽂件，通过MIME⽂件，浏览器知道要⽤页⾯渲染引擎来处理HTML⽂件。1. 浏览器会解析html源码，然后创建⼀个 DOM树。在DOM树中，每⼀个HTML标签都有⼀个对应的节点，并且每⼀个⽂本也都会有⼀个对应的⽂本节点。2. 浏览器解析CSS代码，计算出最终的样式数据，形成css对象模型CSSOM。⾸先会忽略⾮法的CSS代码，之后按照浏览器默认设置——⽤户设置——外链样式——内联样式——HTML中的style样式顺序进⾏渲染。3. 利⽤DOM和CSSOM构建⼀个渲染树（rendering tree）。渲染树和DOM树有点像，但是是有区别的。DOM树完全和html标签⼀⼀对应，但是渲染树会忽略掉不需要渲染的元素，⽐如head、display:none的元素等。⽽且⼀⼤段⽂本中的每⼀个⾏在渲染树中都是独⽴的⼀个节点。渲染树中的每⼀个节点都存储有对应的css属性。4. 浏览器就根据渲染树直接把页⾯绘制到屏幕上。你是如何理解html语义化标签的？1. 语义化标签的出现不是为了⽅便我们⽤户去阅读，⽽是⽅便我们的机器去阅读我们的代码，在没有样式的前提下，语义化标签同样会呈现出⼀个清晰的结构。2. 爬⾍搜索，搜索引擎的爬⾍是靠语义化标签内部的关键字确定它的上下⽂和权重，在写代码时适当的去使⽤，那么就会加⼤我们整个页⾯的权重，能够让我们的页⾯的排名在搜索引擎上的名词更靠前。3. 语义化标签极⼤提⾼了我们代码的可读性，在我们协同化开发的过程中，那么我们开发⼈员之间就可以很清晰的看懂互相的解构，然后提⾼我们的开发效率。闭包闭包是有权访问其他函数的局部变量的⼀个函数。1. 为什么其他不是闭包的函数不能访问另外函数内的作⽤域？为什么闭包有这个权限？由于在js中，变量的作⽤域属于函数作⽤域，在函数执⾏后，作⽤域就会被清理、内存说也随之被收回，但是由于闭包是建⽴在另⼀个函数内部的⼦函数，由于其可访问上级作⽤域的原因，即使上级函数执⾏完，作⽤域也不会随之销毁，这是的⼦函数就是闭包，也就拥有了访问上级作⽤域中的变量的权限，即使上级函数执⾏完后，作⽤域的值也不会被销毁。闭包的作⽤？1. 可以读取函数内部的变量2. 可以让这些变量的值始终保存在内存中闭包有哪些应⽤场景？闭包随处可见，⼀个ajax的请求的成功回调，⼀个事件绑定的回调⽅法，⼀个setTimeout的延时回调，或者⼀个函数内部返回另⼀个匿名函数，这些都是闭包。简⽽⾔之，⽆论使⽤何种⽅式对函数类型的值进⾏传递，当函数在别处被调⽤时都有闭包的影⼦。闭包的注意点？由于闭包会使得函数中的变量都保存在内存中，内存消耗很⼤，所以不能滥⽤闭包，否则会造成⽹页的性能问题，在ie中可能导致内存泄漏，解决⽅法是，在退出函数之前，将不使⽤的局部变量全部删除。内存泄漏： 程序的运⾏需要内存。对于持续运⾏的服务进程，必须及时释放不在⽤到的内存，否则占⽤越来越⾼，轻则影响系统性能，重则导致进程崩溃。不在⽤到的内存。没有及时释放，就叫做内存泄漏。什么是作⽤域链？当代码在⼀个环境中执⾏时，会创建变量对象的⼀个作⽤域链（scope chain）。作⽤域链的⽤途，是保证对执⾏环境有权访问的所有变量和函数的有序访问。作⽤域链的前端，始终都是当前执⾏的代码所在环境的变量对象。如果这个环境是函数，则将其活动对象（activationobject）作为变量对象。活动对象在最开始时只包含⼀个变量，即 arguments 对象（这个对象在全局环境中是不存在的）。作⽤域链中的下⼀个变量对象来⾃包含（外部）环境，⽽再下⼀个变量对象则来⾃下⼀个包含环境。这样，⼀直延续到全局执⾏环境；全局执⾏环境的变量对象始终都是作⽤域链中的最后⼀个对象。作⽤域链是在调⽤函数时，创建函数上下⽂，⽣成的作⽤域链。对vue⽣命周期的理解开场可以这么说，vue实例从创建到销毁的过程就是⽣命周期。即指从创建、初始化数据、编译模板、挂载Dom到渲染、更新到渲染、销毁等⼀系列过程。它主要分为8个阶段，创建前后、载⼊前后、更新前后、销毁前后以及⼀些特殊场景的⽣命周期（activated keep-alive缓存的组件激活时、deactivated keep-alive缓存的组件停⽤时调⽤、errorCapured 捕获⼀个来⾃⼦孙组件时的错误时调⽤），在说⼀下vue⽣命周期的整体流程。如图说⼀下在createed和mouted获取数据的区别？在created获取数据，是在组件实例⼀旦创建完成的时候，⽴刻调⽤这时候页⾯dom节点还未⽣成。mounted 是在页⾯dom节点渲染完毕之后就⽴刻执⾏的两者的相同点是都能拿到实例对象的属性和⽅法，但是如果放在mounted请求，有可能导致页⾯闪动，但是如果在页⾯加载前完成就不会出现此情况。vue数据绑定的理解⾸先要了解vue的响应式原理：1. vue会遍历此data中对象所有的属性2. 并使⽤Object。defineProperty把这些属性全部转化为getter/setter3. ⽽每个组件实例都有watcher对象4. watcher对象它会在组件渲染的过程中把属性记录为依赖5. 之后当依赖项的setter被调⽤时候，会通知watcher重新计算，从⽽导致使它关联的组件得意更新以上回答也是不⾏的，我们要抓住响应式原理中三个最最要的对象：Observer、Wathcer、Dep这三个对象的含义分别是：Observer对象：vue的数据对象在初始化过程中转换为Observer对象。Watcher对象：将模板和Observer对象结合在⼀起⽣成Watcher实例，Watcher是定阅者。Dep对象：Watcher对象和Observer对象之间纽带，每⼀个Observer都有⼀个Dep实例，⽤来储存订阅者Watcher。当属性变化时会执⾏主题对象Oberver的⽅法，这个⽅法会遍历订阅者Watcehr列表向其发送消息。watcher会执⾏run⽅法去更新视图。接着我们需要补充的是：模板编译过程中的指令和数据绑定都会⽣成Watcher实例，vm实例中的watce属性也会⽣成Watcher实例。具体总结看下图：webpack中的loader和plugin的区别⾸先，loader是什么?loader是⽂件加载器，能够加载资源⽂件，并对这些⽂件进⾏⼀些处理，诸如编译、压缩等，最终⼀起打包到指定的⽂件中plugin⼜是什么？在webpack运⾏的⽣命周期中会⼴播出许多事件，plugin可以监听这些事件，在合适的时机通过webpack提供的API改变输出结果。那有什么区别？对于loader，它是⼀个转换器，将A⽂件进⾏编译形成B⽂件，这⾥操作的是⽂件，⽐如将转换为，单纯的⽂件转换过程。plugin是⼀个扩展器，它丰富了webpack本⾝，针对是loader结束后，webpack打包的整个过程，它并不直接操作⽂件，⽽是基于事件机制⼯作，会监听webpack打包过程中的某些节点，执⾏⼴泛的任务。基本数据类型和引⽤数据类型的区别⾸先来说⼀下基本数据类型。基本数据类型的值是不可变的，这⾥你就可以联想到，是不是所有关于字符串和数字的⽅法，都是带有返回值的，⽽不是改变原字符串或数字。基本数据类型不可以添加属性和⽅法，虽然不会报错，但也只是⼀瞬间转为了相应包装对象，操作完⼜转化回原基本数据类型，不会保存结果。基本数据类型的赋值是简单赋值,基本数据类型的⽐较是值的⽐较。基本数据类型是存放在栈区的。下⾯来说⼀下，引⽤数据类型。引⽤类型的值是可以改变的，例如对象就可以通过修改对象属性值更改对象。引⽤类型可以添加属性和⽅法。引⽤类型的赋值是对象引⽤，即声明的变量标识符，存储的只是对象的指针地址。引⽤类型的⽐较是引⽤(指针地址)的⽐较。引⽤类型是同时保存在栈区和堆区中的，栈区保存变量标识符和指向堆内存的地址var 和let和const的区别从以下三个⽅⾯来说：第⼀点：变量提升⽅⾯。var声明的变量存在变量提升，也就是变量可以在声明之前调⽤，值为undefined。let和const不存在变量提升问题即它们所声明的变量⼀定要在声明后使⽤，否则报错。注意，这⾥的let和const，其实是有提升的，只不过是let和const具有⼀个暂时性死区的概念，也就是没有到其赋值时，之前就不能⽤。第⼆点：块级作⽤域⽅⾯。 var不存在块级作⽤域，let和const存在块级作⽤域。第三点：声明⽅⾯。 var允许重复声明变量，let和const在同⼀作⽤域内，不允许重复声明变量。其中const声明⼀个只读的常量，因此，其声明时就⼀定要赋值，不然报错。常量⼀旦声明，它的值就不能改变。可能⾯试官会问你：如何使const声明的对象内属性不可变，只可读呢？我们要知道，如果const声明了⼀个对象，对象⾥的属性是可以改变的。来看这样⼀段代码，因为const声明的obj只是保存着其对象的引⽤地址，只要地址不变，就不会出错。接着，我们使⽤(obj) 冻结obj，就能使其内的属性不可变，但它有⼀定的局限性，就是obj对象中要是有属性是对象，该对象内属性还能改变，要使全不可变，就需要使⽤递归等⽅式⼀层⼀层全部冻结。ajax、fetch、axios的区别Ajax是什么，Ajax是Asynchronous JavaScript and XML的缩写。现也就是，允许浏览器与服务器通信⽽⽆须刷新当前页⾯的技术都被叫做Ajax。核⼼使⽤XMLHttpRequest对象。axios是什么，axios 是⼀个基于Promise ⽤于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原⽣XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。fetch是什么，Fetch被称为下⼀代Ajax技术,采⽤Promise⽅式来处理数据。是⼀种简洁明了的API，⽐XMLHttpRequest更加简单易⽤。所以其主要区别是 axios、fetch请求后都⽀持Promise对象API，ajax只能⽤回调函数。ansyc和defer的区别在script标签内有这两个属性，async和defer。defer，中⽂意思是延迟。⽤途是表⽰脚本会被延迟到整个页⾯都解析完毕后再运⾏。因此，在ansyc await 对⽐promise的区别⾸先来说⼀下async await的优点。它做到了真正的串⾏的同步写法，代码阅读相对容易。对于条件语句和其他流程语句⽐较友好，可以直接写到判断条件⾥⾯。处理复杂流程时，在代码清晰度⽅⾯有优势。缺点就是。⽆法处理promise返回的reject对象，要借助try catch。⽤ await 可能会导致性能问题，因为 await 会阻塞代码，也许之后的异步代码并不依赖于前者，但仍然需要等待前者完成，导致代码失去了并发性。try catch内部的变量⽆法传递给下⼀个try catch。Promise和thencatch内部定义的变量，能通过then链条的参数传递到下⼀个then catch，但是async await的try内部的变量，如果⽤let和const定义则⽆法传递到下⼀个try catch，只能在外层作⽤域先定义好。但async await确确实实是解决了promise⼀些问题的。更加灵活的处理异步。最后来说⼀下，promise的⼀些问题。⼀旦执⾏，⽆法中途取消，链式调⽤多个then中间不能随便跳出来。错误⽆法在外部被捕捉到，只能在内部进⾏预判处理，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。Promise内部如何执⾏，监测起来很难，当处于pending状态时，⽆法得知⽬前进展到哪⼀个阶段，是刚刚开始还是即将完成。cookie和session的区别cookies和session的区别。第⼀点，存储位置不同。cookie的数据信息存放在客户端浏览器上，session的数据信息存放在服务器上。第⼆点，存储容量不同。单个cookie保存的数据⼩于等于4KB，⼀个站点最多保存20个Cookie，⽽对于session来说并没有上限，但出于对服务器端的性能考虑，session内不要存放过多的东西，并且设置session删除机制。第三点，存储⽅式不同。cookie中只能保管ASCII字符串，并需要通过编码⽅式存储为Unicode字符或者⼆进制数据。session中能够存储任何类型的数据，包括且不限于string，integer，list，map等。第四点，隐私策略不同。cookie对客户端是可见的，别有⽤⼼的⼈可以分析存放在本地的cookie并进⾏cookie欺骗，所以它是不安全的，⽽session存储在服务器上，对客户端是透明的，不存在敏感信息泄漏的风险。第五点，有效期不同。开发可以通过设置cookie的属性，达到使cookie长期有效的效果。session依赖于名为JSESSIONID的cookie，⽽cookieJSESSIONID的过期时间默认为-1，只需关闭窗⼝该session就会失效，因⽽session不能达到长期有效的效果。第六点，服务器压⼒不同。cookie保管在客户端，不占⽤服务器资源。对于并发⽤户⼗分多的⽹站，cookie是很好的选择。session是保管在服务器端的，每个⽤户都会产⽣⼀个session。假如并发访问的⽤户⼗分多，会产⽣⼗分多的session，耗费⼤量的内存。第七点，跨域⽀持不同。cookie⽀持跨域名访问。session不⽀持跨域名访问。get和post的区别GET 是将参数写在 URL 中问号（?）的后⾯，并⽤and符号（&）分隔不同参数；⽽ POST 是将信息存放在 Message Body 中传送，参数‘不会’显⽰在 URL 中，Restful规范中是这样，但post在有需要时可以把参数放URL⾥。GET⽅式需要使⽤tring来取得变量的值，⽽POST⽅式通过来获取变量的值。也就是说Get是通过地址栏来传值，⽽Post是通过提交表单来传值。GET请求提交的数据有长度限制，POST请求没有内容长度限制。HTTP 协议本⾝没有限制 URL 及正⽂长度，对 URL 的限制⼤多是浏览器和服务器的原因。GET请求返回的内容会被浏览器缓存起来。⽽每次提交POST请求，浏览器不会缓存POST请求返回的内容。GET对数据进⾏查询，POST主要对数据进⾏增删改！简单说，GET是只读，POST是写。关于安全性，GET 请求⽅式从浏览器的 URL 地址就可以看到参数；所以post更安全，其实⽆论是 GET 还是 POST 其实都是不安全的，因为 HTTP 协议是明⽂传输，只要拦截封包便能轻易获取重要信息。想要安全传输资料，必须使⽤ SSL/TLS来加密封包，也就是HTTPS。那为什么推荐使⽤post来处理敏感数据呢？因为get的记录会保存在浏览器，上传⽇志中，⽽使⽤Post，因为数据不会记录存储在浏览器的记录和⽹址访问记录中，这样会有更⼤的安全性。这⾥有⼀个误区，说GET产⽣⼀个TCP数据包；POST产⽣两个TCP数据包。其说法是，对于GET⽅式的请求，浏览器会把http header和data⼀并发送出去，服务端响应200，请求成功。对于POST⽅式的请求，浏览器会先发送http header给服务端，告诉服务端等⼀下会有数据过来，服务端响应100 continue，告诉浏览器我已经准备接收数据，浏览器再post发送⼀个data给服务端，服务端响应200，请求成功。上⾯所说的post会⽐get多⼀个tcp包其实不太严谨。多发的那个expect 100 continue header报⽂，是由客户端对http的post和get的请求策略决定的，⽬的是为了避免浪费资源，如带宽，数据传输消耗的时间等等。所以客户端会在发送header的时候添加expect 100去探探路，如果失败了就不⽤继续发送data，从⽽减少了资源的浪费。所以是否再发送⼀个包取决了客户端的实现策略，和get/post并没什么关系。有的客户端⽐如fireFox就只发送⼀个包。px em rem vw vh的区别px: px就是pixel的缩写，意为像素。px就是⼀张图⽚最⼩的⼀个点，⼀张位图就是千千万万的这样的点构成的。em: 参考物是⽗元素的font-size，具有继承的特点。如果⾃⾝定义了font-size按⾃⾝来计算，浏览器默认字体是16px，整个页⾯内1em不是⼀个固定的值。rem: css3新单位，相对于根元素html（⽹页）的font-size，不会像em那样，依赖于⽗元素的字体⼤⼩，⽽造成混乱。vw: css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。举个例⼦：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。vh: css3新单位，viewpoint height的缩写，视窗⾼度，1vh等于视窗⾼度的1%。举个例⼦：浏览器⾼度900px, 1 vh = 900px/100 = 9 px。http和ttpps的区别1，HTTP 是明⽂传输，数据都是未加密的，安全性较差，HTTPS即SSL+HTTP，数据传输过程是加密的，安全性较好。2，使⽤ HTTPS 协议需要到 CA申请证书，CA就是Certificate Authority，数字证书认证机构；⼀般免费证书较少，因⽽需要⼀定费⽤。3，HTTP 页⾯响应速度⽐ HTTPS 快，主要是因为 HTTP 使⽤ TCP 三次握⼿建⽴连接，客户端和服务器需要交换 3 个包，⽽ HTTPS除了 TCP 的三个包，还要加上SSL握⼿需要的 9 个包，所以⼀共是 12 个包。4，HTTP和HTTPS使⽤的是完全不同的连接⽅式，⽤的端⼝也不⼀样，前者是 80，后者是 443。5，HTTPS 其实就是建构在 SSL/TLS 之上的 HTTP 协议，所以，要⽐较 HTTPS ⽐ HTTP 要更耗费服务器资源。什么是http⽆状态协议？如何客服http⽆状态协议的缺陷？⽆状态协议对于事物处理没有记忆能⼒，缺少状态，意味着如果后续需要处理，需要前⾯提供的信息。克服⽆状态协议缺陷的办法是⽅向代理（Reverse Proxy）是指通过代理服务器来接受互联⽹上的连接请求。然后请求转发给内部⽹络上的服务器，并把从服务器上得到的结果返回给互联⽹上请求连接的客户端，此时代理服务对外就表现为⼀个反向代理服务器http与https有什么联系？他们的端⼝号是多少？http通常承载与tcp之上，在http和tcp之间添加⼀个安全协议层（ssl或tsl）这时候就成了我们常说的https。http默认端⼝号为80，https默认端⼝号为443为什么https更安全在⽹络请求中有很多服务器，路由器的转发其中的节点可能篡改信息，如果使⽤https秘钥在终点站才有，https之所以⽐http更安全，是因为他⾥⽤了ssl/tsl协议传输，它包含证书、卸载、流量转发、负载均衡、页⾯适配、浏览器适配、refer传输保障了传输过程中的安全性js中的栈和堆和队列的区别1. 栈和堆的区别栈先进后出，动态分配空间，⼀般由程序员分配释放，若程序员不释放，程序结束时可能由os回收，分配⽅式类似链表。堆先进先出，由操作系统⾃动分配释放 存放函数的参数值，局部变量的值等，其操作⽅式类似于数据结构中的栈。2. 栈和队列的区别栈只允许表尾⼀端进⾏插⼊和删除，队列只允许在表尾⼀端进⾏插⼊，在表头⼀端进⾏删除，栈是先进后出，队列是先进先出三次握⼿四次挥⼿