2.1 網頁相關知識

隨著互聯網的快速發展，更多形態的互聯網產品面世并帶給人們豐富的體驗。在各種互聯網產品中，網頁（Web頁面）依然是最大的信息載體，而后端產品幾乎都是網頁形式的，因此了解網頁的有關知識，對于后端產品經理的工作很有必要。

2.1.1 網頁的前端、后端技術

1.網頁前端“三劍客”

典型的網頁一般是由HTML、CSS、JavaScript三種語言共同完成的，這三種語言常被稱為網頁前端“三劍客”。HTML 相當于一個文檔，它通過標簽把信息進行編排和呈現；CSS 可以對這些文檔進行修飾、美化，提升視覺效果；JavaScript 實現了網頁和用戶的互動。如果把頁面比作一扇門，那么HTML是門板，CSS是色澤或花紋，JavaScript就是門的把手。

（1）HTML——網頁的主體

HTML 是超文本標記語言。之所以被稱為“超文本”，是因為它不僅僅適用于純文字，還可以對圖片、音樂等超出文本的內容進行標記。

HTML并不是一種編程語言，而是一種標記語言，是一種協議和規范。HTML代碼相當于一個帶有規范的文檔，文檔中包含的是呈現給用戶的信息，包括文字、圖片、鏈接、聲音等。HTML提供了一些標簽，用標簽標記的方法把想要傳遞給用戶的信息進行有序的排列，并通過瀏覽器的解析而呈現給用戶。

HTML文件的格式如下。

我們可以看到，在HTML中有很多用“&lt；&gt；”符號括起來的標識，這就是標簽。標簽就是標識信息展示方式的規范。標簽有開始和結束兩部分，兩者成對出現，用斜杠“/”表示結束，比如 “&lt；/head&gt；”。注意，少量HTML元素沒有結束標簽。

如上例所示，用頂層標簽&lt；html&gt；和&lt；/html&gt；表示這是一個頁面，頁面的內容就放在&lt；html&gt；和&lt；/html&gt；之間。在“頭”部標簽&lt；head&gt；和&lt；/head&gt；之間存放頁面的標題，標題可以有多個，所以標題標簽可以有多組。在“主體”標簽&lt；body&gt；和&lt；/body&gt；之間存放網頁的主體內容（如我們看到的正文的文字、圖片等）。

由于在網頁的主體中有不同類型的內容，因此&lt；body&gt；和&lt；/body&gt；之間往往夾雜很多不同的標簽。

段落是通過&lt；p&gt；標簽進行定義的，示例如下。

鏈接是通過&lt；a&gt；標簽進行定義的，結構就是&lt；a href="url"&gt；Link text&lt；/a&gt；，其中href表示單擊鏈接后跳轉的地址，示例如下。

圖像是通過&lt；img&gt；標簽進行定義的，其中src是圖片的地址，示例如下。

此外，&lt；table&gt；標簽標記表格，&lt；input&gt；標簽標記輸入框，&lt；ul&gt；標簽標記無序排列，&lt；style&gt；標簽表示插入CSS代碼，&lt；script&gt；標簽表示插入JavaScript代碼。

某網站首頁的部分代碼如圖2-1所示。

在開發頁面時，程序員就是使用這些標簽，制作出頁面的。

（2）CSS——進行樣式的修飾

CSS的全稱是“層疊CSS文件”，用于定義如何顯示HTML元素或XML元素，比如指定文字的顏色、大小、字體，以及按鈕或輸入框的樣式等，然后將其插入到HTML 網頁的&lt；style&gt；標簽中，這樣展示出來的就是 CSS 設置的風格了。其主要作用就是對頁面進行修飾，實現更好的視覺效果，讓用戶接收信息更加舒服自然。

CSS屬于瀏覽器解釋型語言，可以直接由瀏覽器執行。CSS的代碼結構舉例如下。

（3）JavaScript——實現操作行為

JavaScript（簡寫為 JS）是用來控制網頁的行為效果的，即內容應該如何對事件做出反應。例如它可以設置鼠標懸停效果、在客戶端驗證表單、顯示警告框、設置Cookie等。

使用JavaScript代碼可以為網頁添加各式各樣的動態功能，為用戶提供更流暢美觀的瀏覽效果。網頁中所有對數據進行判斷、處理的操作，以及向瀏覽者反饋信息的本地代碼實現部分，均可以由 JavaScript（當然也有可能是其他的語言）實現。使用JavaScript 可以使網頁更具交互性，給用戶提供更令人興奮的體驗，同時減輕了服務器負擔。

