乐趣区

关于前端:前端二面面试题附答案

jiezi

Proxy 代理

proxy 在指标对象的外层搭建了一层拦挡，外界对指标对象的某些操作，必须通过这层拦挡

var proxy = new Proxy(target, handler);

new Proxy()示意生成一个 Proxy 实例，target参数示意所要拦挡的指标对象，handler参数也是一个对象，用来定制拦挡行为

var target = {name: 'poetries'};
 var logHandler = {get: function(target, key) {console.log(`${key} 被读取 `);
     return target[key];
   },
   set: function(target, key, value) {console.log(`${key} 被设置为 ${value}`);
     target[key] = value;
   }
 }
 var targetWithLog = new Proxy(target, logHandler);

 targetWithLog.name; // 控制台输入：name 被读取
 targetWithLog.name = 'others'; // 控制台输入：name 被设置为 others

 console.log(target.name); // 控制台输入: others
  • targetWithLog 读取属性的值时，实际上执行的是 logHandler.get：在控制台输入信息，并且读取被代理对象 target 的属性。
  • 在 targetWithLog 设置属性值时，实际上执行的是 logHandler.set：在控制台输入信息，并且设置被代理对象 target 的属性的值
// 因为拦挡函数总是返回 35，所以拜访任何属性都失去 35
var proxy = new Proxy({}, {get: function(target, property) {return 35;}
});

proxy.time // 35
proxy.name // 35
proxy.title // 35

Proxy 实例也能够作为其余对象的原型对象

var proxy = new Proxy({}, {get: function(target, property) {return 35;}
});

let obj = Object.create(proxy);
obj.time // 35

proxy对象是 obj 对象的原型，obj对象自身并没有 time 属性，所以依据原型链，会在 proxy 对象上读取该属性，导致被拦挡

Proxy 的作用

对于代理模式 Proxy 的作用次要体现在三个方面

  • 拦挡和监督内部对对象的拜访
  • 升高函数或类的复杂度
  • 在简单操作前对操作进行校验或对所需资源进行治理

Proxy 所能代理的范畴 –handler

实际上 handler 自身就是 ES6 所新设计的一个对象. 它的作用就是用来 自定义代理对象的各种可代理操作。它自身一共有 13 中办法, 每种办法都能够代理一种操作. 其 13 种办法如下

// 在读取代理对象的原型时触发该操作，比方在执行 Object.getPrototypeOf(proxy) 时。handler.getPrototypeOf()

// 在设置代理对象的原型时触发该操作，比方在执行 Object.setPrototypeOf(proxy, null) 时。handler.setPrototypeOf()


// 在判断一个代理对象是否是可扩大时触发该操作，比方在执行 Object.isExtensible(proxy) 时。handler.isExtensible()


// 在让一个代理对象不可扩大时触发该操作，比方在执行 Object.preventExtensions(proxy) 时。handler.preventExtensions()

// 在获取代理对象某个属性的属性形容时触发该操作，比方在执行 Object.getOwnPropertyDescriptor(proxy, "foo") 时。handler.getOwnPropertyDescriptor()


// 在定义代理对象某个属性时的属性形容时触发该操作，比方在执行 Object.defineProperty(proxy, "foo", {}) 时。andler.defineProperty()


// 在判断代理对象是否领有某个属性时触发该操作，比方在执行 "foo" in proxy 时。handler.has()

// 在读取代理对象的某个属性时触发该操作，比方在执行 proxy.foo 时。handler.get()


// 在给代理对象的某个属性赋值时触发该操作，比方在执行 proxy.foo = 1 时。handler.set()

// 在删除代理对象的某个属性时触发该操作，比方在执行 delete proxy.foo 时。handler.deleteProperty()

// 在获取代理对象的所有属性键时触发该操作，比方在执行 Object.getOwnPropertyNames(proxy) 时。handler.ownKeys()

// 在调用一个指标对象为函数的代理对象时触发该操作，比方在执行 proxy() 时。handler.apply()


// 在给一个指标对象为构造函数的代理对象结构实例时触发该操作，比方在执行 new proxy() 时。handler.construct()

