前端面試題-瀏覽器/服務端/網絡

時間 2019-12-13

標籤端面試題瀏覽器服務網絡欄目瀏覽器简体版

原文原文鏈接

同源策略是什麼？

javascript跨域通訊

同源：兩個文檔同源需知足javascript

協議相同
域名相同
端口相同

跨域通訊：js進行DOM操做、通訊時若是目標與當前窗口不知足同源條件，瀏覽器爲了安全會阻止跨域操做。跨域通訊一般有如下方法css

若是是log之類的簡單單項通訊，新建<img>,<script>,<link>,<iframe>元素，經過src，href屬性設置爲目標url。實現跨域請求
若是請求json數據，使用<script>進行jsonp請求
現代瀏覽器中多窗口通訊使用HTML5規範的targetWindow.postMessage(data, origin);其中data是須要發送的對象，origin是目標窗口的origin。window.addEventListener('message', handler, false);handler的event.data是postMessage發送來的數據，event.origin是發送窗口的origin，event.source是發送消息的窗口引用
內部服務器代理請求跨域url，而後返回數據
跨域請求數據，現代瀏覽器可以使用HTML5規範的CORS功能，只要目標服務器返回HTTP頭部Access-Control-Allow-Origin: *便可像普通ajax同樣訪問跨域資源

所謂的跨域問題是因爲瀏覽器的同源策略限制的，當協議域名端口號不一樣即爲跨域，對於協議和端口來講，前端不能解決。解決跨域的幾種方式：html

JSONP 跨域：

這種方式跨域是經過script標籤引入js文件，這個js文件又會返回一個js函數調用，也就是請求後經過callback的方式回傳結果優勢：
1.不受同源策略的限制
2.兼容性更好
3.支持老版本瀏覽器
缺點：只支持get請求

CORS 跨域

其原理是使用自定義的http頭部請求，讓瀏覽器與服務器之間進行溝通，從而決定請求或響應是否成功
優勢：
1.支持全部類型的http請求
2.比jsonp有更好的錯誤處理機制
3.被大多數瀏覽器所支持

h5的postMessage方法

window.postMessage(message,targetOrigin) 方法是html5新引進的特性，可使用它來向其它的window對象發送消息，不管這個window對象是屬於同源或不一樣源，目前IE8+、FireFox、Chrome、Opera等瀏覽器都已經支持window.postMessage方法。這種方法不能和服務端交換數據，只能在兩個窗口（iframe）之間交換數據

前端面試查漏補缺--(三) 跨域及常看法決辦法前端

get/post區別

表單的method屬性設置post時發送的是post請求，其他都是get請求
get請求經過url地址發送請求參數，參數能夠直接在地址欄中顯示，安全性較差；post是經過請求體發送請求參數，參數不能直接顯示，相對安全
get請求URL地址有長度限制，根據瀏覽器的不一樣，限制字節長度不一樣，post請求沒有長度限制

補充get和post請求在緩存方面的區別

get請求相似於查找的過程，用戶獲取數據，能夠不用每次都與數據庫鏈接，因此可使用緩存。
post不一樣，post作的通常是修改和刪除的工做，因此必須與數據庫交互，因此不能使用緩存。所以get請求適合於請求緩存。

http/https區別

https協議須要到ca申請證書，通常免費證書較少，於是須要必定費用。
http是超文本傳輸協議，信息是明文傳輸，https則是具備安全性的ssl加密傳輸協議。
http和https使用的是徹底不一樣的鏈接方式，用的端口也不同，前者是80，後者是443。
http的鏈接很簡單，是無狀態的；HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網絡協議，比http協議安全

你瞭解的http狀態碼

1** 信息，服務器收到請求，須要請求者繼續執行操做(101，升級爲websocket協議)
2** 成功，操做被成功接收並處理(206,部份內容，分段傳輸)
3** 重定向，須要進一步操做以完成請求(301,302重定向；304命中緩存)
4** 客戶端錯誤，請求包含語法錯誤或沒法完成請求(401,要求身份驗證；403，服務器理解客服端需求，可是禁止訪問)
5** 服務器錯誤，服務器在處理請求的過程當中發生了錯誤

應用程序存儲和離線web應用

HTML5新增應用程序緩存，容許web應用將應用程序自身保存到用戶瀏覽器中，用戶離線狀態也能訪問。 1.爲html元素設置manifest屬性:<html manifest="myapp.appcache">，其中後綴名只是一個約定，真正識別方式是經過text/cache-manifest做爲MIME類型。因此須要配置服務器保證設置正確 2.manifest文件首行爲CACHE MANIFEST，其他就是要緩存的URL列表，每一個一行，相對路徑都相對於manifest文件的url。註釋以#開頭 3.url分爲三種類型：CACHE:爲默認類型。NETWORK：表示資源從不緩存。 FALLBACK:每行包含兩個url，第二個URL是指須要加載和存儲在緩存中的資源，第一個URL是一個前綴。任何匹配該前綴的URL都不會緩存，若是從網絡中載入這樣的URL失敗的話，就會用第二個URL指定的緩存資源來替代。如下是一個文件例子：html5

CACHE MANIFEST

CACHE:
myapp.html
myapp.css
myapp.js

FALLBACK:
videos/ offline_help.html

NETWORK:
cgi/

客戶端存儲localStorage和sessionStorage

localStorage有效期爲永久，sessionStorage有效期爲頂層窗口關閉前
同源文檔能夠讀取並修改localStorage數據，sessionStorage只容許同一個窗口下的文檔訪問，如經過iframe引入的同源文檔。
Storage對象一般被當作普通javascript對象使用：經過設置屬性來存取字符串值，也能夠經過setItem(key, value)設置，getItem(key)讀取，removeItem(key)刪除，clear()刪除全部數據，length表示已存儲的數據項數目，key(index)返回對應索引的key

localStorage.setItem('x', 1); // storge x->1
localStorage.getItem('x); // return value of x

// 枚舉全部存儲的鍵值對
for (var i = 0, len = localStorage.length; i < len; ++i ) {
    var name = localStorage.key(i);
    var value = localStorage.getItem(name);
}

localStorage.removeItem('x'); // remove x
localStorage.clear();  // remove all data

cookie及其操做

cookie是web瀏覽器存儲的少許數據，最先設計爲服務器端使用，做爲HTTP協議的擴展實現。cookie數據會自動在瀏覽器和服務器之間傳輸。
經過讀寫cookie檢測是否支持
cookie屬性有名，值，max-age，path, domain，secure；
cookie默認有效期爲瀏覽器會話，一旦用戶關閉瀏覽器，數據就丟失，經過設置max-age=seconds屬性告訴瀏覽器- cookie有效期
cookie做用域經過文檔源和文檔路徑來肯定，經過path和domain進行配置，web頁面同目錄或子目錄文檔均可訪問
經過cookie保存數據的方法爲：爲document.cookie設置一個符合目標的字符串以下
讀取document.cookie得到'; '分隔的字符串，key=value,解析獲得結果

document.cookie = 'name=qiu; max-age=9999; path=/; domain=domain; secure';

document.cookie = 'name=aaa; path=/; domain=domain; secure';
// 要改變cookie的值，須要使用相同的名字、路徑和域，新的值
// 來設置cookie，一樣的方法能夠用來改變有效期

// 設置max-age爲0能夠刪除指定cookie

//讀取cookie，訪問document.cookie返回鍵值對組成的字符串，
//不一樣鍵值對之間用'; '分隔。經過解析得到須要的值