1. 程式人生 > >前端經典面試題目

前端經典面試題目

1. html5有哪些新特性?

⁃   繪畫 canvas

⁃   用於媒介回放的 video 和 audio 元素

⁃   本地離線儲存 localStorage 長期儲存資料,瀏覽器關閉後資料不丟失;

⁃   sessionStorage 的資料在瀏覽器關閉後自動刪除

⁃   語意化更好的內容元素,比如 article、footer、header、nav、section

⁃   表單控制元件,calendar(日曆)、date、time、email、url、search

    

2. 請描述一下cookies,sessionStorage 和localStorage 的區別?

    cookie在瀏覽器和伺服器間來回傳遞。 essionStorage和localStorage不會

    sessionStorage和localStorage的儲存空間更大;

3. CSS清除浮動的幾種方法(至少兩種)

    ⁃  使用帶clear屬性的空元素

    ⁃   使用CSS的overflow屬性;

    ⁃   使用CSS的:after偽元素;

        eg:#content:after{content:"";display:block;clear:both;} 

4. sass裡面的函式宣告

    @function funNanme(){}

    $變數

    Less用@來定義變數

 

5.bootstrap12刪格系統的不同終端尺寸

•   1200.  992. 768 

 

6. 介紹css的盒子模型?

     有兩種, IE 盒子模型(怪異)、標準 W3C 盒子模型;

    IE的content部分包含了 border 和 padding;盒模型: 內容(content)、填充(padding)、邊界(margin)、 邊框(border).

7. Css3 有哪些新特性?

•   CSS3實現圓角(border-radius:8px),陰影(box-shadow:10px),

•   對文字加特效(text-shadow、),線性漸變(gradient),

分為linear-gradient(線性漸變)和 radial-gradient(徑向漸變)

旋轉(transform)

•  transform:rotate(9deg)scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜

•   增加了更多的CSS選擇器多背景 rgba

•   動畫@keyframes名稱{}

語法結構:

@keyframes animationname {keyframes-selector {css-styles;}}

引數解析:
1.animationname:
宣告動畫的名稱。
2.keyframes-selector:用來劃分動畫的時長,可以使用百分比形式,也可以使用"from" 和 "to"的形式。
"from" 和 "to"的形式等價於 0% 和 100%。
建議始終使用百分比形式。

 

•   過度效果 transition

            幀動畫  animation是個複合屬性。檢索或設定物件所應用的動畫特效。如果提供多組屬性值,以逗號進行分隔。  

8. ajax中的get和post區別?

   1. Get 方法通過 URL 請求來傳遞使用者的資料,將表單內各欄位名稱與其內容,以成對的字串連線;Post 方法通過 HTTP post 機制,將表單內各欄位名稱與其內容放置在 HTML 表頭(header)內一起傳送給伺服器端

     2. Get 方式傳輸的資料量非常小,一般限制在 2 KB 左右,但是執行效率卻比 Post 方法好;而 Post 方式傳遞的資料量相對較大

     3. 安全問題:get沒有post安全

 

 

9.談談This物件的理解。

1. this在建構函式中指的是建構函式例項化得到物件的原型

2. this在物件的方法中指的是當前物件

10. 面向物件繼承的幾種方法?

 1.call

2.apply

3.原型繼承

4.原型鏈繼承

11AJAX最大的特點是什麼。

Ajax可以實現動態不重新整理(區域性重新整理)

12.ajax 四部曲及返回資料處理方式?

1.建立

(1).得到XMLHttpRequest物件 AJAX物件     

newXMLHttpRequest( )

newActiveXObject("Microsoft.XMLHTTP" ) ie6

 2.請求

