標籤：

從URL輸入到頁面展現

05-11

劃重點：

輸入一個url地址——對url中的域名進行解析——伺服器處理——網站處理——瀏覽器處理

一、URL

1、現象：

隨意在瀏覽器里輸入一個網址，比如baidu.com你會看到什麼？看到百度的搜索頁面

2、url是什麼

它是統一資源定位符（Uniform Resource Locator），用於定位互聯網上的資源。即尋找互聯網上的資源，如圖片、文件或者css文件等，需要通過互聯網的一個東西，則叫url

3、url由什麼組成

協議、埠號、域名，其他相關信息

4、常見的協議

http、https、ftp、file協議

如：

  • http://wangxiaoqin.com/blog幫你找到網路上的某個資源。明文傳輸，即傳輸過程中使用路由器攔截，如用戶名密碼都能被看到
  • https://10.245.23.456:3000/users經過一個加密後的協議， 相當於加了一層隧道，無法破解，用戶名和密碼都不會被看到，是一個安全的協議
  • file:///users/hunger/workspace/a.html從本地打開至瀏覽器，用於定位你本地電腦上的文件
  • //wangxiaoqin.com/static/當前文件的url與當前頁面的協議保持一致

二、對URL中的域名進行解析

對於wnagxiaoqin.com的URL，瀏覽器實際上不知道wangxiaoqin.com到底是什麼東西，需要查找wangxiaoqin.com網站所在的伺服器的IP地址，才能知道找到目標。

即通過一種方式，將wangxiaoqin.com解析成wangxiaoqin.com所對應的IP地址。

1、域名的作用最後也是要找到IP，為何不直接使用IP？

平時用的網站，IP對應的均為數字，或者一個網站對應眾多IP地址，而域名則具有語義化的作用，好識別。

2、域名是什麼

