前端基礎——常考內容2

時間 2019-11-08

標籤前端基礎內容简体版

原文原文鏈接

1、同源策略

https://juejin.im/entry/59b8fb276fb9a00a42474a6fhtml

1.學習同源策略以前須要理解的概念

什麼是HTTP?前端

超文本傳輸協議，是一個基於請求與響應，無狀態的，應用層的協議，常基於TCP/IP協議傳輸數據，互聯網上應用最爲普遍的一種網絡協議,全部的WWW文件都必須遵照這個標準。設計HTTP的初衷是爲了提供一種發佈和接收HTML頁面的方法。node

域名級別nginx

域名可分爲不一樣級別，包括頂級域名、二級域名、三級域名等。es6

子域名：子域名，是頂級域名（一級域名或父域名）的下一級web

泛域名是指一個域名下的全部子域名都被解析到同一個IP地址上。正則表達式

2.什麼是同源策略？數據庫

同源策略/SOP（Same origin policy）是一種約定，由Netscape公司1995年引入瀏覽器，它是瀏覽器最核心也最基本的安全功能，若是缺乏了同源策略，瀏覽器很容易受到XSS、CSFR等攻擊。所謂同源是指"協議+域名+端口"三者相同，即使兩個不一樣的域名指向同一個ip地址，也非同源。編程

同源策略限制如下幾種行爲：json

1) Cookie、LocalStorage 和 IndexDB 沒法讀取 

2) DOM 和 Js對象沒法得到 

3) AJAX 請求不能發送

3.瀏覽器的同源策略-MDN

https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy

1）同源策略

同源策略限制了從同一個源加載的文檔或腳本如何與來自另外一個源的資源進行交互。這是一個用於隔離潛在惡意文件的重要安全機制。

它的存在能夠保護用戶隱私信息，防止身份僞造等(讀取Cookie)。（http://www.imooc.com/article/40074）

2）同源的定義

若是兩個頁面的協議，端口（若是有指定）和主機都相同，則兩個頁面具備相同的源。

3）IE例外

當涉及到同源策略時，Internet Explorer 有兩個主要的不一樣點

授信範圍（Trust Zones）：兩個相互之間高度互信的域名，如公司域名（corporate domains），不遵照同源策略的限制。
端口：IE 未將端口號加入到同源策略的組成部分之中，所以 http://company.com:81/index.html 和 http://company.com/index.html 屬於同源而且不受任何限制。

這些例外是非標準的，其它瀏覽器也未作出支持，但會助於開發基於window RT IE的應用程序。

4）源的更改

使用 document.domain 來容許子域安全訪問其父域時，您須要在父域和子域中設置 document.domain 爲相同的值。

2、跨域

https://juejin.im/entry/59b8fb276fb9a00a42474a6f

1.學習跨域以前相關概念理解

重定向：重定向(Redirect)就是經過各類方法將各類網絡請求從新定個方向轉到其它位置（如：網頁重定向、域名的重定向、路由選擇的變化也是對數據報文經由路徑的一種重定向）。瀏覽器URL的地址欄改變

轉發是瀏覽器只作了一次訪問請求。重定向是瀏覽器作了至少兩次的訪問請求；

原文連接：https://blog.csdn.net/xianyadong/article/details/81230808

轉發是服務器行爲，重定向是客戶端行爲。轉發耗時比重定向少。

轉發——>客戶瀏覽器發送HTTP請求——>web服務器接受請求——>調用內部一個方法在容器內部完成請求處理和轉發動做——>再將轉發跳轉到的那個網頁資源返回給客戶；轉發只能在同一個容器內完成轉發的時候瀏覽器地址是不會變的，在客戶瀏覽器裏只會顯示第一次進入的那個網址或者路徑，客戶看不到這個過程，只是獲得了想要的目標資源。轉發行爲瀏覽器只作了一次請求。（轉發只能跳轉一次）

重定向——>客戶瀏覽器發送HTTP請求——>web服務器接受請求後發送302狀態碼以及新的位置給客戶瀏覽器——>客戶瀏覽器發現是302響應，則自動再發送一個新的HTTP請求，請求指向新的地址（302：Found 臨時移動，但資源只是臨時被移動。即你訪問網址A，可是網址A由於服務器端的攔截器或者其餘後端代碼處理的緣由，會被重定向到網址B。）——>服務器根據此請求尋找資源發個客戶；再客戶瀏覽器中顯示的是重定向以後的路徑，客戶能夠看到地址的變化。重定向行爲瀏覽器作了至少兩次請求。（重定向能夠跳轉屢次）
————————————————

回調

調函數就是一個經過函數指針調用的函數。若是你把函數的指針（地址）做爲參數傳遞給另外一個函數，當這個指針被用來調用其所指向的函數時，咱們就說這是回調函數。回調函數不是由該函數的實現方直接調用，而是在特定的事件或條件發生時由另外的一方調用的，用於對該事件或條件進行響應。

回調是任何一個被以方法爲其第一個參數的其它方法的調用的方法。不少時候，回調是一個當某些事件發生時被調用的方法。

2.什麼是跨域？

https://juejin.im/entry/59b8fb276fb9a00a42474a6f

跨域是指一個域下的文檔或腳本試圖去請求另外一個域下的資源，這裏跨域是廣義的。

