1. 程式人生 > >web測試基礎知識(一)web基礎

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參考模型分為四個層次:應用層、傳輸層、網路互連層和主機到網路層。如圖所示。

  在TCP/IP參考模型中,去掉了OSI參考模型中的會話層和表示層(這兩層的功能被合併到應用層實現)。同時將OSI參考模型中的資料鏈路層和物理層合併為主機到網路層。

八、渲染過程:

渲染引擎首先通過網路部分獲取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和Geck​​o的使用策略稍有不同,流程基本上是相同的的。

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 響應也是由三個部分組成,分別是:狀態行、訊息報頭、響應正文