什么是文档的预解析？
Webkit 和 Firefox 都做了这个优化，当执行 JavaScript 脚本时，另一个线程解析剩下的文档，并加载前面须要通过网络加载的资源。这种形式能够使资源并行加载从而使整体速度更快。须要留神的是，预解析并不扭转 DOM 树，它将这个工作留给主解析过程，本人只解析内部资源的援用，比方内部脚本、样式表及图片。
代码输入后果
async function async1 () { console.log('async1 start'); await new Promise(resolve => { console.log('promise1') resolve('promise1 resolve') }).then(res => console.log(res)) console.log('async1 success'); return 'async1 end'}console.log('srcipt start')async1().then(res => console.log(res))console.log('srcipt end')这里是对下面一题进行了革新，加上了resolve。
输入后果如下：
script startasync1 startpromise1script endpromise1 resolveasync1 successasync1 end常见浏览器所用内核
（1） IE 浏览器内核：Trident 内核，也是俗称的 IE 内核；
（2） Chrome 浏览器内核：统称为 Chromium 内核或 Chrome 内核，以前是 Webkit 内核，当初是 Blink内核；
（3） Firefox 浏览器内核：Gecko 内核，俗称 Firefox 内核；
（4） Safari 浏览器内核：Webkit 内核；
（5） Opera 浏览器内核：最后是本人的 Presto 内核，起初退出谷歌大军，从 Webkit 又到了 Blink 内核；
（6） 360浏览器、猎豹浏览器内核：IE + Chrome 双内核；
（7） 搜狗、漫游、QQ 浏览器内核：Trident（兼容模式）+ Webkit（高速模式）；
（8） 百度浏览器、世界之窗内核：IE 内核；
（9） 2345浏览器内核：如同以前是 IE 内核，当初也是 IE + Chrome 双内核了；
（10）UC 浏览器内核：这个众口不一，UC 说是他们本人研发的 U3 内核，但如同还是基于 Webkit 和 Trident ，还有说是基于火狐内核。
如果一个构造函数，bind了一个对象，用这个构造函数创立出的实例会继承这个对象的属性吗？为什么？
不会继承，因为依据 this 绑定四大规定，new 绑定的优先级高于 bind 显示绑定，通过 new 进行结构函数调用时，会创立一个新对象，这个新对象会代替 bind 的对象绑定，作为此函数的 this，并且在此函数没有返回对象的状况下，返回这个新建的对象
介绍下 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); } }); }); }};代码输入后果
const p1 = new Promise((resolve) => { setTimeout(() => { resolve('resolve3'); console.log('timer1') }, 0) resolve('resovle1'); resolve('resolve2');}).then(res => { console.log(res) // resolve1 setTimeout(() => { console.log(p1) }, 1000)}).finally(res => { console.log('finally', res)})执行后果为如下：
resolve1finally undefinedtimer1Promise{<resolved>: undefined}须要留神的是最初一个定时器打印出的p1其实是.finally的返回值，咱们晓得.finally的返回值如果在没有抛出谬误的状况下默认会是上一个Promise的返回值，而这道题中.finally上一个Promise是.then()，然而这个.then()并没有返回值，所以p1打印进去的Promise的值会是undefined，如果在定时器的上面加上一个return 1，则值就会变成1。
参考 前端进阶面试题具体解答
为什么 0.1 + 0.2 != 0.3，请详述理由
因为 JS 采纳 IEEE 754 双精度版本（64位），并且只有采纳 IEEE 754 的语言都有该问题。
咱们都晓得计算机示意十进制是采纳二进制示意的，所以 0.1 在二进制示意为
// (0011) 示意循环0.1 = 2^-4 * 1.10011(0011)那么如何失去这个二进制的呢，咱们能够来演算下
小数算二进制和整数不同。乘法计算时，只计算小数位，整数位用作每一位的二进制，并且失去的第一位为最高位。所以咱们得出 0.1 = 2^-4 * 1.10011(0011)，那么 0.2 的演算也根本如上所示，只须要去掉第一步乘法，所以得出 0.2 = 2^-3 * 1.10011(0011)。
回来持续说 IEEE 754 双精度。六十四位中符号位占一位，整数位占十一位，其余五十二位都为小数位。因为 0.1 和 0.2 都是有限循环的二进制了，所以在小数位开端处须要判断是否进位（就和十进制的四舍五入一样）。
所以 2^-4 * 1.10011...001 进位后就变成了 2^-4 * 1.10011(0011 * 12次)010 。那么把这两个二进制加起来会得出 2^-2 * 1.0011(0011 * 11次)0100 , 这个值算成十进制就是 0.30000000000000004
上面说一下原生解决办法，如下代码所示
parseFloat((0.1 + 0.2).toFixed(10))DNS同时应用TCP和UDP协定？
DNS占用53号端口，同时应用TCP和UDP协定。 （1）在区域传输的时候应用TCP协定
- 辅域名服务器会定时（个别3小时）向主域名服务器进行查问以便理解数据是否有变动。如有变动，会执行一次区域传送，进行数据同步。区域传送应用TCP而不是UDP，因为数据同步传送的数据量比一个申请应答的数据量要多得多。
- TCP是一种牢靠连贯，保障了数据的准确性。
（2）在域名解析的时候应用UDP协定
- 客户端向DNS服务器查问域名，个别返回的内容都不超过512字节，用UDP传输即可。不必通过三次握手，这样DNS服务器负载更低，响应更快。实践上说，客户端也能够指定向DNS服务器查问时用TCP，但事实上，很多DNS服务器进行配置的时候，仅反对UDP查问包。
CSS3的新个性
transition：过渡transform: 旋转、缩放、挪动或歪斜animation: 动画gradient: 突变box-shadow: 暗影border-radius: 圆角word-break:normal|break-all|keep-all; 文字换行(默认规定|单词也能够换行|只在半角空格或连字符换行)text-overflow: 文字超出局部解决text-shadow: 程度暗影，垂直暗影，含糊的间隔，以及暗影的色彩。box-sizing:content-box|border-box盒模型- 媒体查问
@media screen and (max-width: 960px) {}还有打印print
New的原理
常见考点
new做了那些事？new返回不同的类型时会有什么体现？- 手写 new 的实现过程
new 关键词的次要作用就是执行一个构造函数、返回一个实例对象，在 new 的过程中，依据构造函数的状况，来确定是否能够承受参数的传递。上面咱们通过一段代码来看一个简略的 new 的例子function Person(){ this.name = 'Jack';}var p = new Person(); console.log(p.name) // Jack这段代码比拟容易了解，从输入后果能够看出，p 是一个通过 person 这个构造函数生成的一个实例对象，这个应该很容易了解。
new 操作符能够帮忙咱们构建出一个实例，并且绑定上 this，外部执行步骤可大略分为以下几步：- 创立一个新对象
- 对象连接到构造函数原型上，并绑定
this（this 指向新对象） - 执行构造函数代码（为这个新对象增加属性）
- 返回新对象
在第四步返回新对象这边有一个状况会例外：
那么问题来了，如果不必new这个关键词，联合下面的代码革新一下，去掉new，会产生什么样的变动呢？咱们再来看上面这段代码
function Person(){ this.name = 'Jack';}var p = Person();console.log(p) // undefinedconsole.log(name) // Jackconsole.log(p.name) // 'name' of undefined- 从下面的代码中能够看到，咱们没有应用
new这个关键词，返回的后果就是undefined。其中因为JavaScript代码在默认状况下this的指向是window，那么name的输入后果就为Jack，这是一种不存在new关键词的状况。 - 那么当构造函数中有
return一个对象的操作，后果又会是什么样子呢？咱们再来看一段在下面的根底上革新过的代码。
function Person(){ this.name = 'Jack'; return {age: 18}}var p = new Person(); console.log(p) // {age: 18}console.log(p.name) // undefinedconsole.log(p.age) // 18通过这段代码又能够看出，当构造函数最初return进去的是一个和this无关的对象时，new 命令会间接返回这个新对象，而不是通过 new 执行步骤生成的 this 对象
然而这里要求构造函数必须是返回一个对象，如果返回的不是对象，那么还是会依照 new 的实现步骤，返回新生成的对象。接下来还是在下面这段代码的根底之上略微改变一下
function Person(){ this.name = 'Jack'; return 'tom';}var p = new Person(); console.log(p) // {name: 'Jack'}console.log(p.name) // Jack能够看出，当构造函数中 return 的不是一个对象时，那么它还是会依据 new 关键词的执行逻辑，生成一个新的对象（绑定了最新 this），最初返回进去
因而咱们总结一下：new 关键词执行之后总是会返回一个对象，要么是实例对象，要么是 return 语句指定的对象手工实现New的过程
function create(fn, ...args) { if(typeof fn !== 'function') { throw 'fn must be a function'; } // 1、用new Object() 的形式新建了一个对象obj // var obj = new Object() // 2、给该对象的__proto__赋值为fn.prototype，即设置原型链 // obj.__proto__ = fn.prototype // 1、2步骤合并 // 创立一个空对象，且这个空对象继承构造函数的 prototype 属性 // 即实现 obj.__proto__ === constructor.prototype var obj = Object.create(fn.prototype); // 3、执行fn，并将obj作为外部this。应用 apply，扭转构造函数 this 的指向到新建的对象，这样 obj 就能够拜访到构造函数中的属性 var res = fn.apply(obj, args); // 4、如果fn有返回值，则将其作为new操作返回内容，否则返回obj return res instanceof Object ? res : obj;};- 应用
Object.create将obj 的proto指向为构造函数的原型； - 应用
apply办法，将构造函数内的this指向为obj； - 在
create返回时，应用三目运算符决定返回后果。
咱们晓得，构造函数如果有显式返回值，且返回值为对象类型，那么构造函数返回后果不再是指标实例
如下代码：
function Person(name) { this.name = name return {1: 1}}const person = new Person(Person, 'lucas')console.log(person)// {1: 1}测试
//应用create代替newfunction Person() {...}// 应用内置函数newvar person = new Person(1,2)// 应用手写的new，即createvar person = create(Person, 1,2)new 被调用后大抵做了哪几件事件
- 让实例能够拜访到公有属性；
- 让实例能够拜访构造函数原型（
constructor.prototype）所在原型链上的属性； - 构造函数返回的最初后果是援用数据类型。
createElement过程
React.createElement()： 依据指定的第一个参数创立一个React元素
React.createElement( type, [props], [...children])- 第一个参数是必填，传入的是似HTML标签名称，eg: ul, li
- 第二个参数是选填，示意的是属性，eg: className
- 第三个参数是选填, 子节点，eg: 要显示的文本内容
//写法一：var child1 = React.createElement('li', null, 'one'); var child2 = React.createElement('li', null, 'two'); var content = React.createElement('ul', { className: 'teststyle' }, child1, child2); // 第三个参数能够离开也能够写成一个数组 ReactDOM.render( content, document.getElementById('example') );//写法二：var child1 = React.createElement('li', null, 'one'); var child2 = React.createElement('li', null, 'two'); var content = React.createElement('ul', { className: 'teststyle' }, [child1, child2]); ReactDOM.render( content, document.getElementById('example') );左右居中计划
- 行内元素:
text-align: center - 定宽块状元素: 左右
margin值为auto - 不定宽块状元素:
table布局，position + transform
/* 计划1 */.wrap { text-align: center}.center { display: inline; /* or */ /* display: inline-block; */}/* 计划2 */.center { width: 100px; margin: 0 auto;}/* 计划2 */.wrap { position: relative;}.center { position: absulote; left: 50%; transform: translateX(-50%);}变量晋升
当执行 JS 代码时，会生成执行环境，只有代码不是写在函数中的，就是在全局执行环境中，函数中的代码会产生函数执行环境，只此两种执行环境。b() // call bconsole.log(a) // undefinedvar a = 'Hello world'function b() { console.log('call b')}想必以上的输入大家必定都曾经明确了，这是因为函数和变量晋升的起因。通常晋升的解释是说将申明的代码移动到了顶部，这其实没有什么谬误，便于大家了解。然而更精确的解释应该是：在生成执行环境时，会有两个阶段。第一个阶段是创立的阶段，JS解释器会找出须要晋升的变量和函数，并且给他们提前在内存中开拓好空间，函数的话会将整个函数存入内存中，变量只申明并且赋值为undefined，所以在第二个阶段，也就是代码执行阶段，咱们能够间接提前应用
- 在晋升的过程中，雷同的函数会笼罩上一个函数，并且函数优先于变量晋升
b() // call b secondfunction b() { console.log('call b fist')}function b() { console.log('call b second')}var b = 'Hello world'var会产生很多谬误，所以在 ES6中引入了let。let不能在申明前应用，然而这并不是常说的let不会晋升，let晋升了，在第一阶段内存也曾经为他开拓好了空间，然而因为这个申明的个性导致了并不能在申明前应用
作用域
- 作用域： 作用域是定义变量的区域，它有一套拜访变量的规定，这套规定来治理浏览器引擎如何在以后作用域以及嵌套的作用域中依据变量（标识符）进行变量查找
- 作用域链： 作用域链的作用是保障对执行环境有权拜访的所有变量和函数的有序拜访，通过作用域链，咱们能够拜访到外层环境的变量和 函数。
作用域链的实质上是一个指向变量对象的指针列表。变量对象是一个蕴含了执行环境中所有变量和函数的对象。作用域链的前 端始终都是以后执行上下文的变量对象。全局执行上下文的变量对象（也就是全局对象）始终是作用域链的最初一个对象。
- 当咱们查找一个变量时，如果以后执行环境中没有找到，咱们能够沿着作用域链向后查找
- 作用域链的创立过程跟执行上下文的建设无关....
作用域能够了解为变量的可拜访性，总共分为三种类型，别离为：
- 全局作用域
- 函数作用域
- 块级作用域，ES6 中的
let、const就能够产生该作用域
其实看完后面的闭包、this 这部分外部的话，应该根本能理解作用域的一些利用。
一旦咱们将这些作用域嵌套起来，就变成了另外一个重要的知识点「作用域链」，也就是 JS 到底是如何拜访须要的变量或者函数的。
- 首先作用域链是在定义时就被确定下来的，和箭头函数里的 this 一样，后续不会扭转，JS 会一层层往上寻找须要的内容。
- 其实作用域链这个货色咱们在闭包小结中曾经看到过它的实体了：
[[Scopes]]
图中的 [[Scopes]] 是个数组，作用域的一层层往上寻找就等同于遍历 [[Scopes]]。
1. 全局作用域
全局变量是挂载在 window 对象下的变量，所以在网页中的任何地位你都能够应用并且拜访到这个全局变量
var globalName = 'global';function getName() { console.log(globalName) // global var name = 'inner' console.log(name) // inner} getName();console.log(name); // console.log(globalName); //globalfunction setName(){ vName = 'setName';}setName();console.log(vName); // setName- 从这段代码中咱们能够看到，globalName 这个变量无论在什么中央都是能够被拜访到的，所以它就是全局变量。而在 getName 函数中作为局部变量的 name 变量是不具备这种能力的
- 当然全局作用域有相应的毛病，咱们定义很多全局变量的时候，会容易引起变量命名的抵触，所以在定义变量的时候应该留神作用域的问题。
2. 函数作用域
函数中定义的变量叫作函数变量，这个时候只能在函数外部能力拜访到它，所以它的作用域也就是函数的外部，称为函数作用域
function getName () { var name = 'inner'; console.log(name); //inner}getName();console.log(name);除了这个函数外部，其余中央都是不能拜访到它的。同时，当这个函数被执行完之后，这个局部变量也相应会被销毁。所以你会看到在 getName 函数里面的 name 是拜访不到的
3. 块级作用域
ES6 中新增了块级作用域，最间接的体现就是新增的 let 关键词，应用 let 关键词定义的变量只能在块级作用域中被拜访，有“暂时性死区”的特点，也就是说这个变量在定义之前是不能被应用的。
在 JS 编码过程中 if 语句及 for 语句前面 {...} 这外面所包含的，就是块级作用域
console.log(a) //a is not definedif(true){ let a = '123'； console.log(a)； // 123}console.log(a) //a is not defined从这段代码能够看出，变量 a 是在if 语句{...}中由let 关键词进行定义的变量，所以它的作用域是 if 语句括号中的那局部，而在里面进行拜访 a 变量是会报错的，因为这里不是它的作用域。所以在 if 代码块的前后输入 a 这个变量的后果，控制台会显示 a 并没有定义
TCP的牢靠传输机制
TCP 的牢靠传输机制是基于间断 ARQ 协定和滑动窗口协定的。
TCP 协定在发送方维持了一个发送窗口，发送窗口以前的报文段是曾经发送并确认了的报文段，发送窗口中蕴含了曾经发送但 未确认的报文段和容许发送但还未发送的报文段，发送窗口当前的报文段是缓存中还不容许发送的报文段。当发送方向接管方发 送报文时，会顺次发送窗口内的所有报文段，并且设置一个定时器，这个定时器能够了解为是最早发送但未收到确认的报文段。 如果在定时器的工夫内收到某一个报文段的确认答复，则滑动窗口，将窗口的首部向后滑动到确认报文段的后一个地位，此时如 果还有已发送但没有确认的报文段，则从新设置定时器，如果没有了则敞开定时器。如果定时器超时，则从新发送所有曾经发送 但还未收到确认的报文段，并将超时的距离设置为以前的两倍。当发送方收到接管方的三个冗余的确认应答后，这是一种批示， 阐明该报文段当前的报文段很有可能产生失落了，那么发送方会启用疾速重传的机制，就是以后定时器完结前，发送所有的已发 送但确认的报文段。
接管方应用的是累计确认的机制，对于所有按序达到的报文段，接管方返回一个报文段的必定答复。如果收到了一个乱序的报文 段，那么接方会间接抛弃，并返回一个最近的按序达到的报文段的必定答复。应用累计确认保障了返回的确认号之前的报文段都 曾经按序达到了，所以发送窗口能够挪动到已确认报文段的前面。
发送窗口的大小是变动的，它是由接管窗口残余大小和网络中拥塞水平来决定的，TCP 就是通过管制发送窗口的长度来管制报文 段的发送速率。
然而 TCP 协定并不齐全和滑动窗口协定雷同，因为许多的 TCP 实现会将失序的报文段给缓存起来，并且产生重传时，只会重 传一个报文段，因而 TCP 协定的牢靠传输机制更像是窗口滑动协定和抉择重传协定的一个混合体。
viewport
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> // width 设置viewport宽度，为一个正整数，或字符串‘device-width’ // device-width 设施宽度 // height 设置viewport高度，个别设置了宽度，会主动解析出高度，能够不必设置 // initial-scale 默认缩放比例（初始缩放比例），为一个数字，能够带小数 // minimum-scale 容许用户最小缩放比例，为一个数字，能够带小数 // maximum-scale 容许用户最大缩放比例，为一个数字，能够带小数 // user-scalable 是否容许手动缩放延长发问
- 怎么解决 挪动端
1px被 渲染成2px问题
- 怎么解决 挪动端
部分解决
meta标签中的viewport属性 ，initial-scale设置为1rem依照设计稿规范走，外加利用transfrome的scale(0.5)放大一倍即可；
全局解决
mate标签中的viewport属性 ，initial-scale设置为0.5rem依照设计稿规范走即可
HTTPS是如何保障平安的？
先了解两个概念：
- 对称加密：即通信的双⽅都使⽤同⼀个秘钥进⾏加解密，对称加密尽管很简略性能也好，然而⽆法解决⾸次把秘钥发给对⽅的问题，很容易被⿊客拦挡秘钥。
- ⾮对称加密：
- 私钥 + 公钥= 密钥对
- 即⽤私钥加密的数据,只有对应的公钥能力解密,⽤公钥加密的数据,只有对应的私钥能力解密
- 因为通信双⽅的⼿⾥都有⼀套⾃⼰的密钥对,通信之前双⽅会先把⾃⼰的公钥都先发给对⽅
- 而后对⽅再拿着这个公钥来加密数据响应给对⽅,等到到了对⽅那⾥,对⽅再⽤⾃⼰的私钥进⾏解密
⾮对称加密尽管安全性更⾼，然而带来的问题就是速度很慢，影响性能。
解决⽅案：
联合两种加密⽅式，将对称加密的密钥使⽤⾮对称加密的公钥进⾏加密，而后发送进来，接管⽅使⽤私钥进⾏解密失去对称加密的密钥，而后双⽅能够使⽤对称加密来进⾏沟通。
此时⼜带来⼀个问题，两头⼈问题：
如果此时在客户端和服务器之间存在⼀个两头⼈,这个两头⼈只须要把本来双⽅通信互发的公钥,换成⾃⼰的公钥,这样两头⼈就能够轻松解密通信双⽅所发送的所有数据。
所以这个时候须要⼀个平安的第三⽅颁发证书（CA），证实身份的身份，防⽌被两头⼈攻打。 证书中包含：签发者、证书⽤途、使⽤者公钥、使⽤者私钥、使⽤者的HASH算法、证书到期工夫等。
然而问题来了，如果两头⼈篡改了证书，那么身份证明是不是就⽆效了？这个证实就⽩买了，这个时候须要⼀个新的技术，数字签名。
数字签名就是⽤CA⾃带的HASH算法对证书的内容进⾏HASH失去⼀个摘要，再⽤CA的私钥加密，最终组成数字签名。当别⼈把他的证书发过来的时候,我再⽤同样的Hash算法,再次⽣成音讯摘要，而后⽤CA的公钥对数字签名解密,失去CA创立的音讯摘要,两者⼀⽐,就晓得两头有没有被⼈篡改了。这个时候就能最⼤水平保障通信的平安了。
即时通讯的实现：短轮询、长轮询、SSE 和 WebSocket 间的区别？
短轮询和长轮询的目标都是用于实现客户端和服务器端的一个即时通讯。
短轮询的基本思路： 浏览器每隔一段时间向浏览器发送 http 申请，服务器端在收到申请后，不管是否有数据更新，都间接进行响应。这种形式实现的即时通信，实质上还是浏览器发送申请，服务器承受申请的一个过程，通过让客户端一直的进行申请，使得客户端可能模仿实时地收到服务器端的数据的变动。这种形式的长处是比较简单，易于了解。毛病是这种形式因为须要一直的建设 http 连贯，重大节约了服务器端和客户端的资源。当用户减少时，服务器端的压力就会变大，这是很不合理的。
长轮询的基本思路： 首先由客户端向服务器发动申请，当服务器收到客户端发来的申请后，服务器端不会间接进行响应，而是先将这个申请挂起，而后判断服务器端数据是否有更新。如果有更新，则进行响应，如果始终没有数据，则达到肯定的工夫限度才返回。客户端 JavaScript 响应处理函数会在解决完服务器返回的信息后，再次发出请求，从新建设连贯。长轮询和短轮询比起来，它的长处是显著缩小了很多不必要的 http 申请次数，相比之下节约了资源。长轮询的毛病在于，连贯挂起也会导致资源的节约。
SSE 的根本思维： 服务器应用流信息向服务器推送信息。严格地说，http 协定无奈做到服务器被动推送信息。然而，有一种变通方法，就是服务器向客户端申明，接下来要发送的是流信息。也就是说，发送的不是一次性的数据包，而是一个数据流，会连续不断地发送过去。这时，客户端不会敞开连贯，会始终等着服务器发过来的新的数据流，视频播放就是这样的例子。SSE 就是利用这种机制，应用流信息向浏览器推送信息。它基于 http 协定，目前除了 IE/Edge，其余浏览器都反对。它绝对于后面两种形式来说，不须要建设过多的 http 申请，相比之下节约了资源。
WebSocket 是 HTML5 定义的一个新协定议，与传统的 http 协定不同，该协定容许由服务器被动的向客户端推送信息。应用 WebSocket 协定的毛病是在服务器端的配置比较复杂。WebSocket 是一个全双工的协定，也就是通信单方是平等的，能够互相发送音讯，而 SSE 的形式是单向通信的，只能由服务器端向客户端推送信息，如果客户端须要发送信息就是属于下一个 http 申请了。
下面的四个通信协议，前三个都是基于HTTP协定的。
对于这四种即便通信协议，从性能的角度来看： WebSocket > 长连贯（SEE） > 长轮询 > 短轮询 然而，咱们如果思考浏览器的兼容性问题，程序就恰恰相反了： 短轮询 > 长轮询 > 长连贯（SEE） > WebSocket 所以，还是要依据具体的应用场景来判断应用哪种形式。
对 WebSocket 的了解
WebSocket是HTML5提供的一种浏览器与服务器进行全双工通信的网络技术，属于应用层协定。它基于TCP传输协定，并复用HTTP的握手通道。浏览器和服务器只须要实现一次握手，两者之间就间接能够创立持久性的连贯， 并进行双向数据传输。
WebSocket 的呈现就解决了半双工通信的弊病。它最大的特点是：服务器能够向客户端被动推动音讯，客户端也能够被动向服务器推送音讯。
WebSocket原理：客户端向 WebSocket 服务器告诉（notify）一个带有所有接收者ID（recipients IDs）的事件（event），服务器接管后立刻告诉所有沉闷的（active）客户端，只有ID在接收者ID序列中的客户端才会解决这个事件。
WebSocket 特点的如下：
- 反对双向通信，实时性更强
- 能够发送文本，也能够发送二进制数据‘’
- 建设在TCP协定之上，服务端的实现比拟容易
- 数据格式比拟轻量，性能开销小，通信高效
- 没有同源限度，客户端能够与任意服务器通信
- 协定标识符是ws（如果加密，则为wss），服务器网址就是 URL
- 与 HTTP 协定有着良好的兼容性。默认端口也是80和443，并且握手阶段采纳 HTTP 协定，因而握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
Websocket的应用办法如下：
在客户端中：
// 在index.html中间接写WebSocket，设置服务端的端口号为 9999let ws = new WebSocket('ws://localhost:9999');// 在客户端与服务端建设连贯后触发ws.onopen = function() { console.log("Connection open."); ws.send('hello');};// 在服务端给客户端发来音讯的时候触发ws.onmessage = function(res) { console.log(res); // 打印的是MessageEvent对象 console.log(res.data); // 打印的是收到的音讯};// 在客户端与服务端建设敞开后触发ws.onclose = function(evt) { console.log("Connection closed.");}; 面向对象
编程思维
- 根本思维是应用对象，类，继承，封装等基本概念来进行程序设计
长处
易保护
- 采纳面向对象思维设计的构造，可读性高，因为继承的存在，即便扭转需要，那么保护也只是在部分模块，所以保护起来是十分不便和较低成本的
- 易扩大
- 开发工作的重用性、继承性高，升高反复工作量。
- 缩短了开发周期
个别面向对象蕴含：继承，封装，多态，形象
1. 对象模式的继承
浅拷贝
var Person = { name: 'poetry', age: 18, address: { home: 'home', office: 'office', } sclools: ['x','z'],};var programer = { language: 'js',};function extend(p, c){ var c = c || {}; for( var prop in p){ c[prop] = p[prop]; }}extend(Person, programer);programer.name; // poetryprogramer.address.home; // homeprogramer.address.home = 'house'; //housePerson.address.home; // house从下面的后果看出，浅拷贝的缺点在于批改了子对象中援用类型的值，会影响到父对象中的值，因为在浅拷贝中对援用类型的拷贝只是拷贝了地址，指向了内存中同一个正本
深拷贝
function extendDeeply(p, c){ var c = c || {}; for (var prop in p){ if(typeof p[prop] === "object"){ c[prop] = (p[prop].constructor === Array)?[]:{}; extendDeeply(p[prop], c[prop]); }else{ c[prop] = p[prop]; } }}利用递归进行深拷贝，这样子对象的批改就不会影响到父对象
extendDeeply(Person, programer);programer.address.home = 'poetry';Person.address.home; // home利用call和apply继承
function Parent(){ this.name = "abc"; this.address = {home: "home"};}function Child(){ Parent.call(this); this.language = "js"; }ES5中的Object.create()
var p = { name : 'poetry'};var obj = Object.create(p);obj.name; // poetryObject.create()作为new操作符的代替计划是ES5之后才进去的。咱们也能够本人模仿该办法：//模仿Object.create()办法function myCreate(o){ function F(){}; F.prototype = o; o = new F(); return o;}var p = { name : 'poetry'};var obj = myCreate(p);obj.name; // poetry目前，各大浏览器的最新版本（包含IE9）都部署了这个办法。如果遇到老式浏览器，能够用上面的代码自行部署
if (!Object.create) { Object.create = function (o) { function F() {} F.prototype = o; return new F(); }; }2. 类的继承
Object.create()function Person(name, age){}Person.prototype.headCount = 1;Person.prototype.eat = function(){ console.log('eating...');}function Programmer(name, age, title){}Programmer.prototype = Object.create(Person.prototype); //建设继承关系Programmer.prototype.constructor = Programmer; // 批改constructor的指向调用父类办法
function Person(name, age){ this.name = name; this.age = age;}Person.prototype.headCount = 1;Person.prototype.eat = function(){ console.log('eating...');}function Programmer(name, age, title){ Person.apply(this, arguments); // 调用父类的结构器}Programmer.prototype = Object.create(Person.prototype);Programmer.prototype.constructor = Programmer;Programmer.prototype.language = "js";Programmer.prototype.work = function(){ console.log('i am working code in '+ this.language); Person.prototype.eat.apply(this, arguments); // 调用父类上的办法}3. 封装
命名空间
- js是没有命名空间的，因而能够用对象模仿
var app = {}; // 命名空间app//模块1app.module1 = { name: 'poetry', f: function(){ console.log('hi robot'); }};app.module1.name; // "poetry"app.module1.f(); // hi robot对象的属性外界是可读可写 如何来达到封装的额目标？答：可通过闭包+局部变量来实现- 在构造函数外部申明局部变量 和一般办法
- 因为作用域的关系 只有构造函数内的办法
- 能力拜访局部变量 而办法对于外界是凋谢的
- 因而能够通过办法来拜访 本来外界拜访不到的局部变量 达到函数封装的目标
function Girl(name,age){ var love = '小明';//love 是局部变量 精确说不属于对象 属于这个函数的额激活对象 函数调用时必将产生一个激活对象 love在激活对象身上 激活对象有作用域的关系 有方法拜访 加一个函数提供外界拜访 this.name = name; this.age = age; this.say = function () { return love; }; this.movelove = function (){ love = '小轩'; //35 }} var g = new Girl('yinghong',22);console.log(g);console.log(g.say());//小明console.log(g.movelove());//undefined 因为35行没有返回console.log(g.say());//小轩function fn(){ function t(){ //var age = 22;//申明age变量 在t的激活对象上 age = 22;//赋值操作 t的激活对象上找age属性 ，找不到 找fn的激活对象....再找到 最终找到window.age = 22; //不加var就是操作window全局属性 } t();}console.log(fn());//undefined4. 动态成员
面向对象中的静态方法-动态属性：没有new对象 也能援用静态方法属性
function Person(name){ var age = 100; this.name = name;}//动态成员Person.walk = function(){ console.log('static');};Person.walk(); // static5. 公有与私有
function Person(id){ // 公有属性与办法 var name = 'poetry'; var work = function(){ console.log(this.id); }; //私有属性与办法 this.id = id; this.say = function(){ console.log('say hello'); work.call(this); };};var p1 = new Person(123);p1.name; // undefinedp1.id; // 123p1.say(); // say hello 1236. 模块化
var moduleA;moduleA = function() { var prop = 1; function func() {} return { func: func, prop: prop };}(); // 立刻执行匿名函数7. 多态
多态:同一个父类继承进去的子类各有各的状态
function Cat(){ this.eat = '肉';}function Tiger(){ this.color = '黑黄相间';}function Cheetah(){ this.color = '报文';}function Lion(){ this.color = '土黄色';}Tiger.prototype = Cheetah.prototype = Lion.prototype = new Cat();//共享一个先人 Catvar T = new Tiger();var C = new Cheetah();var L = new Lion();console.log(T.color);console.log(C.color);console.log(L.color);console.log(T.eat);console.log(C.eat);console.log(L.eat);8. 抽象类
在结构器中 throw new Error(''); 抛异样。这样避免这个类被间接调用function DetectorBase() { throw new Error('Abstract class can not be invoked directly!');}DetectorBase.prototype.detect = function() { console.log('Detection starting...');};DetectorBase.prototype.stop = function() { console.log('Detection stopped.');};DetectorBase.prototype.init = function() { throw new Error('Error');};// var d = new DetectorBase();// Uncaught Error: Abstract class can not be invoked directly!function LinkDetector() {}LinkDetector.prototype = Object.create(DetectorBase.prototype);LinkDetector.prototype.constructor = LinkDetector;var l = new LinkDetector();console.log(l); //LinkDetector {}__proto__: LinkDetectorl.detect(); //Detection starting...l.init(); //Uncaught Error: Error