關於JavaScript網絡方面的知識點JSON、JSONP

  1. 常見的HTTP狀態碼你瞭解多少?描述一下狀態碼的含義。
  1. 200 ,請求成功,一切正常,數據成功返回
  2. 301,永久性重定向,是指所請求的文檔在別的地方;文檔新的URI會在定位響應頭信息中給出。瀏覽器會自動連接到新的URI。
  3. 302,臨時重定向,該狀態碼錶示請求的資源已被分配了新的URI,希望用戶(本次)能使用新的URI訪問。
  4. 303,該狀態碼錶示由於請求對應的資源存在着另一個URI,應使用GET方法定向獲取請求的資源
  5. 403,Foribidden 服務器端理解本次請求,但是拒絕執行任務,沒有權限訪問
  6. 404,NOT Found 請求的資源,網頁無法找到,不存在
  7. 503,服務器端無法響應,服務器由於在維護或已經超載而無法響應

 

2,什麼情況下會遇到跨域,描述一下前端常見處理跨域的幾種方式。並封裝一個jsonp原理

答:瀏覽器最核心,最基本的安全功能是同源策略。限制了一個源中加載文本或者腳本與其他源中資源的交互方式,當瀏覽器執行一個腳本時會檢查是否同源,只有同源的腳本纔會執行,如果不同源即爲跨域。

  1. Jsonp:原理就是利用了script標籤不受同源策略的限制,在頁面中動態插入了script,script標籤的src屬性就是後端api接口的地址,並且以get的方式將前端回調處理函數名稱告訴後端,後端在響應請求時會將回調返還,並且將數據以參數的形式傳遞回去。
  2. CORS:(跨域資源共享)是一種允許當前域的資源被其他域的腳本請求訪問的機制。

當使用XMLHttpRequest發送請求時,瀏覽器如果發現違反了同源策略就會自動加上一個請求頭:origin,後端在接受到請求後確定響應後會在Response Headers中加入一個屬性:Access-Control-Allow-Origin,值就是發起請求的源地址,瀏覽器得到響應會進行判斷Access-Control-Allow-Origin的值是否和當前的地址相同,只有匹配成功後才進行響應處理。

現代瀏覽器中和移動端都支持CORS,IE下需要8+

  1. 服務器跨域,服務器中轉代理

前端向本地服務器發送請求,本地服務器代替前端再向服務器接口發送請求進行服務器間通信,本地服務器是個中轉站的角色,再將響應的數據返回給前端。

 

3,Web前端應該從哪些方面來優化網站性能

(1)減少頁面體積,提升網絡加載

靜態資源壓縮合並,(JS/css代碼壓縮合並,雪碧圖)

靜態資源緩存

使用CDN加載資源更快

  1. 優化頁面渲染

css放在前面,js放後面

懶加載

減少dom操作

 

  1. 瀏覽器端存儲有哪些,並描述他們的區別。

