瀏覽器相關的前端知識

1、輸入url到展現頁面過程發生了什麼？

URL(Uniform Resource Locator)統一資源定位符，用於定位互聯網上資源

 scheme://host.domain:port/path/filename 

• scheme:定義因特網服務的類型，常見的類型有:HTTP HTTPS和GTP。
• host:定義域主機(http默認是www)
• domain:定義因特網域名，好比xxx.com.cn
• port:定義主機上的端口號(http:默認是80)
• path：定義服務器上的路徑
• filename:定義文檔/資源的名稱

1. DNS解析:將域名解析成IP地址

在瀏覽器輸入網址後，首先要通過域名解析，由於瀏覽器並不能直接經過域名找到對應的服務器，而是要經過IP地址，之因此咱們用的是域名而不是IP，是由於IP是一段數字，特別不容易記住，而域名其實就是IP的假裝者。

什麼是域名解析：DNS協議提供經過域名查找IP地址，或者是反向經過IP查找域名的服務。DNS是一個網絡服務器，咱們的域名解析簡單來講就是DNS上記錄一條信息記錄。

1.1 遞歸查詢

主機向本地域名服務器的查詢通常都是採用遞歸查詢。
所謂遞歸查詢就是:若是主機所查詢的本地域名服務器不知道被查詢域名的IP地址，那麼本地域名服務器就以DNS客戶的身份，向其餘根域名服務器繼續發出查詢的請求報文(即替該主機繼續查詢)，而不是該主機本身進行下一步的查詢，所以，遞歸查詢返回的查詢結果或者是所要查詢的IP地址，或者是報錯，表示沒法查詢所需的IP地址。

1.2 迭代查詢

本地域名服務器向根域名服務器查詢一般是採用迭代查詢。
迭代查詢的特色是這樣的:當根域名服務器收到本地域名服務器發出的迭代查詢請求報文時，要麼給出所要查詢的IP地址，要麼告訴本地域名服務器:「你下一步應當向哪個域名服務器進行查詢」。而後讓本地域名服務器進行後續的查詢(而不是代替本地域名服務器進行後續的查詢)。根域名服務器一般是把本身知道的頂級域名服務器的IP地址告訴本地域名服務器。讓本地域名服務器再向頂級域名服務器查詢。頂級域名服務器在收到本地域名服務器的查詢請求後，那麼給出所要查詢的IP地址，要麼告訴本地域名服務器下一步應當向哪個權限域名服務器進行查詢，本地域名服務器就這樣進行迭代查詢，最後，知道了所要解析的域名的IP地址，而後把這個結果返回給查詢的主機。固然，本地域名服務器也能夠採用遞歸查詢，這取決於最初的查詢請求報文的設置是要求使用哪種查詢方式。

• 瀏覽器先檢查自身緩存中有沒有被解析過的這個域名對應的IP地址，若是有解析結束，同時域名被緩存的時間也可經過TTL屬性來設置。
• 若是瀏覽器緩存中沒有命中(沒有)，瀏覽器會檢查操做系統緩存中有沒有對應的已解析的結果。而操做系統也有一個域名解析的過程，在windows中可經過C盤裏面一個叫作hosts的文件來設置，若是你在這裏指定一個域名對應的IP地址，那瀏覽器會首先使用這個IP地址。可是這種操做系統級別的域名解析過程也被不少黑客利用，經過修改你的hosts文件裏的內容吧特定的域名解析到他指定的IP地址仍是那個，形成全部的域名劫持。因此在window7中將hosts文件設置成了readonly，防止惡意篡改
• 若是尚未命中域名，纔會真正的請求本地域名服務器(LDNS)來解析和這個域名，這個服務器通常在你的城市的某個角落，距離不是很遠，並且這臺服務器的性能很好，通常都會緩存域名解析結果，大約80%的域名解析到這裏就完成了。瀏覽器(主機)向其本地域名服務器進行的是遞歸查詢。
• 本地域名服務器採用迭代查詢，它先向下一個根域名服務器查詢
• 根域名服務器若是有查詢的IP的值則返回，沒有命中，則告訴本地域名服務器，下一次查詢的頂級域名服務器的IP的值
• 本地域名服務器向收到的頂級域名服務器進行查詢
• 頂級域名服務器若是有查詢的IP地址則返回，沒有命中，則告訴本地域名服務，下一次查詢的權限域名服務器的IP的地址
• 本地域名服務器向權限域名服務器進行查詢
• 權限域名服務器告訴本地域名服務器，所查詢的IP地址
• 本地域名服務器最後把查詢的結果告訴瀏覽器(主機)。

