客戶(hù)端和瀏覽器端交互模型

如何做一個(gè)網(wǎng)站?
1、買(mǎi)一臺(tái)服務(wù)器,服務(wù)器臉上網(wǎng)絡(luò)之后,會(huì)存在一個(gè)外網(wǎng)的IP地址,我們把html+css上傳到服務(wù)器
2、買(mǎi)一個(gè)域名
3、進(jìn)行DNS解析(域名解析)
   www.zhang.cn   220.114.23.45(服務(wù)器外網(wǎng)ip地址) 80(服務(wù)器端口號(hào))

當(dāng)用戶(hù)在自己的瀏覽器中輸入一個(gè)網(wǎng)址,到最終看到頁(yè)面和內(nèi)容,發(fā)生了哪些事情?

服務(wù)器的端口號(hào):(0~65535)
  我們的一臺(tái)服務(wù)器上可以發(fā)布很多項(xiàng)目,而每個(gè)項(xiàng)目都有一個(gè)自己對(duì)應(yīng)的房間或者區(qū)域,服務(wù)器使用端口號(hào)
使用端口號(hào)來(lái)區(qū)分具體是那個(gè)項(xiàng)目
   一般都把自己的項(xiàng)目發(fā)布到80/443這兩個(gè)項(xiàng)目下


1、通過(guò)域名到dns服務(wù)器上找到對(duì)應(yīng)的服務(wù)器的外網(wǎng)ip和對(duì)應(yīng)的端口號(hào)
2、dns服務(wù)器找到對(duì)應(yīng)的服務(wù)器和房間號(hào)
3、在房間中把index.html文件的源代碼返回給客戶(hù)端
4、客戶(hù)端解析源代碼


引擎:
每一個(gè)瀏覽器都有自己的引擎,谷歌瀏覽器是v8引擎
火狐瀏覽器是Gecko引擎
ie瀏覽器是Trident引擎

w3c
是一個(gè)無(wú)盈利的一個(gè)組織(制定咱們開(kāi)發(fā)的規(guī)范,HTML HTML5 CSS CSS3)
谷歌是 -webkit-xxx:xxx


谷歌瀏覽器控制臺(tái)NetWork這一項(xiàng),可以看到客戶(hù)端向服務(wù)器端所有的請(qǐng)求以及請(qǐng)求的狀態(tài)信息等


通過(guò)network中觀看,我們發(fā)現(xiàn)當(dāng)我們第一次把html源代碼請(qǐng)求回來(lái)的時(shí)候,瀏覽器開(kāi)始按照自己的引擎渲染,在渲染的過(guò)程中我們
還會(huì)出現(xiàn)從新向服務(wù)器還會(huì)出現(xiàn)從新向服務(wù)器請(qǐng)求css/img/js每一次的請(qǐng)求步驟和HTML一模一樣,如果請(qǐng)求的資源次數(shù)過(guò)多,頁(yè)面打開(kāi)
的速度和渲染速度就會(huì)變慢,所以我們頁(yè)面優(yōu)化的方法中,首先要做的就是減少http請(qǐng)求次數(shù)

1、css合并一個(gè)(內(nèi)嵌式)
2、js合并成一個(gè) 或者采用內(nèi)嵌式
3、圖片合并(雪碧圖技術(shù))或者圖片延遲加載 (加快第一次打開(kāi)的速度)
4、Ajax請(qǐng)求和資源文件請(qǐng)求的原理是一樣的


URL

http://v.qq.com:80/index.html?name=zhangxiaohuan&age=18#a

http:傳輸協(xié)議
v.qq.com域名
80:端口號(hào)
index.html請(qǐng)求資源的文件名
?name=zhangxiaohuan&age=18 URL問(wèn)號(hào)傳參
#a錨點(diǎn)定位

傳輸協(xié)議:
 http:超文本傳輸協(xié)議,除了傳輸文本還可以傳輸其它的東西,例如:xml
 https:更加安全的http
 ftp:文件傳輸協(xié)議(應(yīng)用于把項(xiàng)目文件傳遞到服務(wù)器上)

在不指定端口的情況下,每一種協(xié)議會(huì)有一個(gè)默認(rèn)的端口號(hào)
 http默認(rèn)會(huì)找服務(wù)器的80端口
 https默認(rèn)會(huì)找443端口
 ftp默認(rèn)會(huì)找21端口 


客戶(hù)端:發(fā)送請(qǐng)求,接收內(nèi)容解析
服務(wù)器:創(chuàng)建服務(wù),監(jiān)聽(tīng)端口,在當(dāng)前服務(wù)器中接收客戶(hù)端請(qǐng)求的內(nèi)容,然后把對(duì)應(yīng)的數(shù)據(jù)或者內(nèi)容返回給客戶(hù)端
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容