为何 Proxy 不能被 Polyfill

  • 如 class 能够用 function 模仿；promise能够用 callback 模仿
  • 然而 proxy 不能用 Object.defineProperty 模仿

目前谷歌的 polyfill 只能实现局部的性能，如 get、set https://github.com/GoogleChro…

// commonJS require
const proxyPolyfill = require('proxy-polyfill/src/proxy')();

// Your environment may also support transparent rewriting of commonJS to ES6:
import ProxyPolyfillBuilder from 'proxy-polyfill/src/proxy';
const proxyPolyfill = ProxyPolyfillBuilder();

// Then use...
const myProxy = new proxyPolyfill(...);

理解 this 嘛，bind，call，apply 具体指什么

它们都是函数的办法

call: Array.prototype.call(this, args1, args2]) apply: Array.prototype.apply(this, [args1, args2])：ES6 之前用来开展数组调用, foo.appy(null, [])，ES6 之后应用 … 操作符

  • New 绑定 > 显示绑定 > 隐式绑定 > 默认绑定
  • 如果须要应用 bind 的柯里化和 apply 的数组解构，绑定到 null，尽可能应用 Object.create(null) 创立一个 DMZ 对象

四条规定：

  • 默认绑定，没有其余润饰（bind、apply、call)，在非严格模式下定义指向全局对象，在严格模式下定义指向 undefined
function foo() {console.log(this.a); 
}

var a = 2;
foo();
  • 隐式绑定：调用地位是否有上下文对象，或者是否被某个对象领有或者蕴含，那么隐式绑定规定会把函数调用中的 this 绑定到这个上下文对象。而且，对象属性链只有上一层或者说最初一层在调用地位中起作用
function foo() {console.log(this.a);
}

var obj = {
  a: 2,
  foo: foo,
}

obj.foo(); // 2
  • 显示绑定：通过在函数上运行 call 和 apply，来显示的绑定 this
function foo() {console.log(this.a);
}

var obj = {a: 2};

foo.call(obj);

显示绑定之硬绑定

function foo(something) {console.log(this.a, something);

  return this.a + something;
}

function bind(fn, obj) {return function() {return fn.apply(obj, arguments);
  };
}

var obj = {a: 2}

var bar = bind(foo, obj);

New 绑定，new 调用函数会创立一个全新的对象，并将这个对象绑定到函数调用的 this。

  • New 绑定时，如果是 new 一个硬绑定函数，那么会用 new 新建的对象替换这个硬绑定 this，
function foo(a) {this.a = a;}

var bar = new foo(2);
console.log(bar.a)

前端进阶面试题具体解答

compose

题目形容: 实现一个 compose 函数

// 用法如下:
function fn1(x) {return x + 1;}
function fn2(x) {return x + 2;}
function fn3(x) {return x + 3;}
function fn4(x) {return x + 4;}
const a = compose(fn1, fn2, fn3, fn4);
console.log(a(1)); // 1+4+3+2+1=11

实现代码如下:

function compose(...fn) {if (!fn.length) return (v) => v;
  if (fn.length === 1) return fn[0];
  return fn.reduce((pre, cur) =>
      (...args) =>
        pre(cur(...args))
  );
}

说一下 web worker

在 HTML 页面中，如果在执行脚本时，页面的状态是不可相应的，直到脚本执行实现后，页面才变成可相应。web worker 是运行在后盾的 js，独立于其余脚本，不会影响页面的性能。并且通过 postMessage 将后果回传到主线程。这样在进行简单操作的时候，就不会阻塞主线程了。

如何创立 web worker：

  1. 检测浏览器对于 web worker 的支持性
  2. 创立 web worker 文件（js，回传函数等）
  3. 创立 web worker 对象

事件是什么？事件模型？

事件是用户操作网页时产生的交互动作，比方 click/move，事件除了用户触发的动作外，还能够是文档加载，窗口滚动和大小调整。事件被封装成一个 event 对象，蕴含了该事件产生时的所有相干信息（event 的属性）以及能够对事件进行的操作（event 的办法）。

