关于前端:滴滴前端面试题合集

DNS 记录和报文

DNS 服务器中以资源记录的模式存储信息，每一个 DNS 响应报文个别蕴含多条资源记录。一条资源记录的具体的格局为

（Name，Value，Type，TTL）

其中 TTL 是资源记录的生存工夫，它定义了资源记录可能被其余的 DNS 服务器缓存多长时间。

罕用的一共有四种 Type 的值，别离是 A、NS、CNAME 和 MX，不同 Type 的值，对应资源记录代表的意义不同：

• 如果 Type = A，则 Name 是主机名，Value 是主机名对应的 IP 地址。因而一条记录为 A 的资源记录，提供了标 准的主机名到 IP 地址的映射。
• 如果 Type = NS，则 Name 是个域名，Value 是负责该域名的 DNS 服务器的主机名。这个记录次要用于 DNS 链式 查问时，返回下一级须要查问的 DNS 服务器的信息。
• 如果 Type = CNAME，则 Name 为别名，Value 为该主机的标准主机名。该条记录用于向查问的主机返回一个主机名 对应的标准主机名，从而通知查问主机去查问这个主机名的 IP 地址。主机别名次要是为了通过给一些简单的主机名提供 一个便于记忆的简略的别名。
• 如果 Type = MX，则 Name 为一个邮件服务器的别名，Value 为邮件服务器的标准主机名。它的作用和 CNAME 是一 样的，都是为了解决标准主机名不利于记忆的毛病。

对原型、原型链的了解

在 JavaScript 中是应用构造函数来新建一个对象的，每一个构造函数的外部都有一个 prototype 属性，它的属性值是一个对象，这个对象蕴含了能够由该构造函数的所有实例共享的属性和办法。当应用构造函数新建一个对象后，在这个对象的外部将蕴含一个指针，这个指针指向构造函数的 prototype 属性对应的值，在 ES5 中这个指针被称为对象的原型。一般来说不应该可能获取到这个值的，然而当初浏览器中都实现了 proto 属性来拜访这个属性，然而最好不要应用这个属性，因为它不是标准中规定的。ES5 中新增了一个 Object.getPrototypeOf() 办法，能够通过这个办法来获取对象的原型。

当拜访一个对象的属性时，如果这个对象外部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有本人的原型，于是就这样始终找上来，也就是原型链的概念。原型链的止境一般来说都是 Object.prototype 所以这就是新建的对象为什么可能应用 toString() 等办法的起因。

特点： JavaScript 对象是通过援用来传递的，创立的每个新对象实体中并没有一份属于本人的原型正本。当批改原型时，与之相干的对象也会继承这一扭转。

对 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.");
}; 

其余值到布尔类型的值的转换规则？

以下这些是假值：
• undefined
• null
• false
• +0、-0 和 NaN
• “”

假值的布尔强制类型转换后果为 false。从逻辑上说，假值列表以外的都应该是真值。

代码输入后果

var x = 3;
var y = 4;
var obj = {
    x: 1,
    y: 6,
    getX: function() {
        var x = 5;
        return function() {return this.x;}();},
    getY: function() {
        var y = 7;
        return this.y;
    }
}
console.log(obj.getX()) // 3
console.log(obj.getY()) // 6

输入后果：3 6

解析：

1. 咱们晓得，匿名函数的 this 是指向全局对象的，所以 this 指向 window，会打印出 3；
2. getY 是由 obj 调用的，所以其 this 指向的是 obj 对象，会打印出 6。

代码输入后果

async function async1() {console.log("async1 start");
  await async2();
  console.log("async1 end");
  setTimeout(() => {console.log('timer1')
  }, 0)
}
async function async2() {setTimeout(() => {console.log('timer2')
  }, 0)
  console.log("async2");
}
async1();
setTimeout(() => {console.log('timer3')
}, 0)
console.log("start")

输入后果如下：

async1 start
async2
start
async1 end
timer2
timer3
timer1

代码的执行过程如下：

