interview整合

時間 2019-11-07

標籤 interview 整合简体版

原文原文鏈接

http協議 / http請求

http1.0 1.1 2.0區別html
webpack 打包優化
promise 原理手寫一個promise
懶加載原理
node 的 eventEmitter 原理&實現
動畫性能優化
兼容性問題

跨域

/*CORS使用自定義的HTTP頭部容許瀏覽器和服務器相互瞭解對方*/
Access-Control-Allow-Origin:指定受權訪問的域
Access-Control-Allow-Methods：受權請求的方法（GET, POST, PUT, DELETE，OPTIONS等)
複製代碼

css浮動

清除浮動的經常使用方式：
 1.結尾處加空div標籤 clear:both （或在下一個元素上加clear:both;）
 2.父級div定義 僞元素:after
 3.父級div定義 overflow:hidden
複製代碼

水平居中，垂直居中 三欄佈局

/*垂直居中*/
.parent::after{
    content:'';
    height:100%
}
.parent::after .son{
    display: inline-block;
    vertical-align: middle;
}
複製代碼

.parent2{
    position: relative
}
.son2{
    position: absolute;
    height:10px;
    /*方案一 有滾動條*/
    top:50%;
    margin-top:-0.5*10px;
    /*方案二 截斷 無滾動條*/
    margin:auto 0;
    bottom:0;
    top:0
}
複製代碼

/*transform*/
.parent3{
    position:relative;
}
.son3{
    position:absolute;
    top:50%;
    transform:translate(-50%,-50%)
}
複製代碼

Event Loop 宏任務/微任務

宏任務（MacroTask） script所有代碼、setTimeout、setInterval、setImmediate（瀏覽器暫時不支持，只有IE10支持，具體可見MDN）、I/O、UI Rendering。前端

微任務（MicroTask） Process.nextTick（Node獨有）、Promise、Object.observe(廢棄)、MutationObservernode
重排reflow)和重繪(repaint)

DOM Tree的構建過程webpack
- 轉碼: 瀏覽器將接收到的二進制數據按照指定編碼格式轉化爲HTML字符串
- 生成Tokens: 以後開始parser，瀏覽器會將HTML字符串解析成Tokens
- 構建Nodes: 對Node添加特定的屬性，經過指針肯定 Node 的父、子、兄弟關係和所屬 treeScope
- 生成DOM Tree: 經過node包含的指針肯定的關係構建出DOM Tree
重排: 部分渲染樹（或者整個渲染樹）須要從新分析而且節點尺寸須要從新計算，表現爲從新生成佈局，從新排列元素css3

重繪: 因爲節點的幾何屬性發生改變或者因爲樣式發生改變，例如改變元素背景色時，屏幕上的部份內容須要更新，表現爲某些元素的外觀被改變git

觸發重排和重繪es6
- 添加、刪除、更新DOM節點
- 經過display: none隱藏一個DOM節點-觸發重排和重繪
- 經過visibility: hidden隱藏一個DOM節點-只觸發重繪，由於沒有幾何變化
- 移動或者給頁面中的DOM節點添加動畫
- 添加一個樣式表，調整樣式屬性
- 用戶行爲，例如調整窗口大小，改變字號，或者滾動
避免重排/重繪github
- 集中改變樣式
- 使用DocumentFragment
- 提高爲合成層：
```
1.位圖交予GPU處理，比CPU快；
2.當須要 repaint 時，只須要 repaint 自己，不會影響到其餘的層；
3.對於 transform 和 opacity 效果，不會觸發 layout 和 paint
/*提高爲合成層*/
#target {
    will-change: transform;
}
複製代碼
```

cookie 和 session

Cookie是服務器發送到用戶瀏覽器並保存在本地的一小塊數據
它會在瀏覽器下次向同一服務器再發起請求時被攜帶併發送到服務器上。
Session 表明着服務器和客戶端一次會話的過程。
Session 對象存儲特定用戶會話所需的屬性及配置信息
cookie在瀏覽器和服務器間來回傳遞，另外兩個只存在本地
cookie不能超過4k，另兩個5M； 
cookie有效期是設置時間，sessionStorage是瀏覽器關閉時，localStorage是始終有效;
localStorage 和 cookie 在同源窗口共享，sessionStorage數據不共享
複製代碼

css3

css重置樣式：不建議使用通配符重置，主要是性能問題。若是用通配符重置樣式，那麼勢必會花費很大時間。網站打開速度變慢。因此reset時，按需而行。用到哪些標籤就設置重置。經常使用的重置樣式：web
- textarea標籤中，默認的方式爲：both；就是說：在textarea的右下角有一個三角，用戶能夠拖動，以改變textarea的大小。通常狀況下咱們將textarea的樣式設置爲：none；
```
textarea { resize:none; } /*防止拖動*/
複製代碼
```
- 瀏覽器默認圖片都有3px的空白，以保證咱們對齊樣式：
```
img {border:0;vertical-align:middle; } /* 去掉圖片底部默認的3像素空白縫隙*/
複製代碼
```
- 清除浮動的基本寫法:
```
.clearfix:before,.clearfix:after{
	content:"";
	display:table;
}
.clearfix:after{clear:both;}
.clearfix{
	*zoom:1;/*兼容IE7/6*/
}
複製代碼
```
script標籤中的 defer 和 aysnc