TCP粘包是怎么回事，如何解决?
默认状况下, TCP 连贯会启⽤提早传送算法 (Nagle 算法), 在数据发送之前缓存他们. 如果短时间有多个数据发送, 会缓冲到⼀起作⼀次发送 (缓冲⼤⼩⻅ socket.bufferSize ), 这样能够缩小 IO 耗费提⾼性能.
如果是传输⽂件的话, 那么基本不⽤解决粘包的问题, 来⼀个包拼⼀个包就好了。然而如果是多条音讯, 或者是别的⽤途的数据那么就须要解决粘包.
上面看⼀个例⼦, 间断调⽤两次 send 别离发送两段数据 data1 和 data2, 在接收端有以下⼏种常⻅的状况:
A. 先接管到 data1, 而后接管到 data2 .
B. 先接管到 data1 的局部数据, 而后接管到 data1 余下的局部以及 data2 的全副.
C. 先接管到了 data1 的全副数据和 data2 的局部数据, 而后接管到了 data2 的余下的数据.
D. ⼀次性接管到了 data1 和 data2 的全副数据.
其中的 BCD 就是咱们常⻅的粘包的状况. ⽽对于解决粘包的问题, 常⻅的解决⽅案有:
- 屡次发送之前距离⼀个等待时间：只须要等上⼀段时间再进⾏下⼀次 send 就好, 适⽤于交互频率特地低的场景. 毛病也很显著, 对于⽐较频繁的场景⽽⾔传输效率切实太低，不过⼏乎不⽤做什么解决.
- 敞开 Nagle 算法：敞开 Nagle 算法, 在 Node.js 中你能够通过 socket.setNoDelay() ⽅法来敞开 Nagle 算法, 让每⼀次 send 都不缓冲间接发送。该⽅法⽐较适⽤于每次发送的数据都⽐较⼤ (但不是⽂件那么⼤), 并且频率不是特地⾼的场景。如果是每次发送的数据量⽐较⼩, 并且频率特地⾼的, 敞开 Nagle 纯属⾃废文治。另外, 该⽅法不适⽤于⽹络较差的状况, 因为 Nagle 算法是在服务端进⾏的包合并状况, 然而如果短时间内客户端的⽹络状况不好, 或者应⽤层因为某些起因不能及时将 TCP 的数据 recv, 就会造成多个包在客户端缓冲从⽽粘包的状况。 (如果是在稳固的机房外部通信那么这个概率是⽐较⼩能够抉择疏忽的)
- 进⾏封包/拆包： 封包/拆包是⽬前业内常⻅的解决⽅案了。即给每个数据包在发送之前, 于其前/后放⼀些有特色的数据, 而后收到数据的时 候依据特色数据宰割进去各个数据包。
::before 和 :after 的双冒号和单冒号有什么区别？
（1）冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
（2）::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。
留神： :before 和 :after 这两个伪元素，是在CSS2.1里新呈现的。起初，伪元素的前缀应用的是单冒号语法，但随着Web的进化，在CSS3的标准里，伪元素的语法被批改成应用双冒号，成为::before、::after。
Vue的父子组件生命周期钩子函数执行程序？
<!-- 加载渲染过程 -->
<!-- 父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created ->
子beforeMount -> 子mounted -> 父mounted -->
<!-- 子组件更新过程 -->
<!-- 父beforeUpdate -> 子beforeUpdate -> 子updaed -> 父updated -->
<!-- 父组件跟新过程 -->
<!-- 父beforeUpdate -> 父updated -->
<!-- 销毁过程 -->
<!-- 父beforeDestroy -> 子beforeDestroy -> 子destroyed ->父destroyed -->
复制代码说一下你对盒模型的了解?
CSS3中的盒模型有以下两种:规范盒模型、IE盒模型
盒模型都是由四个局部组成的,别离是margin、border、padding和content
规范盒模型和IE盒模型的区别在于设置width和height时, 所对应的范畴不同
1、规范盒模型的width和height属性的范畴只蕴含了content
2、IE盒模型的width和height属性的范畴蕴含了border、padding和content
能够通过批改元素的box-sizing属性来扭转元素的盒模型；
1、box-sizing：content-box示意规范盒模型（默认值）
2、box-sizing：border-box示意IE盒模型（怪异盒模型）
复制代码Vue的生命周期是什么 每个钩子外面具体做了什么事件
Vue 实例有⼀个残缺的⽣命周期，也就是从开始创立、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程，称这是Vue的⽣命周期。
1、beforeCreate（创立前） ：数据观测和初始化事件还未开始，此时 data 的响应式追踪、event/watcher 都还没有被设置，也就是说不能拜访到data、computed、watch、methods上的办法和数据。
2、created（创立后） ：实例创立实现，实例上配置的 options 包含 data、computed、watch、methods 等都配置实现，然而此时渲染得节点还未挂载到 DOM，所以不能拜访到 `$el` 属性。
3、beforeMount（挂载前） ：在挂载开始之前被调用，相干的render函数首次被调用。实例已实现以下的配置：编译模板，把data外面的数据和模板生成html。此时还没有挂载html到页面上。
4、mounted（挂载后） ：在el被新创建的 vm.$el 替换，并挂载到实例下来之后调用。实例已实现以下的配置：用下面编译好的html内容替换el属性指向的DOM对象。实现模板中的html渲染到html 页面中。此过程中进行ajax交互。
5、beforeUpdate（更新前） ：响应式数据更新时调用，此时尽管响应式数据更新了，然而对应的实在 DOM 还没有被渲染。
6、updated（更新后）：在因为数据更改导致的虚构DOM从新渲染和打补丁之后调用。此时 DOM 曾经依据响应式数据的变动更新了。调用时，组件 DOM曾经更新，所以能够执行依赖于DOM的操作。然而在大多数状况下，应该防止在此期间更改状态，因为这可能会导致更新有限循环。该钩子在服务器端渲染期间不被调用。
7、beforeDestroy（销毁前） ：实例销毁之前调用。这一步，实例依然齐全可用，`this` 仍能获取到实例。
8、destroyed（销毁后） ：实例销毁后调用，调用后，Vue 实例批示的所有货色都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务端渲染期间不被调用。
另外还有 `keep-alive` 独有的生命周期，别离为 `activated` 和 `deactivated` 。用 `keep-alive` 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 `deactivated` 钩子函数，命中缓存渲染后会执行 `activated` 钩子函数。
复制代码Loader和Plugin 有什么区别
Loader：直译为”加载器”。Webpack将所有文件视为模块，然而webpack原生是只能解析js文件，如果想将其余文件也打包的话，就会用到loader。 所以Loader的作用是让webpack领有了加载和解析非JavaScript文件的能力。 Plugin：直译为”插件”。Plugin能够扩大webpack的性能，让webpack具备更多的灵活性。 在 Webpack 运行的生命周期中会播送出许多事件，Plugin 能够监听这些事件，在适合的机会通过 Webpack 提供的 API 扭转输入后果。
iframe 有那些长处和毛病？
iframe 元素会创立蕴含另外一个文档的内联框架（即行内框架）。
长处：
- 用来加载速度较慢的内容（如广告）
- 能够使脚本能够并行下载
- 能够实现跨子域通信
毛病：
- iframe 会阻塞主页面的 onload 事件
- 无奈被一些搜索引擎索辨认
- 会产生很多页面，不容易治理
解析 URL 参数为对象
function parseParam(url) {
const paramsStr = /.+\?(.+)$/.exec(url)[1]; // 将 ? 前面的字符串取出来
const paramsArr = paramsStr.split('&'); // 将字符串以 & 宰割后存到数组中
let paramsObj = {};
// 将 params 存到对象中
paramsArr.forEach(param => {
if (/=/.test(param)) { // 解决有 value 的参数
let [key, val] = param.split('='); // 宰割 key 和 value
val = decodeURIComponent(val); // 解码
val = /^\d+$/.test(val) ? parseFloat(val) : val; // 判断是否转为数字
if (paramsObj.hasOwnProperty(key)) { // 如果对象有 key，则增加一个值
paramsObj[key] = [].concat(paramsObj[key], val);
} else { // 如果对象没有这个 key，创立 key 并设置值
paramsObj[key] = val;
}
} else { // 解决没有 value 的参数
paramsObj[param] = true;
}
})
return paramsObj;
}
复制代码什么是原型什么是原型链?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
function Person () { } var person = new Person(); person.name = 'Kevin'; console.log(person.name) // Kevin
// prototype
function Person () { } Person.prototype.name = 'Kevin'; var person1 = new Person(); var person2 = new Person(); console.log(person1.name)// Kevin
console.log(person2.name)// Kevin
// __proto__
function Person () { } var person = new Person(); console.log(person.__proto__ === Person.prototype) // true
//constructor
function Person() { } console.log(Person === Person.prototype.constructor) // true
//综上所述
function Person () { } var person = new Person() console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true
//顺便学习一下ES5得办法,能够取得对象得原型
console.log(Object.getPrototypeOf(person) === Person.prototype) // true
//实例与原型
function Person () { } Person.prototype.name = 'Kevin'; var person = new Person(); person.name = 'Daisy'; console.log(person.name) // Daisy
delete person.name; console.log(person.name) // Kevin
//原型得原型
var obj = new Object(); obj.name = 'Kevin', console.log(obj.name) //Kevin
//原型链
console.log(Object.prototype.__proto__ === null) //true
// null 示意"没用对象" 即该处不应该有值
// 补充
function Person() { } var person = new Person() console.log(person.constructor === Person) // true
//当获取person.constructor时，其实person中并没有constructor属性,当不能读取到constructor属性时,会从person的原型
//也就是Person.prototype中读取时,正好原型中有该属性,所以
person.constructor === Person.prototype.constructor
//__proto__
//其次是__proto__，绝大部分浏览器都反对这个非标准的办法拜访原型，然而它并不存在于Person.prototype中，实际上，它
// 是来自与Object.prototype,与其说是一个属性，不如说是一个getter/setter,当应用obj.__proto__时，能够了解成返回了
// Object.getPrototypeOf(obj)
总结： 1、当一个对象查找属性和办法时会从本身查找,如果查找不到则会通过__proto__指向被实例化的构造函数的prototype 2、隐式原型也是一个对象,是指向咱们构造函数的原型 3、除了最顶层的Object对象没有__proto_，其余所有的对象都有__proto__,这是隐式原型 4、隐式原型__proto__的作用是让对象通过它来始终往上查找属性或办法，直到找到最顶层的Object的__proto__属性，它的值是null,这个查找的过程就是原型链
</script>
</html>
复制代码NaN 是什么，用 typeof 会输入什么？
Not a Number，示意非数字，typeof NaN === ‘number’
代码输入问题
function fun(n, o) {
console.log(o)
return {
fun: function(m){
return fun(m, n);
}
};
}
var a = fun(0); a.fun(1); a.fun(2); a.fun(3);
var b = fun(0).fun(1).fun(2).fun(3);
var c = fun(0).fun(1); c.fun(2); c.fun(3);
复制代码输入后果：
undefined 0 0 0
undefined 0 1 2
undefined 0 1 1
复制代码这是一道对于闭包的题目，对于fun办法，调用之后返回的是一个对象。咱们晓得，当调用函数的时候传入的实参比函数申明时指定的形参个数要少，剩下的形参都将设置为undefined值。所以 console.log(o); 会输入undefined。而a就是是fun(0)返回的那个对象。也就是说，函数fun中参数 n 的值是0，而返回的那个对象中，须要一个参数n，而这个对象的作用域中没有n，它就持续沿着作用域向上一级的作用域中寻找n，最初在函数fun中找到了n，n的值是0。理解了这一点，其余运算就很简略了，以此类推。
手写公布订阅
class EventListener {
listeners = {};
on(name, fn) {
(this.listeners[name] || (this.listeners[name] = [])).push(fn)
}
once(name, fn) {
let tem = (...args) => {
this.removeListener(name, fn)
fn(...args)
}
fn.fn = tem
this.on(name, tem)
}
removeListener(name, fn) {
if (this.listeners[name]) {
this.listeners[name] = this.listeners[name].filter(listener => (listener != fn && listener != fn.fn))
}
}
removeAllListeners(name) {
if (name && this.listeners[name]) delete this.listeners[name]
this.listeners = {}
}
emit(name, ...args) {
if (this.listeners[name]) {
this.listeners[name].forEach(fn => fn.call(this, ...args))
}
}
}同步和异步的区别
- 同步指的是当一个过程在执行某个申请时，如果这个申请须要期待一段时间能力返回，那么这个过程会始终期待上来，直到音讯返回为止再持续向下执行。
- 异步指的是当一个过程在执行某个申请时，如果这个申请须要期待一段时间能力返回，这个时候过程会持续往下执行，不会阻塞期待音讯的返回，当音讯返回时零碎再告诉过程进行解决。
介绍下 promise 的个性、优缺点，外部是如何实现的，入手实现 Promise
1）Promise根本个性
- 1、Promise有三种状态：pending(进行中)、fulfilled(已胜利)、rejected(已失败)
- 2、Promise对象承受一个回调函数作为参数, 该回调函数承受两个参数，别离是胜利时的回调resolve和失败时的回调reject；另外resolve的参数除了正常值以外， 还可能是一个Promise对象的实例；reject的参数通常是一个Error对象的实例。
- 3、then办法返回一个新的Promise实例，并接管两个参数onResolved(fulfilled状态的回调)；onRejected(rejected状态的回调，该参数可选)
- 4、catch办法返回一个新的Promise实例
- 5、finally办法不论Promise状态如何都会执行，该办法的回调函数不承受任何参数
- 6、Promise.all()办法将多个多个Promise实例，包装成一个新的Promise实例，该办法承受一个由Promise对象组成的数组作为参数(Promise.all()办法的参数能够不是数组，但必须具备Iterator接口，且返回的每个成员都是Promise实例)，留神参数中只有有一个实例触发catch办法，都会触发Promise.all()办法返回的新的实例的catch办法，如果参数中的某个实例自身调用了catch办法，将不会触发Promise.all()办法返回的新实例的catch办法
- 7、Promise.race()办法的参数与Promise.all办法一样，参数中的实例只有有一个率先扭转状态就会将该实例的状态传给Promise.race()办法，并将返回值作为Promise.race()办法产生的Promise实例的返回值
- 8、Promise.resolve()将现有对象转为Promise对象，如果该办法的参数为一个Promise对象，Promise.resolve()将不做任何解决；如果参数thenable对象(即具备then办法)，Promise.resolve()将该对象转为Promise对象并立刻执行then办法；如果参数是一个原始值，或者是一个不具备then办法的对象，则Promise.resolve办法返回一个新的Promise对象，状态为fulfilled，其参数将会作为then办法中onResolved回调函数的参数，如果Promise.resolve办法不带参数，会间接返回一个fulfilled状态的 Promise 对象。须要留神的是，立刻resolve()的 Promise 对象，是在本轮“事件循环”（event loop）的完结时执行，而不是在下一轮“事件循环”的开始时。
- 9、Promise.reject()同样返回一个新的Promise对象，状态为rejected，无论传入任何参数都将作为reject()的参数
2）Promise长处
-
①对立异步 API
- Promise 的一个重要长处是它将逐步被用作浏览器的异步 API ，对立当初各种各样的 API ，以及不兼容的模式和手法。
-
②Promise 与事件比照
- 和事件相比拟， Promise 更适宜解决一次性的后果。在后果计算出来之前或之后注册回调函数都是能够的，都能够拿到正确的值。 Promise 的这个长处很天然。然而，不能应用 Promise 解决屡次触发的事件。链式解决是 Promise 的又一长处，然而事件却不能这样链式解决。
-
③Promise 与回调比照
- 解决了回调天堂的问题，将异步操作以同步操作的流程表达出来。
- ④Promise 带来的额定益处是蕴含了更好的错误处理形式（蕴含了异样解决），并且写起来很轻松（因为能够重用一些同步的工具，比方 Array.prototype.map() ）。
3）Promise毛病
- 1、无奈勾销Promise，一旦新建它就会立刻执行，无奈中途勾销。
- 2、如果不设置回调函数，Promise外部抛出的谬误，不会反馈到内部。
- 3、当处于Pending状态时，无奈得悉目前停顿到哪一个阶段（刚刚开始还是行将实现）。
- 4、Promise 真正执行回调的时候，定义 Promise 那局部实际上曾经走完了，所以 Promise 的报错堆栈上下文不太敌对。
4）简略代码实现
最简略的Promise实现有7个次要属性, state(状态), value(胜利返回值), reason(错误信息), resolve办法, reject办法, then办法
class Promise{
constructor(executor) {
this.state = 'pending';
this.value = undefined;
this.reason = undefined;
let resolve = value => {
if (this.state === 'pending') {
this.state = 'fulfilled';
this.value = value;
}
};
let reject = reason => {
if (this.state === 'pending') {
this.state = 'rejected';
this.reason = reason;
}
};
try {
// 立刻执行函数
executor(resolve, reject);
} catch (err) {
reject(err);
}
}
then(onFulfilled, onRejected) {
if (this.state === 'fulfilled') {
let x = onFulfilled(this.value);
};
if (this.state === 'rejected') {
let x = onRejected(this.reason);
};
}
}5）面试够用版
function myPromise(constructor){ let self=this;
self.status="pending" //定义状态扭转前的初始状态
self.value=undefined;//定义状态为resolved的时候的状态
self.reason=undefined;//定义状态为rejected的时候的状态
function resolve(value){
//两个==="pending"，保障了了状态的扭转是不不可逆的
if(self.status==="pending"){
self.value=value;
self.status="resolved";
}
}
function reject(reason){
//两个==="pending"，保障了了状态的扭转是不不可逆的
if(self.status==="pending"){
self.reason=reason;
self.status="rejected";
}
}
//捕捉结构异样
try{
constructor(resolve,reject);
}catch(e){
reject(e);
}
}
myPromise.prototype.then=function(onFullfilled,onRejected){
let self=this;
switch(self.status){
case "resolved": onFullfilled(self.value); break;
case "rejected": onRejected(self.reason); break;
default:
}
}
// 测试
var p=new myPromise(function(resolve,reject){resolve(1)});
p.then(function(x){console.log(x)})
//输入16）大厂专供版
const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";
const resolvePromise = (promise, x, resolve, reject) => {
if (x === promise) {
// If promise and x refer to the same object, reject promise with a TypeError as the reason.
reject(new TypeError('循环援用'))
}
// if x is an object or function,
if (x !== null && typeof x === 'object' || typeof x === 'function') {
// If both resolvePromise and rejectPromise are called, or multiple calls to the same argument are made, the first call takes precedence, and any further calls are ignored.
let called
try { // If retrieving the property x.then results in a thrown exception e, reject promise with e as the reason.
let then = x.then // Let then be x.then
// If then is a function, call it with x as this
if (typeof then === 'function') {
// If/when resolvePromise is called with a value y, run [[Resolve]](promise, y)
// If/when rejectPromise is called with a reason r, reject promise with r.
then.call(x, y => {
if (called) return
called = true
resolvePromise(promise, y, resolve, reject)
}, r => {
if (called) return
called = true
reject(r)
})
} else {
// If then is not a function, fulfill promise with x.
resolve(x)
}
} catch (e) {
if (called) return
called = true
reject(e)
}
} else {
// If x is not an object or function, fulfill promise with x
resolve(x)
}
}
function Promise(excutor) {
let that = this; // 缓存以后promise实例例对象
that.status = PENDING; // 初始状态
that.value = undefined; // fulfilled状态时 返回的信息
that.reason = undefined; // rejected状态时 回绝的起因
that.onFulfilledCallbacks = []; // 存储fulfilled状态对应的onFulfilled函数
that.onRejectedCallbacks = []; // 存储rejected状态对应的onRejected函数
function resolve(value) { // value胜利态时接管的终值
if(value instanceof Promise) {
return value.then(resolve, reject);
}
// 实际中要确保 onFulfilled 和 onRejected ⽅办法异步执⾏行行，且应该在 then ⽅办法被调⽤用的那⼀一轮事件循环之后的新执⾏行行栈中执⾏行行。
setTimeout(() => {
// 调⽤用resolve 回调对应onFulfilled函数
if (that.status === PENDING) {
// 只能由pending状态 => fulfilled状态 (防止调⽤用屡次resolve reject)
that.status = FULFILLED;
that.value = value;
that.onFulfilledCallbacks.forEach(cb => cb(that.value));
}
});
}
function reject(reason) { // reason失败态时接管的拒因
setTimeout(() => {
// 调⽤用reject 回调对应onRejected函数
if (that.status === PENDING) {
// 只能由pending状态 => rejected状态 (防止调⽤用屡次resolve reject)
that.status = REJECTED;
that.reason = reason;
that.onRejectedCallbacks.forEach(cb => cb(that.reason));
}
});
}
// 捕捉在excutor执⾏行行器器中抛出的异样
// new Promise((resolve, reject) => {
// throw new Error('error in excutor')
// })
try {
excutor(resolve, reject);
} catch (e) {
reject(e);
}
}
Promise.prototype.then = function(onFulfilled, onRejected) {
const that = this;
let newPromise;
// 解决理参数默认值 保障参数后续可能持续执⾏行行
onFulfilled = typeof onFulfilled === "function" ? onFulfilled : value => value;
onRejected = typeof onRejected === "function" ? onRejected : reason => {
throw reason;
};
if (that.status === FULFILLED) { // 胜利态
return newPromise = new Promise((resolve, reject) => {
setTimeout(() => {
try{
let x = onFulfilled(that.value);
resolvePromise(newPromise, x, resolve, reject); //新的promise resolve 上⼀一个onFulfilled的返回值
} catch(e) {
reject(e); // 捕捉前⾯面onFulfilled中抛出的异样then(onFulfilled, onRejected);
}
});
})
}
if (that.status === REJECTED) { // 失败态
return newPromise = new Promise((resolve, reject) => {
setTimeout(() => {
try {
let x = onRejected(that.reason);
resolvePromise(newPromise, x, resolve, reject);
} catch(e) {
reject(e);
}
});
});
}
if (that.status === PENDING) { // 期待态
// 当异步调⽤用resolve/rejected时 将onFulfilled/onRejected收集暂存到汇合中
return newPromise = new Promise((resolve, reject) => {
that.onFulfilledCallbacks.push((value) => {
try {
let x = onFulfilled(value);
resolvePromise(newPromise, x, resolve, reject);
} catch(e) {
reject(e);
}
});
that.onRejectedCallbacks.push((reason) => {
try {
let x = onRejected(reason);
resolvePromise(newPromise, x, resolve, reject);
} catch(e) {
reject(e);
}
});
});
}
};如何防止回流与重绘？
缩小回流与重绘的措施：
- 操作DOM时，尽量在低层级的DOM节点进行操作
- 不要应用
table布局， 一个小的改变可能会使整个table进行从新布局 - 应用CSS的表达式
- 不要频繁操作元素的款式，对于动态页面，能够批改类名，而不是款式。
- 应用absolute或者fixed，使元素脱离文档流，这样他们发生变化就不会影响其余元素
- 防止频繁操作DOM，能够创立一个文档片段
documentFragment，在它下面利用所有DOM操作，最初再把它增加到文档中 - 将元素先设置
display: none，操作完结后再把它显示进去。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。 - 将DOM的多个读操作（或者写操作）放在一起，而不是读写操作穿插着写。这得益于浏览器的渲染队列机制。
浏览器针对页面的回流与重绘，进行了本身的优化——渲染队列
浏览器会将所有的回流、重绘的操作放在一个队列中，当队列中的操作到了肯定的数量或者到了肯定的工夫距离，浏览器就会对队列进行批处理。这样就会让屡次的回流、重绘变成一次回流重绘。
下面，将多个读操作（或者写操作）放在一起，就会等所有的读操作进入队列之后执行，这样，本来应该是触发屡次回流，变成了只触发一次回流。
常见的程度垂直形式有几种?
//利用相对定位，先将元素的左上角通过 top:50%和 left:50%定位到页面的核心，而后再通过 translate 来调整元素的中心点到页面的核心。该办法须要思考浏览器兼容问题。
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
//利用相对定位，设置四个方向的值都为 0，并将 margin 设置为 auto，因为宽高固定，因而对应方向实现平分，能够实现程度和垂直方向上的居中。该办法实用于盒子有宽高的状况：
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
//利用相对定位，先将元素的左上角通过 top:50%和 left:50%定位到页面的核心，而后再通过 margin 负值来调整元素的中心点到页面的核心。该办法实用于盒子宽高已知的状况
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px; /* 本身 height 的一半 */
margin-left: -50px; /* 本身 width 的一半 */
}
//应用 flex 布局，通过 align-items:center 和 justify-content:center 设置容器的垂直和程度方向上为居中对齐，而后它的子元素也能够实现垂直和程度的居中。该办法要**思考兼容的问题**，该办法在挪动端用的较多：
.parent {
display: flex;
justify-content:center;
align-items:center;
}
//另外，如果父元素设置了flex布局，只须要给子元素加上`margin:auto;`就能够实现垂直居中布局
.parent{
display:flex;
}
.child{
margin: auto;
}
复制代码说一下HTTP和HTTPS协定的区别?
1、HTTPS协定须要CA证书,费用较高;而HTTP协定不须要
2、HTTP协定是超文本传输协定,信息是明文传输的,HTTPS则是具备安全性的SSL加密传输协定;
3、应用不同的连贯形式,端口也不同,HTTP协定端口是80,HTTPS协定端口是443;
4、HTTP协定连贯很简略,是无状态的;HTTPS协定是具备SSL和HTTP协定构建的可进行加密传输、身份认证的网络协议,比HTTP更加平安
复制代码对节流与防抖的了解
- 函数防抖是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则从新计时。这能够应用在一些点击申请的事件上，防止因为用户的屡次点击向后端发送屡次申请。
- 函数节流是指规定一个单位工夫，在这个单位工夫内，只能有一次触发事件的回调函数执行，如果在同一个单位工夫内某事件被触发屡次，只有一次能失效。节流能够应用在 scroll 函数的事件监听上，通过事件节流来升高事件调用的频率。
防抖函数的利用场景：
- 按钮提交场景：防⽌屡次提交按钮，只执⾏最初提交的⼀次
- 服务端验证场景：表单验证须要服务端配合，只执⾏⼀段间断的输⼊事件的最初⼀次，还有搜寻联想词性能相似⽣存环境请⽤lodash.debounce
节流函数的适⽤场景：
- 拖拽场景：固定工夫内只执⾏⼀次，防⽌超⾼频次触发地位变动
- 缩放场景：监控浏览器resize
- 动画场景：防止短时间内屡次触发动画引起性能问题
点击刷新按钮或者按 F5、按 Ctrl+F5 （强制刷新）、地址栏回车有什么区别？
- 点击刷新按钮或者按 F5： 浏览器间接对本地的缓存文件过期，然而会带上If-Modifed-Since，If-None-Match，这就意味着服务器会对文件查看新鲜度，返回后果可能是 304，也有可能是 200。
- 用户按 Ctrl+F5（强制刷新）： 浏览器不仅会对本地文件过期，而且不会带上 If-Modifed-Since，If-None-Match，相当于之前素来没有申请过，返回后果是 200。
- 地址栏回车： 浏览器发动申请，依照失常流程，本地查看是否过期，而后服务器查看新鲜度，最初返回内容。
代码输入后果
Promise.resolve(1)
.then(2)
.then(Promise.resolve(3))
.then(console.log)
复制代码输入后果如下：
1
复制代码看到这个题目，好多的then，实际上只须要记住一个准则：.then 或.catch 的参数冀望是函数，传入非函数则会产生值透传。
第一个then和第二个then中传入的都不是函数，一个是数字，一个是对象，因而产生了透传，将resolve(1) 的值间接传到最初一个then里，间接打印出1。
发表回复