24、webpack在使用层面，对插件和loader不够理解。

• gulp

1、

• grunt

1、

node

（1）nodejs 实践
（2）nodejs性能高在哪里
高并发非阻塞
IO 密集
（3）stream pipe
说不出背压机制
6、node
线上oom(通过重启，打profile，复现寻找bug点)。
基本的node性能监控
alinode等profile工具
浏览器渲染帧率、动画、性能相关，h5页面优化实践，
对小程序深度性能分析优化等方面很感兴趣
13、node服务线上的稳定，日志，安全，监控都有一定的了解，也有一定的线上运维经验

web安全

• CSRF

• XSS

• CSRF ,XSS的区别

• SQL注入

前端性能

1、原则
（1）多使用内存、缓存或者其他方法。
（2）减少cpu占用，减少网络。

<img id="img1" src="preview.jpg" data-realsrc="abc.jpg">
<script type="text/javascript">
var img1 = document.getElementById('img1');
img1.src = img1.getAttribute('data-realsrc');
</script>

3、dom操作
（1）减少dom查询，对dom查询做缓存。

// 未缓存dom查询
var i;
for (i = 0; i < document.getElementsByTagName('p').length; i++) {
	// todo
}
// 缓存了dom查询
var pList = document.getElementByTagName('p');
var i;
for (i = 0; i < pList.length; i++) {
 // todo
}

（2）减少dom操作，多个操作尽量合并在一起执行。

var frag = document.createDocumentFragment(); // 片段，循环插入dom，改成先插入到片段，再append到文档流

（3）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
4、事件
（1）尽早执行操作（如DOMContentLoaded）
（2）事件节流

var textarea = document.getElementById('text');
var timeoutId;
textarea.addEventListener('keyup', function() {
	if(timeoutId) {
		clearTimeout(timeoutId);
	}
	timeoutId = setTimeout(function() {
		// 触发change事件
	}， 100)
})

5、代码细节优化
（1）用hash-table来优化查找
（2）多个变量声明合并
（3）少用全局变量
（4）避免全局查询
（5）避免使用with(with会创建自己的作用域，会增加作用域链长度)
（6）用setTimeout来避免页面失去响应
三、移动端性能优化
1、css
（1）不滥用Float。Float在渲染时计算量比较大，尽量减少使用
（2）不滥用Web字体。Web字体需要下载，解析，重绘当前页面，尽量减少使用。
（3）避免使用css3渐变阴影效果。
2、css动画
（1）尽量使用css3动画，开启硬件加速。
可以用transform: translateZ(0)来开启硬件加速。
CSS中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发GPU渲染，请合理使用。过渡使用会引发手机过耗电增加
3、合理使用requestAnimationFrame动画代替setTimeout
4、适当使用touch事件代替click事件。

• 非核心代码异步加载

• 预解析dns

<link rel="dns-prefetch" href="//host_name_to_prefetch.com">

2、强制打开a标签的dns预解析

<meta http-equiv="x-dns-prefetch-control" content="on">

页面中所有a标签，默认打开了dns预解析，如果链接是https开头的，默认关闭dns预解析

浏览器
浏览器缓存、浏览器渲染机制、浏览器渲染过程、重排reflow、重绘repaint、浏览器兼容

• 浏览器缓存

// Expires：
Expires:Thu, 21 Jan 2017 23:39:02 GMT // value值表示的是绝对时间，一般都是服务器时间，可能与客户端时间不一样
// Cache-Control：
Cache-Control: max-age=3600 // value值是以客户端时间为准

如果服务器这两个时间都下发了，以后者为准
2、协商缓存：与服务器协商是否要用，是否过期
（1）Last-Modified/ If-Modified-Since
Last-Modified: Web, 26 Jan 2017 00:35:11 GMT
（2）Etag/ If-None-Match
if-none-match的值就是服务器发过来的etag的值

• 浏览器渲染机制

• 浏览器渲染过程

• 重排Reflow

1、定义
也叫回流，DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow

• 重绘Repaint

1、定义
当各种盒子的位置、大小及其他属性，如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，也是页面的内容出现了，这个过程称之为repaint
即页面呈现的内容统统画在屏幕上。

• 浏览器兼容

#box{ float:left; width:100px; margin:0 0 0 100px; // 这种情况之下IE会产生200px的距离，这时需要设置display:inline; 使浮动忽略}

算法相关

