面试复习整理的笔记
一、通信类
1、什么是同源策略及限制
从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。
源包括协议、域名、端口（默认端口80），这三方面有一个不一样就表示跨域了
cookie,localstorage,indexDB无法获取
DOM无法获取
AJAX请求不能发送
2、前后端如何通信
ajax
websocket不受跨域限制
cors支持跨域、同源
3、如何创建Ajax
借助第三方框架：VUE，Jquery
XMLHttpRequest对象的工作流程
兼容性处理
事件的触发条件
事件的触发顺序
ajax五部曲
4、跨域通信的几种方式
JSONP
Hash
postMessage
WebSocket
CORS
fetch('/some/url',{ method:'get'
}).then(function(response){}).catch(function(err){})
CORS怎样实现跨域的？浏览器会拦截跨域的ajax请求，CORS会在http中加一个origin
二、安全类
CSRF：cross-site request forgery跨站请求伪造，利用本身漏洞执行接口
防御措施
Token验证
Referer验证
隐藏令牌
XSS
cross-site scripting跨域脚本攻击，往页面注入js运行
攻击原理
防御措施
三、算法
1、排序
快速排序https://segmentfault.com/a/1190000009426421
选择排序https://segmentfault.com/a/1190000009366805
希尔排序https://segmentfault.com/a/1190000009461832
2、堆栈、队列、链表
3、递归
希尔排序https://segmentfault.com/a/1190000009857470
4、波兰式和逆波兰式
四、渲染机制
1、什么是DOCTYPE及作用
DTD文档类型定义，告诉浏览器文档类型，决定使用何种协议解析以及切换浏览器模式；
DOCTYPE用来声明文档类型和DTD规范的
H5 <!DOCTYPE html>
H4有严格模式和宽松模式，严格模式不包括展示性的和弃用的元素
2、浏览器渲染过程
预解析 DOM tree cssom render tree,layout计算位置，
重排reflow
重绘repaint
布局layout
五、js运行机制
js引擎、js与浏览器怎么实现交互
测试1
console.log(1);
setTimeout(function () {
console.log(2);
},0);
console.log(3);结果为1、3、2
js是单线程的，同一时间只能做一件事，setTimeout是异步任务，异步任务执行时先挂起，等同步任务完成后，才去响应异步任务
测试2
console.log('A');
while(1){};
console.log('B');结果为A
执行while会卡住
测试3
for(var i=0;i<4;i++){
setTimeout(function () {
console.log(i);
},1000);
}
结果为4个4
循环时把setTimeout交给定时器模块，达到1000的时间后，才放到异步队列
通行栈放的同步队列，异步任务到时间了就放入异步任务队列，等同步任务执行完后去异步队列取异步任务到通行栈，通行栈的异步任务执行完后又去取异步任务，这个循环称之为event loop
异步任务
setTimeout
DOM事件
ES6 promise
六、页面性能
提升页面性能的方法有哪些？
1、资源压缩合并，减少HTTP请求
2、非核心代码异步加载——异步加载的方式——异步加载的区别
异步加载的方式：动态脚本加载（说白了就是动态创造节点）、defer、async，在异步加载时的script标签上加上defer、async属性
异步加载的区别：defer是在HTML解析完后才会执行，如果是多个，按照加载顺序执行
async是在加载完后立即执行，如果是多个，执行顺序和加载顺序无关,先执行完的先出结果
3、利用浏览器缓存——缓存的分类——缓存的原理
缓存是请求的资源文件在本地的备份
缓存分类
强缓存:不请求直接从本地获取资源（通过时间限制，EXPIRES和CACHE-CONTROL）
Expires表示过期时间，绝对时间以服务器为准
Cache-Control表示相对时间，以客户端时间为准
如果两个时间都有以后者为准
协商缓存:浏览器和服务器协商是否用本地缓存
Last-Modified响应头拿到资源的时间。当强缓存失效了，协商缓存发生请求时，请求头会通过if-modified-since携带Last-Modified的值告诉服务器，服务器再做对比。
ETag服务器下发资源时的hash值。协商缓存可能只是时间变了但是内容没变化，这种可以还是从缓存获取资源，通过if-none-match携带ETag的值告诉服务器
4、使用CDN,CDN加速资源非常快
5、预解析DNS
dns-prefetch预解析
<meta http-equiv="x-dns-prefetch-control" content="on">
页面中的a标签在高级浏览器中是默认打开了预解析的，而一般https协议的浏览器是关闭了a标签的预解析的，所以需要上面这个把a标签的预解析打开
<link rel="dns-prefetch" href="//host_name_to_prefetch.com">
预解析把这句放在head中
七、错误监控
代码质量体系，线上环境错误收集
1、前端错误分类
及时运行错误：代码错误
资源加载错误
2、错误的捕获分类
及时运行错误：try catch; window.onerror不能捕获资源加载错误
资源加载错误:这种错误不会冒泡，所以window.onerror无法捕获错误。
三种：object.onerror;performance.getEntries;Error事件捕获
performance.getEntries返回数组
performance.getEntries.forEach((item)=>{console.log(item.name)})表示加载的资源个数
document.getElementByTagName('img')
延伸：跨域的JS运行错误也可以捕获，错误提示是什么？怎样处理？
处理的方法
1、客户端：在script标签增加crossorigin属性
2、服务端：设置js资源响应头Access-Control-Allow-Origin:*
通过以上设置就能拿到错误信息了
3、上报错误的基本原理
采用Ajax通信方式上报，利用Image对象上报,一行代码，也不借助第三方库
script标签内容(new Image()).src='url'会发出请求
八、面试技巧
描述演练：架构、技术、人员组织、难点攻克
态度谦虚、回答灵活、学会赞美
业务能力：做过什么业务、业务的业绩、技术方案、技术难点、收获
思考能力：同一件事从不同角度思考
学习能力
职业规划：目标、近阶段目标、长期目标、方式方法
团队协作能力