1. 首先进入async1，打印出async1 start；
2. 之后遇到async2，进入async2，遇到定时器timer2，退出宏工作队列，之后打印async2；
3. 因为 async2 阻塞了前面代码的执行，所以执行前面的定时器timer3，将其退出宏工作队列，之后打印start；
4. 而后执行 async2 前面的代码，打印出async1 end，遇到定时器 timer1，将其退出宏工作队列；
5. 最初，宏工作队列有三个工作，先后顺序为timer2，timer3，timer1，没有微工作，所以间接所有的宏工作依照先进先出的准则执行。

OPTIONS 申请办法及应用场景

OPTIONS 是除了 GET 和 POST 之外的其中一种 HTTP 申请办法。

OPTIONS 办法是用于申请取得由 Request-URI 标识的资源在申请 / 响应的通信过程中能够应用的性能选项。通过这个办法，客户端能够 在采取具体资源申请之前，决定对该资源采取何种必要措施，或者理解服务器的性能。该申请办法的响应不能缓存。

OPTIONS 申请办法的 主要用途 有两个：

• 获取服务器反对的所有 HTTP 申请办法；
• 用来查看拜访权限。例如：在进行 CORS 跨域资源共享时，对于简单申请，就是应用 OPTIONS 办法发送嗅探申请，以判断是否有对指定资源的拜访权限。

树形构造转成列表

题目形容:

[
    {
        id: 1,
        text: '节点 1',
        parentId: 0,
        children: [
            {
                id:2,
                text: '节点 1_1',
                parentId:1
            }
        ]
    }
]
转成
[
    {
        id: 1,
        text: '节点 1',
        parentId: 0 // 这里用 0 示意为顶级节点
    },
    {
        id: 2,
        text: '节点 1_1',
        parentId: 1 // 通过这个字段来确定子父级
    }
    ...
]

实现代码如下:

function treeToList(data) {let res = [];
  const dfs = (tree) => {tree.forEach((item) => {if (item.children) {dfs(item.children);
        delete item.children;
      }
      res.push(item);
    });
  };
  dfs(data);
  return res;
}

position 的属性有哪些，区别是什么

position 有以下属性值：

后面三者的定位形式如下：

• relative： 元素的定位永远是绝对于元素本身地位的，和其余元素没关系，也不会影响其余元素。
• fixed： 元素的定位是绝对于 window（或者 iframe）边界的，和其余元素没有关系。然而它具备破坏性，会导致其余元素地位的变动。
• absolute： 元素的定位绝对于前两者要简单许多。如果为 absolute 设置了 top、left，浏览器会依据什么去确定它的纵向和横向的偏移量呢？答案是浏览器会递归查找该元素的所有父元素，如果找到一个设置了 position:relative/absolute/fixed 的元素，就以该元素为基准定位，如果没找到，就以浏览器边界定位。如下两个图所示：

如何解决逾越问题

（1）CORS

上面是 MDN 对于 CORS 的定义：

跨域资源共享 (CORS) 是一种机制，它应用额定的 HTTP 头来通知浏览器 让运行在一个 origin (domain) 上的 Web 利用被准许拜访来自不同源服务器上的指定的资源。当一个资源从与该资源自身所在的服务器不同的域、协定或端口申请一个资源时，资源会发动一个跨域 HTTP 申请。

CORS 须要浏览器和服务器同时反对，整个 CORS 过程都是浏览器实现的，无需用户参加。因而实现CORS 的要害就是服务器，只有服务器实现了 CORS 申请，就能够跨源通信了。

浏览器将 CORS 分为 简略申请 和非简略申请：

简略申请不会触发 CORS 预检申请。若该申请满足以下两个条件，就能够看作是简略申请：

1）申请办法是以下三种办法之一：

• HEAD
• GET
• POST

2）HTTP 的头信息不超出以下几种字段：

• Accept
• Accept-Language
• Content-Language
• Last-Event-ID
• Content-Type：只限于三个值 application/x-www-form-urlencoded、multipart/form-data、text/plain

若不满足以上条件，就属于非简略申请了。

（1）简略申请过程：

对于简略申请，浏览器会间接收回 CORS 申请，它会在申请的头信息中减少一个 Orign 字段，该字段用来阐明本次申请来自哪个源（协定 + 端口 + 域名），服务器会依据这个值来决定是否批准这次申请。如果 Orign 指定的域名在许可范畴之内，服务器返回的响应就会多出以下信息头：