本部分摘自：https://blog.csdn.net/qq_37288477/article/details/86582130

2. TCP鏈接:TCP的三次握手

3. 發送HTTP請求

請求方法:GET,POST,PUT,DELETE,HEAD,OPTIONS,TRACE,PATCH

4. 服務器處理請求並返回HTTP報文

主要講HTTP的響應報文

包含協議版本，狀態碼，狀態碼描述

響應行：協議版本，狀態碼，狀態碼描述

響應頭部:響應報文的附加信息，有名/值對組成

響應主題包含回車符，換行符，響應返回數據

5. 瀏覽器解析渲染頁面

瀏覽器渲染頁面一共有五個步驟

• 根據HTML解析出DOM樹
• 根據CSS解析生成CSS規則樹
• 結合DOM樹和CSS規則樹，生成渲染樹
• 根據渲染樹計算每個節點的信息
• 根據計算好的信息繪製頁面

5.1 根據 HTML 解析 DOM 樹

• 根據 HTML 的內容，將標籤按照結構解析成爲 DOM 樹，DOM 樹解析的過程是一個深度優先遍歷。即先構建當前節點的全部子節點，再構建下一個兄弟節點。
• 在讀取 HTML 文檔，構建 DOM 樹的過程當中，若遇到 script 標籤，則 DOM 樹的構建會暫停，直至腳本執行完畢。

5.2 根據 CSS 解析生成 CSS 規則樹

• 解析 CSS 規則樹時 js 執行將暫停，直至 CSS 規則樹就緒。
• 瀏覽器在 CSS 規則樹生成以前不會進行渲染。

5.3 結合 DOM 樹和 CSS 規則樹，生成渲染樹

• DOM 樹和 CSS 規則樹所有準備好了之後，瀏覽器纔會開始構建渲染樹。
• 精簡 CSS 並能夠加快 CSS 規則樹的構建，從而加快頁面相應速度。

5.4 根據渲染樹計算每個節點的信息（佈局）

• 佈局：經過渲染樹中渲染對象的信息，計算出每個渲染對象的位置和尺寸
• 迴流：在佈局完成後，發現了某個部分發生了變化影響了佈局，那就須要倒回去從新渲染。

5.5 根據計算好的信息繪製頁面

• 繪製階段，系統會遍歷呈現樹，並調用呈現器的「paint」方法，將呈現器的內容顯示在屏幕上
• 重繪：某個元素的背景顏色，文字顏色等，不影響元素周圍或內部佈局的屬性，將只會引發瀏覽器的重繪。
• 迴流：某個元素的尺寸發生了變化，則需從新計算渲染樹，從新渲染。

6. 斷開鏈接:TCP四次揮手

2、重繪與迴流

重繪(repaint): 當元素樣式的改變不影響佈局時，瀏覽器將使用重繪對元素進行更新，此時因爲只須要UI層面的從新像素繪製，所以 損耗較少
迴流(reflow): 當元素的尺寸、結構或觸發某些屬性時，瀏覽器會從新渲染頁面，稱爲迴流。此時，瀏覽器須要從新通過計算，計算後還須要從新頁面佈局，所以是較重的操做。會觸發迴流的操做:

• 頁面初次渲染
• 瀏覽器窗口大小改變
• 元素尺寸、位置、內容發生改變
• 元素字體大小變化
• 添加或者刪除可見的 dom 元素
• 激活 CSS 僞類（例如：:link  :visited  :hover  :active）
• 查詢某些屬性或調用某些方法
• clientWidth、clientHeight、clientTop、clientLeft
• offsetWidth、offsetHeight、offsetTop、offsetLeft
• scrollWidth、scrollHeight、scrollTop、scrollLeft
• getComputedStyle()
• getBoundingClientRect()
• scrollTo()

迴流一定觸發重繪，重繪不必定觸發迴流。重繪的開銷較小，迴流的代價較高。

3、防抖與節流

防抖與節流函數是一種最經常使用的高頻觸發優化方式，能對性能有較大的幫助.

1. 防抖

• 定義： 合併事件且不會去觸發事件，當必定時間內沒有觸發這個事件時，才真正去觸發事件。

• 原理：對處理函數進行延時操做，若設定的延時到來以前，再次觸發事件，則清除上一次的延時操做定時器，從新定時。

• 場景： keydown事件上驗證用戶名，用戶輸入，只需再輸入完成後作一次輸入校驗便可。

function debounce(fn, wait, immediate) {
    let timer = null
    return function() {
        let args = arguments
        let context = this
        if (immediate && !timer) {
            fn.apply(context, args)
        }
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(context, args)
        }, wait)
    }
}

