認(rèn)識網(wǎng)頁和網(wǎng)站
什么是網(wǎng)頁?
網(wǎng)頁的專業(yè)術(shù)語叫做 Web Page;
打開瀏覽器查看到的頁面，是網(wǎng)絡(luò)中的一“頁”;
網(wǎng)頁的內(nèi)容可以非常豐富:包括文字、鏈接、圖片、音樂、視頻等等
網(wǎng)站是什么呢?
- 網(wǎng)站是由多個網(wǎng)頁組成的; p通常一個網(wǎng)站由N個網(wǎng)頁組成(N >= 1);
網(wǎng)頁的顯示過程 – 用戶角度
1.用戶在瀏覽器輸入一個網(wǎng)站;
2.瀏覽器會找到對應(yīng)的服務(wù)器地址，請求靜態(tài)資源(可以存放在世界上任何一個地方);
3.服務(wù)器返回靜態(tài)資源給瀏覽器;
4.瀏覽器對靜態(tài)資源進(jìn)行解析和展示;
網(wǎng)頁的顯示過程 – 前端工程師
1.開發(fā)項目(HTML/CSS/JavaScript/Vue/React)
2.打包、部署項目到服務(wù)器里面
服務(wù)器是什么?
-
我們?nèi)粘Ｉ罱佑|到的基本都屬于****客戶端****、前端的內(nèi)容:
- 比如瀏覽器、微信、QQ、小程序;
-
我們知道自己的手機并不可能存放哪些多的數(shù)據(jù)和資源:
- 比如你用《網(wǎng)易云聽音樂》，音樂數(shù)據(jù)大部分都是存在“服務(wù)器”中的;
-
那么服務(wù)到底是什么呢?
服務(wù)器本質(zhì)上也是一臺類似于你電腦一樣的主機;
但是這個主機有幾個特點:
?? 二十四小時不關(guān)機的(穩(wěn)定運行); ?? 沒有顯示器的; ?? 一般裝的是Linux操作系統(tǒng)(比如centos);
公司大部分用的是****云服務(wù)器****(比如阿里云、騰訊云、華為云);
世界上第一個網(wǎng)頁
-
上世紀(jì)90年代，Berners-Lee上線了世界上第一個網(wǎng)站:
- 雖然目前我們會認(rèn)為這個網(wǎng)頁簡單到不值一提，但是在當(dāng)時它的發(fā)明是“天才之作”。
現(xiàn)代的網(wǎng)頁已經(jīng)非常復(fù)雜
網(wǎng)頁的組成
那么網(wǎng)頁是由什么開發(fā)出來的呢?
階段一:HTML元素;
階段二:HTML元素 + CSS樣式;
階段三:HTML元素 + CSS樣式 + JavaScript語言;
網(wǎng)頁的組成
網(wǎng)頁的組成
網(wǎng)頁源代碼的角度
網(wǎng)頁開發(fā)的角度
瀏覽器的作用
我們已經(jīng)明確知道了網(wǎng)頁的組成部分:HTML + CSS + JavaScript****。
那么這些看起來枯燥的代碼，是如何被渲染成多彩的網(wǎng)頁呢?
我們知道是通過瀏覽器來完成;
瀏覽器最核心的部分其實是 “瀏覽器****內(nèi)核****”;
瀏覽器的渲染引擎
瀏覽器最核心的部分是渲染引擎(Rendering Engine)，一般也稱為“****瀏覽器****內(nèi)核****”
負(fù)責(zé)解析網(wǎng)頁語法，并渲染(顯示)網(wǎng)頁 n 常見的瀏覽器有很多:
不同瀏覽器的****內(nèi)核
-
常見的瀏覽器內(nèi)核有
Trident ( 三叉戟):IE、360安全瀏覽器、搜狗高速瀏覽器、百度瀏覽器、UC瀏覽器; pGecko( 壁虎) :Mozilla Firefox;
Presto(急板樂曲)-> Blink (眨眼):Opera
Webkit :Safari、360極速瀏覽器、搜狗高速瀏覽器、移動端瀏覽器(Android、iOS) pWebkit -> Blink :Google Chrome
- 不同的瀏覽器內(nèi)核有不同的解析、渲染規(guī)則，所以同一網(wǎng)頁在不同內(nèi)核的瀏覽器中的渲染效果也可能不同。
