撩課-Web大前端天天5道面試題-Day3

1. 請描述下JS中事件冒泡機制?

冒泡型事件：事件按照從最特定的
事件目標到最不特定的事件目標
(document對象)的順序觸發。

捕獲型事件：事件從最不精確的對
象(document 對象)開始觸發，而後
到最精確。(也能夠在窗口級別捕獲
事件，不過必須由開發人員特別指定)。

支持W3C標準的瀏覽器在添加事件時
用addEventListener(event,fn,useCapture)方法，
基中第3個參數useCapture是一個Boolean值，
用來設置事件是在事件捕獲時執行，
仍是事件冒泡時執行。

而不兼容W3C的瀏覽器(IE)用attachEvent()方法，
此方法沒有相關設置，
不過IE的事件模型默認是在事件冒泡時執行的，
也就是在useCapture等於false的時候執行，
因此把在處理事件時把useCapture
設置爲false是比較安全，
也實現兼容瀏覽器的效果。
複製代碼

以下圖所示:

2. 爲何利用多個域名來提供網站資源會更有效？

1.CDN緩存更方便

2.突破瀏覽器併發限制
（通常每一個域名創建的連接不超過6個）

3.Cookieless，節省帶寬，
尤爲是上行帶寬通常比下行要慢;

4.對於UGC的內容和主站隔離，
防止沒必要要的安全問題
(上傳js竊取主站cookie之類的)。
正是這個緣由要求用戶內容的域名
必須不是本身主站的子域名，
而是一個徹底獨立的第三方域名。

5.數據作了劃分，
甚至切到了不一樣的物理集羣，
經過子域名來分流比較省事。

補充: 關於Cookie的問題，
帶寬是次要的，安全隔離纔是主要的。
關於多域名，也不是越多越好，
雖然服務器端能夠作泛解釋，
瀏覽器作dns解釋也是耗時間的，
並且太多域名，若是要走https的話，
還有要多買證書和部署的問題。

複製代碼

3. 請說出三種減小頁面加載時間的方法？

1.優化圖片;
精靈圖片, 字體圖標
SVG, GIF, WEBP
(可用在一些對顏色要求不高的地方)

2. 優化CSS
（壓縮合並css，
如margin-top,margin-left...)

3. 網址後加斜槓
（如www.itlike.com/目錄，
會判斷這個「目錄是什麼文件類型，
或者是目錄。）

4. 標籤標明高度和寬度
（若是瀏覽器沒有找到這兩個參數，
它須要一邊下載圖片一邊計算大小，
若是圖片不少，
瀏覽器須要不斷地調整頁面。
這不但影響速度，也影響瀏覽體驗。
當瀏覽器知道了高度和寬度參數後，
即便圖片暫時沒法顯示，
頁面上也會騰出圖片的空位，
而後繼續加載後面的內容。
從而加載時間快了，
瀏覽體驗也更好了。）

5.減小http請求
（合併文件，合併圖片）。
複製代碼

4. cookie 和session 的區別?

1. cookie數據存放在客戶的瀏覽器上，
session數據放在服務器上。

2. cookie不是很安全，
別人能夠分析存放在本地的COOKIE,
並進行COOKIE欺騙,
考慮到安全應當使用session。

3. session會在必定時間內保存在服務器上。
當訪問增多，會比較佔用你服務器的性能
考慮到減輕服務器性能方面，
應當使用COOKIE。

4. 單個cookie保存的數據不能超過4K，
不少瀏覽器都限制一個站點最多保存20個cookie。

5. 開發建議：將登陸,用戶等重要信息存放爲session,
其餘信息若是須要保留，能夠放在cookie中。

PS: 額外閱讀

應用場景

常常登陸一個網站，
今天輸入用戶名密碼登陸了，
次日再打開不少狀況下就直接打開了
。這個時候用到的一個機制就是cookie。

session的一個場景是購物車，
添加了商品以後客戶端處
能夠知道添加了哪些商品，
而服務器端如何判別呢，
因此也須要存儲一些信息，
這裏就用到了session。

Cookie
Cookie是訪問某些網站之後
在本地存儲的一些網站相關的信息，
下次再訪問的時候減小一些步驟。

另一個更準確的說法是：
Cookies是服務器在本地機器上
存儲的小段文本並隨每個請求
發送至同一個服務器，
是一種在客戶端保持狀態的方案。

Cookie的主要內容包括：
名字，值，過時時間，路徑和域。

Session

Session是存在服務器的
一種用來存放用戶數據的類
HashTable結構。

當瀏覽器 第一次發送請求時，
服務器自動生成了一個HashTable
和一個Session ID用來惟一標識這個HashTable，
並將其經過響應發送到瀏覽器。

當瀏覽器第二次發送請求，
會將前一次服務器響應中的Session ID
放在請求中一併發送到服務器上，
服務器從請求中提取出Session ID，
並和保存的全部Session ID進行對比，
找到這個用戶對應的HashTable。

通常這個值會有一個時間限制，
超時後毀掉這個值，默認是20分鐘。

Session的實現方式和Cookie有必定關係。
試想一下，創建一個鏈接就生成一個session id，
那麼打開幾個頁面就好幾個了，
這顯然不是咱們想要的，

那麼該怎麼區分呢？

這裏就用到了Cookie，
咱們能夠把session id存在Cookie中，
而後每次訪問的時候將
Session id帶過去就能夠識別了

複製代碼

5. 爲何要清除浮動？舉個實際場景?

父元素的高度是由子元素撐開的，
且子元素設置了浮動，
父元素沒有設置浮動，
子元素脫離了標準的文檔流，
那麼父元素的高度會將其忽略，
若是不清除浮動，
父元素會出現高度不夠，
那樣若是設置border
或者background都得不到正確的解析。

方式:

.clearfix:after,.clearfix:before{
   content:"";
   display:table;
   clear:both;
}

複製代碼