2. 節流

• 定義： 持續觸發事件時，合併必定時間內的事件，在間隔必定時間以後再真正觸發事件。每間隔一段時間觸發一次。

• 原理：對處理函數進行延時操做，若設定的延時到來以前，再次觸發事件，則清除上一次的延時操做定時器，從新定時。

• 場景： resize改變佈局時，onscroll滾動加載下面的圖片時。

方法一：使用時間戳。

當觸發事件的時候，咱們取出當前的時間戳，而後減去以前的時間戳(最一開始值設爲0)，若是大於設置的時間週期，就執行函數，而後更新時間戳爲當前的時間戳，若是小於，就不執行。

缺陷：第一次事件會當即執行，中止觸發後沒辦法再激活事件。

function throttle(fn, interval) {
var previousTime = +new Date()

    return function () {
        var that = this
        var args = arguments
        var now = +new Date()
        if (now - previousTime >= interval) {
            previousTime = now
            fn.apply(that, args)
        }
   }
}

方法二：使用定時器

當觸發事件的時候，咱們設置一個定時器，再觸發事件的時候，若是定時器存在，就不執行，直到定時器執行，而後執行函數，清空定時器，這樣就能夠設置下個定時器。

缺陷：第一次事件會在n秒後執行，中止觸發後依然會再執行一次事件。

function throttle(fn, interval) {
    var timer
    return function (){
        var that = this
        var args = arguments

   if(!timer){
        timer = setTimeout(function () {
            fn.apply(that, args)
            timer = null
         }, interval)
        }
    }
}

方法三：優化

鼠標移入能馬上執行，中止觸發的時候還能再執行一次。

var throttle = function(func,delay){
    var timer = null;
    var startTime = Date.now();

    return function(){
        var curTime = Date.now();
        var remaining = delay-(curTime-startTime);
        var context = this;
        var args = arguments;

        clearTimeout(timer);
        if(remaining<=0){
            func.apply(context,args);
            startTime = Date.now();
        }else{
            timer = setTimeout(func,remaining);
        }
    }
}

本部分摘自：http://www.javashuo.com/article/p-wvzbwgee-t.html

4、cookies、session、sessionStorage、localStorage

瀏覽器的緩存機制提供了能夠將用戶數據存儲在客戶端上的方式，能夠利用cookie,session等跟服務端進行數據交互。

1. cookie和session

cookie和session都是用來跟蹤瀏覽器用戶身份的會話方式。

區別：

1）保持狀態：cookie保存在瀏覽器端，session保存在服務器端

2）使用方式：

　　cookie機制：若是不在瀏覽器中設置過時時間，cookie被保存在內存中，生命週期隨瀏覽器的關閉而結束，這種cookie簡稱會話cookie。若是在瀏覽器中設置了cookie的過時時間，cookie被保存在硬盤中，關閉瀏覽器後，cookie數據仍然存在，直到過時時間結束才消失。Cookie是服務器發給客戶端的特殊信息，cookie是以文本的方式保存在客戶端，每次請求時都帶上它。

　　session機制：當服務器收到請求須要建立session對象時，首先會檢查客戶端請求中是否包含sessionid。若是有sessionid，服務器將根據該id返回對應session對象。若是客戶端請求中沒有sessionid，服務器會建立新的session對象，並把sessionid在本次響應中返回給客戶端。一般使用cookie方式存儲sessionid到客戶端，在交互中瀏覽器按照規則將sessionid發送給服務器。若是用戶禁用cookie，則要使用URL重寫，能夠經過response.encodeURL(url) 進行實現；API對encodeURL的結束爲，當瀏覽器支持Cookie時，url不作任何處理；當瀏覽器不支持Cookie的時候，將會重寫URL將SessionID拼接到訪問地址後。

3）存儲內容：cookie只能保存字符串類型，以文本的方式；session經過相似與Hashtable的數據結構來保存，能支持任何類型的對象(session中可含有多個對象)

4）存儲的大小：cookie：單個cookie保存的數據不能超過4kb；session大小沒有限制。

5）安全性：cookie：針對cookie所存在的攻擊：Cookie欺騙，Cookie截獲；session的安全性大於cookie。

• sessionID存儲在cookie中，若要攻破session首先要攻破cookie；
• sessionID是要有人登陸，或者啓動session_start纔會有，因此攻破cookie也不必定能獲得sessionID；
• 第二次啓動session_start後，前一次的sessionID就是失效了，session過時後，sessionID也隨之失效。
• sessionID是加密的
• 綜上所述，攻擊者必須在短期內攻破加密的sessionID，這很難。