Access-Control-Allow-Origin: http://api.bob.com  // 和 Orign 始终
Access-Control-Allow-Credentials: true   // 示意是否容许发送 Cookie
Access-Control-Expose-Headers: FooBar   // 指定返回其余字段的值
Content-Type: text/html; charset=utf-8   // 示意文档类型

如果 Orign 指定的域名不在许可范畴之内，服务器会返回一个失常的 HTTP 回应，浏览器发现没有下面的 Access-Control-Allow-Origin 头部信息，就晓得出错了。这个谬误无奈通过状态码辨认，因为返回的状态码可能是 200。

在简略申请中，在服务器内，至多须要设置字段：Access-Control-Allow-Origin

（2）非简略申请过程

非简略申请是对服务器有特殊要求的申请，比方申请办法为 DELETE 或者 PUT 等。非简略申请的 CORS 申请会在正式通信之前进行一次 HTTP 查问申请，称为预检申请。

浏览器会询问服务器，以后所在的网页是否在服务器容许拜访的范畴内，以及能够应用哪些 HTTP 申请形式和头信息字段，只有失去必定的回复，才会进行正式的 HTTP 申请，否则就会报错。

预检申请应用的 申请办法是 OPTIONS，示意这个申请是来询问的。他的头信息中的关键字段是 Orign，示意申请来自哪个源。除此之外，头信息中还包含两个字段：

• Access-Control-Request-Method：该字段是必须的，用来列出浏览器的 CORS 申请会用到哪些 HTTP 办法。
• Access-Control-Request-Headers：该字段是一个逗号分隔的字符串，指定浏览器 CORS 申请会额定发送的头信息字段。

服务器在收到浏览器的预检申请之后，会依据头信息的三个字段来进行判断，如果返回的头信息在中有 Access-Control-Allow-Origin 这个字段就是容许跨域申请，如果没有，就是不批准这个预检申请，就会报错。

服务器回应的 CORS 的字段如下：

Access-Control-Allow-Origin: http://api.bob.com  // 容许跨域的源地址
Access-Control-Allow-Methods: GET, POST, PUT // 服务器反对的所有跨域申请的办法
Access-Control-Allow-Headers: X-Custom-Header  // 服务器反对的所有头信息字段
Access-Control-Allow-Credentials: true   // 示意是否容许发送 Cookie
Access-Control-Max-Age: 1728000  // 用来指定本次预检申请的有效期，单位为秒

只有服务器通过了预检申请，在当前每次的 CORS 申请都会自带一个 Origin 头信息字段。服务器的回应，也都会有一个 Access-Control-Allow-Origin 头信息字段。

在非简略申请中，至多须要设置以下字段：

'Access-Control-Allow-Origin'  
'Access-Control-Allow-Methods'
'Access-Control-Allow-Headers'

缩小 OPTIONS 申请次数：

OPTIONS 申请次数过多就会损耗页面加载的性能，升高用户体验度。所以尽量要缩小 OPTIONS 申请次数，能够后端在申请的返回头部增加：Access-Control-Max-Age：number。它示意预检申请的返回后果能够被缓存多久，单位是秒。该字段只对齐全一样的 URL 的缓存设置失效，所以设置了缓存工夫，在这个工夫范畴内，再次发送申请就不须要进行预检申请了。

CORS 中 Cookie 相干问题：

在 CORS 申请中，如果想要传递 Cookie，就要满足以下三个条件：

• 在申请中设置 withCredentials

默认状况下在跨域申请，浏览器是不带 cookie 的。然而咱们能够通过设置 withCredentials 来进行传递 cookie.

// 原生 xml 的设置形式
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
// axios 设置形式
axios.defaults.withCredentials = true;

• Access-Control-Allow-Credentials 设置为 true
• Access-Control-Allow-Origin 设置为非 *

（2）JSONP

jsonp的原理就是利用 <script> 标签没有跨域限度，通过 <script> 标签 src 属性，发送带有 callback 参数的 GET 申请，服务端将接口返回数据拼凑到 callback 函数中，返回给浏览器，浏览器解析执行，从而前端拿到 callback 函数返回的数据。
1）原生 JS 实现：

