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

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

以下这些是假值：
• 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()) // 3console.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 startasync2startasync1 endtimer2timer3timer1

代码的执行过程如下：

  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有以下属性值：

属性值概述
absolute生成相对定位的元素，绝对于static定位以外的一个父元素进行定位。元素的地位通过left、top、right、bottom属性进行规定。
relative生成绝对定位的元素，绝对于其原来的地位进行定位。元素的地位通过left、top、right、bottom属性进行规定。
fixed生成相对定位的元素，指定元素绝对于屏幕视⼝（viewport）的地位来指定元素地位。元素的地位在屏幕滚动时不会扭转，⽐如回到顶部的按钮⼀般都是⽤此定位⽅式。
static默认值，没有定位，元素呈现在失常的文档流中，会疏忽 top, bottom, left, right 或者 z-index 申明，块级元素从上往下纵向排布，⾏级元素从左向右排列。
inherit规定从父元素继承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   // 示意是否容许发送CookieAccess-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   // 示意是否容许发送CookieAccess-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();// 前端开关：浏览器是否读写cookiexhr.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和$emit2.地方事件总线 EventBus(根本不必)3.vuex(官网举荐状态管理器)4.$parent和$children当然还有一些其余方法，但根本不罕用，或者用起来太简单来。 介绍来通信的形式，还能够扩大说一下应用场景，如何应用，注意事项之类的。