DNS同时应用TCP和UDP协定？
DNS占用53号端口，同时应用TCP和UDP协定。 （1）在区域传输的时候应用TCP协定
- 辅域名服务器会定时（个别3小时）向主域名服务器进行查问以便理解数据是否有变动。如有变动，会执行一次区域传送，进行数据同步。区域传送应用TCP而不是UDP，因为数据同步传送的数据量比一个申请应答的数据量要多得多。
- TCP是一种牢靠连贯，保障了数据的准确性。
（2）在域名解析的时候应用UDP协定
- 客户端向DNS服务器查问域名，个别返回的内容都不超过512字节，用UDP传输即可。不必通过三次握手，这样DNS服务器负载更低，响应更快。实践上说，客户端也能够指定向DNS服务器查问时用TCP，但事实上，很多DNS服务器进行配置的时候，仅反对UDP查问包。
常见的DOM操作有哪些
1）DOM 节点的获取
DOM 节点的获取的API及应用：
getElementById // 依照 id 查问getElementsByTagName // 依照标签名查问getElementsByClassName // 依照类名查问querySelectorAll // 依照 css 选择器查问// 依照 id 查问var imooc = document.getElementById('imooc') // 查问到 id 为 imooc 的元素// 依照标签名查问var pList = document.getElementsByTagName('p') // 查问到标签为 p 的汇合console.log(divList.length)console.log(divList[0])// 依照类名查问var moocList = document.getElementsByClassName('mooc') // 查问到类名为 mooc 的汇合// 依照 css 选择器查问var pList = document.querySelectorAll('.mooc') // 查问到类名为 mooc 的汇合2）DOM 节点的创立
创立一个新节点，并把它增加到指定节点的前面。 已知的 HTML 构造如下：
<html> <head> <title>DEMO</title> </head> <body> <div id="container"> <h1 id="title">我是题目</h1> </div> </body></html>要求增加一个有内容的 span 节点到 id 为 title 的节点前面，做法就是：
// 首先获取父节点var container = document.getElementById('container')// 创立新节点var targetSpan = document.createElement('span')// 设置 span 节点的内容targetSpan.innerHTML = 'hello world'// 把新创建的元素塞进父节点里去container.appendChild(targetSpan)3）DOM 节点的删除
删除指定的 DOM 节点， 已知的 HTML 构造如下：
<html> <head> <title>DEMO</title> </head> <body> <div id="container"> <h1 id="title">我是题目</h1> </div> </body></html>须要删除 id 为 title 的元素，做法是：
// 获取指标元素的父元素var container = document.getElementById('container')// 获取指标元素var targetNode = document.getElementById('title')// 删除指标元素container.removeChild(targetNode)或者通过子节点数组来实现删除：
// 获取指标元素的父元素var container = document.getElementById('container')// 获取指标元素var targetNode = container.childNodes[1]// 删除指标元素container.removeChild(targetNode)4）批改 DOM 元素
批改 DOM 元素这个动作能够分很多维度，比如说挪动 DOM 元素的地位，批改 DOM 元素的属性等。
将指定的两个 DOM 元素替换地位， 已知的 HTML 构造如下：
<html> <head> <title>DEMO</title> </head> <body> <div id="container"> <h1 id="title">我是题目</h1> <p id="content">我是内容</p> </div> </body></html>当初须要调换 title 和 content 的地位，能够思考 insertBefore 或者 appendChild：
// 获取父元素var container = document.getElementById('container') // 获取两个须要被替换的元素var title = document.getElementById('title')var content = document.getElementById('content')// 替换两个元素，把 content 置于 title 后面container.insertBefore(content, title)什么是margin重叠问题？如何解决？
问题形容： 两个块级元素的上外边距和下外边距可能会合并（折叠）为一个外边距，其大小会取其中外边距值大的那个，这种行为就是外边距折叠。须要留神的是，浮动的元素和相对定位这种脱离文档流的元素的外边距不会折叠。重叠只会呈现在垂直方向。
计算准则： 折叠合并后外边距的计算准则如下：
- 如果两者都是负数，那么就去最大者
- 如果是一正一负，就会正值减去负值的绝对值
- 两个都是负值时，用0减去两个中绝对值大的那个
解决办法： 对于折叠的状况，次要有两种：兄弟之间重叠和父子之间重叠 （1）兄弟之间重叠
- 底部元素变为行内盒子：
display: inline-block - 底部元素设置浮动：
float - 底部元素的position的值为
absolute/fixed
（2）父子之间重叠
- 父元素退出：
overflow: hidden - 父元素增加通明边框：
border:1px solid transparent - 子元素变为行内盒子：
display: inline-block - 子元素退出浮动属性或定位
箭头函数与一般函数的区别
（1）箭头函数比一般函数更加简洁
- 如果没有参数，就间接写一个空括号即可
- 如果只有一个参数，能够省去参数的括号
- 如果有多个参数，用逗号宰割
- 如果函数体的返回值只有一句，能够省略大括号
- 如果函数体不须要返回值，且只有一句话，能够给这个语句后面加一个void关键字。最常见的就是调用一个函数：
let fn = () => void doesNotReturn();（2）箭头函数没有本人的this
箭头函数不会创立本人的this， 所以它没有本人的this，它只会在本人作用域的上一层继承this。所以箭头函数中this的指向在它在定义时曾经确定了，之后不会扭转。
（3）箭头函数继承来的this指向永远不会扭转
var id = 'GLOBAL';var obj = { id: 'OBJ', a: function(){ console.log(this.id); }, b: () => { console.log(this.id); }};obj.a(); // 'OBJ'obj.b(); // 'GLOBAL'new obj.a() // undefinednew obj.b() // Uncaught TypeError: obj.b is not a constructor对象obj的办法b是应用箭头函数定义的，这个函数中的this就永远指向它定义时所处的全局执行环境中的this，即使这个函数是作为对象obj的办法调用，this仍旧指向Window对象。须要留神，定义对象的大括号{}是无奈造成一个独自的执行环境的，它仍旧是处于全局执行环境中。
（4）call()、apply()、bind()等办法不能扭转箭头函数中this的指向
var id = 'Global';let fun1 = () => { console.log(this.id)};fun1(); // 'Global'fun1.call({id: 'Obj'}); // 'Global'fun1.apply({id: 'Obj'}); // 'Global'fun1.bind({id: 'Obj'})(); // 'Global'（5）箭头函数不能作为构造函数应用
构造函数在new的步骤在下面曾经说过了，实际上第二步就是将函数中的this指向该对象。 然而因为箭头函数时没有本人的this的，且this指向外层的执行环境，且不能扭转指向，所以不能当做构造函数应用。
（6）箭头函数没有本人的arguments
箭头函数没有本人的arguments对象。在箭头函数中拜访arguments实际上取得的是它外层函数的arguments值。
（7）箭头函数没有prototype
（8）箭头函数不能用作Generator函数，不能应用yeild关键字
参考：前端进阶面试题具体解答
什么是作用域链？
首先要理解作用域链，当拜访一个变量时，编译器在执行这段代码时，会首先从以后的作用域中查找是否有这个标识符，如果没有找到，就会去父作用域查找，如果父作用域还没找到持续向上查找，直到全局作用域为止,，而作用域链，就是有以后作用域与下层作用域的一系列变量对象组成，它保障了以后执行的作用域对合乎拜访权限的变量和函数的有序拜访。
原型链
原型链实际上在下面原型的问题中就有波及到，在原型的继承中，咱们继承来多个原型，这里再提一下实现完满继承的计划，通过借助寄生组合继承，PersonB.prototype = Object.create(PersonA.prototype)这是当咱们实例化PersonB失去实例化对象，拜访实例化对象的属性时会触发get办法，它会先在本身属性上查找，如果没有这个属性，就会去__proto__中查找，一层层向上直到查找到顶层对象Object，这个查找的过程就是原型链来。CSS中可继承与不可继承属性有哪些
一、无继承性的属性
- display：规定元素应该生成的框的类型
- 文本属性：
- vertical-align：垂直文本对齐
- text-decoration：规定增加到文本的装璜
- text-shadow：文本暗影成果
- white-space：空白符的解决
- unicode-bidi：设置文本的方向
- 盒子模型的属性：width、height、margin、border、padding
- 背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
- 定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
- 生成内容属性：content、counter-reset、counter-increment
- 轮廓款式属性：outline-style、outline-width、outline-color、outline
- 页面款式属性：size、page-break-before、page-break-after
- 声音款式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
二、有继承性的属性
- 字体系列属性
- font-family：字体系列
- font-weight：字体的粗细
- font-size：字体的大小
- font-style：字体的格调
- 文本系列属性
- text-indent：文本缩进
- text-align：文本程度对齐
- line-height：行高
- word-spacing：单词之间的间距
- letter-spacing：中文或者字母之间的间距
- text-transform：管制文本大小写（就是uppercase、lowercase、capitalize这三个）
- color：文本色彩
- 元素可见性
- visibility：管制元素显示暗藏
- 列表布局属性
- list-style：列表格调，包含list-style-type、list-style-image等
- 光标属性
- cursor：光标显示为何种状态
vue-router
vue-router是vuex.js官网的路由管理器，它和vue.js的外围深度集成，让构建但页面利用变得大海捞针<router-link> 组件反对用户在具备路由性能的利用中 (点击) 导航。 通过 to 属性指定指标地址<router-view> 组件是一个 functional 组件，渲染门路匹配到的视图组件。<keep-alive> 组件是一个用来缓存组件router.beforeEachrouter.afterEachto: Route: 行将要进入的指标 路由对象from: Route: 以后导航正要来到的路由next: Function: 肯定要调用该办法来 resolve 这个钩子。执行成果依赖 next 办法的调用参数。介绍了路由守卫及用法，在我的项目中路由守卫起到的作用等等箭头函数和一般函数有啥区别？箭头函数能当构造函数吗？
- 一般函数通过 function 关键字定义， this 无奈联合词法作用域应用，在运行时绑定，只取决于函数的调用形式，在哪里被调用，调用地位。（取决于调用者，和是否独立运行）
箭头函数应用被称为 “胖箭头” 的操作
=>定义，箭头函数不利用一般函数 this 绑定的四种规定，而是依据外层（函数或全局）的作用域来决定 this，且箭头函数的绑定无奈被批改（new 也不行）。- 箭头函数罕用于回调函数中，包含事件处理器或定时器
- 箭头函数和 var self = this，都试图取代传统的 this 运行机制，将 this 的绑定拉回到词法作用域
- 没有原型、没有 this、没有 super，没有 arguments，没有 new.target
不能通过 new 关键字调用
- 一个函数外部有两个办法：[[Call]] 和 [[Construct]]，在通过 new 进行函数调用时，会执行 [[construct]] 办法，创立一个实例对象，而后再执行这个函数体，将函数的 this 绑定在这个实例对象上
- 当间接调用时，执行 [[Call]] 办法，间接执行函数体
- 箭头函数没有 [[Construct]] 办法，不能被用作结构函数调用，当应用 new 进行函数调用时会报错。
function foo() { return (a) => { console.log(this.a); }}var obj1 = { a: 2}var obj2 = { a: 3 }var bar = foo.call(obj1);bar.call(obj2);文档申明（Doctype）和<!Doctype html>有何作用? 严格模式与混淆模式如何辨别？它们有何意义?
文档申明的作用： 文档申明是为了通知浏览器，以后HTML文档应用什么版本的HTML来写的，这样浏览器能力依照申明的版本来正确的解析。
的作用：<!doctype html> 的作用就是让浏览器进入规范模式，应用最新的 HTML5 规范来解析渲染页面；如果不写，浏览器就会进入混淆模式，咱们须要防止此类情况产生。
严格模式与混淆模式的辨别：
- 严格模式： 又称为规范模式，指浏览器依照
W3C规范解析代码； - 混淆模式： 又称怪异模式、兼容模式，是指浏览器用本人的形式解析代码。混淆模式通常模仿老式浏览器的行为，以避免老站点无奈工作；
辨别：网页中的DTD，间接影响到应用的是严格模式还是浏览模式，能够说DTD的应用与这两种形式的区别非亲非故。
- 如果文档蕴含严格的
DOCTYPE，那么它个别以严格模式出现（严格 DTD ——严格模式）； - 蕴含过渡
DTD和URI的DOCTYPE，也以严格模式出现，但有过渡DTD而没有URI（对立资源标识符，就是申明最初的地址）会导致页面以混淆模式出现（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混淆模式）； DOCTYPE不存在或模式不正确会导致文档以混淆模式出现（DTD不存在或者格局不正确——混淆模式）；HTML5没有DTD，因而也就没有严格模式与混淆模式的区别，HTML5有绝对宽松的 法，实现时，曾经尽可能大的实现了向后兼容(HTML5 没有严格和混淆之分)。
总之，严格模式让各个浏览器对立执行一套标准兼容模式保障了旧网站的失常运行。
浏览器乱码的起因是什么？如何解决？
产生乱码的起因：
- 网页源代码是
gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器关上即会呈现html乱码，反之也会呈现乱码； html网页编码是gbk，而程序从数据库中调出出现是utf-8编码的内容也会造成编码乱码；- 浏览器不能自动检测网页编码，造成网页乱码。
解决办法：
- 应用软件编辑HTML网页内容；
- 如果网页设置编码是
gbk，而数据库贮存数据编码格局是UTF-8，此时须要程序查询数据库数据显示数据后退程序转码； - 如果浏览器浏览时候呈现网页乱码，在浏览器中找到转换编码的菜单进行转换。
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)) );}z-index属性在什么状况下会生效
通常 z-index 的应用是在有两个重叠的标签，在肯定的状况下管制其中一个在另一个的上方或者下方呈现。z-index值越大就越是在下层。z-index元素的position属性须要是relative，absolute或是fixed。
z-index属性在下列状况下会生效：
- 父元素position为relative时，子元素的z-index生效。解决：父元素position改为absolute或static；
- 元素没有设置position属性为非static属性。解决：设置该元素的position属性为relative，absolute或是fixed中的一种；
- 元素在设置z-index的同时还设置了float浮动。解决：float去除，改为display：inline-block；
说一下 web worker
在 HTML 页面中，如果在执行脚本时，页面的状态是不可相应的，直到脚本执行实现后，页面才变成可相应。web worker 是运行在后盾的 js，独立于其余脚本，不会影响页面的性能。 并且通过 postMessage 将后果回传到主线程。这样在进行简单操作的时候，就不会阻塞主线程了。
如何创立 web worker：
- 检测浏览器对于 web worker 的支持性
- 创立 web worker 文件（js，回传函数等）
- 创立 web worker 对象
画一条0.5px的线
- 采纳transform: scale()的形式，该办法用来定义元素的2D 缩放转换：
transform: scale(0.5,0.5);- 采纳meta viewport的形式
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>这样就能缩放到原来的0.5倍，如果是1px那么就会变成0.5px。viewport只针对于挪动端，只在挪动端上能力看到成果
原型
JavaScript中的对象都有一个非凡的 prototype 内置属性，其实就是对其余对象的援用简直所有的对象在创立时 prototype 属性都会被赋予一个非空的值，咱们能够把这个属性当作一个备用的仓库当试图援用对象的属性时会登程get操作，第一步时查看对象自身是否有这个属性，如果有就应用它，没有就去原型中查找。一层层向上直到Object.prototype顶层基于原型扩大形容一下原型链，什么是原型链，原型的继承，ES5和ES6继承与不同点。异步任务调度器
形容：实现一个带并发限度的异步调度器 Scheduler，保障同时运行的工作最多有 limit 个。
实现：
class Scheduler { queue = []; // 用队列保留正在执行的工作 runCount = 0; // 计数正在执行的工作个数 constructor(limit) { this.maxCount = limit; // 容许并发的最大个数 } add(time, data){ const promiseCreator = () => { return new Promise((resolve, reject) => { setTimeout(() => { console.log(data); resolve(); }, time); }); } this.queue.push(promiseCreator); // 每次增加的时候都会尝试去执行工作 this.request(); } request() { // 队列中还有工作才会被执行 if(this.queue.length && this.runCount < this.maxCount) { this.runCount++; // 执行先退出队列的函数 this.queue.shift()().then(() => { this.runCount--; // 尝试进行下一次工作 this.request(); }); } }}// 测试const scheduler = new Scheduler(2);const addTask = (time, data) => { scheduler.add(time, data);}addTask(1000, '1');addTask(500, '2');addTask(300, '3');addTask(400, '4');// 输入后果 2 3 1 4深浅拷贝
浅拷贝：只思考对象类型。
function shallowCopy(obj) { if (typeof obj !== 'object') return let newObj = obj instanceof Array ? [] : {} for (let key in obj) { if (obj.hasOwnProperty(key)) { newObj[key] = obj[key] } } return newObj}简略版深拷贝：只思考一般对象属性，不思考内置对象和函数。
function deepClone(obj) { if (typeof obj !== 'object') return; var newObj = obj instanceof Array ? [] : {}; for (var key in obj) { if (obj.hasOwnProperty(key)) { newObj[key] = typeof obj[key] === 'object' ? deepClone(obj[key]) : obj[key]; } } return newObj;}简单版深克隆：基于简略版的根底上，还思考了内置对象比方 Date、RegExp 等对象和函数以及解决了循环援用的问题。
const isObject = (target) => (typeof target === "object" || typeof target === "function") && target !== null;function deepClone(target, map = new WeakMap()) { if (map.get(target)) { return target; } // 获取以后值的构造函数：获取它的类型 let constructor = target.constructor; // 检测以后对象target是否与正则、日期格局对象匹配 if (/^(RegExp|Date)$/i.test(constructor.name)) { // 创立一个新的非凡对象(正则类/日期类)的实例 return new constructor(target); } if (isObject(target)) { map.set(target, true); // 为循环援用的对象做标记 const cloneTarget = Array.isArray(target) ? [] : {}; for (let prop in target) { if (target.hasOwnProperty(prop)) { cloneTarget[prop] = deepClone(target[prop], map); } } return cloneTarget; } else { return target; }}判断数组的形式有哪些
- 通过Object.prototype.toString.call()做判断
Object.prototype.toString.call(obj).slice(8,-1) === 'Array';- 通过原型链做判断
obj.__proto__ === Array.prototype;- 通过ES6的Array.isArray()做判断
Array.isArrray(obj);- 通过instanceof做判断
obj instanceof Array- 通过Array.prototype.isPrototypeOf
Array.prototype.isPrototypeOf(obj)PWA应用过吗？serviceWorker的应用原理是啥？
渐进式网络应用（PWA）是谷歌在2015年底提出的概念。基本上算是web应用程序，但在外观和感觉上与原生app相似。反对PWA的网站能够提供脱机工作、推送告诉和设施硬件拜访等性能。
Service Worker是浏览器在后盾独立于网页运行的脚本，它关上了通向不须要网页或用户交互的性能的大门。 当初，它们已包含如推送告诉和后盾同步等性能。 未来，Service Worker将会反对如定期同步或天文围栏等其余性能。 本教程探讨的外围性能是拦挡和解决网络申请，包含通过程序来治理缓存中的响应。