其實咱們一般所說的跨域是狹義的，是由瀏覽器同源策略限制的一類請求場景。

3.跨域解決方案

1）經過jsonp跨域

2）document.domain + iframe跨域

3）location.hash + iframe

4）window.name + iframe跨域

5）postMessage跨域

6）跨域資源共享（CORS）

7）nginx代理跨域

8）nodejs中間件代理跨域

9）WebSocket協議跨域

3、JSONP的原理，怎麼實現的說一下什麼是Promise，請求失敗調用什麼函數

1.JSON

（https://www.liaoxuefeng.com/wiki/1022910821149312/1023021554858080）

4、什麼是Promise，請求失敗調用什麼函數

http://es6.ruanyifeng.com/#docs/promise

1.Promise的含義

Promise是異步編程的一種解決方案。

所謂Promise，簡單說就是一個容器，裏面保存着某個將來纔會結束的事件（一般是一個異步操做）的結果。從語法上說，Promise 是一個對象，從它能夠獲取異步操做的消息。Promise 提供統一的 API，各類異步操做均可以用一樣的方法進行處理。

2.Promise對象有如下兩個特色。

（1）對象的狀態不受外界影響。Promise對象表明一個異步操做，有三種狀態：pending（進行中）、fulfilled（已成功）和rejected（已失敗）。只有異步操做的結果，能夠決定當前是哪種狀態，任何其餘操做都沒法改變這個狀態。這也是Promise這個名字的由來，它的英語意思就是「承諾」，表示其餘手段沒法改變。

（2）一旦狀態改變，就不會再變，任什麼時候候均可以獲得這個結果。Promise對象的狀態改變，只有兩種可能：從pending變爲fulfilled和從pending變爲rejected。只要這兩種狀況發生，狀態就凝固了，不會再變了，會一直保持這個結果，這時就稱爲 resolved（已定型）。若是改變已經發生了，你再對Promise對象添加回調函數，也會當即獲得這個結果。這與事件（Event）徹底不一樣，事件的特色是，若是你錯過了它，再去監聽，是得不到結果的。

3.請求成功調用什麼函數

resolve函數的做用是，將Promise對象的狀態從「未完成」變爲「成功」（即從 pending 變爲 resolved），在異步操做成功時調用，並將異步操做的結果，做爲參數傳遞出去；

4.請求失敗調用什麼函數

reject函數的做用是，將Promise對象的狀態從「未完成」變爲「失敗」（即從 pending 變爲 rejected），在異步操做失敗時調用，並將異步操做報出的錯誤，做爲參數傳遞出去。

5、正則表達式寫手機號和郵箱驗證怎麼寫

正則表達式匹配手機號 var regex= /^[1][3,4,5,7,8][0-9]{9}$/

郵箱：只容許英文字母、數字、下劃線、英文句號、以及中劃線組成

正則表達式匹配郵箱　　var regex=/^([\w+\.])+@\w+([.]\w+)+$/

\w 匹配任意的字母、數字和下劃線，至關於[A-Za-z0-9_]。

* 星號表示某個模式出現0次或屢次，等同於{0,}。

模式的精確匹配次數，使用大括號（{}）表示。{n}表示剛好重複n次，{n,}表示至少重複n次，{n,m}表示重複很多於n次，很少於m次。

+ 加號表示某個模式出現1次或屢次，等同於{1,}。

? 問號表示某個模式出現0次或1次，等同於{0, 1}。

1.匹配規則

（1）點字符（.)

點字符（.）匹配除回車（\r）、換行(\n) 、行分隔符（\u2028）和段分隔符（\u2029）之外的全部字符。注意，對於碼點大於0xFFFF字符，點字符不能正確匹配，會認爲這是兩個字符。

（2）位置字符

位置字符用來提示字符所處的位置，主要有兩個字符。

^ 表示字符串的開始位置
$ 表示字符串的結束位置

（3）選擇符（|）

豎線符號（|）在正則表達式中表示「或關係」（OR），即cat|dog表示匹配cat或dog。

轉義符

正則表達式中那些有特殊含義的元字符，若是要匹配它們自己，就須要在它們前面要加上反斜槓。好比要匹配+，就要寫成\+。

重複類

模式的精確匹配次數，使用大括號（{}）表示。{n}表示剛好重複n次，{n,}表示至少重複n次，{n,m}表示重複很多於n次，很少於m次。

6、CDN怎麼實現的查找到最近的服務器

7、若是是大張的圖片用JPG仍是PNG，還有哪些圖片格式，webp格式

　　若是是大張圖片應該用JPG，壓縮，產生的文件小

gif圖形交換格式，索引顏色格式，顏色少的狀況下，產生的文件極小，支持背景透明，動畫，圖形漸進，無損壓縮（適合線條，圖標等），缺點只有256種顏色
jpg支持上百萬種顏色，有損壓縮，壓縮比可達180：1，並且質量受損不明顯，不支持圖形漸進與背景透明，不支持動畫
png爲替代gif產生的，位圖文件，支持透明，半透明，不透明。不支持動畫，無損圖像格式。Png8簡單說是靜態gif，也只有256色，png24不透明，但不止256色。
webp谷歌開發的旨在加快圖片加載速度的圖片格式，圖片壓縮體積是jpeg的2/3，有損壓縮。高版本的W3C瀏覽器才支持，google39+，safari7+