通常，JavaScript 腳本也是通過嵌入 HTML 中來實現自身功能的，其通常位于&lt；script&gt；與&lt；/script&gt；標簽之間，示例如下。

2.網頁后端技術

HTML、CSS、JavaScript 三劍客完成了網頁的視覺和交互層面的工作，那么誰來完成數據的邏輯處理和規則運算工作呢？這時候就需要后端開發語言，比如PHP、Java等。

PHP是一種通用解釋型開源腳本語言，具有開發周期短、跨平臺、安全、使用廣泛等特點。PHP語言將程序嵌入到HTML文檔中去執行，執行效率高。使用PHP語言能夠更快地完成網頁前端頻繁而瑣碎的更新，自如地應對各種業務需求的變化。因此，頁面的結構調整、用戶輸入內容的基本驗證、規則邏輯等，都適合使用PHP開發。

Java也是常用的后端語言，它可以有效地提高復用度、提升性能和吞吐能力、規避安全問題。Java語言的運行效率高，不容易犯錯，適合大中項目。但Java語言也有缺點，比如其開發復雜、維護成本高等。在國內的大公司里，偏業務的程序員一般都會使用Java語言。

當然還有其他語言可用于處理底層邏輯運算，比如ASP.NET、C++等語言。

一個完整的網站通常由前端代碼實現界面效果，由后端代碼完成邏輯運算和數據處理。這種前后端分離的模式，確保網頁性能穩定、快速且安全。

2.1.2 瀏覽器

1.瀏覽器的概念

網頁是通過在瀏覽器上加載來呈現的。瀏覽器的主要功能是將用戶選擇的 Web資源呈現出來，其通過向Web服務器請求資源，并對資源進行解析，將資源中的內容顯示在瀏覽器窗口中。

瀏覽器的種類比較多，對規范的遵循方式并不一致，這也是Web頁面兼容性問題的根源。瀏覽器的用戶界面都差不多，常見的用戶界面元素包括：地址欄、前進和后退按鈕、書簽選項、刷新和暫停按鈕、主頁按鈕等。

2.瀏覽器的主要組件

瀏覽器相當于一個應用程序，其展示的內容是由其訪問的服務器提供的。瀏覽器支撐瀏覽功能的組件包括但不限于如下。

（1）用戶界面：即用戶看到的界面，主要包括地址欄、前進和后退按鈕、書簽等，也就是瀏覽器上除了用來顯示所請求頁面的主窗口之外的其他部分。

（2）渲染引擎：用來解析并渲染所請求的內容，即在瀏覽器窗口中顯示所請求的內容，比如使用PDF查看器插件就能顯示PDF文檔。渲染引擎是每一個瀏覽器的核心部分，所以渲染引擎也稱為瀏覽器內核。

（3）瀏覽器引擎：用來查詢及操作渲染引擎的接口，這也是一個核心功能，相當于瀏覽器的動力裝置。

（4）JavaScript解釋器：用來解釋并執行JavaScript代碼的工具。

（5）數據存儲：瀏覽器需要在硬盤中保存類似Cookie、緩存的各種數據，其是一種客戶端存儲技術。

（6）其他組件。

3.主流瀏覽器和殼瀏覽器

主流瀏覽器：擁有獨立內核的瀏覽器被稱為主流瀏覽器。表2-1就是常見的主流瀏覽器。

殼瀏覽器：在某個瀏覽器內核之上增加相應的輔助功能，并改變其名稱與外觀的瀏覽器，比如360極速瀏覽器、UC瀏覽器、搜狗瀏覽器、獵豹瀏覽器、QQ瀏覽器、2345瀏覽器等。

2.1.3 相關的協議和概念

1.TCP/IP、HTTP協議

瀏覽器能夠獲取并展示頁面內容，是通過一些網絡協議實現的。網絡協議也就是網絡標準規范，主要有TCP/IP協議、HTTP協議等。

（1）TCP/IP協議

TCP/IP 協議，指傳輸控制協議/網際協議（Transmission Control Protocol/Internet Protocol），是用于因特網（Internet）的通信協議，定義了電子設備（比如計算機）如何連入因特網，以及數據如何在它們之間傳輸的標準。

瀏覽器展示網頁內容，需要從服務器獲取網頁數據，這時候就需要從瀏覽器（相當于客戶端）發起HTTP請求到服務端，而該請求是基于TCP/IP協議才能生效的。

（2）HTTP協議

HTTP協議，即超文本傳輸協議（HyperText Transfer Protocol），是互聯網上應用最為廣泛的一種網絡協議。

