QQ音乐社招前端岗面经分享

之前面试了QQ音乐的社招前端岗，目前为止是两面，把其中问道的我印象深刻一些的技术问题总结出来了，回馈牛客~

 1.视频/音频标签的使用

2. Css选择器有哪些，那些属性可以继承，优先级如何计算？

3.浏览器输入网址到页面渲染全过程

DN

解析TCP连接 发送HTTP请求 服务器处理请求并返回HTTP报文浏览器解析渲 染页面 连接结束

4.overflow的原理

要讲清楚这个解决方案的原理，首先需要了解块格式化上下文，A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other.翻译过来就是块格式化上下文是CSS可视化渲染的一部分，它是一块区域，规 定了内部块盒 的渲染方式，以及浮动相互之间的影响关系 当元素设置了overflow样式且值部位visible时，该元素就构建了 一个BFC，BFC在计算高度时，内部浮动元素的高度也要计算在内， 也就是说技术BFC区域内只有一个浮动元素，BFC的高度也不会发 生塌缩，所以达到了清除浮动的目的。

5.如何判断一个数据是NaN

6.Json如何新增/删除键值对

7.说一下闭包

一句话可以概括：闭包就是能够读取其他函数内部变量的函数，或者子函数在外调用，子函数所在的父函数的作用域不会被释放。

8.JS怎么控制一次加载一张图片，加载完后再加载下一张

9.为什么会造成跨域/请简述同源策略

10.请写出一个简单的类与继承

11.预加载和懒加载的区别，预加载在什么时间

加载合适

预加载是指在页面加载完成之前，提前将所需资源下载，之后使用的时候从缓存中调用；懒加载是延迟加载，按照一定的条件或者需求等到满足条件的时候再加载对应的资源两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

12.请简述vue的单向数据流

父级prop的更新会向下流动到子组件中，每次父组件发生更新，子组件 所有的prop都会刷新为最新的值 数据从父组件传递给子组件，只能单向绑定，子组件内部不能直接修改 父组件传递过来的数据， （可以使用data和computed解决）

13.Vue的生命周期请简述

14.Elementui中的常用组件有哪些？请简述你经常使用的 并且他们的属性有哪些？

二面

1.Vue中组件怎么传值

正向：父传子父组件把要传递的数据绑定在属性上，发送，子组件通过props接收 逆向：子传父 子组件通过this.$emit（自定义事件名，要发送的数 据） ，父组件设置一个监听事件来接收，然后拿到数据 兄弟：eventbus中央事件总线 通过Vuex

2.Vue双数据绑定过程中，这边儿数据改变了怎么通知另一边

改变

数据劫持和观察者模式Vue数据双向绑定是通过数据劫持和观察者模式来实现的， 数据劫持，object.defineproperty它的目的是：当给属性赋值的时候，程序可以感知到，就可以控制属性值的有效范围，可以改变其他属性的 值 观察者模式它的目的是当属性发生改变的时候，使用该数据的地方也发 生改变

3.请简述你对react的理解

4.reactdiff原理

它是基于三个策略：

treediff webUI中dom节点跨层级的移动操作特别少，可以忽略不计componentdiff拥有相同类的两个组件将会生成相似的树形结构，拥有 不同类的两个组件会生成不同的树形结构elementdiff对于同一层级的一组子节点，他们可以通过唯一的id进行 区分

5.小程序的生命周期

6.和vue类比介绍

7.什么是cors

8.HTML5新增的内容有哪些

9.网页中有大量图片加载很慢 你有什么办法进行优化？

10.图片懒加载，在图片未可视区域加一个滚动条事件，判断图片位置与浏 览器顶端和页面的距离，如果前者小鱼后者，优先加载2.使用图片预加载技术，将当前展示图片的前一张和后一张优先下载3.使用csssprite或者svgsprite

11.画一条0.5px的线

12.css定位

13.什么是面向对象请简述

14.说说前端中的事件流

15.实现JS中所有对象的深度克隆（包装对象，Date对象，正则对象）

16.请输出三种减少页面加载时间的方式

17.优化图片

18.图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高 的地方）

19.优化CSS（压缩合并css，如margin-top, margin-left...)

20.同步与异步的区别/阻塞与非阻塞区别

同步（阻塞的）异步（非阻塞）比如：同步，咱两在一起上班，到吃饭时间了，我去喊你一起吃饭，你很忙，我就坐着等你忙完再一起去吃饭异步，咱两在一起上班，到吃饭时间了，我去喊你一起吃饭，你很忙，我就先自己去吃了，你忙完了再去吃饭同步（阻塞）异步（非阻塞）这两个关注的是程序在等待调用结果时的状态.