1.瀏覽器的位址列輸入url並按下回車。
2.瀏覽器查詢當前url是否存在快取，並比較快取是否過期。
3.dns解析url對應的ip。
4.根據ip建立tcp連線（三次握手）。
5.http發起請求。
6.伺服器處理請求，瀏覽器接收http響應。
7.渲染頁面，構建dom樹。
8.關閉tcp連線（四次揮手）。
1.http快取有多種規則，根據是否需要重新向伺服器發起請求分為兩種：強制快取，對比快取.
強制快取：
cache-control：中的max-age儲存乙個相對時間。表示瀏覽器接收到檔案之後，快取在相對應的時間內均有效。如果同時存在cache-control和expires,瀏覽器優先使用cache-control
expires：是乙個絕對時間，即伺服器時間。瀏覽器檢查當前時間，如果還沒有失效就直接用快取檔案。該方法有乙個問題，伺服器可能和客戶端時間不一致，因此該欄位很少使用。
對比快取：
last-modified是第一次請求資源時，伺服器返回的字段，表示最後一次更新時間。下次瀏覽器請求資源時就傳送if-modified-since欄位。伺服器用本地last-modified時間與if-modified-since時間比較，如果不一致則認為快取已過期並返回新的資源給瀏覽器，如果時間一致則返回304狀態碼，讓瀏覽器繼續使用快取。
etag：資源的實體標識（雜湊字串），當資源內容更新時，etag會改變。伺服器會判斷etag是否變化，如果變化返回新資源，否則返回304。
在位址列輸入網域名稱並不是最後資源所在的真實位置，網域名稱只是乙個ip位址的乙個對映。
2.如果沒有找到則會查詢本地的dns解析器快取，如果找到則返回。
3.如果還是沒有找到則會查詢本地dns伺服器，如果找到則返回。
4.最後迭代查詢，按根域伺服器->頂級網域名稱.cn->第二層網域名稱->子網域名稱的順序找到ip位址
3.發起tcp的3次握手
在解析網域名稱之後，獲取了伺服器的ip位址，開始建立連線，這是由tcp協議完成的，主要通過三次握手進行連線。
第一次握手：建立連線時，客戶端傳送syn包(syn=j)到伺服器，並進入syn_sent狀態，等待伺服器確認；
第二層握手：伺服器接收到syn包，必須確認客戶端的syn(ack=j 1)，同時自己也傳送乙個syn包(syn=k)，即syn ack包，此時伺服器進入syn_recv狀態；
第三次握手：客戶端收到伺服器的syn_ack包，向伺服器傳送確認包ack(ack=k 1)，此包傳送完畢，客戶端和伺服器進入established(tcp連線成功)狀態，完成三次握手。
完整的http請求包含請求行，請求頭部，請求主體三個部分。(具體就不一一講述了)伺服器在收到瀏覽器傳送的http請求之後，會收到http報文封裝成http的request物件，並通過不同的web伺服器進行處理，處理完的結果以http的response物件返回，主要包括狀態碼，響應頭，響應報文三個部分。
狀態碼主要包括以下部分：
1xx：指示資訊-表示請求已接收，繼續處理
2xx：成功-表示請求已被成功接收，理解，接收
3xx：重定向-要完成請求必須進行更進一步的操作
4xx：客戶端錯誤-請求語法錯誤或請求無法實現
5xx：伺服器端錯誤：伺服器未能合法實現請求
響應頭主要由：cache-control、connection、date、pragma等組成。
在瀏覽器還沒接收到完整的html檔案時，它就開始渲染頁面了，在遇到外部鏈入的指令碼或時，會再次發生http請求重複上述步驟。在收到css檔案後對已經渲染的頁面重新渲染，加入它們對應的樣式，檔案載入完立刻顯示在相應的位置。在這一過程中可能會觸發重繪或重排。
reflow：也稱作layout，中文叫回流，一般意味著元素的內容、結構、位置或尺寸發生了變化，需要重新計算樣式和渲染樹，這個過程稱為reflow。
repaint：中文重繪，意味著元素發生的改變只是影響了元素的一些外觀之類的時候(例如：背景色，邊框顏色，文字顏色等)，此時只需要應用新樣式繪製這個元素就可以了。
通過四次揮手關閉連線(fin ack、ack、fin ack、ack)。
第一次揮手：瀏覽器發完資料後，發生fin請求斷開連線
第二次揮手：伺服器傳送ack表示同意斷開連線
第三次揮手：伺服器傳送fin請求斷開連線
第四次揮手：瀏覽器需要返回ack表示同意斷開
從使用者輸入url到頁面最後呈現 發生了些什麼？
一 瀏覽器獲取資源的過程 1 輸入url 2 瀏覽器解析url，獲得主機名 3 將主機名轉換成伺服器ip位址 查詢本地dns快取列表，如果沒有則向預設的dns伺服器傳送查詢請求 4 瀏覽器建立一條與伺服器的tcp連線 三次握手 5 瀏覽器向伺服器傳送http請求 6 伺服器向瀏覽器返回請求響應 7 ...
VUE專案輸入框值改變游標到最後
最近遇到乙個小需求，輸入會議房間號，要求每三位加一空格，發現改變輸入框值後，游標總是跑到最後，查完資料發現原因出在replace,replace替換後會像重新輸入一樣，所以游標會在最後。需要用到 selectionstart 表示輸入性元素selection起點的位置，selectionend 表示...
從輸入url到瀏覽器呈現網頁發生了什麼？
大致能分成兩個部分 網路通訊與頁面渲染 一.網路通訊 網際網路各個網路裝置間的通訊均基於tcp ip協議，此協議將整個過程進行分層，由上至下分別為 應用層 傳輸層 網路層和資料鏈路層 1.輸入url 2.應用層用dns解析網域名稱 dns協議 解析url網域名稱，檢查本地是否有對應的ip位址，有則返...