前端面试题2

涂鸦智能面试准备

对公司的了解程度

• 我所了解到的，贵公司是一个从事物联网、智能应用开发的一家公司，作为一个全球云开发平台，是业界比较在头部的一家公司

两边固定中间自适应怎么实现

• left ：float：left；right：float：right；中间自适应
• position：absolute left： 0 position：absolute right：0 中间自适应
• display：flex left、right有宽度，中间:flex: 1
• display：table ；left、right：display：table-cell

js的数据类型

number string boolean undefined null object symbol bigint

object：Array、Object、Date、regexp、function

判断数据类型

• typeof
• instanceof
• Object.prototype.toString.call()

对原型链的了解

以我的理解，原型链是对象创建过程的记录，当访问对象的某个属性时，会先对对象本身属性进行查找，如果找不到，会对其__proto__隐式原型进行查找，再对其prototype的对象进行查找，一层一层往上查找形成一条链式结构

原型链的作用

实现js对象的继承，将对象的公共属性放在一个共享空间，避免重复声明，节约内存；原型链顶端是null

原型和原型链

prototype是函数的属性，每个函数都有该属性。用于指向一个对象。是显式修改对象的原型的属性

__proto__是对象的内置属性，是用于寻找原型链的属性

new操作

首先创建一个空对象，然后将空对象的原型的内存地址指向函数的原型对象，利用函数的call方法，将指向Windows的this指向该对象，然后再返回该对象

对JS构造函数的理解

我的理解是使用new关键字来调用的函数被认为为构造函数。当使用new关键字创建对象时，this指向的是新创建的那个对象。如果被创建的对象没有return 则会隐式的返回this对象。

浅谈对MVVM的了解

• MVVM是model-view-viewmodel的缩写，即模型-视图-视图模型
• 模型：存放各种数据，一些是固定的，大部分是通过api从后端获取的数据
• 视图：显示的界面，即DOM
• 视图模型：是连接模型、视图的桥梁，当数据变化时，viewmodel可监听到变化，并自动更新视图；而当用户操作视图时，viewmodel也可以监听到用户操作，从而对数据进行改动，实现数据的双向绑定

• 

堆和栈的区别

• 从空间分配上
  • 栈：一般有操作系统自行分配释放，用于存放参数值，局部变量等。
  • 堆：一般由程序员自行分配释放，如果程序员忘记释放，在程序结束后操作系统才会帮助释放内存
• 从缓存上
  • 栈：使用一级缓存，一般在被调用时才存在于存储空间中，用完即释放
  • 堆：使用二级缓存，生命周期由垃圾回收机制所决定
• 从结构上
  • 栈：栈数据结构，先进先出
  • 堆：堆结构

vue 渲染大量数据时应该怎么优化

• 一次传入大量数据
  • 让后端人员提供接口时做分页处理，每次调用时进行分页，并调用多次
  • 尽量不用双向绑定，只用部分页面处理数据
• 分段加载数据，次数特别多
  • 使用异步渲染组件
  • 使用v-if，避免出现大量节点

网站的黑夜模式的原理

使用media (prefers-color-scheme: dark)来更换css样式

讲述浏览器缓存流程

强缓存和协商缓存相应字段和优先级

• 强缓存：cache-control、expires。cache-control>expires
• 协商缓存：last-modified/if-modified-since、etag/if-none-match。etag>last-modified

express和koa的区别

• 语法区别
  • express异步使用回调函数
  • koa异步使用await和async
• 中间件区别
  • koa采用洋葱模型，进去顺序执行，出去反向执行，且支持context传递数据
  • express本身没有洋葱模型，需要引入插件，且没有context
• 集成度区别
  • koa内置中间件，集成度高
  • koa简洁

ES6 代码转成 ES5 代码的实现思路是什么

将ES6的代码转换为AST语法树，然后再将ES6 AST转为ES5 AST，再将AST转为代码

介绍下 BFC、IFC、GFC 和 FFC

块级格式化上下文BFC，内联格式化上下文IFC，网格布局格式化上下文GFC，自适应格式化上下文FFC

介绍下 http1.0、1.1、2.0 协议的区别

http 1.0 构建可扩展

http 1.1 添加了持久链接

http 2.0 添加了加密 头部压缩 服务器推送 管线操作 以及多路复用等功能

计算机网络相关

• OSI协议
  • 应用层 表示层 会话层 运输层 网络层 数据链路层 物理层
• TCP/IP协议
  • 应用层 运输层 网际层 网络接口层
• 五层协议
  • 应用层 运输层 网络层 数据链路层 物理层
• 数据链路层
  • 封装成帧---------将网络层的分组添加首部和尾部，形成帧
  • 透明传输---------在内容中和首部和尾部相同的内容添加转义字符
  • 差错检测---------使用CRC检测
• TCP三次握手(A:客户端；B：服务端)
  • A向B发送请求报文，SYN=1,ACK=0，seq选择一个初始的序号x
  • B收到A发送的请求报文后，如果同意连接，则向A发送确认报文，SYN=1，ACK=1，确认号为x+1，同时seq选择一个初始的序号y
  • A收到B发送的确认报文后，再向B发出确认,ACK=1，确认号为y+1，序号为x+1
  • B收到A的报文后，连接确立
