前端經典面試題目
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.原型鏈繼承
11、AJAX最大的特點是什麼。
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作用域說說你的理解?