- 常見的HTTP狀態碼你瞭解多少?描述一下狀態碼的含義。
- 200 ,請求成功,一切正常,數據成功返回
- 301,永久性重定向,是指所請求的文檔在別的地方;文檔新的URI會在定位響應頭信息中給出。瀏覽器會自動連接到新的URI。
- 302,臨時重定向,該狀態碼錶示請求的資源已被分配了新的URI,希望用戶(本次)能使用新的URI訪問。
- 303,該狀態碼錶示由於請求對應的資源存在着另一個URI,應使用GET方法定向獲取請求的資源
- 403,Foribidden 服務器端理解本次請求,但是拒絕執行任務,沒有權限訪問
- 404,NOT Found 請求的資源,網頁無法找到,不存在
- 503,服務器端無法響應,服務器由於在維護或已經超載而無法響應
2,什麼情況下會遇到跨域,描述一下前端常見處理跨域的幾種方式。並封裝一個jsonp原理
答:瀏覽器最核心,最基本的安全功能是同源策略。限制了一個源中加載文本或者腳本與其他源中資源的交互方式,當瀏覽器執行一個腳本時會檢查是否同源,只有同源的腳本纔會執行,如果不同源即爲跨域。
- Jsonp:原理就是利用了script標籤不受同源策略的限制,在頁面中動態插入了script,script標籤的src屬性就是後端api接口的地址,並且以get的方式將前端回調處理函數名稱告訴後端,後端在響應請求時會將回調返還,並且將數據以參數的形式傳遞回去。
- CORS:(跨域資源共享)是一種允許當前域的資源被其他域的腳本請求訪問的機制。
當使用XMLHttpRequest發送請求時,瀏覽器如果發現違反了同源策略就會自動加上一個請求頭:origin,後端在接受到請求後確定響應後會在Response Headers中加入一個屬性:Access-Control-Allow-Origin,值就是發起請求的源地址,瀏覽器得到響應會進行判斷Access-Control-Allow-Origin的值是否和當前的地址相同,只有匹配成功後才進行響應處理。
現代瀏覽器中和移動端都支持CORS,IE下需要8+
- 服務器跨域,服務器中轉代理
前端向本地服務器發送請求,本地服務器代替前端再向服務器接口發送請求進行服務器間通信,本地服務器是個中轉站的角色,再將響應的數據返回給前端。
3,Web前端應該從哪些方面來優化網站性能
(1)減少頁面體積,提升網絡加載
靜態資源壓縮合並,(JS/css代碼壓縮合並,雪碧圖)
靜態資源緩存
使用CDN加載資源更快
- 優化頁面渲染
css放在前面,js放後面
懶加載
減少dom操作
- 瀏覽器端存儲有哪些,並描述他們的區別。
cookie webStorage(localStorage sessionStorage)
大小,過期時間,是否會隨着http請求發送,
- 說說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的確認後,也進入
- 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則是不可靠信道
- http是什麼
HTTP是hypertext transfer protocol(超文本傳輸協議)的簡寫,它是TCP/IP協議的一個應用層協議,用於定義WEB瀏覽器與WEB服務器之間交換數據的過程。客戶端連上web服務器後,若想獲得web服務器中的某個web資源,需遵守一定的通訊格式,HTTP協議用於定義客戶端與web服務器通迅的格式。
- 實現元素的水平居中方式
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,對具有複雜動畫的元素使用絕對定位,使它脫離文檔流,否則會引起父元素及後續元素頻繁迴流。