通常情况下，搞金融的都会考算法。
一、排序

快速排序：https://segmentfault.com/a/1190000009426421
选择排序：https://segmentfault.com/a/1190000009366805
希尔排序：https://segmentfault.com/a/1190000009461832
二、堆栈、队列、链表
堆栈：https://juejin.im/entry/58759e79128fe1006b48cdfd
队列：https://juejin.im/entry/58759e79128fe1006b48cdfd
链表：https://juejin.im/entry/58759e79128fe1006b48cdfd
（1）js数组本身就具备堆栈和队列特性。
（2）堆栈：先进后出。
三、递归
递归：https://segmentfault.com/a/1190000009857470
（1）60%的算法题都用到递归。
四、波兰式和逆波兰式
理论：http://www.cnblogs.com/chenying99/p/3675876.html
源码：https://github.com/Tairraos/rpn.js/blob/master/rpn.js

 function bubbleSort(arr) {
    let len = arr.length;
    for (let i = 0; i < len; i++) {
       for (let j = 0; j < len - i - 1; j++) { // j=0时，得到最大的元素，放在了最后面
         if (arr[j] > arr[j+1]) {
           [arr[j], arr[j+1]] = [arr[j+1], arr[j]];
         }
       }
    }
    return arr;
  }
  let arr = [3,5,1,2,7,8,4,5,3,4];
  let sortedArr = bubbleSort(arr);
  console.log(sortedArr);

设计模式

主要好处就是可以消除对象间的耦合，通过使用工程方法而不是new关键字。将所有实例化的代码集中在一个位置防止代码重复。
工厂模式解决了重复实例化的问题 ，但还有一个问题，那就是识别问题，因为根本无法搞清楚他们到底是哪个对象的实例。

function createObject(name,age,profession){//集中实例化的函数var obj = newObject();
    obj.name =name;
    obj.age = age;
    obj.profession= profession;
    obj.move =function () {
        returnthis.name + ' at ' + this.age + ' engaged in ' + this.profession;
    };
    return obj;
}
var test1 = createObject('trigkit4',22,'programmer');//第一个实例
var test2 =createObject('mike',25,'engineer');//第二个实例

2、构造函数模式
使用构造函数的方法 ，即解决了重复实例化的问题 ，又解决了对象识别的问题，该模式与工厂模式的不同之处在于：
①构造函数方法没有显示的创建对象 (new Object());
②直接将属性和方法赋值给 this 对象;
③没有 renturn 语句。

var __name = 'may';
Object.defineProperty(obj, 'name',{
	get: function() {
		return __name;
	},
	set: function(newVal) {
		__name = newVal; // 修改__name = 'april',obj.name就会变成april
	}
})

（2）data属性代理到vm上
2、模板引擎：vue的模板如何被解析，指令如何处理？
（1）模板是什么
①本质：字符串
②有逻辑，如v-if, v-for等
③与html格式很像，但有很大区别
④模板最终必须转换成Js代码（js函数-render函数），因为
有逻辑（v-if, v-for），必须用js才能实现（图灵完美语言）
转换为html渲染页面，必须用js才能实现
（2）render函数
（3）render函数与vdom
3、渲染：vue的模板如何被渲染成Html?以及渲染过程？

正则表达式

hybrid

15、hybrid业务开发经验，对离线包机制熟悉，多各种优化方案也了解得比较清楚。

7、离线包加载和更新机制，
22、servive worker, web worker

全栈

8、图片加载的一个细节，能够从全栈角度给出一些高并发情况下的系统扩展思路
27、跨域access-control-allow-origin多域名白名单处理
cdn部署
前端框架选型
人员协调项目延期
整个部门没有用到mock平台，前后端分离
自己写了服务在服务端用webpack+multi方式融合不同的业务模块打包
Mbox的数据管理方案（mbox的数据状态流转机制）
数据库，数据索引，事务，数据库锁的问题

5、前端核心监控数据来源（performance api + 业务定义为主）

31、逻辑外链如何保持多个数据同步

项目

16、资讯类的项目，有哪些技术特点（本想了解list相关的回答）
详情里面做了哪些
详情页对性能要求高，有哪些优化？配置缓存来优化。
缓存如何配置，
哪些缓存头来控制的缓存
类似静态化的性能优化，采用ssr比较适合详情页的技术
1、哪些工作是偏技术的，需要技术来解决的

svn、git