cookie  webStorage(localStorage sessionStorage

大小,過期時間,是否會隨着http請求發送,

 

 

 

  1. 說說get和post請求

GET請求會被瀏覽器主動cache,而POST不會,除非手動設置。

GET請求只能進行url編碼,而POST支持多種編碼方式。

GET請求參數會被完整保留在瀏覽器歷史記錄裏,而POST中的參數不會被保留。

GET請求在URL中傳送的參數是有長度限制的,而POST沒有。

對參數的數據類型,GET只接受ASCII字符,而POST沒有限制。

GET比POST更不安全,因爲參數直接暴露在URL上,所以不能用來傳遞敏感信息。

GET參數通過URL傳遞,POST放在Request body中。

GET產生一個TCP數據包;POST產生兩個TCP數據包。(對於GET方式的請求,瀏覽器會把http header和data一併發送出去,服務器響應200(返回數據);而對於POST,瀏覽器先發送header,服務器響應100 continue,瀏覽器再發送data,服務器響應200 ok(返回數據))

 

 

 

6, 一個頁面從輸入 URL 到頁面加載完的過程中都發生了什麼事情?

加載過程:

瀏覽器根據 DNS 服務器解析得到域名的 IP 地址

向這個 IP 的機器發送 HTTP 請求

服務器收到、處理並返回 HTTP

請求瀏覽器得到返回內容

渲染過程:

根據 HTML 結構生成 DOM 樹

根據 CSS 生成 CSSOM

將 DOM 和 CSSOM 整合形成 RenderTree

根據 RenderTree 開始渲染和展示

遇到<script>時,會執行並阻塞渲染

 

 

7,實現你知道的數組去重方法(最少三種)

8,TCP三次握手與四次揮手?

A對B說:我的序號是x,我要向你請求連接;(第一次握手,發送SYN包,然後進入SYN-SEND狀態)

B聽到之後對A說:我的序號是y,期待你下一句序號是x+1的話(意思就是收到了序號爲x的話,即ack=x+1),同意建立連接。(第二次握手,發送ACK-SYN包,然後進入SYN-RCVD狀態)

A聽到B說同意建立連接之後,對B說:與確認你同意與我連接(ack=y+1,ACK=1,seq=x+1)。(第三次握手,A已進入ESTABLISHED狀態)

B聽到A的確認之後,也進入ESTABLISHED狀態。

描述四次揮手就是:

1.A與B交談結束之後,A要結束此次會話,對B說:我要關閉連接了(seq=u,FIN=1)。(第一次揮手,A進入FIN-WAIT-1)

2.B收到A的消息後說:確認,你要關閉連接了。(seq=v,ack=u+1,ACK=1)(第二次揮手,B進入CLOSE-WAIT)

3.A收到B的確認後,等了一段時間,因爲B可能還有話要對他說。(此時A進入FIN-WAIT-2)

4.B說完了他要說的話(只是可能還有話說)之後,對A說,我要關閉連接了。(seq=w, ack=u+1,FIN=1,ACK=1)(第三次揮手)
5.A收到B要結束連接的消息後說:已收到你要關閉連接的消息。(seq=u+1,ack=w+1,ACK=1)(第四次揮手,然後A進入CLOSED)6.B收到A的確認後,也進入

 

  1. TCP與UDP的區別

TCP傳輸控制協議

UDP用戶數據報協議

1、TCP面向連接(如打電話要先撥號建立連接);UDP是無連接的,即發送數據之前不需要建立連接

2、TCP提供可靠的服務。也就是說,通過TCP連接傳送的數據,無差錯,不丟失,不重複,且按序到達;UDP盡最大努力交付,即不保證可靠交付

3、TCP面向字節流,實際上是TCP把數據看成一連串無結構的字節流;UDP是面向報文的

UDP沒有擁塞控制,因此網絡出現擁塞不會使源主機的發送速率降低(對實時應用很有用,如IP電話,實時視頻會議等)
4、每一條TCP連接只能是點到點的;UDP支持一對一,一對多,多對一和多對多的交互通信

5、TCP首部開銷20字節;UDP的首部開銷小,只有8個字節

6、TCP的邏輯通信信道是全雙工的可靠信道,UDP則是不可靠信道

 

  1. http是什麼

HTTP是hypertext transfer protocol(超文本傳輸協議)的簡寫,它是TCP/IP協議的一個應用層協議,用於定義WEB瀏覽器與WEB服務器之間交換數據的過程。客戶端連上web服務器後,若想獲得web服務器中的某個web資源,需遵守一定的通訊格式,HTTP協議用於定義客戶端與web服務器通迅的格式。

 

  1. 實現元素的水平居中方式

 

13,http與https的區別

爲了數據傳輸的安全,HTTPS在HTTP的基礎上加入了SSL協議,SSL依靠證書來驗證服務器的身份,併爲瀏覽器和服務器之間的通信加密。

http是超文本傳輸協議,信息是明文傳輸,https則是具有安全性的ssl加密傳輸協議。

http的連接很簡單,是無狀態的;HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網絡協議,比http協議安全。

 

14,重排(迴流)和重繪是什麼?什麼情況下會觸發重排和重繪。

瀏覽器會把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合併就產生了Render Tree。有了RenderTree,我們就知道了所有節點的樣式,然後計算他們在頁面上的大小和位置,最後把節點繪製到頁面上。

迴流:當Render Tree中部分或全部元素的尺寸、結構、或某些屬性發生改變時,瀏覽器重新渲染部分或全部文檔的過程稱爲迴流。

頁面首次渲染

瀏覽器窗口大小發生改變

元素尺寸或位置發生改變

元素內容變化(文字數量或圖片大小等等)

元素字體大小變化

添加或者刪除可見的DOM元素

當頁面中元素樣式的改變並不影響它在文檔流中的位置時(例如:color、background-color、visibility等),瀏覽器會將新樣式賦予給元素並重新繪製它,這個過程稱爲重繪。

避免頻繁的樣式操作,最好一次性重寫style,或者一次性更改class,避免頻繁操作dom,對具有複雜動畫的元素使用絕對定位,使它脫離文檔流,否則會引起父元素及後續元素頻繁迴流。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章