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 的老项目,很久没人能维护了。