web測試基礎知識（一）web基礎
web測試的價值：
a、挖掘測試深度，提高測試價值
客戶端/瀏覽器----應用伺服器----資料庫伺服器
資料從客戶端/瀏覽器接收，經過http協議、tcp/ip協議傳輸，來到應用伺服器，最後到達資料庫，前面我們分析過介面的輸入域，伺服器資料庫的後臺，但是我們沒有去關心整個資料傳輸的正確性，資料從前臺到後臺，或者從後臺到前臺後是否準確無誤，又有什麼規則來限制和約束我們傳輸的資料保證安全性和準確性，這就是我們要研究的問題
b、協助自動化(功能,介面,效能)測試定位調優
客戶端/瀏覽器----應用伺服器----資料庫伺服器，效能定位調優 過程是採用一一排除的方法，整體分為三個方向，前端調優、網路調優、後端調優，那麼前段調優也就主要是針對的瀏覽器端的web頁面，我們需要了解前臺發出的請求資料通過什麼過程傳送到後臺，後臺相應的資料經過什麼樣的過程傳到前臺，瀏覽器怎樣把資料渲染完成，中間是否存在效能問題。
一、CS和BS架構特點
CS架構
優點：
1、有獨立的客戶端，安全性高
2、大部分業務都在客戶端實現，可以實現很複雜的業務
缺點：
1、對環境要求高，需要安裝客戶端，推廣速度慢
2、需要專門前後臺的開發團隊，維護成本高
BS架構
優點：
1、不需要安裝客戶端，只需要瀏覽器，推廣速度塊
2、只需要維護伺服器端，開發維護成本低
缺點：
1、安全性差
2、大部分業務都在伺服器端實現，不能實現複雜的業務
總結：
CS架構---socket協議用於描述IP和埠號，應用程式通過套接字向網路傳送請求和應答。
BS架構---http協議，用於向web伺服器傳輸超文字到本地瀏覽器
目前cs和bs架構一般結合使用，例子：空間、郵箱、QQ等
兩大主流架構相同點
三部分
1. 客戶端
不管是瀏覽器還是自主研發的應用程式，都擔負客戶端的工作。負責與使用者的互動(輸入)和資料的展示(輸出)
2. 伺服器
接收客戶端的資訊(輸入)，分析處理後把處理後的響應結果返回給客戶端。負責處理業務邏輯。
3. 資料庫
負責資料的儲存和查詢，還可以通過儲存過程來處理業務邏輯
二、動態網頁和靜態網頁
1. 靜態網頁：所謂靜態網頁就是說網頁檔案中沒有程式，只有HTML程式碼，一般以html或htm為字尾名的網頁。
靜態網站內容不會在製作完成後發生變化，每次更改網站上面的內容都要人工修改程式碼，然後再上傳到伺服器上，在不更改的情況下任何人訪問都顯示的一樣的內容。
例子：大多數公司的官網首頁
優點：
1、安全，理論上沒有攻擊漏洞
2、沒有資料庫訪問，減少伺服器負荷，速度快
3、易於搜尋引擎收錄
缺點：
1、網站更新需要修改程式碼
2、缺少互動功能，動態效果差
3、網站設計按頁計費
2. 動態網頁：所謂動態網頁，就是說該網頁檔案不僅具有HTML標記，以asp、jsp、php、cgi等形式為字尾，並且在動態網頁網址中有一個標誌性的符號——“？”而且含有程式程式碼，用資料庫連線，
動態網頁能根據不同的時間，不同的來訪者顯示不同的內容，動態網站更新方便，一般在後臺直接更新的，並不需要人工手動修改程式碼。
例子：淘寶，京東
優點：
1、網站更新不需要修改程式碼
2、更新容易，可擴充套件升級，與資料庫連線，維護方便
3、動態效果強，可與使用者進行動態互動
缺點：
1、互動性強，存在的攻擊漏洞多
2、頁面資訊需要從資料庫讀取，速度慢
3、對搜尋引擎不友好，不便於搜尋
三、瀏覽器內部結構
1、5款主流的瀏覽器
IE、Firefox、Safari、Chrome、Opera 等
2、瀏覽器的主要功能
通過過從伺服器請求，並顯示在瀏覽器視窗，以提供您選擇的Web資源。
資源通常是一個HTML文件，也可能是一個PDF文件、圖片或者其它型別。
資源的位置是由使用者使用URI（統一資源識別符號）指定的。
3、瀏覽器的內部組成
使用者介面：
這包括位址列，後退/前進按鈕，書籤選單等，除主視窗外，在此可以看到所請求的頁面瀏覽器中顯示的每一個部分。提供與使用者互動的介面
瀏覽器引擎：
也被稱為瀏覽器核心、渲染引擎，主要負責解析HTML和CSS，並在螢幕上顯示的解析內容。取得頁面內容、整理資訊（應用CSS）、計算頁面的顯示方式，然後會輸出到顯示器或者印表機；
渲染引擎：（瀏覽器）
負責顯示所請求的內容。例如，如果請求的內容是HTML，它負責解析HTML和CSS，並在螢幕上顯示的解析內容。Firefox的使用Gecko - “自制的”Mozilla的渲染引擎；Safari和Chrome使用是Webkit。WebKit是一個開源渲染引擎，開始時為Linux平臺的引擎，是由蘋果公司修改後，以支援Mac和Windows。IE使用Trident
網路介面：
主要用於網路呼叫，例如：HTTP請求，其介面與平臺無關，併為所有的平臺提供底層實現。
JS直譯器：
也可以稱為JS核心，主要負責處理javascript指令碼程式，一般都會附帶在瀏覽器之中，例如chrome的V8引擎；
附加：JS的作用：表單驗證和動態效果，舉例，form標籤<input>，頁面鐘錶
UI後端：
用於繪製基本部件，如組合框和Windows控制元件。
資料儲存：
這是一個持久層，瀏覽器儲存在硬碟上的資料，儲存類似於cookie、storage等資料部分，HTML5新增了web database技術，一種完整的輕量級客戶端儲存技術。
四、瀏覽器工作原理
位址列輸入www.baidu.com回車後，瀏覽器發生了哪些操作？
1 、使用者訪問網頁，傳送一個 http 請求到網路伺服器。
2 、網路伺服器（應用伺服器）解析請求，傳送請求給資料庫伺服器。
3 、資料伺服器返回資料給網路伺服器，網路伺服器解析資料，並生成 html 檔案內容放入 http response 中，返回給瀏覽器。
4 、瀏覽器解析 http response 。
5 、瀏覽器建立 DOM 樹。(文件物件模型)
6 、瀏覽器下載 css ，並應用在 DOM 樹上，進行渲染。
7 、瀏覽器下載 js ，並解析執行 js，最後顯示頁面。
五、DNS解析過程：
DNS（Domain Name Server，域名伺服器）是進行域名(domain name)和與之相對應的IP地址 (IP address)轉換的伺服器。DNS中儲存了一張域名(domain name)和與之相對應的IP地址 (IP address)的表，以解析訊息的域名。 域名是Internet上某一臺計算機或計算機組的名稱，用於在資料傳輸時標識計算機的電子方位（有時也指地理位置）。域名是由一串用點分隔的名字組成的，通常包含組織名，而且始終包括兩到三個字母的字尾，以指明組織的型別或該域所在的國家或地區。
1、在瀏覽器中輸入www.baidu.com域名，作業系統會先檢查自己本地的hosts檔案是否有這個網址對映關係，如果有，就先呼叫這個IP地址對映，完成域名解析。
（hosts檔案位置：C:\Windows\System32\drivers\etc）
2、如果hosts裡沒有這個域名的對映，則將請求傳送給本地的域名伺服器，本地域名伺服器收到請求後,就先查詢本地的快取,如果有該紀錄項,則本地的域名伺服器就直接把查詢的結果返回。
3、如果本地的快取中沒有該紀錄,則本地域名伺服器就直接把請求發給根域名伺服器,然後根域名伺服器再返回給本地域名伺服器一個所查詢域(根的子域)的主域名伺服器的地址。
4、本地伺服器再向上一步返回的域名伺服器傳送請求,然後接受請求的伺服器查詢自己的快取,如果沒有該紀錄,則返回相關的下級的域名伺服器的地址。
5、重複第四步,直到找到正確的紀錄。
6、本地域名伺服器把返回的結果儲存到快取,以備下一次使用,同時還將結果返回給客戶機。
六、OSI七層模型
OSI七層模型 舉例：經理之間傳送信件
應用層 ：HTTP 經理之間寫好信件
表示層 ：資料表示 助理：修改錯字和格式
會話層 ：linux和windows通話 行政：找出目標地址
傳輸層 ：TCP UDP 程序連線 順豐快遞
網路層 ：定址 和 最短路徑 將信件按地址分類
鏈路層 ：介質訪問 將信件打包
物理層 ：二進位制的傳輸 搬運工人運輸
網路中各層把資料當作一個流來處理，每層都有自己的傳輸單位，物理層傳輸單位是位元流，而只有這一層是物理的資料傳輸，其他層都是邏輯的；鏈路層傳輸單位是幀；網路層傳輸單位是分組；傳輸層傳輸是段。源主機應用層資料往下層傳遞時每一層要增加相應的首部，稱為封裝；到達目的主機後資料往上層傳遞時需要再剝掉相應的首部，稱為拆封。
七、TCP/IP協議
TCP(Transmission Control Protocol) 傳輸控制協議
TCP是主機對主機層的傳輸控制協議，提供可靠的連線服務，採用三次握手確認建立一個連線:位碼即tcp標誌位,
有6種標示:
SYN(synchronous建立聯機) ACK(acknowledgement 確認) PSH(push傳送) FIN(finish結束)
RST(reset重置) URG(urgent緊急) Sequence number(順序號碼) Acknowledge number(確認號碼)
第一次握手：主機A傳送位碼為syn＝1,隨機產生seq number=1234567的資料包到伺服器，主機B由SYN=1知道，A要求建立聯機；
第二次握手：主機B收到請求後要確認聯機資訊，向A傳送ack number=(主機A的seq+1),syn=1,ack=1,隨機產生seq=7654321的包
第三次握手：主機A收到後檢查ack number是否正確，即第一次傳送的seq number+1,以及位碼ack是否為1，若正確，主機A會再發送ack number=(主機B的seq+1),ack=1，主機B收到後確認seq值與ack=1則連線建立成功。
完成三次握手，主機A與主機B開始傳送資料。
TCP/IP參考模型分為四個層次：應用層、傳輸層、網路互連層和主機到網路層。如圖所示。
八、渲染過程：
渲染引擎首先通過網路部分獲取request響應的文件內容，一般以8K為單位分塊進行。
解析HTML用以構建DOM樹結構 ->下載css樣式表-> 構建Render樹 -> Render樹的佈局 -> 繪製Render樹。
渲染引擎解釋HTML文件，首先將標籤轉換成DOM樹中的DOM node；接著，解釋對應的CSS樣式檔案資訊，而這些樣式資訊以及HTML中可見的指令（<b></b>etc）將被用來構建另外的Render樹。這棵樹主要由一些包含顏色和寬高等屬性組成的矩形組成，它們將依次按順序顯示在螢幕上。
待Renter樹構建完成，將執行佈局過程，確定每個節點在螢幕上對應的座標，及其覆蓋和迴流情況等，然後瀏覽器會遍歷Renter樹，並使用UI後端層繪製每個節點。這整個過程都是逐步進行的，HTML內容顯示一部分，將構建和佈局一部分Renter樹，就先顯示出來。也就是解釋完一部分內容就顯示一部分出來，而不是等著HTML內容解釋完成才進行構建Renter樹，同時，還有可能通過網路層進行下載其餘的內容。
webkit核心渲染過程
Gecko渲染過程
儘管WebKit和Gecko的使用策略稍有不同，流程基本上是相同的的。
Gecko稱視覺格式化的元素樹為一個“框架樹”。每個元素都是一個框架。Webkit的使用術語為“渲染樹”，並且它由“渲染物件”組成。Webkit的使用術語“佈局”來描述元素的放置，而Gecko稱之為“迴流”。“附件”是WebKit連線DOM節點和視覺資訊來建立渲染樹的術語。一個輕微的非語義的區別是，Gecko（Molla瀏覽器的排版引擎）有一個HTML和DOM樹之間額外的層。這就是所謂的“內容匯”，是一個DOM元素的工廠。
九、http協議
瀏覽器F12 檢視控制檯network
A、http協議：
http（超文字傳輸協議）是一個基於請求與響應模式的、無狀態的、應用層的協議，常基於 TCP 的連線方式，HTTP1.1 版本中給出一種持續連線的機制，絕大多數的 Web 開發，都是構建在 HTTP 協議之上的 Web 應用。
HTTP URL (URL 是一種特殊型別的 URI統一資源標示符，包含了用於查詢某個資源的足夠的資訊)的格式如下：
http 表示要通過 HTTP 協議來定位網路資源；
host 表示合法的 Internet 主機域名或者 IP 地址 ；
port 指定一個埠號，為空則使用預設埠 80；
abs_path 指定請求資源的 URI；如果 URL 中沒有給出 abs_path， 那麼當它作為請求 URI 時， 必須以“/”的形式給出， 通常這個工作瀏覽器自動幫我們完成。
eg:
輸入：www.guet.edu.cn
瀏覽器自動轉換成：http://www.guet.edu.cn/
B、http 請求
由三部分組成，分別是：請求行、訊息報頭、請求正文
get請求和post請求的區別
1、GET和POST是http協議中客戶端最常見的請求方式，
2、GET和POST的區別主要在於客戶端傳遞引數的時候。
GET把請求引數跟在URL後面，用問號隔開，如： /Web30/yy?login=yyyyyyy&password=123
POST把請求引數放到http請求協議的內容裡。
Get請求URL會直接顯示在瀏覽器位址列裡，沒有POST安全安全級別高。
3、 不同的瀏覽器會對URL的長度進行限制，所以GET不能傳太多的引數。 而post沒有此限制
4、 GET請求只能傳文字給伺服器，POST可以傳文字本和二進位制資料，如上 傳檔案。
C、http響應
HTTP 響應也是由三個部分組成，分別是：狀態行、訊息報頭、響應正文