个人秋招面经——百度

博主目前在蚂蚁集团-体验技术部，AntV/S2 是博主所在团队的开源项目——多维交叉分析表格，欢迎使用，感谢到 S2 github 仓库点赞 star，有任何关于前端面试、就业、技术问题都可给在文章后留言。

一面（2021/7/21）

一、在浏览器中输入一个url到页面渲染发生了什么，尽可能详细。

二、http和https的区别。

三、强缓存和协商缓存。

四、跨域。

五、event loop。

六、vue 组件间传值。

七、vue 数据改变是如何渲染到页面上的（响应式原理）。

vue采用的是数据劫持+发布者-订阅者模式的方法，利用Object.defineProperty()来劫持各个属性的setter和getter，当数据发生变化时通知发布消息给订阅器，并触发相应的监听回调。

• 实现一个数据监听器 Observer。对数据对象的所有属性进行监听，利用Object.defineProperty()方法劫持各个属性的setter和getter（对某个属性进行赋值时会触发setter，能监听属性的变化），如果数据发生变动就可以拿到最新的值并通知订阅者。
• 实现一个指令解析器Compile。对vue每个元素节点的指令进行扫描和解析，将模板指令的变量都替换成数据，然后初始化渲染视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅器，一旦数据发生变化，收到通知，调用更新函数进行数据更新。
• 实现一个订阅器 Watcher。Watcher是数据监听器Observer和指令解析器Compile之间的桥梁。主要任务是订阅器Observer中属性值的变化，当数据发生变化时，触发指令解析器Compile中的更新函数，从而更新视图。

八、this的指向。

九、hash模式和history模式。

十、canvas和svg的区别。

• canvas通过JS来绘制2D图形；SVG是一种用XML描述2D图形的语言；
• canvas依赖分辨率，SVG不依赖分辨率；
• 在canvas中，一旦图形被绘制完成，便不会再得到浏览器的关注，而在SVG中，每个被绘制的图形都是对象；
• canvas不支持事件处理器，SVG支持事件处理器；
• canvas适用于密集型游戏，SVG适用于大型渲染区域。

十一、nextTick。

nextTick是在下次DOM更新循环结束之后执行延时回调。对Vue来说，在修改数据之后不会立即更新视图，而是等同一事件循环中所有数据变化完成之后，再更新视图。所以如果需要获取DOM更新之后的值，就需要用到nextTick。
使用场景： 在created、mounted阶段，要操作渲染后的视图；获取元素的宽高等。

十二、项目中CDN加载了哪些资源，webpack使用CDN是怎么配置的。

Vue、Axios、Vuex、VueRouter等，在chainWebpack中配置externals，externals中包含需要使用CDN方式的资源。
。。。

二面（2021/7/26）

一、对vue的认识。MVVM、双向绑定。

二、v-if和v-show的区别

共同点：v-if 和 v-show都是控制元素的显示隐藏。
区别：

• v-if是动态向DOM树添加或删除DOM元素控制显示/隐藏，若初始值为false，不会编译；v-show本质是通过设置CSS中的display为block和none控制显示隐藏，只会编译一次。
• v-if切换有一个完整的创建和销毁的过程，是一种条件渲染，如果为false，就不会进行渲染；v-show会先渲染出来，通过CSS切换控制显示/隐藏。
• v-if会不断的创建/销毁，v-show只编译一次，后面通过CSS控制，v-show性能更好。
• 频繁切换用v-show；不需要频繁切换用v-if。

三、一个变量有哪些属性。

属性描述符：configurable、enumerable、value、writable、set、get

四、项目介绍。

五、对原型链的理解，创建一个Number的原型链。

每一个JavaScript对象（除null）被创建的时候，都会与之关联另外一个对象，并从中继承方法和属性，这个对象就是原型。而原型对象也可能拥有原型，并继承它的属性和方法，一层一层，以次类推，这种关系就是原型链。

let num = new Number(1);
num.__proto__ === Number.prototype; // true
Number.prototype.__proto__ === Object.prototype; // true
Object.prototype.__proto__ === null; // true
Number.__proto__ === Function.prototype;
1
2
3
4
5

注意：Array、Number等内置函数也是由Function构造函数创建的。隐式原型：__proto__，显示原型：prototype。
通过Object.create(obj)创建出来的对象的隐式原型指向obj；通过字面量创建出来的对象的隐式原型指向Object.prototype。

六、instanceof的原理

作用：判断构造函数的prototype属性是否出现在某个实例的原型链上。

七、接口规范。

前、后端开发流程：

• 后端编写和维护接口文档，当API变化时更新接口文档；
• 后端根据接口文档进行接口开发；
• 前端根据接口文档进行页面开发，同时可以Mock数据；
• 开发完成后前后端联调并测试。

接口规范原则：

• 接口返回数据即显示，前端主要做渲染逻辑的处理；
• 渲染逻辑不要跨多个接口来调用；
• 前端注重交互、渲染逻辑，尽量避免处理业务逻辑；
• 请求响应传输的数据格式：JSON，JSON数据尽量简单轻量，避免多级JSON的出现。

响应格式：

{
	code: 200,
	data: {
		message: "success"
	}
}
1
2
3
4
5
6

参考

八、前端路由规范。

path采用模块名/页面名，命名规范采用kebab-case；
name采用模块名[页面名]，命名规范采用KebabCase。

九、场景题：窗口宽高：200px × 200px，canvas画布宽高1000px × 1000px，怎么拖拽。

十、算法：0到n的数组，乱序，中间缺失了两个元素，找出这两个元素。

三面（2021/7/30）
聊天