瀏覽器獲得了服務器的數據信息之后，該數據信息可能是散亂無序的，如何規范地按照設計者的期望展示給用戶呢？這就用到了HTTP協議。HTTP協議是在TCP/IP協議基礎之上建立起來的，其初衷是為了提供一種發布和接收HTML頁面的方法。

（3）工作過程

當瀏覽器輸入服務器的IP地址后，即開始通過TCP/IP協議向服務器發起HTTP請求，建立起與服務器的連接通道。該通道從服務器 IP 地址獲取服務器頁面數據，然后根據HTTP協議按照一定格式予以響應，顯示頁面。這就是通過瀏覽器訪問頁面的框架性的機制和流程。該過程如圖2-2所示。

2.IP地址、域名、網站名、URL、端口

（1）IP地址

如果把計算機比作房間，那么 IP 地址就是房間的地址。IP 地址為互聯網上的每一個網絡和每一臺主機分配一個邏輯地址，以此來屏蔽物理地址的差異。例如“163.125.121.123”就是一個電腦的IP地址。

服務器也有它的 IP 地址，其實際就是提供服務的那臺主機的地址。因此訪問服務器的IP地址本身就是訪問提供服務的主機上的信息。

（2）域名

為對應的 IP 地址指定的一個容易記住的名字，就是域名，例如“google.com”“baidu.com”“163.com”等就是域名。注意，如果域名前面加上“www”，就不再是域名了，而是網站名。域名在本質上是用于標識計算機的電子方位。

（3）網站名

網站名是由“服務器名+域名”組成的，比如某網站的域名是“sitename.com”（此網站域名為虛構，與現實中的任何網站無關，下文同），因為想建立一個萬維網的服務器，所以就有了網站名“www.sitename.com”。后來其又想運作郵箱服務器，所以也就有了郵箱網址“email.sitename.com”。

為了方便理解上面的概念，我們以網址“http：//www.sitename.com/index.html”為例，其各部分的解釋如下。

①“http：//”是協議，也就是 HTTP 超文本傳輸協議，即網頁在網絡上傳輸的協議。

②“www”是服務器名，代表這是一個萬維網服務器。

③“sitename.com”是域名，用來定位網站的獨一無二的名字。

④“www.sitename.com”是網站名，由“服務器名+域名”組成。

⑤ 后面的“/”是根目錄。用戶通過網站名找到服務器，然后就會訪問服務器存放網頁的根目錄。

⑥“index.html”是根目錄下的默認網頁（大部分的默認網頁都是index.html）。

(4)URL

URL即統一資源定位符，也就是我們平時說的網址。URL的構成為“IP或域名+端口號+資源位置+參數+其他”。

URL是網頁元素的絕對路徑，可以用來定位任何查得到的網頁、多媒體文件等。互聯網上的每個文件都有一個唯一的URL，它包含了文件的位置，以及瀏覽器對其處理的方式。比如頁面上的每一張圖片，都有它獨一無二的URL，讓你在浩瀚的數據世界中找到它。

2.1.4 Web服務器

1.服務器

（1）服務器的概念

服務器就是指能對其他設備（客戶端）提供某些服務的計算機系統。比如一個計算機對外提供FTP服務，那么它就相當于服務器（端）。基本的服務器就是一臺高性能的實體電腦，或者是云端的虛擬機（可以通過互聯網租用第三方的云端服務器，比如阿里云、騰訊云）。在網絡環境下，根據服務器提供的服務類型不同，其可分為文件服務器、數據庫服務器、應用程序服務器、Web服務器等。服務器與客戶端的連接示意圖如圖2-3所示。

（2）服務器的特質

由于需要提供高可靠的服務，因此服務器在處理能力、穩定性、可靠性、安全性、可擴展性、可管理性等方面的要求較高，具體包括但不限于如下。

①硬件性能高：服務器在網絡中通常以一對多的方式提供服務，需要承擔多種應用請求，因此其硬件必須有能力保障服務質量，對內存、容量、運行速度等硬件性能的要求較高。

②穩定性和安全：服務器需要 24 小時不間斷工作，要有可靠的數據備份機制、快速恢復故障的功能，以及數據保密措施。

③可擴展性：服務器需要有更廣闊的擴展空間，從而隨著服務對象的數量、服務業務種類的變化而進行擴展和個性化定制。

④與配套設施兼容作業：服務器常常要和附屬硬件配合工作，比如交換機、負載均衡器、光纜等。

2.Web服務器

（1）Web服務器的概念