get方式

    xhr.open("get","login.php?aa=1&bb=2&cc=3",true/false)配置 第三引數 是否非同步

 get請求 會把要提交的資訊(aa=1&bb=2&cc=3")新增到地

址欄的後面速度快 配置簡單不安全

post方式

    xhr.open("post","login.php",true/false)配置

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//將我們的請求新增到頭部報文中

post請求 安全性比較高 配置複雜一些 傳遞一些資料量比較大的資料

3. 傳送

    xhr.send()傳送請求

    xhr.send("aa=1&bb=2&cc=3")

 4.響應

 通過一個函式xhr.onreadstatechange來處理物件的執行結果

        xhr.readyState

        4 響應已經完成

xhr.status 判斷狀態碼(判斷頁面返回的資料是否成功) 資料報文

200 表示成功

304 資料未做修改 使用快取資料

404 頁面未找到 403 伺服器禁止訪問

500 未知錯誤

     1.json.parse()/json.stringify()/eval()

     eval() 函式可計算某個字串,並執行其中的的 JavaScript 程式碼

     2.responseText(

     3.responseXml()

13種常見的 http狀態碼以及代表的意義如下:

      1.200( OK):請求已成功,請求所希望的響應頭或資料體將隨此響應返回。

       2. 303( See Other):告知客戶端使用另一個 URL來獲取資源。

       3 .400( BadRequest):請求格式錯誤。1)語義有誤,當前請求無法被伺服器

       理解。除非進行修改,否則客戶端不應該重複提交這個請求;2)請求引數有誤。

       4. 404( Not Found):請求失敗,請求所希望得到的資源未被在伺服器上發現。

       5. 500( InternalServer Error):伺服器遇到了一個未曾預料的狀況,導致了它

           無法完成對請求的處理。

14.簡述 AJAX的互動模型,以及同步和非同步的區別

  同步:指令碼會停留並等待伺服器傳送回覆然後繼續。

   非同步:指令碼不停留並處理可能的回覆。

15.axios是什麼?

請求後臺資源的模組

和ajax有相同的用法,用於資料的互動

Axios.post().then()

Axios.get().then()

16、說出至少4種vue當中的指令和它的用法?

答:v-if:判斷是否隱藏;v-for:資料迴圈出來;v-bind:class:繫結一個屬性;v-model:實現雙向繫結

17、請詳細說下你對vue生命週期的理解?

答:總共分為8個階段建立前/後,載入前/後,更新前/後,銷燬前/後。

建立前/後: 在beforeCreated階段,vue例項的掛載元素$el和資料物件data都為undefined,還未初始化。在created階段,vue例項的資料物件data有了,$el還沒有。

載入前/後:在beforeMount階段,vue例項的$el和data都初始化了,但還是掛載之前為虛擬的dom節點,data.message還未替換。在mounted階段,vue例項掛載完成,data.message成功渲染。

更新前/後:當data變化時,會觸發beforeUpdate和updated方法。

銷燬前/後:在執行destroy方法後,對data的改變不會再觸發周期函式,說明此時vue例項已經解除了事件監聽以及和dom的繫結,但是dom結構依然存在

18、請說出vue.cli專案中src目錄每個資料夾和檔案的用法?

答:assets資料夾是放靜態資源;components是放元件;router是定義路由相關的配置;view檢視;app.vue是一個應用主元件;main.js是入口檔案

19.vue如何實現父子元件通訊?

                props. 

20.node.js建立服務?

引入模組require(“http”)

 const http=require(“http”);

 http.createServer((req,res)=>{})).listen(“8080”,(req,res)=>{})

21.對於傳入的值怎麼判定是不是一個數組?

 

 

22.對於跨域,你是怎麼理解的,解決的方案有哪些?

 

 

23.es6有哪些新的特點,舉例說明並說明它的優點,例如箭頭函式?

 

 

24vue的原理,還有v-model是基於什麼的?

面試官的這個問題我當時一臉矇蔽,都不知道在問什麼

 

25cookie和sessioncookie的區別?

 

 

26對大前端的前後端分離的理解?

 

 

27.this的用法,詳細說明

 

28.非同步的應用舉例說明?在js中

 

 

29閉包的原理,我們為什麼用它?

 

 

 

30作用域說說你的理解?