一些

[zhu-meng-han]

CSS盒模型

在 ie8+ 浏览器中使用哪个盒模型可以由 box-sizing 控制，如果在 ie6,7,8 中 Doctype缺失会触发怪异模式。

• content-box（默认值） 标准盒模型
• border-box 怪异盒模型
  1、标准盒模型: width/height 指的是 content 区域的宽度和高度
  2、怪异盒模型: width/height 指的是 content+padding+border

position

新属性 sticky 粘性定位

弹性FLEX布局.

未知宽高元素怎么上下左右垂直居中

1、使用 disply: flex; align-items: center; justify-content: center;
2、使用 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
3、使用 position: absolute; left: 0; top: 0; right: 0; bottom: 0;
4、使用 margin: 50% auto; transform: translateY(-50%);
5、使用 display: flex; 子元素 用 margin: auto;

对象、原型、原型链、构造函数

1、对象：

• 普通对象（Object）
• 函数对象（new Function）

2、原型：

JS 可通过字面量构造对象。
为了实现继承，对象里面有个 _proto_ 属性可以指向该对象的父对象。这个父对象就是所谓的“原型”。

总结：

• JS 在创建对象（不论是普通对象还是函数对象）的时候，都有一个叫做 _ proto_ 的内置属性，用于指向创建它的函数对象的原型对象 prototype
• 原型和原型链是 JS 实现继承的一种模型
• 原型链是靠 proto 形成的，而不是 prototype
• 所有的原型对象都有 constructor 属性，该属性对应创建所有指向该原型的实例构造函数
• 函数对象和原型对象通过 prototype 和 constructor 属性进行相互关联

谈谈JavaScript的原型及原型链

DOM事件的绑定的几种方式

• 在HTML中的事件处理方式 onclick=""
• DOM元素对象的属性事件绑定处理方式 var dom = document.getElementByID(''); dom.onclick= function(){}
• DOM元素对象添加事件的处理方式 addEventListener or attachEvent

事件监听

• 捕获阶段
• 目标阶段
• 冒泡阶段

w3c 规范：

// event：事件名，支持所有DOM事件。
// function：指定要事件触发时执行的函数
// useCapture（可选）：指定事件在捕获或冒泡阶段执行。true，捕获。false，冒泡。默认 false
// IE8 一下不支持
element.addEventListener(event, function, useCapture)

element.removeEventListener(event, function, useCapture)

IE 标准

// event：事件类型,需加 'on'，例如：onclick
// function：指定要事件触发时执行的函数。
element.attachEvent(event, function)
element.detachEvent(event, function)

事件监听的优点:

1、可以绑定多个事件。
2、可以解除相应的绑定

事件委托

事件委托就是利用冒泡的原理，把事件加到父元素或祖先元素上，触发执行效果。

<ul id="list">
  <li id="item1" >item1</li>
  <li id="item2" >item2</li>
  <li id="item3" >item3</li>
</ul>

var list = document.getElementById("list");
document.addEventListener("click",function(event){
	var target = event.target;
	if(target.nodeName == "LI"){
		alert(target.innerHTML);
	}
})
var node=document.createElement("li");
var textnode=document.createTextNode("item4");
node.appendChild(textnode);
list.appendChild(node);

事件委托优点:

1、提高JavaScript性能。事件委托可以显著的提高事件的处理速度，减少内存的占用
2、动态的添加DOM元素，不需要因为元素的改动而修改事件绑定。

HTTP、HTTPS、HTTP2.0、webSocket

• HTTP: 超文本传输协议(HyperText Transfer Protocol)

HTTPS与HTTP的一些区别:

• HTTP是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的ssl加密传输协议。
• HTTP和HTTPS使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
• HTTPS的连接很简单，HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

HTTP2.0的新特性

• 新的二进制格式：HTTP1.x的解析是基于文本，基于文本协议的格式解析存在天然缺陷；二进制则不同，只认0和1的组合，实现方便且健壮
• 多路复用：即连接共享

xss 攻击

XSS出现的原因是：在用户输入的时候没有做严格的过滤，在输出内容到浏览器页面时，也没有进行检查、转移和替换

• 非持久性攻击：在URL的后面拼接 <script>恶意代码</script>那么用户打开此链接，就会直接执行js，这种攻击都是一次性的，诱使别人点击，从而通过执行脚本，获取对方的cookie。你得到对方的cookie后，就可以为所欲为了。
• 持久性攻击：直接把注入代码写到网站数据库中，如果不对用户输出的内容加以过滤，就可以注入一些js脚本内容

措施：

• 使用XSS Filter：输入过滤，对用户提交的数据进行有效性验证，仅接受指定长度范围内并符合我们期望格式的的内容提交，阻止或者忽略除此外的其他任何数据。
• DOM型的XSS型防御：把变量输出到页面时要做好相关的编码转义工作，如要输出到 <script>中，可以进行JS编码；要输出到HTML内容或属性，则进行HTML编码处理（把"<"和">"转换为html字符实体）。根据不同的语境采用不同的编码处理方式。
• 将重要的cookie标记为http only：这样的话当浏览器向Web服务器发起请求的时就会带上cookie字段，但是在脚本中却不能访问这个cookie，这样就避免了XSS攻击利用JavaScript的document.cookie获取cookie