事件是用户操作网页时产生的交互动作或者网页自身的一些操作，古代浏览器一共有三种事件模型：

  • DOM0 级事件模型，这种模型不会流传，所以没有事件流的概念，然而当初有的浏览器反对以冒泡的形式实现，它能够在网页中间接定义监听函数，也能够通过 js 属性来指定监听函数。所有浏览器都兼容这种形式。间接在 dom 对象上注册事件名称，就是 DOM0 写法。
  • IE 事件模型，在该事件模型中，一次事件共有两个过程，事件处理阶段和事件冒泡阶段。事件处理阶段会首先执行指标元素绑定的监听事件。而后是事件冒泡阶段，冒泡指的是事件从指标元素冒泡到 document，顺次查看通过的节点是否绑定了事件监听函数，如果有则执行。这种模型通过 attachEvent 来增加监听函数，能够增加多个监听函数，会按程序顺次执行。
  • DOM2 级事件模型，在该事件模型中，一次事件共有三个过程，第一个过程是事件捕捉阶段。捕捉指的是事件从 document 始终向下流传到指标元素，顺次查看通过的节点是否绑定了事件监听函数，如果有则执行。前面两个阶段和 IE 事件模型的两个阶段雷同。这种事件模型，事件绑定的函数是 addEventListener，其中第三个参数能够指定事件是否在捕捉阶段执行。

页面有多张图片，HTTP 是怎么的加载体现？

  • 在 HTTP 1 下，浏览器对一个域名下最大 TCP 连接数为 6，所以会申请屡次。能够用 多域名部署 解决。这样能够进步同时申请的数目，放慢页面图片的获取速度。
  • 在 HTTP 2 下，能够一瞬间加载进去很多资源，因为，HTTP2 反对多路复用，能够在一个 TCP 连贯中发送多个 HTTP 申请。

对 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，设置服务端的端口号为 9999
let 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.");
};

柯里化

题目形容: 柯里化（Currying），又称局部求值（Partial Evaluation），是把承受多个参数的函数变换成承受一个繁多参数（最后函数的第一个参数）的函数，并且返回承受余下的参数而且返回后果的新函数的技术。核心思想是把多参数传入的函数拆成单参数（或局部）函数，外部再返回调用下一个单参数（或局部）函数，顺次解决残余的参数。

实现代码如下:

function currying(fn, ...args) {
  const length = fn.length;
  let allArgs = [...args];
  const res = (...newArgs) => {allArgs = [...allArgs, ...newArgs];
    if (allArgs.length === length) {return fn(...allArgs);
    } else {return res;}
  };
  return res;
}

// 用法如下：// const add = (a, b, c) => a + b + c;
// const a = currying(add, 1);
// console.log(a(2,3))

图片懒加载

实现：getBoundClientRect 的实现形式，监听 scroll 事件（倡议给监听事件增加节流），图片加载完会从 img 标签组成的 DOM 列表中删除，最初所有的图片加载结束后须要解绑监听事件。

// scr 加载默认图片，data-src 保留施行懒加载后的图片
// <img src="./default.jpg" data-src="https://xxx.jpg" alt="" />
let imgs = [...document.querySelectorAll("img")];
const len = imgs.length;

let lazyLoad = function() {
    let count = 0;
    let deleteImgs = [];
    // 获取以后可视区的高度
    let viewHeight = document.documentElement.clientHeight;
    // 获取以后滚动条的地位(间隔顶部的间隔, 等价于 document.documentElement.scrollTop)
    let scrollTop = window.pageYOffset;
    imgs.forEach((img) => {
        // 获取元素的大小，及其绝对于视口的地位，如 bottom 为元素底部到网页顶部的间隔
        let bound = img.getBoundingClientRect();
        // 以后图片间隔网页顶部的间隔
        // let imgOffsetTop = img.offsetTop;

        // 判断图片是否在可视区内，如果在就加载（两种判断形式）// if(imgOffsetTop < scrollTop + viewHeight) 
        if (bound.top < viewHeight) {
            img.src = img.dataset.src;  // 替换待加载的图片 src
            count++;
            deleteImgs.push(img);
            // 最初所有的图片加载结束后须要解绑监听事件
            if(count === len) {document.removeEventListener("scroll", imgThrottle);
            }
        }
    });
    // 图片加载完会从 `img` 标签组成的 DOM 列表中删除
    imgs = imgs.filter((img) => !deleteImgs.includes(img));
}