<script>
    var script = document.createElement('script');
    script.type = 'text/javascript';
    // 传参一个回调函数名给后端，不便后端返回时执行这个在前端定义的回调函数
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';
    document.head.appendChild(script);
    // 回调执行函数
    function handleCallback(res) {alert(JSON.stringify(res));
    }
 </script>

服务端返回如下（返回时即执行全局函数）：

handleCallback({"success": true, "user": "admin"})

2）Vue axios 实现：

this.$http = axios;
this.$http.jsonp('http://www.domain2.com:8080/login', {params: {},
    jsonp: 'handleCallback'
}).then((res) => {console.log(res); 
})

后端 node.js 代码：

var querystring = require('querystring');
var http = require('http');
var server = http.createServer();
server.on('request', function(req, res) {var params = querystring.parse(req.url.split('?')[1]);
    var fn = params.callback;
    // jsonp 返回设置
    res.writeHead(200, { 'Content-Type': 'text/javascript'});
    res.write(fn + '(' + JSON.stringify(params) + ')');
    res.end();});
server.listen('8080');
console.log('Server is running at port 8080...');

JSONP 的毛病：

• 具备局限性，仅反对 get 办法
• 不平安，可能会蒙受 XSS 攻打

（3）postMessage 跨域

postMessage 是 HTML5 XMLHttpRequest Level 2 中的 API，且是为数不多能够跨域操作的 window 属性之一，它可用于解决以下方面的问题：

• 页面和其关上的新窗口的数据传递
• 多窗口之间消息传递
• 页面与嵌套的 iframe 消息传递
• 下面三个场景的跨域数据传递

用法：postMessage(data,origin)办法承受两个参数：

• data：html5 标准反对任意根本类型或可复制的对象，但局部浏览器只反对字符串，所以传参时最好用 JSON.stringify()序列化。
• origin：协定 + 主机 + 端口号，也能够设置为 ”*”，示意能够传递给任意窗口，如果要指定和以后窗口同源的话设置为 ”/”。

1）a.html：(domain1.com/a.html)

