2020年前端面试题（03-26）

前言

冲鸭的一天！

正文

1.介绍一下你对浏览器内核的理解？

主要分成两部分：渲染引擎(Layout Engine或Rendering Engine)和JS引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS
等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不
同对于网页的语法解释会有不同，所以渲染的效果也不相同。

JS引擎：解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向
于只指渲染引擎。

2.常见的浏览器内核有哪些？

Trident( MSHTML )：IE MaxThon TT The World 360 搜狗浏览器

Gecko：Netscape6及以上版本 FireFox Mozilla Suite/SeaMonkey

Presto：Opera7及以上(Opera内核原为：Presto，现为：Blink)

Webkit：Safari Chrome

3.简述一下你对HTML语义化的理解？

1.去掉或丢失样式的时候能够让页面呈现出清晰的结构。
2.有利于SEO和搜索引擎建立良好沟通，有助于爬虫抓取更多的信息，爬虫依赖于标签来确定上下文和各个关键字的权重。
3.方便其它设备解析。
4.便于团队开发和维护，语义化根据可读性。

4.DOCTYPE有什么作用？标准模式与混杂模式如何区分？它们有何意义?

告诉浏览器使用哪个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会导
致HTML文档以混杂模式呈现。
标准模式（Standards mode）以浏览器支持的最高标准运行；混杂模式（Quirks 
mode）中页面是一种比较宽松的向后兼容的方式显示。

5.有了解过Common.js吗？

一、CommonJS
CommonJS定义的模块分为:
{模块引用(require)} {模块定义(exports)} {模块标识(module)}
require()用来引入外部模块；exports对象用于导出当前模块的方法或变量
，唯一的导出口；module对象就代表模块本身。

比如说我们就可以这样用了：
 //sum.js
2 exports.sum = function(){...做加操作..};
3 
4 //calculate.js
5 var math = require('sum');
6 exports.add = function(n){
7     return math.sum(val,n);
8 };

二、AMD
CommonJS是主要为了JS在后端的表现制定的，他是不适合前端的
于是乎，AMD(异步模块定义)出现了，它就主要为前端JS的表现制定规范。
AMD就只有一个接口：define(id?,dependencies?,factory);
它要在声明模块的时候制定所有的依赖(dep)，并且还要当做形参传到factory中
，像这样：1 define(['dep1','dep2'],function(dep1,dep2){...});
要是没什么依赖，就定义简单的模块，下面这样就可以啦：
define(function(){
2     var exports = {};
3     exports.method = function(){...};
4     return exports;
5 });

三、CMD
大名远扬的玉伯写了seajs，就是遵循他提出的CMD规范，与AMD蛮相近的，不过用起
来感觉更加方便些，最重要的是中文版，应有尽有：seajs官方doc
1 define(function(require,exports,module){...});
用过seajs吧，这个不陌生吧，对吧。

6. less的特点和原理

每次被问到这个我只能想起less中的定义变量，用太久less都忘了css不能嵌套，醉
了醉了。
1.变量
2.混合（Mixins）
3.嵌套规则
4.运算
5.函数
6.命名空间
7.作用域
8.注释
9.导入（Import）

本质上，less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的
样式规则，这些规则最终会通过解析器，less 把这些样式规则编译成浏览器可以识
别的 css 样式。less 并没有裁剪 css 原有的特性，更不是用来取代 css 的，而是
在现有 css 语法的基础上，为 css 加入程序式语言的特性。less 最终需要编译成
 css 文件才能起到样式的效果，我们可以称 less 为 css 样式预编译器。

7.ajax的原理

Ajax的原理简单来说是在用户和服务器之间加了—个中间层(AJAX引擎)，通过
XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用
javascript来操作DOM而更新页面。使用户操作与服务器响应异步化。这其中
最关键的一步就是从服务器获得请求数据。

<script>
 // 1.获得ajax
 if (window.XMLHttpRequest) { //查看当前浏览器XMLHttpRequest是否是全局变量
    var oAjax = new XMLHttpResquest();
 } else {
    var oAjax = new ActiveXObject('Microsoft.XMLHTTP'); //IE6,传入微软参数
 }

 // 2.打开地址
 switch (json.type.toLowerCase()) {
    case 'get':
        oAjax.open('GET', json.url + '?' + jsonToURL(json.data), true); // 提交方式(大写)，url，是否异步
        oAjax.send(); // 3.发送数据
        break;
    case 'post':
        oAjax.open('POST', json.url, true);
        oAjax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        oAjax.send(jsonToURL(json.data)); // 3.发送数据
        break;
 }

 // 4.接收数据
 oAjax.onreadystatechange = function() { //监控状态
    if (oAjax.readyState == 4) {
        json.complete && json.complete();
        if (oAjax.status >= 200 && oAjax.status < 300 ||
            oAjax.status == 304) {
            json.success && json.success(oAjax.responseText); //执行成功的回调函数, responseText为响应内容
        } else {
            json.error && json.error(oAjax.status); //执行失败的回调函数
        }
    }
 };
</script>

8.谈谈你对promise对象的理解？

1.对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：
Pending（进行中）、Resolved（已完成，又称 Fulfilled）和
Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，
任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，
它的英语意思就是“承诺”，表示其他手段无法改变。

2.一旦状态改变，就不会再变，任何时候都可以得到这个结果。
Promise对象的状态改变，只有两种可能：从Pending变为Resolved和
从Pending变为Rejected。只要这两种情况发生，状态就凝固了，
不会再变了，会一直保持这个结果。就算改变已经发生了，
你再对Promise对象添加回调函数，也会立即得到这个结果。
这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

9.原型链面试问题

对象就是实例
任何一个函数只要被new使用了，这个函数就是一个构造函数
对图解释：
构造函数使用new运算符生成一个实例，构造函数也是函数，函数都有一个prototype
属性，这个属性就是原型对象
原型对象怎么区分出是被那个构造函数所引用呢？
原型对象中有一个构造器，这个构造器默认指向你声明的那个函数

M.prototype.constructor === M   //true
o3._proto_ === M.prototype     //true

通过原型链的方式找到原型对象，原型对象的方法是被不同的实例所共有的。

原型链：当实例调用某一个属性时，先在本身找，如果没有找到，就到它的
原型对象上逐级往上找(_proto_)，直到找到Object.prototype,如果还找
不到则原路返回（constructor），告诉它方法或属性未定义

只要函数有prototype属性，对象都有_proto_。

总结：原型链就是在访问一个对象属性的时候，如果自身没有找到的情况下会去它的
原型对象中查找，如果还没有，会去它的原型对象的原型对象中查找，如此循环直到
顶层的Object对象的原型对象(是个null，Object.prototype.__proto__===null）
为止的这么个机制

instanceof 判断实例对象的__proto__与构造函数的prototype是不是引用的同一个
原型对象

new运算符的工作原理：
第一步创建一个新对象，这个对象继承自构造函数的prototype属性
第二步 把上下文this指向这个新对象
第三步，要不要返回这个新对象,用return会取代，不用就返回这个新对象

var new2 = function(func){  
  var o = Object.create(func.prototype)  
    var k = func.call(o)  
      if(typeof k === 'object'){ 
             return k  
     }else{ 
             return o  
       }}

10.如何准确判断一个变量是数组类型？

   var  arr=[];
   arr instanceof Array   //true
   typeof arr  // object typeof是无法判断是否是数组的