window.onload = function () {lazyLoad();
};
// 应用 防抖 / 节流 优化一下滚动事件
let imgThrottle = debounce(lazyLoad, 1000);
// 监听 `scroll` 事件
window.addEventListener("scroll", imgThrottle);

ES6 之前应用 prototype 实现继承

Object.create() 会创立一个“新”对象，而后将此对象外部的 [[Prototype]] 关联到你指定的对象（Foo.prototype）。Object.create(null) 创立一个空 [[Prototype]] 链接的对象，这个对象无奈进行委托。

function Foo(name) {this.name = name;}

Foo.prototype.myName = function () {return this.name;}

// 继承属性，通过借用结构函数调用
function Bar(name, label) {Foo.call(this, name);
  this.label = label;
}

// 继承办法，创立备份
Bar.prototype = Object.create(Foo.prototype);

// 必须设置回正确的构造函数，要不然在会产生判断类型出错
Bar.prototype.constructor = Bar;

 // 必须在上一步之后
Bar.prototype.myLabel = function () {return this.label;}

var a = new Bar("a", "obj a");

a.myName(); // "a"
a.myLabel(); // "obj a"

对 keep-alive 的了解

HTTP1.0 中默认是在每次申请 / 应答，客户端和服务器都要新建一个连贯，实现之后立刻断开连接，这就是 短连贯 。当应用 Keep-Alive 模式时，Keep-Alive 性能使客户端到服务器端的连贯继续无效，当呈现对服务器的后继申请时，Keep-Alive 性能防止了建设或者从新建设连贯，这就是 长连贯。其应用办法如下：

  • HTTP1.0 版本是默认没有 Keep-alive 的（也就是默认会发送 keep-alive），所以要想连贯失去放弃，必须手动配置发送 Connection: keep-alive 字段。若想断开 keep-alive 连贯，需发送 Connection:close 字段；
  • HTTP1.1 规定了默认放弃长连贯，数据传输实现了放弃 TCP 连接不断开，期待在同域名下持续用这个通道传输数据。如果须要敞开，须要客户端发送 Connection：close 首部字段。

Keep-Alive 的 建设过程：

  • 客户端向服务器在发送申请报文同时在首部增加发送 Connection 字段
  • 服务器收到申请并解决 Connection 字段
  • 服务器回送 Connection:Keep-Alive 字段给客户端
  • 客户端接管到 Connection 字段
  • Keep-Alive 连贯建设胜利

服务端主动断开过程（也就是没有 keep-alive）：

  • 客户端向服务器只是发送内容报文（不蕴含 Connection 字段）
  • 服务器收到申请并解决
  • 服务器返回客户端申请的资源并敞开连贯
  • 客户端接管资源，发现没有 Connection 字段，断开连接

客户端申请断开连接过程：

  • 客户端向服务器发送 Connection:close 字段
  • 服务器收到申请并解决 connection 字段
  • 服务器回送响应资源并断开连接
  • 客户端接管资源并断开连接

开启 Keep-Alive 的 长处：

  • 较少的 CPU 和内存的使⽤（因为同时关上的连贯的缩小了）；
  • 容许申请和应答的 HTTP 管线化；
  • 升高拥塞管制（TCP 连贯缩小了）；
  • 缩小了后续申请的提早（⽆需再进⾏握⼿）；
  • 报告谬误⽆需敞开 TCP 连；

开启 Keep-Alive 的 毛病：

  • 长时间的 Tcp 连贯容易导致系统资源有效占用，节约系统资源。

说一下 slice splice split 的区别?

