面试中知道开头不知道结尾的web知识点

时间 2019-11-06

原文原文链接

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

1.1 float方式⚠️div排放位置

优势:兼容性好javascript

缺点:脱离文档流(清除浮动)css

<style>
.left {
    float: left;
    background: pink;
    width: 100px;
}.right {
    float: right;
    width: 100px;
    background: darkkhaki;
}
<style>复制代码

1.2 position:absolute方式

优势:快捷html

缺点:可实用性差,脱离文档流java

.box>div {
    position: absolute;
}
.left {
    left: 0;
    background: pink;
    width: 100px;
}
.right {
    right: 0;
    width: 100px;
    background: darkkhaki;
}.middle {
    left: 100px;
    right: 100px;
    background: peachpuff;
}

复制代码

1.3 flex的方式

有的点:比较完美web

缺点:IE8不支持flexajax

1.4 table

优势:兼容性好后端

缺点:一个单元格高度变化,都会变化跨域

.box>div {
    display: table-cell;
}
.box {
    display: table;
    width: 100%;
}
.left {
    background: pink;
    width: 100px;
}
.right {
    width: 100px;
    background: darkkhaki;
}
复制代码

1.5 grid

缺点:兼容性差浏览器

.box {
    display: grid;
    width: 100%;
    grid-template-columns: 100px auto 100px;
}
复制代码

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字段