今天进行了有赞三面和四面以及HR面，记录下面试官问到的问题

0. 选择题：CND的作用有哪些？

A. 缓存

B. 资源合并

C. 就近访问

我的选择：A、C

面试官问：什么是就近访问？

我的回答：我们知道，网络有很多节点，一个请求走过的节点越多，那么这个请求就越慢，哪怕每个节点都很快，物理距离也会提高网络延时，光速虽然很快，但是传输也是需要时间的

所以CDN解决了就近访问的问题，CDN叫做内容分发网络，他是一个网络，当我们请求一个资源时，会在最近的节点返回资源(如果有的话)，这样就很快

面试官问：什么是缓存？

我的回答：因为请求的资源在CDN上保存了一个副本，这个副本就是缓存，当一个用户请求了一个资源，被CDN节点所缓存，那么另外一个用户也要请求这个资源，CDN会直接把缓存返回。如果CDN缓存过期，那么CDN会去真正的资源服务器去拿资源，这个过程我们称之为「CDN回源」

面试官问：客户端有缓存吗？

我的回答：当然有，浏览器有强缓存和协商缓存(不知道面试官为什么没有针对这个点展开再问)

面试官问：为什么没有资源合并？

我的回答：可能有资源合并，但这属于CDN提供的增值服务，例如example.com/a.js,b.js 通过这种方式，CDN会把两个js文件merge然后返回。有些CDN服务商会提供类似的功能，但是这不属于CDN的标准功能，所以我没有选B

1. 请画出下面的布局(容器宽度无限)

.a {

color: red;

font-size: 20px;

}

.b {

color: antiquewhite;

float: left;

}

.c {

color: aqua;

float: left;

}

.d {

color: blanchedalmond;

}

我的回答：

aaa

dddbbbccc

我的解释：

因为.b和.c都浮动了，所以脱离文档流，但是所以两者会新起一行，然后当float元素左边遇到非float元素是会挨着它

正确的答案：

bbbcccaaa

ddd

2. 请描述下列选择器的优先级

#id {

color: blue;

}

.a.b {

color: cadetblue;

}

div {

color: chartreuse !important;

}

我的回答：!important > 内联 > id > class

面试官接着问，我们常说的优先级算法是，id是100，class是10，tag是1，那么如果我用11个class作为选择器，是否能覆盖id？

我的回答：这个我不确定，以前看过css selector规范，对算法有详细的描述，不过现在确实忘了

3. 使用ws实现fetch，并按照原来的顺序返回

面试官问：比如有十次fetch调用，其顺序是0,2,3...9，但是服务端的返回可能是8,0,2,9,10,5...3，也就是说请求和响应的顺序是不对应的，怎么让其顺序对应起来？

我的回答：在发请求时，在params中添加一个额外的记录顺序的属性sequence，初始值是0，每次发送sequence++，发送完毕，会初始化一个长度为sequence的稀疏数组

然后服务端接收到请求以后，取出params中的sequence，并原样放入response中

前端收到返回以后，取出sequence的值，例如sequence = 5，那么就把稀疏数组的第5个元素填入response值[ , , , , ,res, , , , ]

等10个请求全部返回，稀疏数组就会被填满，当填满时，在按照顺序执行callback，把每个res作为参数传给callback执行

4. 设计一个可编辑excel表格

形如：

A

B

C

1

AAA

BBB

2

DDD

3

CCC

当我点击某个单元格时，变为可编辑状态，在样式上体现出来，比如边框加粗等

我的回答：

一个单元格的坐标是(A, 1), (B, 2) 这样

然后可以用二维数组来定义数据结构，但是如何定位一个好的数据结构？让处理、后续的数据merge更方便呢？

