腾讯web前端面试题及解答（vue）202006
web前端最近几年还是非常火，需求也比较大，且相对后端来说，web前端对非计算机专业同学门槛会更低一些，因此，不少同学转web前端坑。本文整理了腾讯几个部门web前端（vue方向）的面试题以及一些解答，希望对web前端同学有一定帮组。
一、JS/HTML/CSS
web前端三马车的问题问的比较少，可能跟网上有点多有关。
1.讲讲对promise的理解？
网上有
2.讲讲对d3的理解，讲讲d3与echarts的区别
1) d3正如其名 Data Driven Documents，其本质是将数据与 DOM 绑定，并将数据映射至 DOM 属性上；
2) d3与echarts的区别：
- d3通过svg绘制图形，可以自定义事件。svg不依赖分辨率，继续xml绘制图形，可以操作dom。支持事件处理器，复杂度高，会减慢页面的渲染速度。
- echarts通过canvas来绘制图形，用户通过配置 options 参数，就可很容易绘制指定图表。canvas依赖分辨率，基于js绘制图形，不支持事件处理，能以png或者jpg的格式保存图片。
3.前端需要注意哪些seo(搜索引擎优化)？
- 合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可
- 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
- 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取 重要内容不要用js输出：爬虫不会执行js获取内容
- 少用iframe：搜索引擎不会抓取iframe中的内容
- 非装饰性图片必须加alt
- 提高网站速度：网站速度是搜索引擎排序的一个重要指标
4.面试过程手写三角形的CSS样式
网上有，有几种写法。
二、VUE
1. vuex原理
- vuex的store有State、 Getter、Mutation 、Action、 Module五种属性；
- state 为单一状态树，在state中需要定义我们所需要管理的数组、对象、字符串等等
- getters 类似vue的计算属性，主要用来过滤一些数据。
- mutation 更改store中state状态的唯一方法就是提交mutation，store.commit。
- action actions可以理解为通过将mutations里面处理数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。
- module module其实只是解决了当state中很复杂臃肿的时候，module可以将store分割成模块，每个模块中拥有自己的state、mutation、action和getter。
2.vue双向数据绑定，讲讲发布者订阅者模式
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的：
1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者；
2.实现一个订阅者Watcher，每一个Watcher都绑定一个更新函数，watcher可以收到属性的变化通知并执行相应的函数，从而更新视图；
3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令（v-model，v-on等指令），如果节点存在v-model，v-on等指令，则解析器Compile初始化这类节点的模板数据，使之可以显示在视图上，然后初始化相应的订阅者（Watcher）；
a、Observer实现对MVVM自身model数据劫持，监听数据的属性变更，并在变动时进行notify；
b、Compile实现指令解析，初始化视图，并订阅数据变化，绑定好更新函数；
c、Watcher一方面接收Observer通过dep传递过来的数据变化，一方面通知Compile进行view update；
先初始化一个监听器Observer，用于监听该对象data属性的值。
然后初始化一个解析器Compile，绑定这个节点，并解析其中的v-，" {{}} "指令，（每一个指令对应一个Watcher）并初始化模板数据以及初始化相应的订阅者，并把订阅者添加到订阅器中（Dep）。这样就实现双向绑定了。
整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁
data如何更新view
使用observer（观察者）实现数据劫持，绑定watcher（订阅者）的更新函数，watcher通知compile（模板编译）更新虚拟dom，最终挂载真实dom上
view如何更新data
使用事件监听函数绑定事件，在事件中改变值触发observer的set，再触发watcher
3. 父子组件如何通信，兄弟组件如何通信
父子组建通信方式主要以下几种：
- Prop（常用）
- $emit (组件封装用的较多)
- .sync语法糖 （较少）
- $attrs & $listeners (组件封装用的较多)
- provide & inject （高阶组件/组件库用的较多）
- slot-scope & v-slot （[email protected]+）新增
- scopedSlots 属性
具体例子：
1）父组件->子组件
（1）直接关系：
1. 属性传值(props)
2. $children（数组）
3. $refs
（2）跨多层关系：
1. provide / inject
2）子组件->父组件
（1）直接关系：
1. 事件传值
2. $parent
（2）跨多层关系：
1. 暂无
3）兄弟组件
（1）使用事件中心，实例化一个空的 Vue 实例（建议使用vuex）
4.vue如何将一个组件打包上传
自定义组件打包上传到npm，网上有具体流程。
三、安全
1. 讲讲CSRF和XSS
1）XSS 其实就是所谓的 HTML 注入，攻击者的输入没有经过后台的过滤直接进入到数据库，最终显示给来访的用户。如果攻击者输入一段 js 脚本，就能窃取来访者的敏感信息（比如 Cookie），实现伪装成来访者对网站发送危险请求。
2）避免 XSS 的方法之一主要是对用户输入的内容进行过滤。
3）XSS 是实现 CSRF 的诸多途径中的一条，但绝对不是唯一的一条。一般习惯上把通过 XSS 来实现的 CSRF 称为 XSRF。
4）要完成一次CSRF攻击，受害者必须依次完成两个步骤：
- 登录受信任网站A，并在本地生成Cookie。
- 在不登出A的情况下，访问危险网站B。
5）给每个表单加入随机 Token 进行验证，这样B页面无法获取A页面的 Token 导致请求验证失败，从而防止了 CSRF。CSRF攻击是源于WEB的隐式身份验证机制！WEB的身份验证机制虽然可以保证一个请求是来自于某个用户的浏览器，但却无法保证该请求是用户批准发送的！
2. DNS劫持与DNS污染
- DNS劫持 DNS劫持就是通过劫持了DNS服务器，通过某些手段取得某域名的解析记录控制权，进而修改此域名的解析结果，导致对该域名的访问由原IP地址转入到修改后的指定IP。DNS劫持通过篡改DNS服务器上的数据返回给用户一个错误的查询结果来实现的。
- DNS污染 DNS污染，指的是用户访问一个地址，国内的服务器(非DNS)监控到用户访问的已经被标记地址时，服务器伪装成DNS服务器向用户发回错误的地址的行为。范例，访问Youtube、Facebook之类网站等出现的状况。
四、性能优化
1.计算浏览器的白屏时间
1）白屏时间 = 地址栏输入网址后回车 - 浏览器出现第一个元素
影响白屏时间的因素：网络、服务端性能，前端页面结构设计。
2）给个例子，通常认为浏览器开始渲染
或者解析完的时间是白屏结束的时间点白屏时间 = firstPaint - pageStartTime
2. 加载一个很长的列表，怎么优化性能？
简单说下几方面方法：
1）将表格实现改为其他元素标签实现
2）仅渲染视窗可见的数据
3）进行函数节流，即控制scroll事件的处理，在规定的时间内仅触发一次
4）减少驻留的VNode和Vue组件，不使用显示的子组件slot方式，改为手动创建虚拟DOM来切断对象引用
5）减少操作期间增加的对象，操作时组件必然会更新创建，可以减少组件中子组件的数量
非技术问题
1、你遇到的最大的困难？是如何克服困难的？
2、印象最深刻的一个项目，为什么，这个项目给你的最大的收获是啥？
笔试题：
1. 手写快速排序算法
var quickSort = function(arr) {
if(arr.length<=1)
return arr;
var left=[],right=[];
var index=Math.floor(arr.length/2);
var midVal=arr.splice(midVal,1)[0];
for(var i=0;i2.js实现数组千分位
//正则实现
function format (num) {
var reg=/\d{1,3}(?=(\d{3})+$)/g;
return num.toString().replace(reg, '$&,');
}
//基础
function format(num){
num+='';
var str="";
for(var i=num.length-1,j=1;i>=0;i--,j++){
if(j%3===0 & i!=0){
str+=num[i]+',';
}else{
str+=num[i];
}
}
return str.split('').reverse().join('');
}3.写call函数的实现
Function.prototype.call2 = function (context) {
var context = context || window;
context.fn = this;
var args = [];
for(var i = 1, len = arguments.length; i < len; i++) {
args.push('arguments[' + i + ']');
}
var result = eval('context.fn(' + args +')');
delete context.fn
return result;
}4. 查找数组中元素和等于给定数的子数组
var ans,res,len;
var dfs=function(index,sum,candidates,target){
if(sum===target){
var tmp=res.map(function(item){
return item;
})
ans.push(tmp);
// console.log(res,ans);
return ;
}
for(var i=index;itarget)
continue;
res.push(candidates[i]);
dfs(i,sum+candidates[i],candidates,target);
res.pop();
}
}
var combinationSum = function(candidates, target) {
ans=[];
len=candidates.length;
candidates.sort((a,b)=>a-b);
for(var i=0;i 5.变色龙问题，给定10、15、17只三种颜色的变色龙，每两只一碰就会变成第三种颜色，最后如何变成同一种颜色，总结规律
通过相碰变色，使得其中两种变色龙的数量相差3，例如三种龙为:a,b,c，其中a-c的数量为，,a和c相碰变色为b,则a和c的数量就相等，之后a和c两两相碰，全部变色为b。
6.给定一个链表和一个值k，每隔k进行反转。例如1->2->3->4->5->6->7,k为3，反转结果为3->2->1->6->5->4->7。
基于单链表反转算法（非递归），进行以k为步长的单链表反转。
如有软件开发需求，欢迎关注公众号“橙狮软件”。
