腾讯前端校招面试复盘

大厂面试经验

大厂面试都会很看重基础，尤其是JavaScript，基础要打牢

再一个就是算法，一些常见的算法必须要回，很有可能会让你手撕代码

第一个肯定是先要自我简绍呀，自我介绍不仅是要面试官了解你，更重要的是你要在这段时间里平复一下心情，不要使自己太紧张

下面就是校招腾讯一面的经历了，有些问题可能没有记全，但是也差不多

废话不多说，直接进入正题吧

问：css有哪些常见的布局

这题就是关于css的布局知识了，常见的布局就那几个，但是不仅要说出布局的名字，还要说出如何实现或者是他们的优缺点
答：
1.静态布局
   最传统的布局方式，网页中所有尺寸都是由px作为单位

优点：布局简单，没有兼容性问题。

缺点: 在手机端不能合理的显示，移动端不能使用pc端页面，需要再写一个布局来呈现。

2.流式布局

以百分比为主要形式，让屏幕自适应，这种布局方式定义灵活，能够根据屏幕的情况变化，但是这种方式设计的效果不太容易控制，一般移动端结合rem用的比较多，pc端用的不是非常多

3.单列布局

header,content和footer等宽的单列布局
header与footer等宽,content略窄的单列布局

4.flex布局

flex布局也叫弹性盒子布局，区区简单几行代码就可以实现各种页面的的布局。

给父容器设置 dispaly:flex

这个时候面试官再次追问：你了解flex的哪些属性

flex-direction属性决定主轴的方向（即项目的排列方向） flex-wrap（换行）
justify-content属性定义了项目在主轴上的对齐方式。 align-items属性定义项目在交叉轴上如何对齐。
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用.
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

5.grid布局

Grid布局，是一个基于网格的二维布局系统，目的是用来优化用户界面设计。

6.三栏布局

圣杯布局

比较特殊的三栏布局，两边固定宽度，中间自适应，唯一区别是dom结构必须是先写中间列部分，这样实现中间列可以优先加载。

双飞翼布局

圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。 主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样，圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现，而双飞翼则是在center这个div中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right 。

问：css如何优化

1、css压缩：将写好的css进行打包压缩，可以减少很多的体积；

2、css单一样式：当需要下边距和左边距的时候，

很多时候选择：margin: top 0 bottom 0;

但 margin-bottom: bottom;margin-left: left;执行的效率更高；

3、减少使用 @import, 而建议使用link, 因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载；

4、合理设计CSS 布局，注意复用样式，减少渲染上花的时间。class和ID的选择，少用*这种全局匹配，合理设置基本样式（如设置table{}）提高复用。

5.CSS选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；

可维护性、健壮性：

1、将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用,提高css的可维护性；

2、继上一条，oocss也是提高css性能的途径之一，通过定义可复用的、语义化良好的基础类，然后添加到html中，这也是很多ui框架都在使用的一种方法，例如：class=“btn btn-active btn-blue”；

3、样式与内容分离：讲css代码定义到外部css中；

4、容器与样式分离；

问：自适应屏幕如何实现

使用 媒体查询技术，让页面根据不同屏幕尺寸来加载不同代码模块以实现适配不同屏幕的目的。这种方式需要编写多套代码，虽然工作量大，但对于不同屏幕尺寸的设备都有单独一套CSS代码，维护起来更方便。

媒体查询可针对不同设备场景使用不同css，一般栅格系统和多套代码逻辑匹配页面是都要用媒体查询来确定页面大小。媒体查询技术的原理：通过匹配不同屏幕设备的特征,让不同特征下的CSS代码生效。

常用匹配特征 media features

width/height: 浏览器宽高 max-width： 表示小于最大宽度时生效 min-width： 表示大于最小宽度时生效
device-width/device-height: 设备屏幕分辨率宽高 resolution: 设备分辨率
orientation：portrait(纵向),高度大于等于宽度时，landscape(横向),高度小于宽度时

@media (min-width: 700px) {
 //css代码
 }

问：HTTP的缓存有哪几种

大概有ETag、CacheControl、Expires这几种

