面試必知的web知識點

藤蔓繞竹發表於2019-07-25
面試Web

1. 假設高度已知，請寫出三欄佈局，其中左欄、右欄寬度各位300px，中間自適應

面試必知的web知識點

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常見物件

  1. event.preventDefault--> 阻止預設行為
  2. event.stopPropagation -->停止事件傳遞
  3. event.stopImmediatePropagation -->阻止其它繫結事件執行(事件相應優先順序)
  4. 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>複製程式碼

  5. 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欄位




相關文章