XSS
xss(cross siteScript)全称跨站脚本攻击，其原理是攻击者向有XSS漏洞的网站输入恶意html代码，当网站被浏览时，这段代码就被执行，从而达到攻击的目的，比如盗取cookie。
防御：对用户的输入进行处理，只允许输入合法的符号；对标签进行转义
常见网络状态码
200-服务器已成功处理请求
201-请求成功并且服务器创建了新的资源
301-请求的网页已永久移动到新位置
304-资源没有被修改
400-错误请求，服务器不理解请求的语法
401-未登录授权
403-禁止，服务器拒绝服务
404-未找到，资源不存在
410-请求的资源被永久删除
500-服务器内部错误
503-服务不可用，一般是暂时，如停机维护
跨域方法
JSONP
利用<script>标签不受同源策略限制的通过其它来源动态生成带有数据的的js脚本返回给用户。过程是用户通过GET请求传递一个callback参数给服务端，服务端返回脚本时会将这个参数作为函数名并包裹JSON数据作为函数参数，如果客户端已经定义了一个与callback同名的函数，那么返回的脚本就会被执行，从而在客户端展现。
举个例子：
客户端(3000端口)代码：
<script type="text/javascript">
function callbackForJsonp(jsonFromOtherOrign) {
console.log(jsonFromOtherOrign);
}
</script>
<script type="text/javascript" src="http://localhost:8888/jsonp?callback=callbackForJsonp" ></script>
node端(8888端口)代码：
app.get('/jsonp', function(req, res, next) {
var callback = req.query.callback;
res.send(callback+'("hello world")');
})
运行结果
可以看到3000端口的页面获取到了8888端口服务的数据完成了跨域(有一个无关错误，请无视)
其实只有是带有src属性的便签都具有跨域的能力，如<img>,具体可以参看《javascript高级程序设计》
以上JSONP这部分参考了极乐科技知乎专栏十分感谢！
CORS(跨域资源共享)
我理解cors是浏览器对http协议进行扩充之后由服务端配合完成跨域数据访问的一种跨域方法。其核心思想是在服务器端有一个可以接受其请求的域名表，客户端发起跨域请求时需在请求头中设置origin(也就是客户端的域名地址)，服务端收到请求后会检验这个origin是否在许可访问的地址表中，如果在的话在返回数据的同时还会设置返回头信息字段Access-Control-Allow-Origin，浏览器依靠检查返回头有没有这个字段判断此次跨域请求是否成功，如果没有就会报错。更多细节可以参看
阮一峰-跨域资源共享 CORS 详解
MDN-HTTP访问控制（CORS）
js严格模式
- 全部变量必须显式声明
- 禁止with
- eval有单独的作用域
- this不能指向全局作用域
- delete不能删除变量
- 对象不能用重复的属性名，函数不能有重名的参数
- 不允许对arguments赋值，arguments不再追踪参数的变化
- 函数必须声明在顶层
- 一些新的保留字 let， private...
原生js事件
DOM0事件
DOM0事件直接在dom对象上注册，是dom对象的一个属性，如
document.getElementById('id').onclick = function(e) {
//todo
}
可以想到，因为这里注册的点击事件是dom对象的一个属性，如果我们在之后对这个dom对象重新注册一个点击事件就会覆盖当前注册的事件，所以DOM事件是不能注册多个相同事件的！另外，显然下面这种写法也是可以的：
document.getElementById('id')['onclick']= function(e) {
//todo
}
这样，移除事件也很简单:
document.getElementById('id').onclick=null;
还有，基于js函数是基于对象调用时，this指向调用方法的对象的原理，可以知道事件处理函数内部的this是指向注册它的dom对象的。
DOM2事件
DOM2事件最大的特点就是多了捕获和冒泡这两个过程。
看上面这幅图，当图中的div触发某个事件是，最先收到通知的是window，接下来依次是document、body，最后才是真正注册事件的div元素，这个从最顶层元素慢慢通知到注册事件元素的过程就是捕获过程。当事件通知到注册事件的元素之后就不会再继续向下一层的元素通知了，会沿着来时的方向再通知一次，但是这次就是冒泡过程，只有注册了冒泡事件的元素才会触发事件。由此，可以得出以下几个结论：
- 捕获事件总是比冒泡事件先触发
- 同样注册捕获事件，外层元素比内层元素先触发
- 同样注册冒泡事件，内层元素比外层元素先触发
一个问题：
内层元素被触发，外层元素如果注册了同样的事件也会被触发，这种情况怎么解决：内层元素时间禁止冒泡(event.stopPropagation();)的同时，外层元素注册冒泡事件
前端性能优化
- 减少HTTP请求：使用缓存，压缩合并代码， sprite图
- 内容多的页面差量加载
- 使用CDN
- 优化文件加载顺序（CSS，HTML，js）
- 减少cookie(静态资源使用无cookie域名)
浏览器内核
内核构成：渲染引擎，js引擎
主要内核：
- Trident(IE，搜狗，360)
- Webkit(chrome,saria)
- Gecko(firefox)
- Presto(opera)
输入 URL 后发生了什么？
- 生成HTTP请求信息
- 请求行（方法：POST，GET等，URL，HTTP协议版本）
- 消息头（请求的附加信息）
- 消息体（发送的数据）
- DNS解析
- 建立TCP链接
- 数据传输
- 断开连接
http报头有哪些？
请求头：
- Accept 浏览器接收的文件类型
- catch-control 缓存策略
- Host 请求的域名
- User-agent 浏览器版本信息
- Connection 连接类型 keep-alive 保持长连接
- cookie
响应头：
- status
- catch-control：max-age
- conent-type
- Date
- Expires
- Last-Modified
- Etag
浮动影响
- 由于浮动的元素脱离标准文档流，会导致后面的元素认为它不存在，占据浮动元素的位置，造成元素重叠。
- 父元素的高度无法被撑开。
清除浮动的方法
- 在浮动元素后面添加空标签
<h2>1）添加额外标签</h2>
<div class="main left">.main{float:left;}</div>
<div class="side left">.side{float:right;}</div>
<div style="clear:both;"></div>
</div>
<div class="footer">.footer</div>
- 使用 br标签和其自身的 html属性(br 有 clear=“all | left | right | none” 属性)
<div class="wrap" id="float2">
<h2>2）使用 br标签和其自身的 html属性</h2>
<div class="main left">.main{float:left;}</div>
<div class="side left">.side{float:right;}</div>
<br clear="all" />
</div>
<div class="footer">.footer</div>
- 父元素设置 overflow：hidden
<div class="wrap" id="float3" style="overflow:hidden; *zoom:1;">
<h2>3)父元素设置 overflow </h2>
<div class="main left">.main{float:left;}</div>
<div class="side left">.side{float:right;}</div>
</div>
<div class="footer">.footer</div>
- 父元素设置浮动（不推荐）
- 父元素设置display:table（不推荐）
- 使用:after 伪元素,
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {zoom: 1}
给要清除浮动的元素添加.clearfix类
垂直居中方法
.center{
position: absolute;
height: 100px;
width: 100px;
top: 50%;
left: 50px;
margin-top: -50px;
margin-left: -50px;
}
.center{
position: absolute;
height: 100px;
width: 100px;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
- 不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行
parentElement{
position:relative;
}
childElement{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
作者：Jaskey Lam
链接：https://www.zhihu.com/question/20543196/answer/57757836
来源：知乎
- 若父容器下只有一个元素，且父元素设置了高度，则只需要使用相对定位即可
parentElement{
height:xxx;
}
.childElement {
position: relative;
top: 50%;
transform: translateY(-50%);
}
作者：Jaskey Lam
链接：https://www.zhihu.com/question/20543196/answer/57757836
来源：知乎