6）應用場景：

cookie：

• 判斷用戶是否登錄過網站，以便下次登陸時可以實現自動登陸（或者記住密碼）。若是咱們刪除cookie，則每次登陸必須重新填寫登陸的相關信息。
• 保存上次登陸的時間等信息。
• 保存上次查看的頁面
• 瀏覽計數

session：Session用於保存每一個用戶的專用信息，變量的值保存在服務器端，經過SessionID來區分不一樣的客戶。

• 網上商城中的購物車
• 保存用戶登陸信息
• 將某些數據放入session中，供同一用戶的不一樣頁面使用
• 防止用戶非法登陸

7）缺點：

cookie：

• 大小受限（4k）
• 用戶能夠操做（禁用）cookie，使功能受限
• 安全性較低
• 有些狀態不可能保存在客戶端。
• 每次訪問都要傳送cookie給服務器，浪費帶寬。
• cookie數據有路徑（path）的概念，能夠限制cookie只屬於某個路徑下。

 session：

• Session保存的東西越多，就越佔用服務器內存，對於用戶在線人數較多的網站，服務器的內存壓力會比較大。
• 依賴於cookie（sessionID保存在cookie），若是禁用cookie，則要使用URL重寫，不安全
• 建立Session變量有很大的隨意性，可隨時調用，不須要開發者作精確地處理，因此，過分使用session變量將會致使代碼不可讀並且很差維護。

JS設置cookie： document.cookie="name="+username; 

JS讀取cookie:   假設cookie中存儲的內容爲：name=jack;password=123

//設置cookie
function setCookie(cname, cvalue, exdays) {
 var d = new Date();
 d.setTime(d.getTime() + (exdays*24*60*60*1000));
 var expires = "expires="+d.toUTCString();
 document.cookie = cname + "=" + cvalue + "; " + expires;
}

//讀取
function getCookie(name){
　　var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
　　if(arr=document.cookie.match(reg))
　　　　return unescape(arr[2]);
　　else
　　　　return null;
}
//刪除
function delCookie(name){
　　var exp = new Date();
　　exp.setTime(exp.getTime() - 1);
　　var cval=getCookie(name);
　　if(cval!=null)
　　　　document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}

 

//建立cookie
function setCookie(name, value, expireday) {
    var exp = new Date();
    exp.setTime(exp.getTime() + expireday*24*60*60*1000); //設置cookie的期限
    document.cookie = name+"="+escape(value)+"; expires"+"="+exp.toGMTString();//建立cookie
}
//提取cookie中的值
function getCookie(name) {
    var cookieStr = document.cookie;
    if(cookieStr.length > 0) {
        var cookieArr = cookieStr.split(";"); //將cookie信息轉換成數組
        for (var i=0; i<cookieArr.length; i++) {
            var cookieVal = cookieArr[i].split("="); //將每一組cookie(cookie名和值)也轉換成數組
            if(cookieVal[0] == name) {
                return unescape(cookieVal[1]); //返回須要提取的cookie值
            }
        }
    }
}

 

2. sessionStorage、localStorage

HTML5中與本地存儲相關的兩個重要內容：Web Storage與本地數據庫。其中，Web Storage存儲機制是對HTML4中cookie存儲機制的一個改善。因爲cookie存儲機制有不少缺點，HTML5再也不使用它，轉而使用改良後的Web Storage存儲機制。本地數據庫是HTML5中新增的一個功能，使用它能夠在客戶端本地創建一個數據庫，本來必須保存在服務器端數據庫中的內容如今能夠直接保存在客戶端本地了，這大大減輕了服務器端的負擔，同時也加快了訪問數據的速度。

sessionStorage：將數據保存在session對象中。所謂session，是指用戶在瀏覽某個網站時，從進入網站到瀏覽器關閉所通過的這段時間，也就是用戶瀏覽這個網站所花費的時間。session對象能夠用來保存在這段時間內所要求保存的任何數據。

localStorage：將數據保存在客戶端本地的硬件設備(一般指硬盤，也能夠是其餘硬件設備)中，即便瀏覽器被關閉了，該數據仍然存在，下次打開瀏覽器訪問網站時仍然能夠繼續使用。

這二者的區別在於，sessionStorage爲臨時保存，而localStorage爲永久保存。

到目前爲止，Firefox3.6以上、Chrome6以上、Safari 5以上、Pera10.50以上、IE8以上版本的瀏覽器支持sessionStorage與localStorage的使用。

