前端面试问题整理，补充ing

1、问题：假设容器的高度默认100px，请写出三栏布局，其中左栏、右栏的宽度各为300px，中间的宽度自适应。

延伸：五种方法的对比

1.1flex属性

2、谈一谈你对CSS盒模型的认识

延伸：JS如何设置、获取盒模型对应的宽和高、边距重叠、BFC）

3、DOM事件模型

​​​​​​dom事件级别、事件流、委托代理、取消默认、自定义事件

4、HTTP协议

特点、报文、get 和 post的区别、HTTP状态码、持久连接、管线化

5、原型链 

继承的几种方式

创建对象有几种方法、原型、构造函数、实例，以及原型链、instanceof的原理、new 运算符

类的定义和继承的几种方式

6、跨域通信类

什么是同源策略及限制、前后端如何通信、如何创建Ajax、跨域通信的几种方式（理解cors模式）

7、CSRF和XSS

8、算法 （堆栈、链表、排序、二叉树、图DFS BFS、动态规划）

9、浏览器渲染机制

DTD、DOCTYPE、DOCTYPE声明有几种，reflow，repaint

10、页面性能优化 

11、vue面试题整体 

11、图片懒加载

12、几大框架之间的区别 欠缺

13、react、小程序面试题目 很欠缺

13、nginx 很欠缺

14、网络知识 输入url发生了什么 很欠缺

15、前端错误监控

以下文章建议全文背诵：

[译] 理解 JavaScript 中的执行上下文和执行栈https://juejin.cn/post/6844903682283143181

作用域

变量或函数可以发生作用的区域即是作用域。作用域的最大用途就是隔离变量或函数，并控制变量或函数的生命周期，超过该区域的变量或函数就不能被访问。

执行环境

程序在运行时，会根据自身的作用域创建相应的执行环境：即全局作用域会创建全局执行环境；局部作用域会创建局部执行环境。执行环境的不同决定了变量或函数访问其他数据的权限。也可以理解为，作用域和作用域链得以发挥作用的原因，就是因为代码在执行的过程中创建了不同的执行环境。

简而言之，执行上下文是评估和执行 JavaScript 代码的环境的抽象概念。每当 Javascript 代码在运行的时候，它都是在执行上下文中运行。

写的函数多了去了，如何管理创建的那么多执行上下文呢？所以 JavaScript 引擎创建了执行上下文栈（Execution context stack，ECS）来管理执行上下文

函数的作用域在函数定义的时候就决定了。

这是因为函数有一个内部属性 [[scope]]，当函数创建的时候，就会保存所有父变量对象到其中，你可以理解 [[scope]] 就是所有父变量对象的层级链，但是注意：[[scope]] 并不代表完整的作用域链！

面试官：谈谈你对 JS 原型和原型链的理解？

候选人：JS 原型是指为其它对象提供共享属性访问的对象。在创建对象时，每个对象都包含一个隐式引用指向它的原型对象或者 null。

原型也是对象，因此它也有自己的原型。这样构成一个原型链。

面试官：原型链有什么作用？

候选人：在访问一个对象的属性时，实际上是在查询原型链。这个对象是原型链的第一个元素，先检查它是否包含属性名，如果包含则返回属性值，否则检查原型链上的第二个元素，以此类推。

面试官：那如何实现原型继承呢？

候选人：有两种方式。一种是通过 Object.create 或者 Object.setPrototypeOf 显式继承另一个对象，将它设置为原型。

另一种是通过 constructor 构造函数，在使用 new 关键字实例化时，会自动继承 constructor 的 prototype 对象，作为实例的原型。

在 ES2015 中提供了 class 的风格，背后跟 constructor 工作方式一样，写起来更内聚一些。

面试官：ConstructorB 如何继承 ConstructorA ？

候选人：JS 里的继承，是对象跟对象之间的继承。constructor 的主要用途是初始化对象的属性。

因此，两个 Constructor 之间的继承，需要分开两个步骤。

第一步是，编写新的 constructor，将两个 constructor 通过 call/apply 的方式，合并它们的属性初始化。按照超类优先的顺序进行。

第二步是，取出超类和子类的原型对象，通过 Object.create/Object.setPrototypeOf 显式原型继承的方式，设置子类的原型为超类原型。

整个过程手动编写起来比较繁琐，因此建议通过 ES2015 提供的 class 和 extends 关键字去完成继承，它们内置了上述两个步骤。

面试官：看起来你挺了解原型，你能说一个原型里比较少人知道的特性吗？

候选人：在 ES3 时代，只有访问属性的 get 操作能触发对原型链的查找。在 ES5 时代，新增了 accessor property 访问器属性的概念。它可以定义属性的 getter/setter 操作。

具有访问器属性 setter 操作的对象，作为另一个对象的原型的时候，设置属性的 set 操作，也能触发对原型链的查找。

普通对象的 __proto__ 属性，其实就是在原型链查找出来的，它定义在 Object.prototype 对象上。

面试官：很好，你被录取了，明天就来上班，我们有个基于 prototype.js 的老项目，很久没人能维护了。