前端一些基礎的重要的知識2

1.輸入網址後到底發生了什麼？

（1）首要目標是獲取連接的IP地址。瀏覽器開啓一個線程來處理這個請求。調用瀏覽器內核中的對應方法，主要執行下面幾步來獲取網址的IP地址。
　　 1.搜索瀏覽器自身DNS緩存
　　 2.搜索操做系統自身的DNS緩存
　　 3.讀取本地HOST文件
　　 當上面三步都沒發現這個網址在本地的DNS緩存，那麼瀏覽器就會請求寬帶運營商服務器去獲取DNS
　　 1.寬帶運營商服務器查看自身緩存
　　 2.若是沒有緩存，運營商服務器發起迭代DNS解析請求，首先詢問根域，而後com域，最後域
　　 3.獲取到IP後，運營商把結果返回操做系統內核同時緩存起來，系統內核把結果返回瀏覽器，最後瀏覽器得到IP地址
（2） 瀏覽器端口與遠程`Web`服務器經過`TCP`三次握手協商來創建一個`TCP/IP`鏈接。
    　該握手包括
      一個同步報文（客戶端發送syn包到服務器）
    　一個同步-應答報文（服務器確認客戶端的syn,生成ACK，同時發送新的SYN給客戶端(確保是真正的請求)，因此這裏總共是發了SYN+ACK兩個包給客戶端）
    　一個應答報文（客戶端向服務器發送確認包ACK）
　　　（SYN：同步序列編號，ACK:確認字符，等於發送過來的syn值+1）
（3）瀏覽器給web服務器發送HTTP請求,服務器響應。
（4）客戶端獲取HTML，而後創建文檔樹，渲染DOM，操做DOM，同時網頁中的請求資源JS，css，圖片等都會重複上面的步驟。

爲何是三次？

爲了防止已失效的鏈接請求報文段忽然又傳送到了服務端，於是產生錯誤。（確保是真正的請求）

迭代查詢和遞歸查詢的區別？

迭代是客戶機發送請求給dns1，dns1不能解析，則dns1把dns2的ip給客戶機，客戶機自動跳轉到dns2，直到查詢到爲止。
遞歸則是客戶機一直查詢下去，只會返回最終結果。

4次揮手

1.客戶端發送FIN給服務器，告訴服務器數據已經所有傳輸完成，能夠關閉鏈接了
2.服務器響應ACK確認包，可是服務器數據還沒傳輸完成，因此要等待一下
3.服務器數據傳輸完成了，發送FIN告訴客戶端
4.客戶端響應ACK確認包，鏈接關閉

 

2.瀏覽器渲染過程

1. 將HTML解析成DOM樹 (DOM 樹的構建過程是一個深度遍歷過程：當前節點的全部子節點都構建好後纔會去構建當前節點的下一個兄弟節點)
2. 將CSS解析成 CSS Rule Tree 。
3. 根據DOM樹和CSS樹來構造 Rendering Tree。(一些像display:none的東西不在渲染樹)
4. reflow(又叫layout)，計算出每一個節點的位置。
5. painting 繪製 (遍歷render樹，使用UI層繪製每一個節點)

　　注意：上述這個過程是逐步完成的，爲了更好的用戶體驗，渲染引擎將會盡量早的將內容呈現到屏幕上，並不會等到全部的html都解析完成以後再去構建和佈局render樹。它是解析完一部份內容就顯示一部份內容，同時，可能還在經過網絡下載其他內容。

2.new操做符幹了什麼

var a=new Base();
實際幹了下面幾件事：
var obj = {};
obj.__proto__ = Base.prototype; //使obj的__proto__私有屬性擁有constructor (使obj的構造者是Base)
Base.call(obj); //Base裏的this指向obj
a=obj;//把obj賦值給目標

 

3.CSS中5種position

1.static （靜態定位） //正常文本流（忽略 top, bottom, left, right 或者 z-index 聲明）
2.relative（相對定位） //正常文本流位置+設置的定位（例如left:20px;就向右移20px），因此仍是有可能覆蓋原文檔的
3.absolute（絕對定位）//脫離文檔流,相對於 static定位之外 的第一個父元素定位，向上級查找，若是找不到，默認就是相對於HTML定位(例如left:20px;就相對於那個父元素定位右移20px)
 注意：絕對定位的元素忽略float屬性！
4.fixed（固定定位）//脫離文檔流，相對於瀏覽器窗口固定的定位（例如top:20px;永遠距離瀏覽器頂部20px,就算滾動也不會變）
5.sticky(粘性定位)//例如top:20px： 若是距離瀏覽器頂部超過20px，則表現爲relative隨着頁面滾動。 當距離頂部20px時，則表現爲fixed固定距離瀏覽器頂部20px

只要設置了position:absolute和float中任何一個，都會讓元素以display:inline-block的方式顯示