WebStorage的目的是克服由cookie所帶來的一些限制，當數據須要被嚴格控制在客戶端時，不須要持續的將數據發回服務器。

WebStorage兩個主要目標：①提供一種在cookie以外存儲會話數據的路徑。②提供一種存儲大量能夠跨會話存在的數據的機制。

HTML5的WebStorage提供了兩種API：localStorage（本地存儲）和sessionStorage（會話存儲）。

1）生命週期：

localStorage:localStorage的生命週期是永久的，關閉頁面或瀏覽器以後localStorage中的數據也不會消失。localStorage除非主動刪除數據，不然數據永遠不會消失。

sessionStorage的生命週期是在僅在當前會話下有效。sessionStorage引入了一個「瀏覽器窗口」的概念，sessionStorage是在同源的窗口中始終存在的數據。只要這個瀏覽器窗口沒有關閉，即便刷新頁面或者進入同源另外一個頁面，數據依然存在。可是sessionStorage在關閉了瀏覽器窗口後就會被銷燬。同時獨立的打開同一個窗口同一個頁面，sessionStorage也是不同的。

2）存儲大小：localStorage和sessionStorage的存儲數據大小通常都是：5MB

3）存儲位置：localStorage和sessionStorage都保存在客戶端，不與服務器進行交互通訊。

4)   存儲內容類型：localStorage和sessionStorage只能存儲字符串類型，對於複雜的對象可使用ECMAScript提供的JSON對象的stringify和parse來處理

5)   獲取方式：localStorage：window.localStorage;；sessionStorage：window.sessionStorage;。

6)   應用場景：localStoragese：經常使用於長期登陸（+判斷用戶是否已登陸），適合長期保存在本地的數據。sessionStorage：敏感帳號一次性登陸；

WebStorage的優勢：

1）存儲空間更大：cookie爲4KB，而WebStorage是5MB；

2）節省網絡流量：WebStorage不會傳送到服務器，存儲在本地的數據能夠直接獲取，也不會像cookie同樣美詞請求都會傳送到服務器，因此減小了客戶端和服務器端的交互，節省了網絡流量；

3）對於那種只須要在用戶瀏覽一組頁面期間保存而關閉瀏覽器後就能夠丟棄的數據，sessionStorage會很是方便；

4）快速顯示：有的數據存儲在WebStorage上，再加上瀏覽器自己的緩存。獲取數據時能夠從本地獲取會比從服務器端獲取快得多，因此速度更快；

5）安全性：WebStorage不會隨着HTTP header發送到服務器端，因此安全性相對於cookie來講比較高一些，不會擔憂截獲，可是仍然存在僞造問題；

6）WebStorage提供了一些方法，數據操做比cookie方便；

　　　　setItem (key, value) ——  保存數據，以鍵值對的方式儲存信息。

      　　 getItem (key) ——  獲取數據，將鍵值傳入，便可獲取到對應的value值。

        　　removeItem (key) ——  刪除單個數據，根據鍵值移除對應的信息。

        　　clear () ——  刪除全部的數據

        　　key (index) —— 獲取某個索引的key

5、瀏覽器內核

瀏覽器內核是什麼？英文叫作：Rendering Engine，顧名思義，就是用來渲染網頁內容的，將開發者寫的代碼轉換爲用戶能夠看見的完美頁面。因爲牽扯到排版問題，因此確定會排版錯位等問題。爲何會排版錯位呢？有的是因爲網站自己編寫不規範，有的是因爲瀏覽器自己的渲染不標準。如今有幾個主流的排版引擎，由於這些排版引擎都有其表明的瀏覽器，因此經常會把排版引擎的名稱和瀏覽器的名稱混用，好比常的說IE內核、Chrome內核。其實這樣子是不太合理的，由於一個完整的瀏覽器不會只有一的排版引擎，還有本身的界面框架和其它的功能相輔相成的，而排版引擎自己也不可能實現瀏覽器的全部功能。

(1)Trident內核，因爲被微軟採用，並得益於微軟操做系統的普及，之前幾乎一統天下，因此又稱爲「IE內核」，主要瀏覽器有IE系列瀏覽器；

(2)Gecko內核，由於被Mozilla FireFox瀏覽器採用並獲得開發者的進一步豐富，又被稱爲「Firefox內核」；

(3)WebKit內核，是Safari瀏覽器使用的內核，由Apple研發。 Google Chrome、Opera及各類國產瀏覽器高速模式也使用Webkit做爲內核。

(4)Blink內核，由Google和Opera Software共同開發的瀏覽器內核，如今Chrome（28及日後版本）、Opera（15及日後版本）都將Webkit內核換成了Blink內核。