之前有整理過一部分知識點, 一直沒有發(fā)布, 因為都是有關(guān) CSS 方面的零散內(nèi)容; 現(xiàn)在想想無論做什么都需要慢慢積累, 所以還是決定將之前整理的相關(guān)內(nèi)容驗證之后慢慢分享給你們, 現(xiàn)在看到感覺還挺有意思 。
好了廢話不多說, 直接上代碼以及圖例(為了讓大家方便閱讀, 都有自己驗證過程的一些圖片作為分享) 。
1. 什么是 Web 前端
1. Web 前端本質(zhì)上是一種 GUI軟件, 可以直接借鑒其它 GUI軟件 系統(tǒng)架構(gòu)設(shè)計方法 。
1. 什么是 GUI軟件?
1. 圖形化用戶界面: 是指采用 圖形方式顯示 的計算機(jī)操作用戶界面 。
2. 圖形用戶界面是一種人與計算機(jī)通信的界面顯示格式, 允許用戶使用鼠標(biāo)等輸入設(shè)備操縱屏幕上的圖標(biāo)或菜單選項, 以 選擇命令、調(diào)用文件、啟動程序 或執(zhí)行其它一些日常任務(wù) 。 與通過鍵盤輸入文本或字符命令來完成例行任務(wù)的字符界面相比, 圖形用戶界面有許多優(yōu)點; 圖形用戶界面 由窗口、下拉菜單、對話框及其相應(yīng)的控制機(jī)制構(gòu)成, 在各種新式應(yīng)用程序中都是標(biāo)準(zhǔn)化的, 即相同的操作總是以同樣的方式來完成, 在圖形用戶界面, 用戶看到和操作的都是圖形對象, 應(yīng)用的是計算機(jī)圖形學(xué)的技術(shù) 。
2. GUI軟件的特點:
1. 人機(jī)交互性 。
2. 美觀性 。
3. 實用性 。
4. 技術(shù)性 。
3. GUI軟件的分類:
1. 具體產(chǎn)品獨有的操作系統(tǒng)用戶交互界面
2. 可運行于不同品牌和型號電子產(chǎn)品的軟件
4. GUI軟件的設(shè)計原則:
1. 界面風(fēng)格一致性的設(shè)計原則
2. 界面布局的邏輯性原則
3. 界面具有啟示性的設(shè)計原則
4. 界面設(shè)計應(yīng)遵循習(xí)慣性用法
2. 但是, Web 前端有點特別 。
1. Web 前端它是 BS 架構(gòu), 它發(fā)布的過程是:
1. 我們開發(fā)完前端代碼之后, 他有一個發(fā)布的過程, 它的發(fā)布過程與 CS 架構(gòu)不一樣, 它不是去發(fā)布一個安裝包, 它是將我們的代碼發(fā)布到遠(yuǎn)程服務(wù)器 WebServer 以及我們的遠(yuǎn)程 CDN 上;
2. 運行的過程是我們的用戶打開瀏覽器輸入相應(yīng)的網(wǎng)址, 這個時候我們的瀏覽器才去向我們的遠(yuǎn)程服務(wù)器發(fā)出請求, 動態(tài)的增量式 的去加載我們的靜態(tài)資源;
3. 因此我們 Web 前端去訪問的過程實際上是一個 動態(tài)的增量式的 加載靜態(tài)資源的過程, 它是通過我們的 HTTP 請求, 通過瀏覽器發(fā)送到我們 Server, 再從 Server 返回, 最終拿到我們的資源;
2. 這個過程中, 如果接口返回的數(shù)據(jù)速度更快, 那實際上對我們 Web 前端來說, 體驗就會更好 。
3. BS架構(gòu) 與 CS架構(gòu)
1. BS架構(gòu):
1. B/S架構(gòu)即 瀏覽器和服務(wù)器架構(gòu)模式 。
2. B/S 的特征和基本結(jié)構(gòu):
1. 在 B/S 結(jié)構(gòu)中, 每個節(jié)點都分布在網(wǎng)絡(luò)上, 這些網(wǎng)絡(luò)節(jié)點可以分為 瀏覽器端、服務(wù)器端、中間件, 通過它們之間的鏈接和交互來完成系統(tǒng)的功能任務(wù) 。 三個層次的劃分是從邏輯上分的, 在實際應(yīng)用中多根據(jù)實際 物理網(wǎng)絡(luò) 進(jìn)行不同的物理劃分 。
2.1. 瀏覽器端: 即用戶使用的瀏覽器, 是用戶操作系統(tǒng)的接口, 用戶通過瀏覽器界面向服務(wù)器端提出請求, 并對服務(wù)器端返回的結(jié)果進(jìn)行處理并展示, 通過界面可以將系統(tǒng)的邏輯功能更好的表現(xiàn)出來 。
2.2. 服務(wù)器端: 提供數(shù)據(jù)服務(wù), 操作數(shù)據(jù), 然后把結(jié)果返回中間層, 結(jié)果顯示在系統(tǒng)界面上 。
2.3. 中間件: 這是運行在瀏覽器和服務(wù)器之間的 。 這層主要完成系統(tǒng)邏輯, 實現(xiàn)具體的功能, 接受用戶的請求并把這些請求傳送給服務(wù)器, 然后將服務(wù)器的結(jié)果返回給用戶, 瀏覽器端和服務(wù)器端需要交互的信息是通過中間件完成的 。
2. CS架構(gòu)
1. 服務(wù)器-客戶機(jī); C/S結(jié)構(gòu)通常采取兩層結(jié)構(gòu) 。 服務(wù)器負(fù)責(zé)數(shù)據(jù)的管理, 客戶機(jī)負(fù)責(zé)完成與用戶的交互任務(wù) 。
圖片示例
L-1.png
L-2.png
2. 瀏覽器的一個請求從發(fā)送到返回都經(jīng)歷了什么
1. 用戶首先在瀏覽器輸入 url, 瀏覽器會將這個 url 拆分解析 domain 。
2. 最終將 domain 發(fā)送到我們的 DNS 服務(wù)器上, DNS 服務(wù)器會根據(jù) domian 去查詢 host 對應(yīng)的 IP 地址, 再把 IP 地址返回給我們的瀏覽器 (瀏覽器緩存 -> 系統(tǒng)緩存 -> 路由器緩存 -> ISP DNS緩存 -> 遞歸搜索) 。
3. 瀏覽器持有 IP 地址之后, 就知道要將請求發(fā)送到哪個地方去 。
4. IP 以及一些相關(guān)的參數(shù) 會跟隨我們的協(xié)議發(fā)送到網(wǎng)絡(luò)中去 。
5. 請求經(jīng)過 局域網(wǎng) -> 交換機(jī) -> 路由器 -> 主干網(wǎng)絡(luò) 到達(dá)我們的服務(wù)端 。
6. 服務(wù)端它是有自己的架構(gòu)的, 比如 MVC 架構(gòu):
1. 請求會首先進(jìn)入 Controller 中, 在 Controller 中進(jìn)行相關(guān)的邏輯處理, 然后去調(diào)用我們的 Model 層 。
2. Model 層是負(fù)責(zé)和數(shù)據(jù)進(jìn)行交互的, 在數(shù)據(jù)進(jìn)行交互的過程中, MOdel 層會去讀取 redis+db 數(shù)據(jù)庫中的數(shù)據(jù) 。
3. 獲取數(shù)據(jù)之后, 最終將我們渲染好的頁面 通過 View 層, 返回給我們的網(wǎng)絡(luò) 。
7. 這個時候一個 http 請求的 Response 就從我們的服務(wù)端又回到了瀏覽器 。
8. 瀏覽器主要是做一個 render 的過程: render 的過程就是 瀏覽器根據(jù)返回的內(nèi)容進(jìn)行渲染的過程 。
L-3.png
3. 瀏覽器的一個請求從發(fā)送到返回的這個過程, 我們都有那些點可以進(jìn)行優(yōu)化:*
1. DNS 服務(wù)器(通過緩存, 減少 dns 查詢時間)
1. 在瀏覽器層面或者路由層面, 對 DNS 服務(wù)器相關(guān)信息做緩存優(yōu)化: 這樣的話我們訪問 DNS 的時間就會縮短很多 (瀏覽器緩存 -> 系統(tǒng)緩存 -> 路由器緩存 -> ISP DNS緩存 -> 遞歸搜索) 。
2. 網(wǎng)絡(luò)請求的過程(走最近的網(wǎng)絡(luò)環(huán)境): 涉及到 帶寬/ 網(wǎng)絡(luò)的選擇 / 緩存
1. 使用 CDN, 實際上它就解決了 網(wǎng)絡(luò)的選擇 / 緩存 的問題;
1. 但是在訪問 CDN 的過程中會有涉及到一個問題: 就是 CDN 它是請求靜態(tài)資源使用的, 那么對于靜態(tài)資源來說, 實際上我們請求中所攜帶的 cookie 是沒有用的; 所以 CDN 的域名不要與主站的域名一樣, 這樣的話就能夠防止訪問 CDN 的時候攜帶主站 cookie 的問題 。
3. 瀏覽器(靜態(tài)資源的緩存):
1. 對于一些接口是沒有辦法使用 CDN 的, 對于這樣的接口我們可以在瀏覽器端做一些 緩存策略 的 。
4. http 請求 大小:
1. 我們的一個 http 請求能夠控制它相對較小的時候, 那么訪問的速度相對也是會快一些的 。
5. 網(wǎng)絡(luò)環(huán)境的損耗(合并網(wǎng)絡(luò)請求, 減少 http 請求):
1. 每一個 http 請求都會去走網(wǎng)絡(luò)環(huán)境層到達(dá)我們的服務(wù)器, 實際上每次請求都會有網(wǎng)絡(luò)環(huán)境的損耗, 我們將多次 http 請求合并為一次, 從而減少網(wǎng)絡(luò)損耗 。
6. 瀏覽器端的渲染過程:
1. 使用框架的相關(guān) 服務(wù)端渲染 的方案 。