// slice(start,[end])
// slice(start,[end])办法：该办法是对数组进行局部截取，该办法返回一个新数组
// 参数 start 是截取的开始数组索引，end 参数等于你要取的最初一个字符的地位值加上 1（可选）。// 蕴含了源函数从 start 到 end 所指定的元素，然而不包含 end 元素，比方 a.slice(0,3)；// 如果呈现正数就把正数与长度相加后再划分。// slice 中的正数的绝对值若大于数组长度就会显示所有数组
// 若参数只有一个，并且参数大于 length，则为空。// 如果完结地位小于起始地位，则返回空数组
// 返回的个数是 end-start 的个数
// 不会扭转原数组
var arr = [1,2,3,4,5,6]
/*console.log(arr.slice(3))//[4,5,6] 从下标为 0 的到 3，截取 3 之后的数 console.log(arr.slice(0,3))//[1,2,3] 从下标为 0 的中央截取到下标为 3 之前的数 console.log(arr.slice(0,-2))//[1,2,3,4]console.log(arr.slice(-4,4))//[3,4]console.log(arr.slice(-7))//[1,2,3,4,5,6]console.log(arr.slice(-3,-3))// []console.log(arr.slice(8))//[]*/
// 集体总结：slice 的参数如果是负数就从左往右数，如果是正数的话就从右往左边数，// 截取的数组与数的方向统一，如果是 2 个参数则截取的是数的交加，没有交加则返回空数组 
// ps：slice 也能够切割字符串，用法和数组一样，但要留神空格也算字符

// splice(start,deletecount,item)
// start：起始地位
// deletecount：删除位数
// item：替换的 item
// 返回值为被删除的字符串
// 如果有额定的参数，那么 item 会插入到被移除元素的地位上。// splice: 移除，splice 办法从 array 中移除一个或多个数组，并用新的 item 替换它们。// 举一个简略的例子 
var a=['a','b','c']; 
var b=a.splice(1,1,'e','f'); 
 console.log(a) //['a', 'e', 'f', 'c']
 console.log(b) //['b']

 var a = [1, 2, 3, 4, 5, 6];
//console.log("被删除的为：",a.splice(1, 1, 8, 9)); // 被删除的为：2
// console.log("a 数组元素：",a); //1,8,9,3,4,5,6

// console.log("被删除的为：", a.splice(0, 2)); // 被删除的为：1,2
// console.log("a 数组元素：", a) //3,4,5,6
console.log("被删除的为：", a.splice(1, 0, 2, 2)) // 插入 第二个数为 0，示意删除 0 个  
console.log("a 数组元素：", a) //1,2,2,2,3,4,5,6

// split(字符串)
// string.split(separator,limit)：split 办法把这个 string 宰割成片段来创立一个字符串数组。// 可选参数 limit 能够限度被宰割的片段数量。// separator 参数能够是一个字符串或一个正则表达式。// 如果 separator 是一个空字符，会返回一个单字符的数组，不会扭转原数组。var a="0123456";  
var b=a.split("",3);  
console.log(b);//b=["0","1","2"]
// 留神：String.split() 执行的操作与 Array.join 执行的操作是相同的。

说一下原型链和原型链的继承吧

  • 所有一般的 [[Prototype]] 链最终都会指向内置的 Object.prototype，其蕴含了 JavaScript 中许多通用的性能
  • 为什么能创立“类”，借助一种非凡的属性：所有的函数默认都会领有一个名为 prototype 的共有且不可枚举的属性，它会指向另外一个对象，这个对象通常被称为函数的原型
function Person(name) {this.name = name;}

Person.prototype.constructor = Person
  • 在产生 new 结构函数调用时，会将创立的新对象的 [[Prototype]] 链接到 Person.prototype 指向的对象，这个机制就被称为原型链继承
  • 办法定义在原型上，属性定义在构造函数上
  • 首先要说一下 JS 原型和实例的关系：每个构造函数（constructor）都有一个原型对象（prototype），这个原型对象蕴含一个指向此构造函数的指针属性，通过 new 进行结构函数调用生成的实例，此实例蕴含一个指向原型对象的指针，也就是通过 [[Prototype]] 链接到了这个原型对象
  • 而后说一下 JS 中属性的查找：当咱们试图援用实例对象的某个属性时，是依照这样的形式去查找的，首先查找实例对象上是否有这个属性，如果没有找到，就去结构这个实例对象的构造函数的 prototype 所指向的对象下来查找，如果还找不到，就从这个 prototype 对象所指向的构造函数的 prototype 原型对象下来查找
  • 什么是原型链：这样逐级查找形似一个链条，且通过 [[Prototype]] 属性链接，所以被称为原型链
  • 什么是原型链继承，类比类的继承：当有两个构造函数 A 和 B，将一个构造函数 A 的原型对象的，通过其 [[Prototype]] 属性链接到另外一个 B 构造函数的原型对象时，这个过程被称之为原型继承。

