瀏覽器的組成
- UI用戶界面
- 網(wǎng)絡(luò)請求部分
- JS引擎
- 渲染引擎(內(nèi)核)
- 數(shù)據(jù)儲(chǔ)存(cookie,localStorage,sessionStorage)
瀏覽器和服務(wù)器通信的過程
- 在瀏覽器地址欄中輸入域名
- 瀏覽器向DNS服務(wù)器發(fā)送請求,獲取域名對應(yīng)ip地址
- 服務(wù)期使用ip地址向服務(wù)器發(fā)送請求
- 服務(wù)器接收請求,處理請求
- 服務(wù)器生成相應(yīng)結(jié)果,返回給瀏覽器
- 瀏覽器接受到服務(wù)器的相應(yīng)(HTML)
- 瀏覽器解析html,渲染
瀏覽器的渲染過程
- 根據(jù)html源碼生成DOM樹
- 根據(jù)DOM樹和CSS規(guī)則組合生成渲染樹
- layout(布局)確定渲染樹中元素的位置,大小
- 瀏覽器根據(jù)渲染樹繪制頁面Painting
npm
- 安裝 :node安裝好,npm自己就安裝好了
- 檢測是否安裝好 , 執(zhí)行npm -v
安裝方式
- 全局安裝
當(dāng)需要將包作為全局命令來使用的時(shí)候,一般都會(huì)做全局安裝,將內(nèi)容裝到npm根目錄:%appdata%/npm C:\Users\Ryan\AppData\Roaming\npm
1.將包安裝到了這個(gè)目錄中的node_modules文件夾中
2.在目錄下創(chuàng)建一個(gè)全局命令
npm install 包名@版本號(hào) -g - 本地安裝
當(dāng)前項(xiàng)目需要用到的所有的資源,都使用本地安裝
安裝好的內(nèi)容就在當(dāng)前項(xiàng)目目錄中的node_modules中
npm init -y
npm install 包名@版本號(hào)
npm 常用命令
install:安裝包
uninstall:卸載包
version -v:查看版本
init:創(chuàng)建package.json文件
-S -D
本地安裝包的時(shí)候,可以有兩個(gè)選項(xiàng)
--save 縮寫 -S
當(dāng)安裝包的時(shí)候,使用的是--save或者-S的時(shí)候,安裝的包信息(名字和 版本)會(huì)被存儲(chǔ)到package.json文件的depende'ncies中,這個(gè)是線上會(huì)用到的資源包,都放在json文件的dependencies中
--save-dev縮寫-D
當(dāng)安裝包的時(shí)候,使用的是--save-dev或者-D的時(shí)候,安裝的包信息(名字和版本)會(huì)被儲(chǔ)存到package.json文件中的devDependencies中
這個(gè)是在開發(fā)階段會(huì)用到的資源包.都放在json文件的devDependencies中
將所依賴的包的信息保存到package.json中的目的:
提高代碼分享的效率
request和response對象
request: 所有請求相關(guān)的內(nèi)容,都封裝在這個(gè)對象中
request.url: url中除去協(xié)議域名端口號(hào)錨點(diǎn)之外的所有的信息
request.method: 請求的方式
request.httpVersion: http協(xié)議版本
request.headers:請求頭中的所有的內(nèi)容
response：提供好多用來響應(yīng)的api
response.write: 向?yàn)g覽器發(fā)送數(shù)據(jù)的，發(fā)送的數(shù)據(jù)可以是字符串也可以是Buffer，可以調(diào)用多次
response.end:向?yàn)g覽器發(fā)送數(shù)據(jù)并結(jié)束響應(yīng)過程的，發(fā)送的數(shù)據(jù)可以是字符串也可以是Buffer，只能調(diào)用一次，每次請求，必須保證調(diào)用，否則請求會(huì)掛起
response.setHeader：設(shè)置響應(yīng)頭的一次只能設(shè)置一條，可以調(diào)用多次
response.writeHead：設(shè)置響應(yīng)頭的，一次可以設(shè)置多條，還可以設(shè)置狀態(tài)碼和狀態(tài)信息，如果和setHeader一起用，那么setHeader必須在前面，內(nèi)容如果有沖突則以writeHead為準(zhǔn)，其他不沖突的就合并了
response.statusCode： 設(shè)置響應(yīng)狀態(tài)碼 如果用了writeHead設(shè)置，那么這個(gè)就沒有用了
response.statusMessage: 設(shè)置響應(yīng)狀態(tài)信息
