1、使用DNS域名解析
2、发起TCP的3次握手
3、建立TCP连接后发起http请求；
4、服务器响应http请求，浏览器得到返回response；
5、浏览器解析response，并请求其它的资源（如js、css、图片等）；
6、浏览器对页面进行渲染。
hash
模式是一种把前端路由的路径用井号 # 拼接在真实 url 后面的模式。当井号 # 后面的路径发生变化时，浏览器并不会重新发起请求，而是会触发 onhashchange 事件。
https://juejin.cn/post/6993840419041706014
hash 通过 window.onhashchange 的方式，来监听 hash 的改变，借此实现无刷新跳转的功能。
hash 永远不会提交到 server 端（可以理解为只在前端自生自灭）。
history 通过 pushState 、 replaceState 来实现无刷新跳转的功能
使用 history 模式时，在对当前的页面进行刷新时，此时浏览器会重新发起请求。如果 nginx 没有匹配得到当前的 url ，就会出现 404 的页面。
而对于 hash 模式来说，它虽然看着是改变了 url ，但不会被包括在 http 请求中。所以，它算是被用来指导浏览器的动作，并不影响服务器端。
因此，改变 hash 并没有真正地改变 url ，所以页面路径还是之前的路径， nginx 也就不会拦截。
to B 的系统推荐用 hash ，相对简单且容易使用，且因为 hash 对 url 规范不敏感；
to C 的系统，可以考虑选择 H5 history ，但是需要服务端支持；
能先用简单的，就别用复杂的，要考虑成本和收益。
1、Map是键值对，Set是值得集合，当然键和值可以是任何得值
2、Map可以通过get方法获取值，而set不能因为它只有值
3、都能通过迭代器进行for...of 遍历
4、Set的值是唯一的可以做数组去重，而Map由于没有格式限制，可以做数据存储
有五种，分别是 State、 Getter、Mutation 、Action、 Module
state => 基本数据(数据源存放地)
getters => 从基本数据派生出来的数据
mutations => 提交更改数据的方法，同步
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex
Vuex中所有的状态更新的唯一途径都是mutation，异步操作通过 Action 来提交 mutation实现，这样可以方便地跟踪每一个状态的变化，从而能够实现一些工具帮助更好地了解我们的应用。
每个mutation执行完成后都会对应到一个新的状态变更，这样devtools就可以打个快照存下来，然后就可以实现 time-travel 了。如果mutation支持异步操作，就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难。
Loader：直译为"加载器"。Webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。 所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。 Plugin：直译为"插件"。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
1、 使用CDN资源，减少打包体积，提高速度。
2、 路由懒加载
3、 把静态资源也放在CDN
4、 第三方组件库UI框架，使用按需引入（Tree Shaking）
5、 nginx开启gzip打包压缩
Lighthouse 是 google 一个开源的自动化工具，运行 Lighthouse 的方式有两种：一种是作为 Chrome 扩展程序运行；另一种作为命令行工具运行。Chrome 扩展程序提供了一个对用户更友好的界面，方便读取报告。通过命令行工具可以将 Lighthouse 集成到持续集成系统。展示了白屏、首屏、可交互时间等性能指标和 SEO、PWA 等。
https://developers.google.com/speed/pagespeed/insights/
不仅展示了一些主要的性能指标数据，还给出了部分性能优化建议。
diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。
简单来说Diff算法就是在虚拟DOM树从上至下进行同层比对，如果上层已经不同了，那么下面的DOM全部重新渲染。这样的好处是算法简单，减少比对次数，加快算法完成速度。
有两个特点：
比较只会在同层级进行, 不会跨层级比较
在diff比较的过程中，循环从两边向中间比较
比如一个输入input 赋值给页面
防抖：一直输入，此时不赋值，等待停止输入一定的时间之后再赋值
节流：一直输入，每过一定的时间赋值一次
1、 意外的全局变量：由于使用未声明的变量,而意外的创建了一个全局变量,而使这个变量一直留在内存中无法被回收
2、 被遗忘的计时器或回调函数：设置了 setInterval 定时器，而忘记取消它，如果循环函数有对外部变量的引用的话，那么这个变量会被一直留在内存中，而无法被回收。
3、 脱离 DOM 的引用：获取一个 DOM 元素的引用，而后面这个元素被删除，由于一直保留了对这个元素的引用，所以它也无法被回收。
4、 闭包：不合理的使用闭包，从而导致某些变量一直被留在内存当中。
JavaScript中的对象是引用类型的数据，当多个实例引用同一个对象时，只要一个实例对这个对象进行操作，其他实例中的数据也会发生变化。而在Vue中，我们更多的是想要复用组件，那就需要每个组件都有自己的数据，这样组件之间才不会相互干扰。所以组件的数据不能写成对象的形式，而是要写成函数的形式。数据以函数返回值的形式定义，这样当我们每次复用组件的时候，就会返回一个新的data，也就是说每个组件都有自己的私有数据空间，它们各自维护自己的数据，不会干扰其他组件的正常运行。
1、for...of遍历获取的是对象的键值, for...in获取的是对象的键名;
2、for...in会遍历对象的整个原型链, 性能非常差不推荐使用,而for...of只遍历当前对象不会遍历原型链;
3、对于数组的遍历,for...in会返回数组中所有可枚举的属性(包括原型链上可枚举的属性),for...of只返回数组的下标对应的属性值; 总结：for...in循环主要是为了遍历对象而生,不适用遍历数组; for....of循环可以用来遍历数组、类数组对象、字符串、Set、Map以及Generator对象
使用JSON.Stringify 转换的数据中，如果包含 function，undefined，Symbol，这几种类型，不可枚举属性， JSON.Stringify序列化后，这个键值对会消失。
转换的数据包含RegExp 引用类型序列化之后会变成空对象。
转换的数据中包含Date对象，JSON.Stringify序列化之后，会变成字符串。
转换的数据中包含 NaN，Infinity 值（含-Infinity），JSON序列化后的结果会是null。
无法序列化不可枚举属性。
无法序列化对象的循环引用，（例如: obj[key] = obj)。
无法序列化对象的原型链。
https://blog.csdn.net/weixin_44514665/article/details/115444273
创建XMLhttpRequest对象
使用open方法设置和服务器的交互信息
如果默认是json格式,那就可以不设置requestHeader,默认的发送的是json格式数据
发送请求
如果请求完成，并响应完成，获取到响应数据（onreadystatechange）
1、 响应式原理的改变 Vue3.x 使用Proxy取代 Vue2.x 版本的Object.defineProperty
2、 组件选项声明方式Vue3.x 使用Composition API setup 是Vue3.x新增的一个选项，他是组件内使用Composition API 的入口
3、 模板语法变化slot具名插槽语法 自定义指令 v-model 升级
4、 其它方面的更改Suspense支持Fragment(多个根节点) 和Protal (在dom其他部分渲染组建内容)组件 针对一些特殊的场景做了处理。基于treeshaking优化，提供了更多的内置功能。
优点：
体验好，不刷新，减少 请求 数据ajax异步获取 页面流程；
前后端分离
减轻服务端压力
共用一套后端程序代码，适配多端
缺点：
首屏加载过慢；
SEO 不利于搜索引擎抓取
Object.defineProperty 拦截的是对象的属性，会改变原对象。proxy 是拦截整个对象，通过 new 生成一个新对象，不会改变原对象。
proxy 的拦截方式，除了上面的 get 和 set ，还有 11 种。选择的方式很多 Proxy，也可以监听一些 Object.defineProperty 监听不到的操作，比如监听数组，监听对象属性的新增，删除等。
React与Vue的相同点
（1）都支持服务器渲染；
（2）都是数据驱动视图；
在以前，我们需要频繁操作DOM实现页面效果。而Vue和React就隐藏了DOM的频繁操作，采用数据驱动视图的方式，只需要关注数据的变化。
（3）都遵循组件化思想；
React和Vue都遵循组件化思想，它们把注意力放在UI层，将页面分成一一些细块，也就是组件，组件之间组合嵌套就形成最后的网页界面。
（4）都使用虚拟DOM；
（5）都有状态管理；
react有redux，vue有vuex。
不同点:
（1）框架本质不同；
Vue本质是MVVM框架，是由MVC发展来的；
React是前端组件框架，是由后端组件演化而来的。
（2）数据流不同；
Vue实现双向绑定，在vue1.0中有两种方法可以实现双向绑定，父子组件之间的props以及组件与DOM直接的v-model。vue2去掉了第一种双向绑定方法，通过v-model实现数据双向绑定。
React一直不支持双向绑定，提倡的是单向数据流（onChange/setState）。
（3）监听数据变化的实现原理不同；
Vue通过getter，setter以及一些函数的劫持，能精确知道数据的变化。
React是通过比较引用方式（diff）进行的，当应用的状态改变时，全部组件都会重新渲染。
（4）组件写法差异；
React推荐的做法是JSX + inline style, 也就是把 HTML 和 CSS 全都写进 JavaScript 中；
Vue 推荐的做法是 template 的单文件组件格式，即 html,css,JS 写在同一个文件(vue也支持JSX写法)
（5）渲染过程不同。
Vue可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。
React在应用的状态被改变时，全部子组件都会重新渲染。通过shouldComponentUpdate这个生命周期方法可以进行控制。
（6）在state上的不同；
React中，state对象需要用setState方法更新状态；
在Vue中，state对象不是必须的，数据由data属性在vue对象中管理。
子组件：
父组件：
通过this直接访问到methods里面的函数的原因是：
因为methods里的方法通过 bind 指定了this为 new Vue的实例(vm)。
通过 this 直接访问到 data 里面的数据的原因是：data里的属性最终会存储到new Vue的实例（vm）上的 _data对象中，访问 this.xxx，是访问Object.defineProperty代理后的 this._data.xxx。
首先，请你再回想一下什么是回调地狱，回调地狱有两个主要的问题：
多层嵌套的问题；
每种任务的处理结果存在两种可能性（成功或失败），那么需要在每种任务执行结束后分别处理这两种可能性。
这两种问题在“回调函数时代”尤为突出，Promise 的诞生就是为了解决这两个问题。Promise 利用了三大技术手段来解决回调地狱：回调函数延迟绑定、返回值穿透、错误冒泡。
null 是定义并赋值为null
undefined是定义未赋值
null = = undefined ==> ture null= = = undefined ==> false
一种是惰性删除：惰性删除是指获取数据的时候，拿到存储的时间和当前时间做对比，如果超过过期时间就清除Cookie。
另一种是定时删除：每隔一段时间执行一次删除操作，并通过限制删除操作执行的次数和频率，来减少删除操作对CPU的长期占用。 LocalStorage清空应用场景：token存储在LocalStorage中，要清空
场景：请求拦截器用于在接口请求之前做的处理，比如为每个请求带上相应的参数（token，时间戳等）。 返回拦截器用于在接口返回之后做的处理，比如对返回的状态进行判断（token是否过期）。
拦截器原理：创建一个chn数组，数组中保存了拦截器相应方法以及dispatchRequest（dispatchRequest这个函数调用才会真正的开始下发请求），把请求拦截器的方法放到chn数组中dispatchRequest的前面，把响应拦截器的方法放到chn数组中dispatchRequest的后面，把请求拦截器和相应拦截器forEach将它们分unshift,push到chn数组中，为了保证它们的执行顺序，需要使用promise，以出队列的方式对chn数组中的方法挨个执行。 加分回答 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。从浏览器中创建 XMLHttpRequests,从 node.js 创建 http 请求,支持 Promise API,可拦截请求和响应，可转换请求数据和响应数据，可取消请求，可自动转换 JSON 数据，客户端支持防御 XSRF
轮训(占带宽，适合小型游戏)，长轮训，websockect（实时通讯）,sse,iframe
服务器端生成HTML直接返回给浏览器、减少网络传输、首屏渲染快、对搜索引擎友好
SSR是Server Side Render简称；页面上的内容是通过服务端渲染生成的，浏览器直接显示服务端返回的html就可以了。
使用场景：一般不会用在公司项目内（涉及前后端分离开发问题），可以用户博客网站、官网、营销类网站等比较注重加载速度和渲染效率的时候。
单向数据流是指数据只能从父级向子级传递数据，子级不能改变父级向子级传递的数据。
双向数据流是指数据从父级向子级传递数据，子级可以通过一些手段改变父级向子级传递的数据。
比如用v-model、.sync来实现双向数据流。
虚拟DOM是将状态映射成视图的众多解决方案中的一种，其是通过状态生成一个虚拟节点树，然后使用虚拟节点树进行渲染生成真实DOM，在渲染之前，会使用新生成的虚拟节点树和上一次虚拟节点树进行对比，只渲染不同的部分。
首先要构建一个VNode的类，DOM元素上的所有属性在VNode类实例化出来的对象上都存在对应的属性。例如tag表示一个元素节点的名称，text表示一个文本节点的文本，chlidren表示子节点等。将VNode类实例化出来的对象进行分类，例如注释节点、文本节点、元素节点、组件节点、函数式节点、克隆节点。
然后通过编译将模板转成渲染函数render，执行渲染函数render，在其中创建不同类型的VNode类，最后整合就可以得到一个虚拟DOM（vnode）。
最后通过patch将vnode和oldVnode进行比较后，生成真实DOM。
第一步：确保vm.$options有render函数。
第二步： 在原始的$mount方法，先触发beforeMount钩子函数,然后创建一个Watcher实例，在第二参数传入一个函数vm._update。
当前的virtualDOM差异和diff算法在很大程度上依赖于每个子组件总是只有一个根元素。
用mixins混入
用extends，比mixins先触发
用高阶组件HOC封装
1、mixins接收对象数组（可理解为多继承），extends接收的是对象或函数（可理解为单继承）
2、优先级>extends>mixins，继承钩子函数的时候，是不进行覆盖的，extends的钩子函数先触发，而后再是mixins的钩子函数触发，最后就是组件自身的钩子函数触发。
3、mixins类似于面向切面的编程（AOP），extends类似于面向对象的编程
vue-loader是一个webpack的loader，是一个模块转换器，用于把模块原内容按照需求转换成新内容。
它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件。可以解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的loader去处理。
先进后出、后进先出
栈帧永远指向的是顶部的数据结构
处于栈顶的原数具备活跃权
目录第1题连续问题分析：解法：第2题分组问题分析：解法：第3题间隔连续问题分析：解法：第4题打折日期交叉问题分析：解法：第5题同时在线问题分析：解法：第1题连续问题如下数据为蚂蚁森林中用户领取的减少碳排放量iddtlowcarbon10012021-12-1212310022021-12-124510012021-12-134310012021-12-134510012021-12-132310022021-12-144510012021-12-1423010022021-12-154510012021-12-1523.......找出连续3天及以上减少碳排放量在100以上的用户分析：遇到这类
?作者主页：静Yu?简介：CSDN全栈优质创作者、华为云享专家、阿里云社区博客专家，前端知识交流社区创建者?社区地址：前端知识交流社区?博主的个人博客：静Yu的个人博客?博主的个人笔记本：前端面试题个人笔记本只记录前端领域的面试题目，项目总结，面试技巧等等。接下来会更新蓝桥杯官方系统基础练习的VIP试题，依然包括解题思路，源代码等等。问题描述：给定当前的时间，请用英文的读法将它读出来。时间用时h和分m表示，在英文的读法中，读一个时间的方法是： 如果m为0，则将时读出来，然后加上“o’clock”，如3:00读作“threeo’clock”。 如果m不为0，则将时读出来，然后将分读出来，如5
最近更新的博客华为OD机试-卡片组成的最大数字（Python）|机试题算法思路华为OD机试-网上商城优惠活动（一）（Python）|机试题算法思路华为OD机试-统计匹配的二元组个数（Python）|机试题算法思路华为OD机试-找到它（Python）|机试题算法思路华为OD机试-九宫格按键输入（Python）|机试算法备考思路华为OD机试-身高排序（Python）|备考思路使用说明参加华为od机试，一定要注意不要完全背诵代码，需要理解之后模仿写出，通过率才会高。华为OD清单查看地址：blog.csdn.net/hihell/catego
前言介绍了网络安全岗位常见的面试题，仅供参考！一、常识部分1.Linux服务器种用户关键信息存储在那个文件中？启动、停止、重启、开机自启mysql服务命令？如何查找/etc/test.txt文件中"password"关键字信息?如何精确查找80端口？/etc/passwdsystemctlstartmysqld或systemmysqldstart 启动systemctlstopmysqld或systemmysqldstop 停止systemctlrestartmysqld或systemmysqldrestart 重启systemctlenablemysqld或systemmysqldenabl
我在之前的面试中遇到了这个问题，但做不到，知道吗？这是做什么的:`$=`;$_=\%!;($_)=/(.)/;$==++$|;($.,$/,$,,$\,$",$;,$^,$#,$~,$*,$:,@%)=($!=~/(.)(.).(.)(.)(.)(.)..(.)(.)(.)..(.)......(.)/,$"),$=++;$.++;$.++;$_++;$_++;($_,$\,$,)=($~.$"."$;$/$%[$?]$_$\$,$:$%[$?]",$"&$~,$#,);$,++;$,++;$^|=$";`$_$\$,$/$:$;$~$*$%[$?]$.$~$*${#}$%[$?]$;
最近更新的博客华为od2023|什么是华为od，od薪资待遇，od机试题清单华为OD机试真题大全，用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为od机试，独家整理已参加机试人员的实战技巧本篇题解：贪心的商人or最大利润题目描述商人经营一家店铺，有number种商品，由于仓库限制每件商品的最大持有数量是item[index]，每种商品的价格在每天是item_price[item_index][day]，通过对商品的买进和卖出获取利润，请给出商人在days天内能获取到的最大的利润；注：同一件商品可以反复买进和卖出；输入描述3//输入商品的数量nu
前言以下为网络安全各个方向涉及的面试题，星数越多代表问题出现的几率越大，祝各位都能找到满意的工作。注：本套面试题，已整理成pdf文档，但内容还在持续更新中，因为无论如何都不可能覆盖所有的面试问题，更多的还是希望由点达面，查漏补缺。一、渗透测试方向：如何绕过CDN找到真实IP，请列举五种方法(★★★)redis未授权访问如何利用，利用的前提条件是？(★★★)mysql提权方式有哪些?利用条件是什么?(★)windows+mysql，存在sql注入，但是机器无外网权限，可以利用吗?(★)常用的信息收集手段有哪些，除去路径扫描，子域名爆破等常见手段，有什么猥琐的方法收集企业信息?(★★)SRC挖掘与
🖥️NodeJS专栏：Node.js从入门到精通🖥️博主的前端之路（源创征文一等奖作品）：前端之行，任重道远（来自大三学长的万字自述）🖥️TypeScript知识总结：TypeScript从入门到精通（十万字超详细知识点总结）🧑💼个人简介：大三学生，一个不甘平庸的平凡人🍬👉你的一键三连是我更新的最大动力❤️！文章目录1、浅拷贝要求思路代码2、简易深拷贝要求思路代码3、完整深拷贝要求思路代码1、浅拷贝要求补全JavaScript代码，要求实现一个对象参数的浅拷贝并返回拷贝之后的新对象。注意：参数可能包含函数、正则、日期、ES6新对象是对对象的参数进行浅拷贝，并不是直接对整个对象进行浅拷贝（整个
目录：导读前言一、测试面试基础题二、测试实战面试题三、测试基础知识点四、总结前言大部分人学软件测试的从业者，在找工作的同时，会因为软件测试面试题挡在门前。……跳槽最重要的一步自然是面试，正值跳槽季，网上出现了各种面试题，一时会让人眼花缭乱，分不清最该看哪个，所以为大家做了一些软件测试面试的真题，想跳槽的小伙伴们，请准备好你的小本本！一、测试面试基础题1、简述测试流程？2、什么是软件测试？软件测试的目的与原则？3、软件生存周期及其模型是什么？4、什么是软件质量？5、自动化测试脚本开发的主要步骤？6、目前主要的测试用例设计方法是什么？7、常见的测试用例设计方法都有哪些?请分别以具体的例子来说明这些
目录：导读前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结（尾部小惊喜）前言1、自我介绍您好，我叫xxxx，xx年从专业毕业，毕业至今已经工作三年。从xx年xx月至xx年xx月就职于，主要负责的项目是测试，这个系统是。我主要负责备案模块的开发，功能测试，测试用例设计。我另外接触的两个项目分别是系统和系统。对于系统，是平台。在这个项目中我的职责是需求分析、测试案例设计、功能测试。对于系统，我参与需求分析、测试案例设计、功能测试、接口测试。我个人