标准答案更正确的解释

什么是原型链？

当对象查找一个属性的时候，如果没有在本身找到，那么就会查找本身的原型，如果原型还没有找到，那么会持续查找原型的原型，直到找到 Object.prototype 的原型时，此时原型为 null，查找进行。
这种通过 通过原型链接的逐级向上的查找链被称为原型链

什么是原型继承？

一个对象能够应用另外一个对象的属性或者办法，就称之为继承。具体是通过将这个对象的原型设置为另外一个对象，这样依据原型链的规定，如果查找一个对象属性且在本身不存在时，就会查找另外一个对象，相当于一个对象能够应用另外一个对象的属性和办法了。

对line-height 的了解及其赋值形式

（1）line-height 的概念：

  • line-height 指一行文本的高度，蕴含了字间距，实际上是下一行基线到上一行基线间隔；
  • 如果一个标签没有定义 height 属性，那么其最终体现的高度由 line-height 决定；
  • 一个容器没有设置高度，那么撑开容器高度的是 line-height，而不是容器内的文本内容；
  • 把 line-height 值设置为 height 一样大小的值能够实现单行文字的垂直居中；
  • line-height 和 height 都能撑开一个高度；

（2）line-height 的赋值形式：

  • 带单位：px 是固定值，而 em 会参考父元素 font-size 值计算本身的行高
  • 纯数字：会把比例传递给后辈。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px
  • 百分比：将计算后的值传递给后辈

HTTP3

Google 在推 SPDY 的时候就曾经意识到了这些问题，于是就重整旗鼓搞了一个基于 UDP 协定的“QUIC”协定，让 HTTP 跑在 QUIC 上而不是 TCP 上。次要个性如下：

  • 实现了相似 TCP 的流量管制、传输可靠性的性能。尽管 UDP 不提供可靠性的传输，但 QUIC 在 UDP 的根底之上减少了一层来保证数据可靠性传输。它提供了数据包重传、拥塞管制以及其余一些 TCP 中存在的个性
  • 实现了疾速握手性能。因为 QUIC 是基于 UDP 的，所以 QUIC 能够实现应用 0 -RTT 或者 1 -RTT 来建设连贯，这意味着 QUIC 能够用最快的速度来发送和接收数据。
  • 集成了 TLS 加密性能。目前 QUIC 应用的是 TLS1.3，相较于晚期版本 TLS1.3 有更多的长处，其中最重要的一点是缩小了握手所破费的 RTT 个数。
  • 多路复用，彻底解决 TCP 中队头阻塞的问题。

DOM 节点操作

（1）创立新节点

createDocumentFragment()    // 创立一个 DOM 片段
createElement()   // 创立一个具体的元素
createTextNode()   // 创立一个文本节点

（2）增加、移除、替换、插入

appendChild(node)
removeChild(node)
replaceChild(new,old)
insertBefore(new,old)

（3）查找

getElementById();
getElementsByName();
getElementsByTagName();
getElementsByClassName();
querySelector();
querySelectorAll();

（4）属性操作

getAttribute(key);
setAttribute(key, value);
hasAttribute(key);
removeAttribute(key);

即时通讯的实现：短轮询、长轮询、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 所以，还是要依据具体的应用场景来判断应用哪种形式。

Generator

Generator 是 ES6中新增的语法，和 Promise 一样，都能够用来异步编程。Generator 函数能够说是 Iterator 接口的具体实现形式。Generator 最大的特点就是能够管制函数的执行。

  • function* 用来申明一个函数是生成器函数，它比一般的函数申明多了一个 *,* 的地位比拟随便能够挨着 function 关键字，也能够挨着函数名
  • yield 产出的意思，这个关键字只能呈现在生成器函数体内，然而生成器中也能够没有yield 关键字，函数遇到 yield 的时候会暂停，并把 yield 前面的表达式后果抛出去
  • next作用是将代码的控制权交还给生成器函数