不管什么網頁資源，若想被遠程計算機訪問，都必須有一個與之對應的網絡通信程序。當用戶訪問時，這個網絡通信程序會讀取Web資源數據，并把數據發送給來訪者。Web服務器就是這樣一個程序，它用于實現底層網絡通信，處理HTTP協議。

使用Web服務器，開發者只需要關注Web資源怎么編寫，而不需要關心資源如何發送到客戶端手中，從而極大地減輕了開發者的工作量。

（2）Web服務器的工作機制

Web頁面屬于“B/S架構”，即“瀏覽器/服務器架構”。在這種場景下，客戶端使用Web瀏覽器，通過網絡連接到服務器上，使用HTTP協議發起請求，告訴服務器“我”現在需要得到哪個頁面，然后把所有的請求交給Web服務器，之后Web服務器根據用戶的需要，從文件系統（存放了所有靜態頁面的磁盤）取出內容，再返回給客戶端。客戶端在接收到內容之后經過瀏覽器渲染解析，得到最終顯示的效果。

（3）一對多和多對一的Web服務器

如果一個網站必須對應一個Web服務器主機的話，那么很多大公司（比如騰訊）就要有數不盡的服務器。實際上，在一臺Web服務器上可以搭建多個網站。

與之相反的還有一種情況，就是多個Web服務器為一個網站提供服務。大型網站的Web服務器都有均衡負載策略：雖然是一個IP，但對應的可能是多臺內部服務器，由負載均衡策略決定每次訪問落實到哪臺服務器上。在這種情況下，用戶所看到的IP地址，其實所對應的并不是一臺Web服務器，而是一個負載均衡器，它負責分發外部請求到具體的Web服務器上，通過合理管理每天的網上數據流量，來減輕單個服務器上的負擔，力求讓網絡訪問者享受最佳的聯網體驗。負載均衡器將客戶端請求分撥給不同的服務器的示意圖如圖2-4所示。

2.1.5 緩存、Cookie、Session

1.緩存

（1）什么是緩存

緩存即數據交換的緩沖區，簡單說就是臨時存儲數據的地方，其可以存儲一些高頻數據的副本。緩存無處不在，有瀏覽器端的緩存、服務器端的緩存、數據庫的緩存等。

瀏覽器會緩存它瀏覽過的資源，包括網頁、圖片等數據。由于CPU處理緩存數據的運行速度比內存數據快得多，所以緩存的存在可以提高響應速度，減小服務器壓力。

（2）緩存與數據庫的對比

①范疇不同。所有具備持久化存儲能力的機制，甚至包括可以直接讀寫的本地文件，你都可以說它是“數據庫”。所有保存中間的、額外的數據的機制，你都可以說它是“緩存”。

②結構不同。數據庫的存儲方式嚴格且多樣，而緩存通常是簡單的“key-value”結構（key是關鍵字，value是關鍵字的值）的數據。

③處理速度不同。數據庫是存在低速設備上的，每次訪問數據庫，都要經過“讀/取”（I/O）過程，即從磁盤調入內存的過程，該過程是耗時、耗性能的。而訪問緩存的速度非常快。從數據結構層面來說：緩存使用了異步非阻塞，使用了動態字符串，并采用了跳躍表。

④范圍對比。緩存中有的數據，數據庫中一定有。反之則不成立。緩存中存儲的是一些請求頻次比較高的數據，不是所有數據都會存儲到緩存中。

2.Cookie和Session

倘若我們在電腦上使用賬號、密碼登錄過某網站，那么下次進入該網站時通常會自動登錄。這其實就是瀏覽器的Cookie和Session在起作用。這兩者都是用來保存狀態信息的，是為了解決HTTP無狀態（即HTTP對前后請求沒有任何識別能力）的問題而生的。

比如用戶登錄一次，就會生成Session文件，保存到服務器中，并對應生成Session ID，保存到Cookie 文件中。Cookie文件是被保存在客戶端中的，其可以在瀏覽器目錄下被查詢到。這樣下次同一個用戶在同一個用戶端上登錄時，就能夠通過 Cookie文件中的Session ID，將登錄資料調用出來。需要注意的是，如果瀏覽器禁用了Cookie，那么同時Session也會失效。

3.緩存、Cookie和Session三者的對比

緩存與 Cookie、Session 的主要差別在于：緩存的內容比后兩者更廣泛、數量更大，比如會話信息、秒殺商品、熱點新聞、熱門商品等需要頻繁查詢的信息，都會保存在緩存中。從數據存儲位置看，三者對比如表2-2所示。

2.1.6 頁面加載

1.頁面加載的過程分析