<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
<script>           var iframe = document.getElementById('iframe');    iframe.onload = function() {        var data = {            name: 'aym'};        // 向 domain2 传送跨域数据
        iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.domain2.com');    };    // 承受 domain2 返回数据
    window.addEventListener('message', function(e) {alert('data from domain2 --->' + e.data);    }, false);
</script>

2）b.html：(domain2.com/b.html)

<script>
    // 接管 domain1 的数据
    window.addEventListener('message', function(e) {alert('data from domain1 --->' + e.data);
        var data = JSON.parse(e.data);
        if (data) {
            data.number = 16;
            // 解决后再发回 domain1
            window.parent.postMessage(JSON.stringify(data), 'http://www.domain1.com');
        }
    }, false);
</script>

（4）nginx 代理跨域

nginx 代理跨域，本质和 CORS 跨域原理一样，通过配置文件设置申请响应头 Access-Control-Allow-Origin…等字段。

1）nginx 配置解决 iconfont 跨域
浏览器跨域拜访 js、css、img 等惯例动态资源被同源策略许可，但 iconfont 字体文件 (eot|otf|ttf|woff|svg) 例外，此时可在 nginx 的动态资源服务器中退出以下配置。

location / {add_header Access-Control-Allow-Origin *;}

2）nginx 反向代理接口跨域
跨域问题：同源策略仅是针对浏览器的安全策略。服务器端调用 HTTP 接口只是应用 HTTP 协定，不须要同源策略，也就不存在跨域问题。
实现思路：通过 Nginx 配置一个代理服务器域名与 domain1 雷同，端口不同）做跳板机，反向代理拜访 domain2 接口，并且能够顺便批改 cookie 中 domain 信息，不便以后域 cookie 写入，实现跨域拜访。

nginx 具体配置：

#proxy 服务器
server {
    listen       81;
    server_name  www.domain1.com;
    location / {
        proxy_pass   http://www.domain2.com:8080;  #反向代理
        proxy_cookie_domain www.domain2.com www.domain1.com; #批改 cookie 里域名
        index  index.html index.htm;
        # 当用 webpack-dev-server 等中间件代理接口拜访 nignx 时，此时无浏览器参加，故没有同源限度，上面的跨域配置可不启用
        add_header Access-Control-Allow-Origin http://www.domain1.com;  #以后端只跨域不带 cookie 时，可为 *
        add_header Access-Control-Allow-Credentials true;
    }
}

（5）nodejs 中间件代理跨域

node 中间件实现跨域代理，原理大抵与 nginx 雷同，都是通过启一个代理服务器，实现数据的转发，也能够通过设置 cookieDomainRewrite 参数批改响应头中 cookie 中域名，实现以后域的 cookie 写入，不便接口登录认证。

1）非 vue 框架的跨域 应用 node + express + http-proxy-middleware 搭建一个 proxy 服务器。

• 前端代码：

var xhr = new XMLHttpRequest();
// 前端开关：浏览器是否读写 cookie
xhr.withCredentials = true;
// 拜访 http-proxy-middleware 代理服务器
xhr.open('get', 'http://www.domain1.com:3000/login?user=admin', true);
xhr.send();

• 中间件服务器代码：

var express = require('express');
var proxy = require('http-proxy-middleware');
var app = express();
app.use('/', proxy({
    // 代理跨域指标接口
    target: 'http://www.domain2.com:8080',
    changeOrigin: true,
    // 批改响应头信息，实现跨域并容许带 cookie
    onProxyRes: function(proxyRes, req, res) {res.header('Access-Control-Allow-Origin', 'http://www.domain1.com');
        res.header('Access-Control-Allow-Credentials', 'true');
    },
    // 批改响应信息中的 cookie 域名
    cookieDomainRewrite: 'www.domain1.com'  // 能够为 false，示意不批改
}));
app.listen(3000);
console.log('Proxy server is listen at port 3000...');

2）vue 框架的跨域

node + vue + webpack + webpack-dev-server 搭建的我的项目，跨域申请接口，间接批改 webpack.config.js 配置。开发环境下，vue 渲染服务和接口代理服务都是 webpack-dev-server 同一个，所以页面与代理接口之间不再跨域。

webpack.config.js 局部配置：

module.exports = {entry: {},
    module: {},
    ...
    devServer: {
        historyApiFallback: true,
        proxy: [{
            context: '/login',
            target: 'http://www.domain2.com:8080',  // 代理跨域指标接口
            changeOrigin: true,
            secure: false,  // 当代理某些 https 服务报错时用
            cookieDomainRewrite: 'www.domain1.com'  // 能够为 false，示意不批改
        }],
        noInfo: true
    }
}

（6）document.domain + iframe 跨域

此计划仅限主域雷同，子域不同的跨域利用场景。实现原理：两个页面都通过 js 强制设置 document.domain 为根底主域，就实现了同域。
1）父窗口：(domain.com/a.html)

<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script>
    document.domain = 'domain.com';    var user = 'admin';
</script>

1）子窗口：(child.domain.com/a.html)

<script>
    document.domain = 'domain.com';
    // 获取父窗口中变量
    console.log('get js data from parent --->' + window.parent.user);
</script>

（7）location.hash + iframe 跨域

实现原理：a 欲与 b 跨域互相通信，通过两头页 c 来实现。三个页面，不同域之间利用 iframe 的 location.hash 传值，雷同域之间间接 js 拜访来通信。

具体实现：A 域：a.html -> B 域：b.html -> A 域：c.html，a 与 b 不同域只能通过 hash 值单向通信，b 与 c 也不同域也只能单向通信，但 c 与 a 同域，所以 c 可通过 parent.parent 拜访 a 页面所有对象。

1）a.html：(domain1.com/a.html)

<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
<script>
    var iframe = document.getElementById('iframe');    // 向 b.html 传 hash 值
    setTimeout(function() {iframe.src = iframe.src + '#user=admin';}, 1000);        // 凋谢给同域 c.html 的回调办法
    function onCallback(res) {alert('data from c.html --->' + res);    }
</script>

2）b.html：(.domain2.com/b.html)

<iframe id="iframe" src="http://www.domain1.com/c.html" style="display:none;"></iframe>
<script>
    var iframe = document.getElementById('iframe');
    // 监听 a.html 传来的 hash 值，再传给 c.html
    window.onhashchange = function () {iframe.src = iframe.src + location.hash;};
</script>

<script>
    // 监听 b.html 传来的 hash 值
    window.onhashchange = function () {
        // 再通过操作同域 a.html 的 js 回调，将后果传回
        window.parent.parent.onCallback('hello:' + location.hash.replace('#user=', ''));
    };
</script>

（8）window.name + iframe 跨域

window.name 属性的独特之处：name 值在不同的页面（甚至不同域名）加载后仍旧存在，并且能够反对十分长的 name 值（2MB）。

1）a.html：(domain1.com/a.html)

var proxy = function(url, callback) {
    var state = 0;
    var iframe = document.createElement('iframe');
    // 加载跨域页面
    iframe.src = url;
    // onload 事件会触发 2 次，第 1 次加载跨域页，并留存数据于 window.name
    iframe.onload = function() {if (state === 1) {// 第 2 次 onload(同域 proxy 页)胜利后，读取同域 window.name 中数据
            callback(iframe.contentWindow.name);
            destoryFrame();} else if (state === 0) {// 第 1 次 onload(跨域页)胜利后，切换到同域代理页面
            iframe.contentWindow.location = 'http://www.domain1.com/proxy.html';
            state = 1;
        }
    };
    document.body.appendChild(iframe);
    // 获取数据当前销毁这个 iframe，开释内存；这也保障了平安（不被其余域 frame js 拜访）function destoryFrame() {iframe.contentWindow.document.write('');
        iframe.contentWindow.close();
        document.body.removeChild(iframe);
    }
};
// 申请跨域 b 页面数据
proxy('http://www.domain2.com/b.html', function(data){alert(data);
});