function *foo(x) {let y = 2 * (yield (x + 1))
  let z = yield (y / 3)
  return (x + y + z)
}
let it = foo(5)
console.log(it.next())   // => {value: 6, done: false}
console.log(it.next(12)) // => {value: 8, done: false}
console.log(it.next(13)) // => {value: 42, done: true}

下面这个示例就是一个 Generator 函数，咱们来剖析其执行过程：

  • 首先 Generator 函数调用时它会返回一个迭代器
  • 当执行第一次 next 时，传参会被疏忽，并且函数暂停在 yield (x + 1) 处，所以返回 5 + 1 = 6
  • 当执行第二次 next 时，传入的参数等于上一个 yield 的返回值，如果你不传参，yield 永远返回 undefined。此时 let y = 2 12，所以第二个 yield 等于 2 12 / 3 = 8
  • 当执行第三次 next 时，传入的参数会传递给 z，所以 z = 13, x = 5, y = 24，相加等于 42

yield理论就是暂缓执行的标示，每执行一次 next()，相当于指针挪动到下一个yield 地位

总结一下 ，Generator 函数是 ES6 提供的一种异步编程解决方案。通过 yield 标识位和 next() 办法调用，实现函数的分段执行

遍历器对象生成函数，最大的特点是能够交出函数的执行权

  • function 关键字与函数名之间有一个星号；
  • 函数体外部应用 yield表达式，定义不同的外部状态；
  • next指针移向下一个状态

这里你能够说说 Generator的异步编程，以及它的语法糖 async 和 awiat，传统的异步编程。ES6 之前，异步编程大抵如下

  • 回调函数
  • 事件监听
  • 公布 / 订阅

传统异步编程计划之一：协程，多个线程相互合作，实现异步工作。

// 应用 * 示意这是一个 Generator 函数
// 外部能够通过 yield 暂停代码
// 通过调用 next 复原执行
function* test() {
  let a = 1 + 2;
  yield 2;
  yield 3;
}
let b = test();
console.log(b.next()); // >  {value: 2, done: false}
console.log(b.next()); // >  {value: 3, done: false}
console.log(b.next()); // >  {value: undefined, done: true}

从以上代码能够发现，加上 *的函数执行后领有了 next 函数，也就是说函数执行后返回了一个对象。每次调用 next 函数能够继续执行被暂停的代码。以下是 Generator 函数的简略实现

// cb 也就是编译过的 test 函数
function generator(cb) {return (function() {
    var object = {
      next: 0,
      stop: function() {}
    };

    return {next: function() {var ret = cb(object);
        if (ret === undefined) return {value: undefined, done: true};
        return {
          value: ret,
          done: false
        };
      }
    };
  })();}
// 如果你应用 babel 编译后能够发现 test 函数变成了这样
function test() {
  var a;
  return generator(function(_context) {while (1) {switch ((_context.prev = _context.next)) {
        // 能够发现通过 yield 将代码宰割成几块
        // 每次执行 next 函数就执行一块代码
        // 并且表明下次须要执行哪块代码
        case 0:
          a = 1 + 2;
          _context.next = 4;
          return 2;
        case 4:
          _context.next = 6;
          return 3;
        // 执行结束
        case 6:
        case "end":
          return _context.stop();}
    }
  });
}

absolute 与 fixed 共同点与不同点

共同点：

  • 扭转行内元素的出现形式，将 display 置为 inline-block
  • 使元素脱离一般文档流，不再占据文档物理空间
  • 笼罩非定位文档元素

不同点：

  • abuselute 与 fixed 的根元素不同，abuselute 的根元素能够设置，fixed 根元素是浏览器。
  • 在有滚动条的页面中，absolute 会跟着父元素进行挪动，fixed 固定在页面的具体位置。

懒加载的特点

  • 缩小无用资源的加载：应用懒加载显著缩小了服务器的压力和流量，同时也减小了浏览器的累赘。
  • 晋升用户体验: 如果同时加载较多图片，可能须要期待的工夫较长，这样影响了用户体验，而应用懒加载就能大大的进步用户体验。
  • 避免加载过多图片而影响其余资源文件的加载：会影响网站利用的失常应用。
退出移动版