一、安全类
1、csrf：跨站请求伪造；
原理：
（1） 用户C打开浏览器，访问受信任网站A，输入用户名和密码请求登录网站A；
（2）在用户信息通过验证后，网站A产生Cookie信息并返回给浏览器，此时用户登录网站A成功，可以正常发送请求到网站A； （3）用户未退出网站A之前，在同一浏览器中，打开一个TAB页访问网站B；
（4）网站B接收到用户请求后，返回一些攻击性代码，并发出一个请求要求访问第三方站点A；
（5）浏览器在接收到这些攻击性代码后，根据网站B的请求，在用户不知情的情况下携带Cookie信息，向网站A发出请求。网站A并不知道该请求其实是由B发起的，所以会根据用户C的Cookie信息以C的权限处理该请求，导致来自网站B的恶意代码被执行。
防御：
（1）验证 HTTP Referer 字段，判断页面来源
（2）在请求地址中添加 token 并验证；
（3）在 HTTP 头中自定义属性并验证
2、xss：跨站脚本攻击；
原理：向页面注入脚本，（如：评论区）
防御：
（1）对用户输入的数据进行HTML Entity编码
（2）对数据过滤
二、渲染机制
1、DOCTYPE作用：用来声明文档类型和DTD规范，用途：文件的合法性验证
HTML4.0有一个严格模式（不包括展示性的和弃用的元素）和一个传统模式（包括）
2、浏览器如何渲染：
（1）解析HTML形成DOM Tree
（2）解析css产生css规则树（css rule tree）
（3）根据DOM Tree和css规则树来构造rendering Tree
（4）下一步操作称之为Layout，用来计算每个节点在屏幕中的位置
（5）绘制，即遍历render树，使用UI后端层绘制每个节点
Reflow：重排，当某个部分发生了变化影响了布局，就需要倒回去重新渲染
原因：
（1）增加、较少DOM节点
（2）修改css样式的时候
（3）修改网页的默认字体时
避免：
（1）HTML元素使用fixed或absolute，不会引起reflow
（2）使用预先定义好的css的class，修改DOM的className
Repaint：重绘，只改变某个元素的背景颜色，不影响元素周围或内部布局属性，将只会引起浏览器的repaint，重画某一部分
原因：
（1）操作DOM节点
（2）修改css样式
减少repaint：
（1）新建一个节点，将最终的结果放进去，一次性插入
三、js运行机制
<script type="text/javascript"> // 最终输出1、3、2
console.log(1);
setTimeout(function() {
console.log(2);
}, 0);
console.log(3);
</script>
1、js是单线程的：同一时间只能做一件事
2、任务队列：同步任务和异步任务，
3、机制：从上往下执行，先执行同步任务，遇到异步任务先挂起，执行完同步任务在回去执行异步任务
4、异步任务：DOM事件、setTimeout、setInterval、es6中的promise
for (var i = 0; i < 4; i++) { // 输出4个4
setTimeout(function () {
console.log(i);
}, 1000); // 过1s后，才会放入异步队列中，
}
将var改为let便会输出0/1/2/3，作用域不同了
四、页面性能
2、减少http请求
（1）HTML的map图
<img usemap='#map1' src='./music.png'> <map name="map1"> <area shape="rect" coords="0, 0, 45, 180" href="javascript:alert(1);" alt=""> <area shape="rect" coords="45, 0, 90, 180" href="javascript:alert(2);" alt=""> <area shape="rect" coords="90, 0, 135, 180" href="javascript:alert(3);" alt=""> <area shape="rect" coords="135, 0, 180, 180" href="javascript:alert(4);" alt=""> </map>
（2）css精灵
<a href="javascript: alert(1);"> <span class="span1"></span> </a> <a href="javascript: alert(2);"> <span class="span2"></span> </a> <a href="javascript: alert(3);"> <span class="span3"></span> </a> <a href="javascript: alert(4);"> <span class="span4"></span> </a>
span {
display: inline-block;
width: 45px;
height: 45px;
background: url('./music.png');
}
.span1 {
background-position: 0 0;
}
.span2 {
background-position: -45px 0;
}
.span3 {
background-position: -90px 0;
}
.span4 {
background-position: -135px 0;
}
（3）合并css或js文件
（4）使用base64位图片
3、缓存
（1）强缓存：直接从缓存中取
（2）304协商缓存：问一下服务器缓存中的能不能用
（3）http请求头：
Cache-Control: no-store // 禁止浏览器缓存 Cache-Control: no-cache // 不允许直接缓存，即协商缓存 Cache-Control: max-age // 秒，缓存的有效时间 pragma: no-cache // 禁止浏览器缓存 expires: 时间 // 格林威治时间，在之前有效
优先级：pragma>Cache-Control>expires
（4）响应头
Last-Modified // 通知资源最后修改的时间 ETag // 文章内容修改缓存先expires->Last-Modified->ETag 都没过期，返304响应
4、异步加载
<script src="./xxx.js" charset="utf-8" async></script>
<script src="./xxx.js" charset="utf-8" defer>
defer
：用于开启新的线程下载脚本文件，并使脚本在文档解析完成后执行。
async
：HTML5新增属性，用于异步下载脚本文件，下载完毕立即解释执行代码。
5、预解析DNS
<meta http-quiv="x-dns-prefetch-control" content="on"> // 强制打开预解析DNS，http是默认开启的，https是默认关闭的 <link rel="dns-prefetch" href="//local_name.com"> // 将里面的地址预解析
五、错误监控
1、错误分类：
（1）即时运行错误
捕获：
1）try...catch
2）window.onerror
（2）资源加载错误（没有冒泡）
1）object.onerror
2）performance.getEntries()
performance.getEntries().forEach((item) => { console.log(item.name) } ) // 获取所有已经加载的资源
3）Error事件捕获
<head>
<meta charset="utf-8">
<title>错误监控</title>
<script type="text/javascript">
window.addEventListener('error', function (e) {
console.log('捕获', e);
}, true); // 一定要加true
</script>
</head>
<body>
<script src="//badu.com/test.js" charset="utf-8"></script>
</body>
2、跨域错误能捕获吗？可以
（1）客户端：在script标签中加crossorigin属性
<script crossorigin src="http://www.lmj.com/demo/crossoriginAttribute/error.js"></script>
（2）服务端：在响应头Access-Control-Allow-Origin:域名或*
3、上报错误的基本原理
（1）采用Ajax通信的方式上报
（2）利用Image对象上报
(new Image()).src = 'http://baidu.com/tesjk?r=tksjk'; // 后面为上报的的地址