拯救世界的光太郎

微服务属于什么？一种架构风格。软件架构大体经历了：单体架构 → 面向服务的架构(SOA) → 微服务1. 单体架构特征：单体架构是一种将所有功能打包在一个容器中运行的设计风格一个实例中继承了一个系统的所有功能通过负载均衡 软件 / 设备 实现多实例调用。优点：易开发、易调试、易部署缺点：可靠性差：某个模块bug可能导致会导致整个应用的崩溃。不易协同：协同开发时，版本冲突频繁。升级困难：牵一发而动全身。2. 面向服务的架构(SOA)特征：是一种分布式服务架构，将应用

1.来源于出处首先，WebSocket来自H5，是H5定义的众多规范和API中的一个。HTTP协议就只有HTTP协议。2.二者的关联WebSocket协议基于TCP协议，它需要借助HTTP先建立连接，即客户端发送转换协议的请求，服务器转换协议并响应101，接下来再发送的请求/响应既是基于Websocket协议。（这学互联网的基本都知道吧~）3.WebSocket建立的是持久连接，而HTTP即使是1.1，建立的也只是长连接持久连接在连接建立后，只要不主动关闭，连接就可以始终保持。而长连接就必须依赖心

let arr = [1, 2, 3];不考虑地址问题：arr = [];地址不改变：// 方法一：arr.length = 0;// 方法二：for(let i in arr)( arr.pop();)// 方法三：arr.splice(0, arr.length);

