網易金融前端實習生電話面試整理

大廠前端面試考什麼? | 掘金技術徵文

前端面試題總結——綜合問題

1.CSS做用

CSS:層疊樣式表單，渲染HTML元素標籤的樣式。經過使用CSS樣式設計頁面的格式，可將頁面的內容與表現形式分離。不只可以使維護站點的外觀更加容易，並且還可使HTML文檔代碼更加簡練，縮短瀏覽器的加載時間。

2.CSS3動畫

CSS動畫簡介

animation：

@keyframes規則用於建立動畫，在 @keyframes 中規定CSS 樣式，就能建立由當前樣式逐漸改成新樣式的動畫效果。

在 @keyframes 中建立動畫時，請把它捆綁到某個選擇器，不然不會產生動畫效果。

經過規定至少如下兩項 CSS3 動畫屬性，便可將動畫綁定到選擇器：

• 規定動畫的名稱 animation-name
• 規定動畫的時長 animation-duration

用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同於 0% 和 100%。

0% 是動畫的開始，100% 是動畫的完成。

屬性	描述
@keyframes	規定動畫。
animation	全部動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
animation-name	規定 @keyframes 動畫的名稱。
animation-duration	規定動畫完成一個週期所花費的秒或毫秒。默認是 0。
animation-timing-function	規定動畫的速度曲線。默認是 "ease"。
animation-delay	規定動畫什麼時候開始。默認是 0。
animation-iteration-count	規定動畫被播放的次數。默認是 1。
animation-direction	規定動畫是否在下一週期逆向地播放。默認是 "normal"。
animation-play-state	規定動畫是否正在運行或暫停。默認是 "running"。
animation-fill-mode	規定對象動畫時間以外的狀態。

CSS的transition和animation有何區別

transition和animation均可以做動效。

transition

是過渡，由一個狀態過渡到另外一個狀態，好比高度100px過渡到200px；transition的做用在於，指定狀態變化所須要的時間。

（1）transition須要事件觸發，因此無法在網頁加載時自動發生。

（2）transition是一次性的，不能重複發生，除非一再觸發。

（3）transition只能定義開始狀態和結束狀態，不能定義中間狀態，也就是說只有兩個狀態。

（4）一條transition規則，只能定義一個屬性的變化，不能涉及多個屬性。

animation

是動畫，animation有幀的概念，能夠設置關鍵幀keyframe,一個動畫能夠由多個狀態過渡組成。

3.選擇器權重及優先級 

權重分爲四級，權重值越大優先級越高。

1.內聯樣式。如：style=「xxx」，權值爲1000

2.ID選擇器。如：#content，權值爲100

3.類，僞類和屬性選擇器。如：.content,:hover,[attribute],權值爲10

4.元素選擇器，僞元素選擇器。如：div,p,權值爲1

注意：通用選擇器（*），子選擇器（>)，相鄰同胞選擇器（+）並不在四個等級中，權值爲0

權重值越大優先級越高，相同權值後定義覆蓋前面定義的

！important  強制重定義，提高優先級。

不要用標籤名限制 class 規則，如div.info這樣的寫法，其實咱們能夠直接寫爲.info，從右到左解析的緣由能夠知道爲何其低效。

4.JQuery機制 

前端知識點總結——JQ（上）

前端知識點總結——JQ（下）

5.AJAX

經過在後臺與服務器進行少許數據交換，AJAX 可使網頁實現異步更新。AJAX是一種在無需從新加載整個網頁的狀況下，可以更新部分網頁的狀況。

1.建立一個ajax對象，var ajax = new XMLHttpRequest（）；

2.鏈接服務器，ajax.open(method，url，true );   異步傳輸（多個事情一塊兒作）

3.發送請求，ajax.send（ ）；

4.接受返回，處理數據。

readystate（瀏覽器服務器進行到哪一步了）

0：（未初始化）未調用open方法

1：（載入）已調用send方法，正在發送求情

2：（載入完成）send完成

3：（解析）正在解析響應內容

4：（完成）響應內容解析完成

status HTTP狀態碼

200：成功

301：永久重定向

302：臨時重定向

304：資源找到，但不符合條件

404：找不到資源

500：服務器端出錯

6.HTTP協議 

HTTP協議詳解

HTTP協議是超文本傳輸協議

HTTP是一個基於TCP/IP通訊協議來傳遞數據（HTML 文件, 圖片文件, 查詢結果等）。

HTTP協議工做於客戶端-服務端架構爲上。瀏覽器做爲HTTP客戶端經過URL向HTTP服務端即WEB服務器發送全部請求。Web服務器根據接收到的請求後，向客戶端發送響應信息。

1.輸入地址

2.瀏覽器經過DNS服務器查找域名的IP地址（DNS查找過程：瀏覽器緩存->系統緩存->路由器緩存）

3.瀏覽器向web服務器發送一個HTTP請求

4.服務器永久重定向響應（從http：//example.com到http：//www.example.com)

5.瀏覽器跟蹤重定向地址

6.服務器處理請求

7.服務返回一個HTTP響應

8.瀏覽器顯示HTML

9.瀏覽器發送請求獲取嵌在HTML中的資源（如圖片，音頻，視頻，css，js等）

10.瀏覽器發送異步請求

 7.原型 

JS進階(1) —— 人人都能懂的構造函數

JS進階(2)：人人都能懂的原型對象

 8.閉包

 9.Promise  

es6—Promise

10.回調機制  

JS—回調函數

11.ES6 Class 繼承 與原生JS繼承區別

小談ES6中的class與繼承

在ES5中，繼承實質上是子類先建立屬於本身的this，而後再將父類的方法添加到this（也就是使用Parent.apply(this)的方式）或者this.__proto__（即Child.prototype=new Parent()）上。

而在ES6中，則是先建立父類的實例對象this，而後再用子類的構造函數修改this

12.跨域

容許跨域請求: link, img, script
不容許跨域: xhr對象 (ajax請求)
變通: script 須要服務器返回一段可執行的js語句

服務器應該返回包含數據的一條可執行的js語句複製代碼

如何實現？
客戶端實現: JSONP (填充式json)

1. 在客戶端定義處理函數

2. 在按鈕單擊事件中，動態建立script元素，src設置爲服務端地址，並攜帶請求參數callback=函數名（jsonp不支持POST請求，由於script只支持get請求）

3. 在服務器端，接收請求參數中的函數名，將函數名和要返回的數據，拼接爲一條可執行的js語句

4. 客戶端script，請求服務端php，得到可執行語句，自動調用提早定義好的函數處理數據

5. 在客戶端處理函數結尾，要動態刪除script

服務器端代理：添加http請求頭

CORS