我想到两个数据结构，第一个是二维数据[[A, B, C], [1, AAA, BBB], [2, , DDD], [3, CCC, ]]，然后表格也要做懒加载，因为表格很大，不可能一次性返回所有的数据，比如我左右滚动到了C列，那么后续的列D、E、F...该怎么加载呢？需要计算下当前所在的行和所在的列，然后把表格右下角的单元格坐标传给服务端，服务端根据算法生成数据：[D: { 1: XXX, 2: YYY... }, E: { 1: null, 2: ZZZ ... }, ...]

如果我上下滚动到第3行，在往下滚动的话，需要加载4、5、6...等行，把左下角的单元格坐标传递给服务端，服务端根据算法生成数据：[[4, XXX, YYY, ...], [5, null, UUU, ...], ...]

然后把根据服务端下发的数据，进行dom操作，把新生成的dom插入进去即可

我想到的另外一个数据结构是，根据坐标放入一个大数组中，例如[{'A:1' : AAA}, {'A:2' : AAA}, {B:2': XXX}, ...]，key作为坐标，value作为单元格的值，但是有一个问题，可能会有数据冗余，因为A出现很多次，但是这些都是高度结构化、同构化的数据，gzip压缩率会很高，所以数据体积不是问题

面试官又问：

那么前端应该怎么写？

我的回答：

前端用flex和table布局皆可，但是我倾向于用table布局，因为这个是符合语义化的，excel表，就是一个表格，所以用table是合适的

然后面试官问，那么我如何找到要编辑的单元格呢？

我的回答：

直接根据坐标找即可

面试官又问：

会有什么问题吗？

我的回答：

应该没有

其实后面想想，我应该说的更多一些，比如如何实现单元格的可编辑？editable=true了解下？这些都是知道的，但是当时没有表达出来

5. java的面向对象和js的面向对象有什么区别

我的回答：

java的面向对象是基于类的，而js的面向对象是基于原型的，那么什么是基于类，什么是基于原型呢？我举一个生活化的例子来说，比如要盖一座大楼，如果有图纸，按照这个图纸来建造的大楼，我们称之为基于类的，图纸就是类，是一个模子，按照这个模子就能实例化一个对象，即大楼。

js是js之父Brendan Eich(布兰登·艾奇)，用了10天的时间设计出来的，所以比较糙，面向对象并不是一个标准的实现(即基于类的实现)

那么js基于原型是怎么做的？原型就是，我看到一座楼很好看的大楼，然后按照这座很好看的大楼作为原型新建造一座大楼，那么这个就属于基于原型的面向对象。

当然，以一个大楼作为原型建造的另外一座大楼，如果要深入进去，可能会发现两个大楼有区别，但是js是鸭子类型，我们只关心我们关心的部分，如果两座大楼我们关心的部分，比如都是钢筋混凝土结构，都是两梯四户，内部构造和格局也一样，一些不关心的部分，比如墙体的颜色、用的是LED灯还是白炽灯等我们会忽略掉这些不关心的部分。。所以鸭子类型的意思是，如果一个对象长得像鸭子、走起路来像鸭子、并且会呱呱叫，那么我们认为它就是一只鸭子(其实可能是条狗)

然后面向对象有三大概念封装、继承、多态，java都有，但是js只有封装、继承，因为js是弱类型语言，所以没办法使用方法签名来区分函数的重写，所以就没有行为的多态，还是因为没有类型，所以也没有类似于Java中的list list = new ArrayList()的多态

面试官接着问：

什么是封装？

我的回答：

封装就是把数据和行为封装到一个对象中

面试官又问：

这是你理解的封装吗？

我的回答：

是的

点评：我的回答其实没有错，但是我可以更进一步这样回答：面向对象层面的封装就是这个意思，但是我们编程时，即便不是面向对象也常常用封装这个词，比如一段代码很多地方调用，那么我们常常会说，要把这段代码「封装」起来，这个是另外一个层面的封装了

6. 总结

自己主要在关注js方面，包括架构、项目等问题，css是自己的一个薄弱点，后面要进行专题强化