一、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样式网上有，有几种写法。
二、VUE1. 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 （vue@2.6.0+）新增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）给个例子，常日认为浏览器开始渲染<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
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;i<arr.length;i++){ arr[i]<midVal?left.push(arr[i]):right.push(arr[i]); } return quickSort(left).concat(midVal).concat(quickSort(right));};
//正则实现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('');}
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;}
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;i<len;i++){ if(sum+candidates[i]>target) 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<len;i++){ res=[candidates[i]]; dfs(i,candidates[i],candidates,target); } return ans;};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为步长的单链表反转。