区别
ETag 是通过对比浏览器和服务器资源的特征值（如MD5）来决定是否要发送文件内容，如果一样就只发送 304（not modified）
Expires 是设置过期时间（绝对时间），但是如果用户的本地时间错乱了，可能会有问题
CacheControl: max-age=3600 是设置过期时长（相对时间），跟本地时间无关。
Cookie 和 Session的区别

• Cookie是服务器发送给浏览器的一段字符串信息，浏览器在访问对应域名的时候都要把这段字符串带上

• Session是会话，表示浏览器与服务器一段时间的会话

• Session是在服务器上的，Cookie是在浏览器上的。

• Session是基于Cookie的：把session-ID放到Cookie里

Cookie 和 LocalStorage

• 主要区别是 Cookie 会被发送到服务器，而 LocalStorage 不会

• Cookie 一般最大 4k，LocalStorage 可以用 5Mb 甚至 10Mb（各浏览器不同）

• Cookie是用户信息，localstorge是存储不重要信息

LocalStorage 和 SessionStorage

• LocalStorage 一般不会自动过期（除非用户手动清除），而 SessionStorage 在回话结束时过期（如关闭浏览器）

Cookie 和 Session

• Cookie 存在浏览器的文件里，Session 存在服务器的文件里

• Session 是基于 Cookie 实现的，具体做法就是把 SessionID 存在 Cookie 里

问：JS执行机制，什么是宏任务和微任务

js是单线程的 ，单线程意思就是同一时间只能做一件事，按照先后顺序执行.

单线程就意味着，所有任务需要排队。所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。

同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；

异步任务：不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

宏任务和微任务

宏任务主要有：script代码段、setTimeout、setInterval、Promise的构造函数、setImmediate、I/O等.

微任务主要有：process.nextTick和Promise的回调这两种情况.

问：讲一下js中的applay/call/bind都是干什么的

apply()，call()，和bind()都是用来改变函数执行时的上下文也就是说改变this的指向问题

apply()的第一个参数是null，在非严格模式下，第一个参数为null或者undefined时会自动替换为指向全局对象，apply()的第二个参数为数组或类数组。

var max = Math.max.apply(null, [1, 2, 3, 4, 5]);
console.log(max); // 输出5

call()是apply的语法糖，作用和apply()一样，同样可实现继承，唯一的区别就在于call()接收的是参数列表，而apply()则接收参数数组。

var max = Math.max.call(null, 1, 2, 3, 4, 5);
console.log(max); // 输出5

bind()的作用与call()和apply()一样，都是可以改变函数运行时上下文，区别是call()和apply()在调用函数之后会立即执行，而bind()方法调用并改变函数运行时上下文后，返回一个新的函数，供我们需要时再调用。

var person = {
    
    
  name: 'person',
  getName: function() {
    
    
    return this.name;
  }
}
var boy = {
    
    
   name: 'buru'
}
// bind()返回一个新函数，供以后调
var getName = person.getName.bind(boy);

// 现在调用
console.log(getName());    // 输出buru

问：DOM事件流，如何阻止冒泡事件

DOM事件流：事件流描述的是从页面中接收事件的顺序。（事件传播的过程就是事件流）

包括三个阶段：

事件捕获阶段该阶段的主要作用是捕获截取事件

处于目标阶段一般地，该阶段具有双重范围，即捕获阶段的结束，冒泡阶段的开始;

事件冒泡阶段主要作用是将目标元素绑定事件执行的结果返回给浏览器，处理不同浏览器之间的差异，主要在该阶段完成

阻止冒泡的方法

使用 e.stopPropagation() 可以中断冒泡

但是有些事件此方法没有效果，比如说 scroll滚动事件

问：原型链与原型

原型

每个函数都有一个 prototype(原型) 属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。

原型链

JavaScript 中所有的对象都是由它的原型对象继承而来。而原型对象自身也是一个对象，它也有自己的原型对象，这样层层上溯，就形成了一个类似链表的结构，这就是原型链

所有原型链的终点都是 Object 函数的 prototype 属性
Objec.prototype 指向的原型对象同样拥有原型，不过它的原型是 null ，而 null 则没有原型

问：了解哪些排序算法，说一下

排序算法有很多，说出来其中的两三种就可以，但是你要了解他的原理和时间复杂度

冒泡排序，选择排序，归并排序，插入排序，快速排序等

具体的可以看一下这个文章： 前端面试十大经典排序算法（动画演示）