用戶打開一個頁面，頁面框架中的那些不需要加載的內容會先呈現出來，之后瀏覽器會逐步拉取服務器上的數據。這就是為什么當用戶打開一個頁面時，剛開始頁面上的部分內容為空白，需要等待一會才能夠載入。

用戶等待的時間主要花費在下載網頁元素上，這些網頁元素包括 HTML、CSS、JavaScript、Flash、圖片等內容。每增加一個元素，網頁載入的時間就會增加。

以瀏覽器加載HTML頁面為例，我們來簡單看一下頁面加載的整個過程。

（1）用戶輸入網址（假設用戶第一次訪問該網站），瀏覽器向服務器發出請求，服務器返回HTML 文件。

（2）瀏覽器開始載入 HTML代碼。這時發現代碼中的&lt；head&gt；標簽內含有一個&lt；link&gt；標簽，引用了外部的 CSS 文件，于是瀏覽器又發出 CSS文件請求，讓服務器返回這個 CSS文件，在獲取該文件后，瀏覽器開始渲染頁面。

（3）與此同時，瀏覽器繼續載入HTML中的&lt；body&gt；標簽部分的代碼，發現其中有一個&lt；img&gt；標簽引用了一張圖片，于是向服務器發出請求。此時瀏覽器不會等到圖片下載完畢，而會繼續渲染后面的代碼。

（4）服務器返回圖片。由于圖片占用了網頁上的一定面積，影響了后面段落的排布，因此瀏覽器需要重新渲染這部分代碼。

（5）這時候，如果用戶按下界面中的“換膚”按鈕，JavaScript 代碼會讓瀏覽器更換&lt；link&gt；標簽中的 CSS 路徑，瀏覽器會向服務器請求新的 CSS文件，然后重新渲染頁面。

上述瀏覽器加載HTML頁面的過程如圖2-5所示。

按照此流程，瀏覽器來來回回地運行，不斷將代碼中的元素逐步加載出來。

2.加載速度的重要性

用戶的耐心是有限的。假如用戶訪問你的網站但等待過久，他就會放棄訪問。許多研究表明，用戶最滿意的打開頁面時間在2秒以內。如果用戶等待了12秒以上，網頁還沒有載入，那么99%的用戶會關閉這個網頁。

Google曾經做過一個實驗，當頁面顯示10條搜索結果時，其頁面載入時間為0.4秒，當頁面顯示30條搜索結果時，其頁面載入時間為0.9秒。當Google采用后面一個方案時，其流量和收入均減少了20%。這就是為什么在許多電商的后臺管理系統中，默認加載數據條數是10條。

3.優化頁面加載速度

隨著技術發展，優化頁面加載速度的辦法有很多，常見的方案包括但不限于如下。

（1）減少文件請求次數

用戶在打開一個網頁的時候，等待的時間主要花費在下載網頁元素（比如HTML、CSS、JavaScript、Flash等內容）上了，所以要想提高網頁打開速度，就要減少HTTP請求文件次數，有效的辦法如下。

①合并文件：對于文本文件，可以直接合并其內容。例如，將多個JavaScript文件合并成一個，將多個CSS文件合并成一個。

②優化緩存：對于沒有變化的網頁元素（如頁頭、頁尾等），當用戶再次訪問的時候沒有必要重新下載，直接從瀏覽器緩存里讀取就可以了。

（2）壓縮網頁元素

網頁中各個元素的體積越小，下載所需的時間就越少，因此要盡可能壓縮文件。現在比較成熟和流行的壓縮網頁的方式，是使用 Gzip（一個文件壓縮程序），一般可以讓網頁文本內容減少70%以上。

（3）將CSS文件放在網頁的“head”標簽中

可以將CSS文件（樣式表）移到網頁的“head”標簽中，可以讓頁面盡快開始渲染，這樣用戶所感受的載入速度將會變快。將CSS文件放在HTML的“head”標簽中，其代碼如圖2-6所示。

（4）把JavaScript文件放到網頁底部

當網頁被打開時，所有元素是按照順序顯示的。由于JavaScript文件的特殊性，其相比其他元素來說，會加載得很慢。在JavaScript文件下載完成之前，后面其他元素的顯示將被阻塞。因此盡量把JavaScript文件放在網頁底部。

（5）其他方法

提升頁面加載速度的方法還有很多，比如壓縮組件、使用外部JavaScript和CSS文件、去掉不必要的插件、使用內容分發網絡等。

需要注意的是，努力提升頁面加載速度的同時，也不能忽視交互響應的優化。對于用戶來說，每次操作不管返回結果是慢還是快，網頁都要及時響應，從而可以在一定程度上緩解用戶等待網頁加載的焦慮。