1??、瀏覽器工作原理

1.1 瀏覽器的組成

人機(jī)交互部分(UI)
網(wǎng)絡(luò)請(qǐng)求部分(Socket)
JavaScript引擎部分(解析執(zhí)行JavaScript Chrome V8引擎)
渲染引擎部分(渲染HTML、CSS等)
數(shù)據(jù)存儲(chǔ)部分(Cookie、LocalStorage、SessionStorage)

1.1.2 瀏覽器訪問網(wǎng)站的過程

在瀏覽器地址欄中輸入網(wǎng)址
瀏覽器通過用戶在地址欄輸入的URL構(gòu)建HTTP請(qǐng)求報(bào)文
瀏覽器發(fā)起DNS解析請(qǐng)求將域名轉(zhuǎn)換為IP地址(找到對(duì)應(yīng)資源的服務(wù)器)
瀏覽器將請(qǐng)求報(bào)文發(fā)送給服務(wù)器
服務(wù)器接收請(qǐng)求報(bào)文并解析
服務(wù)器處理用戶請(qǐng)求并將處理結(jié)果封裝成HTTP響應(yīng)報(bào)文
服務(wù)器將HTTP響應(yīng)報(bào)文發(fā)送給瀏覽器
瀏覽器接收服務(wù)器響應(yīng)的HTTP報(bào)文并解析
瀏覽器解析HTML頁(yè)面并展示在解析HTML頁(yè)面時(shí)遇到新的資源需要再次發(fā)起請(qǐng)求
最終瀏覽器展示出頁(yè)面

1.2 主流瀏覽器渲染引擎

1.2.1 雙核瀏覽器

1.2.1.1 什么是雙核瀏覽器？

有兩個(gè)不同的渲染引擎內(nèi)核(IE引擎||Chrome引擎)

1.2.1.2 為什么要雙核瀏覽器？

為了解決某些企業(yè)內(nèi)部的OA系統(tǒng) 這些系統(tǒng)有可能只能在IE內(nèi)核中打開其他內(nèi)核不能打開這樣的話雙核瀏覽器就可以切換內(nèi)核但有時(shí)可能會(huì)去訪問外網(wǎng) 這時(shí)就可以繼續(xù)切換內(nèi)核

1.2.2 主流渲染內(nèi)核

Chrome瀏覽器 => Blink引擎(webkit引擎的分支)
Safari瀏覽器 => webkit引擎
FireFox瀏覽器 => Gecko引擎
Opera瀏覽器 => Blink引擎(早期使用Presto引擎)
Internet Explorer瀏覽器 => Trident引擎
Microsoft Edge => EdgeHTML引擎(Trident引擎的分支)

1.2.3 瀏覽器渲染引擎的工作原理

解析HTML構(gòu)建DOM樹(Document Object Model 文檔對(duì)象模型)
構(gòu)建渲染樹渲染樹并不等同于DOM樹像head標(biāo)簽link標(biāo)簽等或display:none這樣的元素就沒必要放在渲染樹中但是它們都會(huì)存在于DOM樹中
對(duì)渲染樹進(jìn)行布局、定位坐標(biāo)、大小、是否換行、確定position、overflow、z-index... 這個(gè)過程叫 layout或reflow
繪制渲染樹調(diào)用操作系統(tǒng)底層API進(jìn)行繪圖操作
瀏覽器渲染網(wǎng)站過程視頻 https://www.youtube.com/watch?v=ZTnIxIA5KGw

1.2.3.1 頁(yè)面加載優(yōu)化

需求: 點(diǎn)擊按鈕創(chuàng)建50個(gè)input 思考: 不要循環(huán)去創(chuàng)建至頁(yè)面因?yàn)闀?huì)產(chǎn)生回流(每次循環(huán)都會(huì)重新渲染一次頁(yè)面 Layout、reflow) 解決方案: 循環(huán)創(chuàng)建50個(gè)文本框至文檔片段中(document.createDocumentFragment()) 文檔片段MDN https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createDocumentFragment

2??、Web開發(fā)本質(zhì)

請(qǐng)求客戶端發(fā)起請(qǐng)求
處理服務(wù)器處理請(qǐng)求
響應(yīng) 服務(wù)器將處理的結(jié)果發(fā)送給客戶端
客戶端處理響應(yīng)
(瀏覽器: 解析服務(wù)器返回的數(shù)據(jù))
(IOS、Android: 解析服務(wù)器返回的數(shù)據(jù) 并且通過IOS或Android的UI技術(shù)實(shí)現(xiàn)界面的展示功能)

3??、開發(fā)全棧

3.1 PHP開發(fā)技術(shù)棧

LAMP

Linux
Apache
MySQL
PHP

3.2 Node.js 全棧開發(fā)技術(shù)棧

MEAN

MongoDB
Express
Angular
Node.js

4??、為什么要配置環(huán)境變量

為了讓某個(gè)應(yīng)用程序在任何路徑下通過命令行運(yùn)行成功

5??、Node.js 開發(fā)網(wǎng)站和傳統(tǒng)PHP等開發(fā)網(wǎng)站的區(qū)別

5.1 Node.js 開發(fā)網(wǎng)站

不需要Web容器因?yàn)镹ode.js 本身就是基于更底層的HTTP協(xié)議開始的本身就是一個(gè)HTTP服務(wù)器
node.exe 進(jìn)程監(jiān)聽8080(代碼中設(shè)置的端口號(hào))端口接收用戶請(qǐng)求根據(jù)不同請(qǐng)求做出對(duì)應(yīng)的處理最后將處理后的結(jié)果返回給瀏覽器