面試中知道開頭不知道結尾的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字段