2）proxy.html：(domain1.com/proxy.html)

两头代理页，与 a.html 同域，内容为空即可。
3）b.html：(domain2.com/b.html)

<script>    
    window.name = 'This is domain2 data!';
</script>

通过 iframe 的 src 属性由外域转向本地区，跨域数据即由 iframe 的 window.name 从外域传递到本地区。这个就奇妙地绕过了浏览器的跨域拜访限度，但同时它又是平安操作。

（9）WebSocket 协定跨域

WebSocket protocol 是 HTML5 一种新的协定。它实现了浏览器与服务器全双工通信，同时容许跨域通信，是 server push 技术的一种很好的实现。

原生 WebSocket API 应用起来不太不便，咱们应用 Socket.io，它很好地封装了 webSocket 接口，提供了更简略、灵便的接口，也对不反对 webSocket 的浏览器提供了向下兼容。

1）前端代码：

<div>user input：<input type="text"></div>
<script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
<script>
var socket = io('http://www.domain2.com:8080');
// 连贯胜利解决
socket.on('connect', function() {    // 监听服务端音讯
    socket.on('message', function(msg) {console.log('data from server: --->' + msg);     });    // 监听服务端敞开
    socket.on('disconnect', function() {console.log('Server socket has closed.');     });});
document.getElementsByTagName('input')[0].onblur = function() {    socket.send(this.value);};
</script>

2）Nodejs socket 后盾：

var http = require('http');
var socket = require('socket.io');
// 启 http 服务
var server = http.createServer(function(req, res) {
    res.writeHead(200, {'Content-type': 'text/html'});
    res.end();});
server.listen('8080');
console.log('Server is running at port 8080...');
// 监听 socket 连贯
socket.listen(server).on('connection', function(client) {
    // 接管信息
    client.on('message', function(msg) {client.send('hello：' + msg);
        console.log('data from client: --->' + msg);
    });
    // 断开解决
    client.on('disconnect', function() {console.log('Client socket has closed.'); 
    });
});

documentFragment 是什么？用它跟间接操作 DOM 的区别是什么？

MDN 中对 documentFragment 的解释：

DocumentFragment，文档片段接口，一个没有父对象的最小文档对象。它被作为一个轻量版的 Document 应用，就像规范的 document 一样，存储由节点（nodes）组成的文档构造。与 document 相比，最大的区别是 DocumentFragment 不是实在 DOM 树的一部分，它的变动不会触发 DOM 树的从新渲染，且不会导致性能等问题。

