從URL輸入到頁面展示

劃重點

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

1、URL

一、現象：

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

二、url是什麼

它是統一資源定位符（Uniform Resource Locator），用於定位互聯網上的資源。

即尋找互聯網上的資源，如圖片、文件或者css文件等，須要經過互聯網的一個東西，則叫url

三、url由什麼組成

協議、端口號、域名，其餘相關信息

四、常見的協議

http、https、ftp、file協議
如：http://wangxiaoqin.com/blog 幫你找到網絡上的某個資源。明文傳輸，即傳輸過程當中使用路由器攔截，如用戶名密碼都能被看到

https://10.245.23.456:3000/users 通過一個加密後的協議， 至關於加了一層隧道，沒法破解，用戶名和密碼都不會被看到，是一個安全的協議

file:///users/hunger/workspace/a.html 從本地打開至瀏覽器，用於定位你本地電腦上的文件

//wangxiaoqin.com/static/imgs/a.png 當前文件的url與當前頁面的協議保持一致

---

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

對於 http://wnagxiaoqin.com的URL，瀏覽器實際上不知道wangxiaoqin.com究竟是什麼東西，須要查找wangxiaoqin.com網站所在的服務器的IP地址，才能知道找到目標。
即經過一種方式，將wangxiaoqin.com解析成wangxiaoqin.com所對應的IP。

一、域名的做用最後也是要找到IP，爲什麼不直接使用IP？

平時用的網站，IP對應的均爲數字，或者一個網站對應衆多IP地址，而域名則具備語義化的做用，好識別

二、域名是什麼

對於http://wangxiaoqin.com.com:8080/blog，wangxiaoqin.com就是域名（注：：8080能夠省略）
如，www.baidu.com(加粗的爲域名）

三、IP地址是什麼

每一個處於互聯網的設備都有IP地址，刑如：192.168.0.1 ，沒有IP地址別人就找不到你

局域網IP和公網IP是有差異的，如公司使用同一個路由器，鏈接同一WiFi，處於同一局域網，IP地址相應的就是局域網的IP地址。直接經過這個IP地址，訪問到這個局域網其餘機器，外界的其餘人則找不到。

實踐點：調試手機：如作一個手機頁面的開發項目，在PC端搭了一個服務器測試是沒問題，手機上的測試：手機和電腦鏈接同一個WiFi，手機瀏覽器經過電腦的ip地址去訪問電腦上的服務器

公網IP須要申請

127.0.0.1表明本機的IP

四、如何把一個域名解析成一個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是多少

五、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地址發送請求

---

3、服務器處理（瀏覽器能夠向IP地址發送請求）

一、服務器是什麼

服務器是一臺安裝系統的機器，就是一臺電腦。

二、常見的系統

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

三、機器處理請求

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

四、web服務器

（1）常見的web服務器
Apache、Nginx、IIS、Lighttpd

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

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

凡是經過http方式獲取的網站，都是經過web服務器作一個管控。即便在本地搭建網站也是須要搭建web服務器。

web服務器處理完請求以後交至網站（如wagxiaoqin.com），運行代碼文件，後臺雲煙執行。

---

4、網站處理流程

一、後臺語言

ruby、nodejs、python

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

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

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

---

5、瀏覽器處理

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

即第一次獲取html時，瀏覽器會從新把html裏的連接和相關資源再請求一次，審查元素裏有衆多requests

---

6、繪製網頁

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