web前端最近几年还是非常火，需求也比较大，且相对后端来说，web前端对非计算机专业同学门槛会更低一些，因此，不少同学转web前端坑。本文整理了腾讯几个部门web前端（vue方向）的面试题以及一些解答，希望对web前端同学有一定帮组。
web前端三马车的问题问的比较少，可能跟网上有点多有关。
网上有
1) d3正如其名 Data Driven Documents，其本质是将数据与 DOM 绑定，并将数据映射至 DOM 属性上；
2) d3与echarts的区别：
网上有，有几种写法。
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
父子组建通信方式主要以下几种：
具体例子：
1）父组件->子组件
（1）直接关系：
1. 属性传值(props)
2. $children（数组）
3. $refs
（2）跨多层关系：
1. provide / inject
2）子组件->父组件
（1）直接关系：
1. 事件传值
2. $parent
（2）跨多层关系：
1. 暂无
3）兄弟组件
（1）使用事件中心，实例化一个空的 Vue 实例（建议使用vuex）
自定义组件打包上传到npm，网上有具体流程。
1）XSS 其实就是所谓的 HTML 注入，攻击者的输入没有经过后台的过滤直接进入到数据库，最终显示给来访的用户。如果攻击者输入一段 js 脚本，就能窃取来访者的敏感信息（比如 Cookie），实现伪装成来访者对网站发送危险请求。
2）避免 XSS 的方法之一主要是对用户输入的内容进行过滤。
3）XSS 是实现 CSRF 的诸多途径中的一条，但绝对不是唯一的一条。一般习惯上把通过 XSS 来实现的 CSRF 称为 XSRF。
4）要完成一次CSRF攻击，受害者必须依次完成两个步骤：
5）给每个表单加入随机 Token 进行验证，这样B页面无法获取A页面的 Token 导致请求验证失败，从而防止了 CSRF。CSRF攻击是源于WEB的隐式身份验证机制！WEB的身份验证机制虽然可以保证一个请求是来自于某个用户的浏览器，但却无法保证该请求是用户批准发送的！
1）白屏时间 = 地址栏输入网址后回车 - 浏览器出现第一个元素
影响白屏时间的因素：网络、服务端性能，前端页面结构设计。
2）给个例子，通常认为浏览器开始渲染<body>或者解析完<head>的时间是白屏结束的时间点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>白屏时间</title>
<script>
// 开始时间
window.pageStartTime = Date.now();
</script>
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">
<!-- ...页面css资源 -->
<script>
// 白屏结束时间
window.firstPaint = Date.now()
</script>
</head>
<body>
<div>123</div>
</body>
</html>
白屏时间 = firstPaint - pageStartTime
简单说下几方面方法：
1）将表格实现改为其他元素标签实现
2）仅渲染视窗可见的数据
3）进行函数节流，即控制scroll事件的处理，在规定的时间内仅触发一次
4）减少驻留的VNode和Vue组件，不使用显示的子组件slot方式，改为手动创建虚拟DOM来切断对象引用
5）减少操作期间增加的对象，操作时组件必然会更新创建，可以减少组件中子组件的数量
1、你遇到的最大的困难？是如何克服困难的？
2、印象最深刻的一个项目，为什么，这个项目给你的最大的收获是啥？
通过相碰变色，使得其中两种变色龙的数量相差3，例如三种龙为:a,b,c，其中a-c的数量为，,a和c相碰变色为b,则a和c的数量就相等，之后a和c两两相碰，全部变色为b。
基于单链表反转算法（非递归），进行以k为步长的单链表反转。
)
)
)
)
评论留言