阅读目录
webpack、gulp、grunt
11、前端技术体系
待完善
24、webpack在使用层面，对插件和loader不够理解。
1、
1、
1、易用：Gulp相比Grunt更简洁，而且遵循代码优于配置策略，维护Gulp更像是写代码。
node
（1）nodejs 实践
14、koa源码了解
web安全
1、CSRF
CSRF，Cross-site request forgery，通常被称为跨站请求伪造。
1、前提：①用户在注册网站A登录过，②接口有漏洞。
1、token验证。
XSS，cross-site scripting ，跨域脚本攻击。
原理：向页面注入html标签或js脚本。
宗旨：让xss不可执行。1、前端替换关键字，如替换<为< > 为>
1、XSS是向页面注入js去运行，然后在js函数体中做他想做的事情。
1、永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双"-"进行转换等。
前端性能
1、原则
一、加载页面和静态资源 2、非核心代码异步加载。 二、页面渲染 （1）尽量避免在HTML标签中写style属性 （1）避免图片和iFrame等的空Src。空Src会重新加载当前页面，影响速度和效率
<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性能 （1）尽早执行操作（如DOMContentLoaded）
var textarea = document.getElementById('text');
var timeoutId;
textarea.addEventListener('keyup', function() {
if(timeoutId) {
clearTimeout(timeoutId);
}
timeoutId = setTimeout(function() {
// 触发change事件
}， 100)
})
5、代码细节优化（1）用hash-table来优化查找 三、移动端性能优化 1、css
1、动态脚本加载 2、defer 3、async
1、defer是在html解析完之后才会执行，如果是多个，按照加载的顺序依次进行。
1、
<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预解析
浏览器
1、强缓存
// Expires：
Expires:Thu, 21 Jan 2017 23:39:02 GMT // value值表示的是绝对时间，一般都是服务器时间，可能与客户端时间不一样
// Cache-Control：
Cache-Control: max-age=3600 // value值是以客户端时间为准
如果服务器这两个时间都下发了，以后者为准2、协商缓存：与服务器协商是否要用，是否过期 Last-Modified: Web, 26 Jan 2017 00:35:11 GMT
Expires、Cache-Control、Last-Modified、If-Modified-Since、Etag、If-None-Match
待完善
浏览器缓存的区别/ 请描述一下cookies，sessionStorage和localStorage的区别？
1、cookielcoalStorage.setItem(key, value);localStorage.getItem(key);localStorage.getItem会报错，建议统一使用try-catch封装sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
1、localstorage超出： iframe.contentWindow.postMessage()window.parent.postMessage()（2）indexDB
如果 localStorage 存满了，再往里存东西，或者要存的东西超过了剩余容量，会发生什么？
存不进去并报错（QuotaExceededError）
1、定义：DTD（document type definition,文档类型定义）是一系列的语法规则，用来定义XML或（X）HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。
1、HTML5： <!DOCTYPE html>
<!DOCTYPE html>
1、输入url（或跳转页面）加载htmlhttp://coding.m.imooc.com <script src="/static/js/jquery.js"></scrip>
在浏览器中输入url，从输入url到html的详细过程/加载一个资源的过程？
1、dns解析：浏览器根据dns服务器得到域名的ip地址
1、根据html结构生成dom Tree<script>，会执行并阻塞渲染
1、定义
1、增加、删除、修改dom结点时，会导致reflow或repaint
1、属性替代：避免使用触发回流的css属性
1、定义
1、dom改动
1、向浏览器中一次repaint一个节点
1、translate替换top，left, margin等位移属性。 2、opacity替换visibility，但是要同时有translate3d 或 translateZ 这些可以创建的图层的属性存在才可以阻止回流。 3、不要一条一条修改dom样式，预先定义好class，然后修改dom的class 6、不要使用table，table的每一行改变，甚至一个单元格的样式更新，都会导致整个table回流
1、盒子模型相关：
color、border-style、border-radius、visibility、background、box-shadow、outline
你做的页面在哪些流览器测试过, 这些浏览器的内核分别是什么?
IE6、7、8、FF、Opera、Safari、Chrome、MaxthonIE: trident内核。除 IE 外，众多的 IE Shell（如 Maxthon ）都使用trident这个内核。Firefox：gecko内核Safari：webkit内核Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核Chrome：Blink(基于webkit，Google与Opera Software共同开发)
1、在有的浏览器中，默认字体大小为12px,所以在设字体大小的时候，最小设为12px，如果在做的过程中，发现字体小于12，可直接作为图片使用cursor: pointer而hand 只适用于 IE.
#box{ float:left; width:100px; margin:0 0 0 100px; // 这种情况之下IE会产生200px的距离，这时需要设置display:inline; 使浮动忽略}
算法相关
通常情况下，搞金融的都会考算法。
1、比较两个相邻的元素，如果后一个比前一个大，则交换位置。
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);
1、在数据集之中，找一个基准点，将数据分成两个部分，一部分比另外一部分所有的数据都要小，
function quickSort(arr) {
if (arr.length <= 1) { // 如果数组长度小于等于1无需判断直接返回即可
return arr;
}
var pivotIndex = Math.floor(arr.length / 2); // 取基准点
var pivot = arr.splice(pivotIndex, 1)[0]; // 取基准点的值,splice(index,1)函数可以返回数组中被删除的那个数
var left = []; // 存放比基准点小的数组
var right = []; // 存放比基准点大的数组
for (var i = 0; i < arr.length; i++) { // 遍历数组，进行判断分配
if (arr[i] < pivot) {
left.push(arr[i]); // 比基准点小的放在左边数组
} else {
right.push(arr[i]); // 比基准点大的放在右边数组
}
}
//递归执行以上操作,对左右两个数组进行操作，直到数组长度为<=1；
return quickSort(left).concat([pivot], quickSort(right));
};
var arr = [1, 2, 3, 55, 7, 99, 8, 100, 1021];
var sortedArr = quickSort(arr);
console.log(sortedArr);
设计模式
1、工厂模式：
主要好处就是可以消除对象间的耦合，通过使用工程方法而不是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、构造函数模式
1、MVVM 是 Model-View-ViewModel 的缩写。
1、响应式 ：vue如何监听到data的每个属性变化？
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的模板如何被解析，指令如何处理？3、渲染 ：vue的模板如何被渲染成Html?以及渲染过程？
正则表达式
写一个function，清除字符串前后的空格。（兼容所有浏览器）？
function trim(str) {
if (str && typeof str === 'string') {
return str.replace(/(^\s*)|(\s*)$/g, '');
}
}
hybrid
15、hybrid业务开发经验，对离线包机制熟悉，多各种优化方案也了解得比较清楚。
7、离线包加载和更新机制，
全栈
8、图片加载的一个细节，能够从全栈角度给出一些高并发情况下的系统扩展思路
5、前端核心监控数据来源（performance api + 业务定义为主）
31、逻辑外链如何保持多个数据同步
项目
16、资讯类的项目，有哪些技术特点（本想了解list相关的回答）
svn、git
1、git fetch是将远程主机的最新内容拉到本地，用户在检查了以后决定是否合并到工作本机分支中。
转载：
https://blog.csdn.net/aSuncat/article/details/88674643 