對於wangxiaoqin.com.com:8080/blog，wangxiaoqin.com就是域名（註： ：8080可以省略）。如www.baidu.com(加粗的為域名）

3、IP地址是什麼

每個處於互聯網的設備都有IP地址，形如：192.168.0.1 ，沒有IP地址，將無法找到你。

區域網IP和公網IP是有差別的，如公司使用同一個路由器，連接同一WiFi，處於同一區域網，IP地址相應的就是區域網的IP地址。直接通過這個IP地址，訪問到這個區域網其他機器，外界則找不到。

實踐點：如做一個手機頁面的開發項目，調試手機，在PC端搭建伺服器後測試項目是沒問題。在手機上如何測試？即手機和電腦連接同一個WiFi，手機瀏覽器通過電腦的ip地址去訪問電腦上的伺服器。

公網IP需要申請。

127.0.0.1代表本機的IP地址。

4、如何把一個域名解析成一個IP地址？

  • 瀏覽器緩存：通過輸入wangxiaoqin.com，之前找到過這個域名相對應的IP地址，將會緩存DNS記錄一段時間，即過往記錄，下次訪問直接訪問IP地址；
  • 系統緩存：若是第一次訪問網站，將會查找系統緩存，即從Hosts文件查找是否有該域名和對應的IP地址（通過soptlight搜索houstbuddy——/etc/hosts或develop找到hosts文件，即IP+緩存名

作用：開發一個網站，開發過程中，關於開發網站的html、css等文件資料均在本地，而我想要寫一個線上的域名，如wangxiaoqin.com。想要修改，去開啟一個伺服器去測試，不想找到遠程伺服器的東西，而是找到電腦中的文件。此時，我們可以在系統緩存中找到wangxiaoqin.com對應的IP地址，打開html文件，所有的請求資源如果是wangxiaoqin.com則將會自動轉向相對應的IP地址。

  • 路由器緩存，一般的路由器登錄之後也會緩存域名信息
  • ISP DNS緩存，比如到電信（你的服務商）的DNS 上查找緩存
  • 如果以上都沒有，開啟查找IP的過程：如訪問某個小國的新的域名，則向根域名伺服器查找域名對應的IP，比如我請求的是abc.com，那它就會向根域名伺服器.com這個域名伺服器去查找，把請求轉發到下一級，找到之後便會告訴你IP是多少。

5、dns連接上網問題

（1）dns是什麼

DNS（Domain Name System，域名系統），萬維網上作為域名和IP地址相互映射的一個分散式資料庫，能夠使用戶更方便的訪問互聯網，而不用去記住能夠被機器直接讀取的IP數串。

通過域名，最終得到該域名對應的IP地址的過程叫做域名解析（或主機名解析）。

（2）電腦突然上不了網

修改dns為8.8.8.8或者114.114.114.114即能上網

8.8.8.8 ， 即谷歌提供的一個dns伺服器。如打不開baidu.com是因為你中間的某個環節出問題，然後baidu.com對應的IP找不到，此時可將電腦中的dns伺服器直接改成谷歌的伺服器，那麼就會直接從谷歌的伺服器去找該域名下對應IP

114.114.114.114 ，權威提供dns的國內服務商

結論：從某個有記錄的伺服器去查找

（3）dns劫持是什麼

比如，黑客攻擊某個節點或某根域名伺服器（即攻擊這裡所管理的眾多IP地址），如baidu.com相對應的百度IP被侵入任意網站的IP，再打開baidu.com通過域名解析之後，可能通過ISP dns上查找到任意IP，會得到「真域名 假IP」的假網站，危害巨大

通過域名，在瀏覽器輸入url地址，得到IP地址 （經過一段複雜的IP定址的過程） 知道IP之後，瀏覽器可以向IP地址發送請求

三、伺服器處理（瀏覽器可以向IP地址發送請求）

1、伺服器是什麼

伺服器是一台安裝系統的機器，就是一台電腦。

2、常見的系統

如linux（無圖形界面）、windows sever2012（可以安裝一些服務端的軟體，有圖形界面）。

3、機器處理請求

如何知道wangxiaoqin.com是什麼？系統里安裝的處理請求（如wangxiaoqin.com）的軟體應用叫web server，用於接收網站發來的請求，並處理

4、web伺服器

（1）常見的web伺服器

Apache、Nginx、IIS、Lighttpd

（2）作用

web伺服器，用於接收用戶的Request交給網站相關代碼，或者接收請求反向代理到其他web伺服器。即管理的入口

白色區域為機器的系統

機器上安裝了Nginx的web伺服器，如訪問jscode.me或 jirengu.com或hungerworks.com（三個網站請求，網站地址和域名都不一樣，但都是在同一個伺服器里），通過域名解析得到了機器里的同一個IP地址：202.112.230.14，即打開這三個網站均能找到這台機器，請求被機器中的web伺服器——Nginx接管，通過配置文件將請求的網站匹配相應的文件夾代碼，運行返回效果。

凡是通過http方式獲取的網站，都是通過web伺服器做一個管控。即使在本地搭建網站也是需要搭建web伺服器。

web伺服器處理完請求之後交至網站（如wagxiaoqin.com），運行代碼文件，後台執行。

四、網站處理流程

1、後台語言

ruby、nodejs、python。。。等

2、MVC模式（模型（model）視圖（view）控制器（controller））

rails+ruby做範例

比如，瀏覽器訪問jirengu.com/users，交至/users這個網站後代碼運行，匹配路由，發現有/users之後，交給控制器（一個代碼文件），它會向模型（可看成文件）發送調用查找所有用戶請求，模型從資料庫中進行查找，資料庫返回之後，控制器獲取模型所提供user.all的介面數據，控制器獲取所有用戶數據，將數據添置到視圖（可看成模板）中生成一個html，發回瀏覽器，即能看到有所有用戶的html頁面。

前端對應則是視圖（htmlcss框架等）

五、瀏覽器處理

網站處理之後，該網站生成html頁面發回瀏覽器，html字元串被瀏覽器接收後被一句句讀取解析，當解析到link標籤後，如某個標籤對應的css地址，重新發送請求獲取css地址；當解析到script標籤後，向如src的地址向伺服器發送請求，獲取js並執行代碼；當解析到img標籤後發送請求獲取圖片資源

即第一次獲取html時，瀏覽器會重新把html里的鏈接和相關資源再請求一次，審查元素里有眾多requests。

六、繪製網頁

瀏覽器根據html和css計算得到渲染樹，繪製到屏幕。即瀏覽器根據html、css，它知道每個元素該怎樣去放置，假設頁面作為一幅畫，css控制畫的樣子，html控制畫的內容，瀏覽器畫（渲染），之後js將會被執行。

推薦閱讀：

TAG:URL | 頁面布局 | 搜索 |