面试必知的web知识点

1. 假设高度已知，请写出三栏布局，其中左栏、右栏宽度各位300px，中间自适应

2. css盒模型box-sizing

2.1 盒模型分为两类

标准模型：content-box width*height
怪异模型：border-box (width+padding)*(height+padding)

2.2 Js获取盒模型对应的宽和高

dom.style.width/height-->内联style不支持外部引入css
dom.currentStyle.width/height-->渲染之后的宽高，仅IE支持
dom.getBoundingClientRect().width/height-->可获取绝对位置left\top\right\bottom

2.3 BFC(块级格式化上下文)

创建BFC的方式

display：inline-block
overflow !== visible
display：flow-root
display-table

3.DOM事件

3.1 DOM事件级别

DOM0：element.onclick=function(){}
DOM1：没有更新事件内容
DOM2：element.addEventListener('click',function(){},false)
DOM3：element.addEventListener('keyup',function(){},false)

3.2 DOM事件模型

捕获：window->document->html->body->……->目标元素
冒泡：window<-document<-htm<-body<-……<-目标元素

事件流：捕获->目标阶段->冒泡

3.3 Event常见对象

event.preventDefault--> 阻止默认行为
event.stopPropagation -->停止事件传递
event.stopImmediatePropagation -->阻止其它绑定事件执行(事件相应优先级)

event.currentTarget--> 当前发生事件的元素（事件优化：子类元素点击相同方法直接在父级元素统一处理）

<html>
<head>

<script type="text/javascript">
function getEventTrigger(event)
  { 
  x=event.currentTarget; 
  alert("The id of the triggered element: "
   + x.id);
  }
</script>
</head>

<body >

<div id="p1" onmousedown="getEventTrigger(event)">
	<button>点击我</button>
	<button>点击我</button>
	<button>点击我</button>
    
</div>
</body>
</html>

event.target--> 触发事件的节点（事件优化：子类元素点击相似方法直接在父级元素统一处理）

<html>
<head>

<script type="text/javascript">
function getEventTrigger(event)
  { 
  x=event.target; 
  alert("点击id是"
   + x.id);
  }
</script>
</head>

<body >

<div id="p1" onmousedown="getEventTrigger(event)">
 <p id='1'> 点击id=1</p>
 <p id='2'> 点击id=2</p>
</div>

</body>
</html>

4. http协议

http 协议主要特点：简单、快速、灵活、无状态、无连接

4.1 http报文组成

1. 请求报文

请求行： http方法（get、post、put、delete、head）、 http协议、 http地址、版本号
请求头： key->value
空行
请求体

2. 响应报文

状态行
响应头
空行
相应体

4.2 get和post区别

get浏览器回退是无害的，post会再次提交
get产生的url可以收藏，post 不可以
get会被浏览器缓存，post不可以缓存（性能优化）
get参数会被完整保留在浏览器历史记录里，post不会
get的URL传送的参数有长度限制，post无限制
get参数数据类型直接收ASCII字符，post无限制

4.3 http状态码

1xx：指示信息
2xx：成功
3xx：重定向
4xx：客户端错误
5xx：服务器端错误

4.4 持久连接（keep-Alive）HTTP/1.1和部分HTTP/1.0增加了持久连接

http支持持久连接：避免了建立或者重新建立连接

管线化：将多个HTTP请求整批发送，在发送过程中不用等待对方响应
未管线化：请求1->响应1->请求2->响应2->请求3->响应3
管线化：请求1->请求2->请求3->响应2->响应1->响应3
管线化机制通过持久连接完成，只有get和head请求可以进行管线化，post则有限制
管线化不会影响响应到来顺序响应返回顺序不改变

5. 面向对象

5.1 类的声明

function People(name){  
    this.name:name}

class PeopleES6(name){
  constoructors{
    this.name=name
  }
}

//实例化

new People('周梅')
new PeopleES6('周梅')

5.2 类的继承

function Parent(){
	this.name='周梅'
	this.like=['唱歌'，'读书']
}
function Chlid(){
    this.type='chlid'
    Parent.call(this)//修改上下文，避免操作子类属性影响父级属性
}
Child.prototype=Object.create(Parent.prototype)//复制父级原型链，Object.create使子类原型链指向子类，不在指向父类
Child.prototype.constoructor=Child//修改构造方法

6.通信

6.1 同源策略

协议、域名、端口都相同的即为同源

同源限制

cookie、localstorage和IndexDB无法读取
DOM无法获得
Ajax请求不能发送

前后端如何通信：Ajax、webSocket、CORS
跨域通信方式
JSONP：设置回调名称->注册window事件->监听onload->删除window对象->添加<script>发起请求
Hash：hash更新，页面不刷新原则添加 onhashchange事件
postMessage ：window.postMessage('data','https://www.baidu.com/')
window.addEventListener('message',function(){},false)
websocket ：配置请求头Upgrade: websocket和Connection: Upgrade
CORS：ajax发送一个非同源请求时，会在请求头添加origin字段