当咱们把一个 DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment 本身，而是它的所有子孙节点。在频繁的 DOM 操作时，咱们就能够将 DOM 元素插入 DocumentFragment，之后一次性的将所有的子孙节点插入文档中。和间接操作 DOM 相比，将 DocumentFragment 节点插入 DOM 树时，不会触发页面的重绘，这样就大大提高了页面的性能。

对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
• 百分比：将计算后的值传递给后辈

什么是物理像素，逻辑像素和像素密度，为什么在挪动端开发时须要用到 @3x, @2x 这种图片？

以 iPhone XS 为例，当写 CSS 代码时，针对于单位 px，其宽度为 414px & 896px，也就是说当赋予一个 DIV 元素宽度为 414px，这个 DIV 就会填满手机的宽度；

而如果有一把尺子来理论测量这部手机的物理像素，理论为 1242*2688 物理像素；通过计算可知，1242/414=3，也就是说，在单边上，一个逻辑像素 = 3 个物理像素，就说这个屏幕的像素密度为 3，也就是常说的 3 倍屏。

对于图片来说，为了保障其不失真，1 个图片像素至多要对应一个物理像素，如果原始图片是 500300 像素，那么在 3 倍屏上就要放一个 1500900 像素的图片能力保障 1 个物理像素至多对应一个图片像素，能力不失真。当然，也能够针对所有屏幕，都只提供最高清图片。尽管低密度屏幕用不到那么多图片像素，而且会因为下载多余的像素造成带宽节约和下载提早，但从后果上说能保障图片在所有屏幕上都不会失真。

还能够应用 CSS 媒体查问来判断不同的像素密度，从而抉择不同的图片:

my-image {background: (low.png); }
@media only screen and (min-device-pixel-ratio: 1.5) {#my-image { background: (high.png); }
}

代码输入后果

const promise = Promise.resolve().then(() => {return promise;})
promise.catch(console.err)

输入后果如下：

Uncaught (in promise) TypeError: Chaining cycle detected for promise #<Promise>

这里其实是一个坑，.then 或 .catch 返回的值不能是 promise 自身，否则会造成死循环。

与缓存相干的 HTTP 申请头有哪些

强缓存：

• Expires
• Cache-Control

协商缓存：

• Etag、If-None-Match
• Last-Modified、If-Modified-Since

对事件循环的了解

因为 js 是单线程运行的，在代码执行时，通过将不同函数的执行上下文压入执行栈中来保障代码的有序执行。在执行同步代码时，如果遇到异步事件，js 引擎并不会始终期待其返回后果，而是会将这个事件挂起，继续执行执行栈中的其余工作。当异步事件执行结束后，再将异步事件对应的回调退出到一个工作队列中期待执行。工作队列能够分为宏工作队列和微工作队列，当以后执行栈中的事件执行结束后，js 引擎首先会判断微工作队列中是否有工作能够执行，如果有就将微工作队首的事件压入栈中执行。当微工作队列中的工作都执行实现后再去执行宏工作队列中的工作。

Event Loop 执行程序如下所示：

• 首先执行同步代码，这属于宏工作
• 当执行完所有同步代码后，执行栈为空，查问是否有异步代码须要执行
• 执行所有微工作
• 当执行完所有微工作后，如有必要会渲染页面
• 而后开始下一轮 Event Loop，执行宏工作中的异步代码

说一下 HTTP 和 HTTPS 协定的区别?

1、HTTPS 协定须要 CA 证书, 费用较高; 而 HTTP 协定不须要
2、HTTP 协定是超文本传输协定, 信息是明文传输的,HTTPS 则是具备安全性的 SSL 加密传输协定;
3、应用不同的连贯形式, 端口也不同,HTTP 协定端口是 80,HTTPS 协定端口是 443;
4、HTTP 协定连贯很简略, 是无状态的;HTTPS 协定是具备 SSL 和 HTTP 协定构建的可进行加密传输、身份认证的网络协议, 比 HTTP 更加平安

Vue 通信

1.props 和 $emit
2. 地方事件总线 EventBus(根本不必)
3.vuex(官网举荐状态管理器)
4.$parent 和 $children
当然还有一些其余方法，但根本不罕用，或者用起来太简单来。介绍来通信的形式，还能够扩大说一下应用
场景，如何应用，注意事项之类的。