• TCP四次挥手
  • A向B发送释放报文，FIN=1,seq 选择一个序号u
  • B收到A发出的报文后，则向A发出确认报文，ACK=1, seq选择一个序号v，确认号为u+1，此时B属于半关闭状态，B可以向A发送数据但是A不能像B发送
  • 当B确定不再需要连接时，B向A发送释放报文，FIN=1,ACK=1,seq选择一个序号w，确认号为u+1
  • 当A收到确认后，向B发送报文，ACK=1,seq为u+1，确认号为w+1，A再进入time-wait状态，之后自行关闭
  • B收到A的报文后关闭连接

涂鸦智能二面准备

条件编译

使用@cc_on @if (@_jscript_version >= 4) @else @end

vue双向绑定原理深入

首先组件进行初始化的时候，解析器compile会扫描和解析各个节点元素，然后会利用Object.defineProterty来创建监听器observer用于监听属性，如果属性发生变化，便会通知订阅者watcher，看是否需要更新，因为订阅者会有多个，所以需要创建消息订阅器dep对监听器和订阅者进行管理。当订阅者接收到属性变化后，会执行挺对应的更新函数，对视图进行更新

监听器observer

function defineReactive(data, key, val) {
    observe(val);	//如果值为对象，则遍历其子属性，添加数据劫持
    let dep = new Dep();
    Object.defineProperty(data, key, {
        enumerable: true,
        configurable: true,
        get: function() {
            if ('是否添加订阅者') {
                dep.addSub(watcher);//添加订阅者
            }
            return val;
        },
        set: function(newVal) {
            val = newVal;
            console.log('属性'+ key + '已被监听, 现在值为: ' + newVal);
            dep.notify();//通知所有订阅者
        };
    })
};
function observe(data) {
    if (!data || typeof(data) !== 'object') return;
    Object.keys(data).forEach(function(key) {
        defineReactive(data, key, data[key]);
    });
}
           

消息订阅器dep

function Dep() {
    this.subs = [];
};
Dep.prototype = {
    addSub(sub) {
        this.subs.push(sub);
    },
    notify() {
        this.subs.forEach(sub => {
            sub.update();
        })
    },
};
           

DNS工作原理

1、在浏览器中输入www . qq .com 域名，操作系统会先检查自己本地的hosts文件是否有这个网址映射关系，如果有，就先调用这个IP地址映射，完成域名解析。

2、如果hosts里没有这个域名的映射，则查找本地DNS解析器缓存，是否有这个网址映射关系，如果有，直接返回，完成域名解析。

3、如果hosts与本地DNS解析器缓存都没有相应的网址映射关系，首先会找TCP/ip参数中设置的首选DNS服务器，在此我们叫它本地DNS服务器，此服务器收到查询时，如果要查询的域名，包含在本地配置区域资源中，则返回解析结果给客户机，完成域名解析，此解析具有权威性。

4、如果要查询的域名，不由本地DNS服务器区域解析，但该服务器已缓存了此网址映射关系，则调用这个IP地址映射，完成域名解析，此解析不具有权威性。

5、如果本地DNS服务器本地区域文件与缓存解析都失效，则根据本地DNS服务器的设置（是否设置转发器）进行查询，如果未用转发模式，本地DNS就把请求发至13台根DNS，根DNS服务器收到请求后会判断这个域名(.com)是谁来授权管理，并会返回一个负责该顶级域名服务器的一个IP。本地DNS服务器收到IP信息后，将会联系负责.com域的这台服务器。这台负责.com域的服务器收到请求后，如果自己无法解析，它就会找一个管理.com域的下一级DNS服务器地址(http://qq.com)给本地DNS服务器。当本地DNS服务器收到这个地址后，就会找http://qq.com域服务器，重复上面的动作，进行查询，直至找到www . qq .com主机。

6、如果用的是转发模式，此DNS服务器就会把请求转发至上一级DNS服务器，由上一级服务器进行解析，上一级服务器如果不能解析，或找根DNS或把转请求转至上上级，以此循环。不管是本地DNS服务器用是是转发，还是根提示，最后都是把结果返回给本地DNS服务器，由此DNS服务器再返回给客户机。

从客户端到本地DNS服务器是属于递归查询，而DNS服务器之间就是的交互查询就是迭代查询。

vue与react的区别

• 数据是否可变
  • react的数据整体是函数式的思想，属于单项数据流，数据不可变
  • vue双向绑定，数据可变
• 是否通过js操作一切
  • react是js操作一切，所以有jsx，vue是将html，css，js相结合
• 是否为声明式写法
  • vue是声明式写法，react是类的写法

实现一个简单的promise

class PromiseM {
    constructor(process) {
        this.status = 'pending';
        this.msg = 'asd';
        process(this.resolve.bind(this), this.reject.bind(this));
        return this;
    };
    resolve(val) {
        this.status = 'fullfilled';
        this.msg = val;
    };
    reject(err) {
        this.status = 'rejected';
        this.msg = err;
    };
    then(fullfilled, rejected) {
        if (this.status == 'fullfilled')
            fullfilled(this.msg);
        if (this.status == 'rejected')
            rejected(this.msg);
    };
}
           

this指向问题

• 在函数方法中，this指向全局对象
• 在对象调用中，this指向上级对象，即调用者
• 在构造函数调用中，this指向该对象