二叉树的广度优先遍历：从根节点开始，一层一层遍历二叉树，自左向右地打印每一个节点思路：先创建一个数组，用数组模拟队列。压入根节点，然后开始遍历：从数组头弹出一个元素，然后看数组let arr = [];function getRes(node){ if(node){ console.log( node.val ); arr.push(node); } while(arr.length > 0){ let.

inner = 'window';function say() { console.log(inner); console.log(this.inner);}var obj1 = (function() { var inner = '1-1'; return { inner: '1-2', say: function() { console.log(inner); console.log(.

发布订阅器的基本实现其实非常简单，核心思路就是维护一个对象，对象的key、value分别表示事件及其对应的回调函数数组。然后可以通过暴露的方法去清除事件对应的回调，也可以通过方法去触发事件对应的回调。属性：消息队列{ "click": [fn1, fn2, fn3], "abc": [fnA, fnB]}/*能向消息队列里添加内容 on删除消息队列中的内容 off触发消息队列内的内容 emit*/class Observer { constructor()

文章出自：递归调用栈溢出问题分析与解决 - 灰信网（软件开发博客聚合）https://www.freesion.com/article/59181236995/本文主要是相对做一个保存，主要是因为文章所在的网站本人没有注册账号，再去注册一个就实在是太多了，原文排版还是很不错的，大家可以直接通过上面的连接查看原文问题模拟让递归爆栈还是很简单的，例如如下代码就能轻而易举实现// 故意来一次爆栈体验function stackOverflow(){ stackOverflow();.

我们都知道，JavaScript是一门单线程的编程语言，但是在单线程中进行异步编程，可以有很多多线程所不具备的优点。由于所有的操作都运行在同一个线程中，因此我们无需考虑线程同步、资源竞争的问题。并且可以从源头上避免线程的切换，从而降低线程自身的开销。但是它也会伴随着一些问题，假如我们有这样一种需求：我们需要在定时器内添加定时器，代码就是这样的：如果我们还需要在内部嵌套很多定时器，随即就会产生一个回调地狱，这种代码的可读性非常差，以至于我们在分析这样的代码时，需要额外花费很多的事件去分析代码的逻.

let car = { type: 'truck', size: 'big', description: function(){ console.log( "The Car is ", car.type , ". And the size is ", car.size, "." ); }}这里面多次出现了car.***，语句上显得十分冗余，我们可以借助this来简化代码：let car = { type: 'truck', size: 'bi.

1. HTTP 在一次请求完成后就会断开连接？这句话很明显是错误的。HTTP先后有多个版本，只有在HTTP/1.0及之前的版本中，无法建立保持连接状态。HTTP各版本特点总结_拯救世界的光太郎-CSDN博客HTTP 0.9特点：只有一个请求行；服务器仅返回数据，没有响应头。瓶颈：仅支持HTML，无法传输其他类型文件；文件编码格式过少，仅局限于ASCII。HTTP 1.0特点：引入请求头和响应头（数据类型、语言版本、编码类型、用户代理）；数据压缩；引入状态码；提供了Cache缓存机制（head里的缓存

1. 获取输入：readline()2. 打印输出：print()2. 分隔多个输入：split(' ')let line = '';while(line = readline()){ var lines = line.split(' '); print('一次循环：') for(let i of lines){ print(i); } print('----------------')}...

一、1. 插值语法<template> <div id="app"> {{ name }} <!-- 这里就是插值语法 --> </div></template><script>export default { data () { return { name: '弼马温' } }}</script><style></styl

1. display属性值：（让判断几个值，那个是display的属性值，考的不常见的）none 此元素不会被显示。 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-block 行内块元素。（CSS2.1 新增的值） list-item 此元素会作为列表显示。 run-in 此元素会根据上下文作为块级元素或内联元素显示。 compact CSS

代码出处：【前端性能】高性能滚动 scroll 及页面渲染优化// 防抖动函数function debounce(func, wait, immediate) { var timeout; // ① return function() { // ② var context = this, args = arguments; // ③ var later = function() { /

1. webpack的插件html-webpack-plugin的作用是什么？第一点作用：我们在终端输入webpack命令后，在build文件夹下会生成index.html和bundle.js两个文件，并且index.html会自动引入webpack生成的bundle.js文件。这都是这个插件的功劳，同时它还会在index.html文件中帮我们引入css、js等文件。 其次，它还可以对html文件进行压缩，这个取决于插件中minify属性的值，默认是false，是不进行压缩的。2. webpack、

RESTful 是什么？在说明 RESTful是什么之前，可以先理解一下 REST 是什么。Roy Fielding 和他的同事们针对 Web 取得的巨大成就，对技术架构方面的因素做了一番深入的总结，Fielding 将这些总结纳入到了一套理论框架之中。极为成功的HTTP/1.1就是由这套理论框架指导设计的。REST（Resource Representational State Transfer 资源描述性状态转移，也有人将它翻译为：表现层状态转化）也是通过这套理论框架推导出的一种新的架构风格.

1. 原生JS获取Dom对象的几种方法：通过id获取：getElementById("div1")。 参数是id，不能加“ #”返回一个Dom对象。 通过class获取：getElementsByClassName("box")。 参数是类名，不能加“ . ”。返回一个集合。不能直接给集合绑定事件，需要获取到集合中的某一个元素，然后再为元素绑定事件。 通过标签名获取：getElementsByTagName("p")。 参数是标签名。返回的也是一个集合。 通过name属性获取：get...

1. Redux是如何将state注入到React组件中去的？React：主要负责组件UI界面的渲染Redux：管理数据的工具用法回顾：1. 寻找一个项目的入口：index.html、index.js2. 在index.js中按需引入reduximport {createStore, applyMiddleware} from 'redux';3. 在index.js中调用createStore方法创建一个仓库：var store = createStore(counte

解决方案、解决方案。

1. vuex是什么？怎么使用？哪种功能场景使用它？为vue构建的一个状态集管理。强调集中式管理。vuex的核心包括5大类：state、mutations、actions、getter、modules实例：

Node虽然看起来是在使用JavaScript，但是实际上是一门后端语言。可以操作操作系统底层的一些内容。和前端的JavaScript相比较只有语法相同，其余比如思想均不相同。Node对最新的ES语法支持比较好，所以可以尽情地使用ES6的语法去写。Node是基于Common JS的语法，因此引入模块只能用require，而import是属于ES module，是ECMA Script的引入方式，不适用与Node。

beforeCreated：不能读到data中的数据beforeCreate() { console.log('beforeCreate()', this.title);}从不能读取data中的数据，到可以读取，这中间实现了数据代理，数据响应式created：自created之后，就可以读到data中的数据created() { console.log('created()', this.tittle);}beforeMount：还不能读取组件的$refs属性.

以口头描述的方式描述一下：物理像素、像素密度、CSS参考像素、CSS像素、设备独立像素、设备像素比、分辨率。本文意在用最短的话，讲清楚这几种像素之间的区别和联系。文章不是太深，因此对于还不能很好地区分这几种像素的同学来说是非常友好的，如果本文对你有帮助，还请多多点赞收藏哈~

单位在使用不同类型描述长度值时，需要附加单位。不同的单位表示的含义是不同的在 CSS 中具有 2 种不同类型的长度单位：绝对长度单位 相对长度单位绝对长度单位所描述的长度任何其他因素是无关的，是固定、不变化的。单位 名称 等价换算 cm 厘米 1cm = 96px/2.54 mm 毫米 1mm = 1/10th of 1cm Q 四分之一毫米 1Q = 1/40th of 1cm in 英寸 1in = .

主要介绍一些 调用 数组自带的一些方法 来实现的方式。思想一：和前一个元素比较是否重复1. 借助 forEach() 思想：先排序，和前一个元素比较，不重复就压入新数组。var arr = [3, 2, 5, 4, 6, 9, 4, 3];var sortArr = arr.sort();console.log( sortArr ); // [2, 3, 3, 4, 4, 5, 6, 9]va...

什么是 Set 集合：Set 集合类似于一个数组，但是它要求里面是元素不可以有重复。const set = new Set(['welcome', 'you', '!', 'you']);console.log(set); // Set { 'welcome', 'you', '!' }可以看到，Set 的实例是一个对象，这个对象的内部结构很像一个数组，传递给 Set 构造函数的数组，其内部重复的元素最终只会保留一个。将 Set 集合转化.

目录1、利用浮动2、利用绝对定位3、利用 flex 布局4、圣杯布局：5、双飞翼布局：三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局。大致写了五种方式实现，前三种无法达到重要内容优先显示的效果，而后面两个可以：最左侧一栏 left 宽度为300px，最右侧一栏 right 宽度为200px1、利用浮动原理：浮动元素脱离文档流HTML 结构<div class="wrapper"> <div ...

前段性能优化的作用于目的：从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。前端优化的途径有很多，按粒度大致可以分为两类。第一类是页面级别的优化。例如 HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等 。第二类则是代码级别的优化，例如 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。一、页面级优化1..

一、页面的渲染的大致过程当我们在浏览器里输入一个 URL 后，最终会呈现一个完整的网页。会经历以下几个步骤：1. HTML 的加载页面上输入 URL 后，会先拿到 HTML 文件。HTML是一个页面的基础，所以会在最开始的时候下载它，下载完毕后就开始对它进行解析。2. 其他静态资源的下载HTML 在解析的过程中，如果发现 HTML 文本里面有一些外部的资源链接，比如CSS、JS 和图片等，会立即启用别的线程下载这些静态资源。在 head 中遇到 JS 文件时，HTML 的解析会停 下来.

cookie session localStorage sessionStorage 存放地点 客户端的内存或硬盘中，取决于是否设置过期时间（在同源http请求中，会被始终携带着） 服务器（仅保存于服务器） 客户端的内存（仅保存于本地） 客户端的硬盘中（仅保存于本地） 安全性 不安全（抓包就可以直接看到） 安全 存储容量 较小，一般只有4k，因浏览器而异。传输的过程是始终携带的，会占用带宽，所以不能太大。...

声明：原文来自DIVCSS5，其次原文代码存在一些引起误解的地方，已经进行修改和测试，下文会注明引起误解的地方。主要收藏为方便下次阅读，故进行转发，如有侵权，请私聊本人，定立即删除。 原文连接：DIVCSS5_让html img垂直居中的三种办法让HTML img垂直居中的三种办法：一、使用flex完成垂直居中操纵cssflex实现垂直居中。flex或许不是完成垂直居中最好的选择，由于IE8,9其实不赞成它。那时，为了用flex实现垂直居中，我们起首要竖立一个包裹着图片的d...

声明：转发本文只为方便下次阅读，如有侵权，请立即联系本人，定立即删除。建议参考原文：掘金_opacity: 0、visibility: hidden、display: none 优劣和适用场景，以及隐藏元素的几种方法1. display: noneDOM 结构：浏览器不会渲染 display 属性为 none 的元素，会让元素完全从渲染树中消失，渲染的时候不占据任何空间； 事件监听：无法进行 DOM 事件监听，不能点击； 性能：修改元素会造成文档重绘重排（repaint与reflo...

这绝对是一篇适合长期收藏回看复习的文章，罗列了基本上所有的C3新增属性，可以一句话说明白的，就一句话再加个例子给大家讲明白，可以深挖的就已经给大家找好了很好文章。

prototype：原型每一个函数都有一个prototype属性，它默认指向一个空对象。举个例子，我们来查看一下Date函数的原型：console.log(Date.prototype) // Object这就表示，Date函数的原型，是一个Object对象，这个对象身上有很多的方法，这些方法均是Object()原型给它的实例对象使用的。我们再来看一个自定义函数的原型：function fun() {}console.log( fun.prototype )...

数组常用方法：1. join()join，就是把数组转换成字符串，然后给他规定个连接字符，默认的是逗号( ，)　　　　书写格式：join(" ")，括号里面写字符串("要加引号")，var arr = [1,2,3]; console.log(arr.join()); 　　　　// 1,2,3 console.log(arr.join("-")); 　　 // 1-2-3 console.log(arr); 　　　　　　　　// [1, 2, 3]（原数组不变）...

我们在 JavaScript 中有3种声明方式：var,let,const。其中var和let声明的是变量，而const声明的叫做常量。那我们想一个问题，我们声明一个变量后，我们不去管它，不去修改它，那它不就也是所谓意义上的常量了吗，为什么还要存在 const 呢？解答：首先，const 它有一个独特的存放值的空间，而 var 和 let 就没有。我们用 const 声明的常量都会放到它独有的空间里面。当我们跑代码的时候，如果我们用的是 var 或 let 声明的变量，我们的电脑找一个变量的时候

这是我在牛客上的回答，实现思路很简单：还像往常一样，回答完面试官实现思路过后，面试官又接着问：用的哪个属性？思路确实很容易理解，曾经也是想当然地就觉得很简单，也就没有自己动手去实现，所以被问到用的哪个属性时，也是一脸懵，来看一下，相信你看一眼过后，就不会再忘了：<div class="outer"> <div class="inner"></div></div>.outer{ width: 200px; height: 20

一句话记住 JS 运算符优先级