sticky定位的限制：

    1.須指定 top, right, bottom 或 left 四個閾值其中之一，纔可以使粘性定位生效。不然其行爲與相對定位相同。

         而且 top 和 bottom 同時設置時，top 生效的優先級高，left 和 right 同時設置時，left 的優先級高。

    2.設定爲 position:sticky 元素的任意父節點的 overflow 屬性必須是 visible，不然 position:sticky 不會生效

4.GET和POST的區別

1.用途：//http規範
    GET用於獲取數據，POST用於發送數據。
2.傳參方式：
    GET使用URL或Cookie傳參。而POST將數據放在body中。
3.安全性：
    POST比GET安全，由於數據在地址欄上不可見。
4.長度限制：//取決於瀏覽器/服務器
    GET的URL會有長度上的限制(早期IE是2083個字符內)，POST的數據則能夠很是大。
5.數據包：GET產生一個TCP數據包；POST產生兩個TCP數據包。//http1.1以後的規範
         GET，瀏覽器會把http header和data一併發送出去，服務器響應200；
         POST，瀏覽器先發送header，服務器響應100 continue，瀏覽器再發送data，服務器響應200 ok
6.冪等性：//本質區別
    GET是冪等方法，屢次調用不會對資源產生影響，POST是非冪等方法。

5.cookies，sessionStorage 和 localStorage 的區別

1.數據的用途：
　　cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密），cookie數據始終在同源的http請求中攜帶（即便不須要），會在瀏覽器和服務器間來回傳遞。 
　　sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存使用。 

2.存儲大小：
　　一個cookie最多4K，一個站點最多20個cookie。 
　　sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。 

3.有期時間：
　　localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據； 
　　sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除。 
　　cookie 設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉

4.做用域：
　　sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面。
　　localStorage和cookie是全部窗口共享的。

6.cookie和session的區別？

cookie:儲存在瀏覽器端。不安全。一個cookie最多4K,一個站點最多20個cookie
session:儲存在服務器端。安全。佔用服務器資源。

5.HTTP緩存相關請求頭

1.Expires/Cache-Control
緩存文件一段時間，或者到某個時間點
Expires要求客戶端和服務端的時鐘嚴格同步
Cache-Controll是HTTP1.1中才有的，若是兩個同時設置了，以Cache-Control爲基準

2.Last-Modified/ If-Modify-since
第一次請求，返回了Last-Modifed，這個文件最後修改的時間
第二次請求會帶上If-Modify-since，對比文件最後修改的時間

3.ETag/ If-None-Match
第一次請求，返回ETag標籤
第二次請求會帶上If-None-Match，對比標籤是否有改變

6.Cache-control取值

public 全部內容都將被緩存(客戶端和代理服務器均可緩存) 
private 內容只緩存到私有緩存中(僅客戶端能夠緩存，代理服務器不可緩存) 
no-cache 必須先與服務器確認返回的響應是否被更改，而後才能使用該響應來知足後續對同一個網址的請求。所以，若是存在合適的驗證令牌 (ETag)，no-cache 會發起往返通訊來驗證緩存的響應，若是資源未被更改，能夠避免下載。 
no-store 全部內容都不會被緩存到緩存或 Internet 臨時文件中 
must-revalidation/proxy-revalidation 若是緩存的內容失效，請求必須發送到服務器/代理以進行從新驗證 
max-age=xxx 緩存的內容將在 xxx 秒後失效

7.cookies的做用域

默認狀況下，當前目錄下設置的cookie，當前目錄及該目錄下的全部子目錄下的全部文件都可以訪問該cookie
若是設置了path="/"，則無論設置cookie在哪一個路徑，全部目錄及子目錄下都可以訪問到這個cookie
另外還有
domain設置cookie的訪問域
secure，若是設置了該屬性，只有使用https協議纔可以訪問到該cookie

 9.停止JavaScript

1.return
2.throw new Error('error');
或者throw SyntaxError();

 10.HTML5提出Web Worker標準，容許JavaScript腳本建立多個線程，可是子線程徹底受主線程控制，且不得操做DOM。

11.EventLoop機制

setTimeout(function(){console.log(1);}, 0);

console.log(2);

上面代碼的執行結果老是2，1，由於只有在執行完主線程的同步任務之後，系統纔會去執行"任務隊列"中的回調函數

12.跨站腳本攻擊(XSS)

一些現代瀏覽器已經默認禁止XSS形式的輸入，

XSS分爲反射型和存儲型，存儲型會存在服務器裏，其餘用戶訪問到頁面時，則會被攻擊

防範措施：

編碼：對用戶輸入的數據進行HTML Entity編碼
過濾：移除用戶上傳的DOM屬性或者style,script,iframe等
校訂：避免直接對頁面解碼，用DOM Parse轉換，再校訂不匹配的DOM標籤

13.跨站請求僞造攻擊（CSRF)

僞造客戶請求

防範措施：

驗證碼：經過 referer、token 或者 驗證碼 來檢測用戶提交。
連接：儘可能不要在頁面的連接中暴露用戶隱私信息。
post：對於用戶修改刪除等操做最好都使用post 操做 。
cookie：避免全站通用的cookie，嚴格設置cookie的域。