2018前端面試

一.自我介紹：除了基本我的信息之外，面試官更想聽的是你不同凡響的地方和你的優點

二.基礎知識：html css js方面

1.什麼是盒子模型？

 在網頁中，一個元素佔有空間的大小由幾個部分構成，其中包括元素的內容（content），元素的內邊距（padding），元素的邊框（border），元素的外距 （margin）四個部分。這四個部分佔有的空間中，有的部分能夠顯示相應的內容，而有的部分只用來分隔相鄰的區域或區域。4個部分一塊兒構成了css中元素的盒模型。

 2.簡述同步和異步的區別

同步是阻塞模式，異步是非阻塞模式。

 同步就是指一個進程在執行某個請求的時候，若該請求須要一段時間才能返回信息，那麼這個進程將會一直等待下去，直到收到返回信息才繼續執行下去；

 異步是指進程不須要一直等下去，而是繼續執行下面的操做，無論其餘進程的狀態。當有消息返回時系統會通知進程進行處理，這樣能夠提升執行的效率。

3.css中長度單位有哪些？

px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，而且em會繼承父級元素的字體大小。

瀏覽器的默認字體高都是16px。因此未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em。

4.sessionStorage 、localStorage 和 cookie 之間的區別

不一樣點：

(1)、存儲內容是否發送到服務器端：當設置了Cookie後，數據會發送到服務器端，形成必定的寬帶浪費；

web storage,會將數據保存到本地，不會形成寬帶浪費；

(2)、數據存儲大小不一樣：Cookie數據不能超過4K,適用於會話標識；web storage數據存儲能夠達到5M;

(3)、數據存儲的有效期限不一樣：cookie只在設置了Cookid過時時間以前一直有效，即便關閉窗口或者瀏覽器；

sessionStorage,僅在關閉瀏覽器以前有效；localStorage,數據存儲永久有效；

(4)、做用域不一樣：cookie和localStorage是在同源同學口中都是共享的；sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；

5.AJAX的工做原理：

(1)、建立ajax對象（XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)）

(2)、判斷數據傳輸方式(GET/POST)

(3)、打開連接 open()

(4)、發送 send()

(5)、當ajax對象完成第四步（onreadystatechange）數據接收完成，判斷http響應狀態（status）200-300之間或者304（緩存）執行回調函數

6.web前端開發，如何提升頁面性能優化？

內容方面：

1.減小 HTTP 請求 (Make Fewer HTTP Requests)

2.減小 DOM 元素數量 (Reduce the Number of DOM Elements)

3.使得 Ajax 可緩存 (Make Ajax Cacheable)

針對CSS：

1.把 CSS 放到代碼頁上端 (Put Stylesheets at the Top)

2.從頁面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External)

3.精簡 JavaScript 與 CSS (Minify JavaScript and CSS)

4.避免 CSS 表達式 (Avoid CSS Expressions)

針對JavaScript ：

1. 腳本放到 HTML 代碼頁底部 (Put Scripts at the Bottom)

2. 從頁面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External)

3. 精簡 JavaScript 與 CSS (Minify JavaScript and CSS)

4. 移除重複腳本 (Remove Duplicate Scripts)

面向圖片(Image)：

1.優化圖片

2 不要在 HTML 中使用縮放圖片

3 使用恰當的圖片格式

4 使用 CSS Sprites 技巧對圖片優化

七、瀏覽器是如何渲染頁面的？

渲染的流程以下：

1.解析HTML文件，建立DOM樹。

   自上而下，遇到任何樣式（link、style）與腳本（script）都會阻塞（外部樣式不阻塞後續外部腳本的加載）。

2.解析CSS。優先級：瀏覽器默認設置<用戶設置<外部樣式<內聯樣式<HTML中的style樣式；

3.將CSS與DOM合併，構建渲染樹（Render Tree）

4.佈局和繪製，重繪（repaint）和重排（reflow）

 8. 如何理解閉包？

 一、函數內部能夠讀取函數外部的全局變量；在函數外部沒法讀取函數內的局部變量。

二、函數內部聲明變量的時候，必定要使用var命令。若是不用的話，你實際上聲明瞭一個全局變量！

9. 什麼是跨域？跨域請求資源的方法有哪些？

10.在JavaScript中實現繼承的方法有哪些？

1. 原型鏈（prototype chaining）

2. call()/apply()

3. 混合方式(prototype和call()/apply()結合)

4. 對象冒充

11.JQuery有幾種選擇器?

(1)、基本選擇器：#id，class,element,*;

(2)、層次選擇器：parent > child，prev + next ，prev ~ siblings

(3)、基本過濾器選擇器：:first，:last ，:not ，:even ，:odd ，:eq ，:gt ，:lt

(4)、內容過濾器選擇器： :contains ，:empty ，:has ，:parent

(5)、可見性過濾器選擇器：:hidden ，:visible

(6)、屬性過濾器選擇器：[attribute] ，[attribute=value] ，[attribute!=value] ，[attribute^=value] ，[attribute$=value] ，[attribute*=value]

(7)、子元素過濾器選擇器：:nth-child ，:first-child ，:last-child ，:only-child

(8)、表單選擇器： :input ，:text ，:password ，:radio ，:checkbox ，:submit 等；

(9)、表單過濾器選擇器：:enabled ，:disabled ，:checked ，:selected

12.jquery中$.get()提交和$.post()提交有區別嗎？

相同點：都是異步請求的方式來獲取服務端的數據；

異同點：

一、請求方式不一樣：$.get() 方法使用GET方法來進行異步請求的。$.post() 方法使用POST方法來進行異步請求的。

二、參數傳遞方式不一樣：get請求會將參數跟在URL後進行傳遞，而POST請求則是做爲HTTP消息的實體內容發送給Web服務器的，這種傳遞是對用戶不可見的。

三、數據傳輸大小不一樣：get方式傳輸的數據大小不能超過2KB 而POST要大的多

四、安全問題： GET 方式請求的數據會被瀏覽器緩存起來，所以有安全問題。

13. 在jquery中你是如何去操做樣式的？

addClass() 來追加樣式

removeClass() 來刪除樣式

toggle() 來切換樣式

14.你使用過jquery中的動畫嗎，是怎樣用的？

hide() 和 show() 同時修改多個樣式屬性。像高度，寬度，不透明度。 fadeIn() 和fadeOut() fadeTo() 只改變不透明度

slideUp() 和 slideDown() slideToggle() 只改變高度

animate() 屬於自定義動畫的方法.

15.你在jquery中使用過哪些插入節點的方法，它們的區別是什麼？

內添加

1.append在文檔內添加元素

2.appendTo()把匹配的元素添加到對象裏

3.prepend()在元素前添加

4.prependTo()把匹配的元素添加到對象前

  外添加

1.after()在元素以後添加

2.before()在元素以前添加

3.insertAfter()把匹配元素在對象後添加

4.insertBefore()把匹配元素在對象前添加

16.jquery中如何來獲取或和設置屬性？

jQuery中能夠用attr()方法來獲取和設置元素屬性

removeAttr() 方法來刪除元素屬性

17.你jquery中有哪些方法能夠遍歷節點？

children() 取得匹配元素的子元素集合,只考慮子元素不考慮後代元素  next() 取得匹配元素後面緊鄰的同輩元素

 prev() 取得匹配元素前面緊鄰的同輩元素

 siblings() 取得匹配元素先後的全部同輩元素

 closest() 取得最近的匹配元素

 find() 取得匹配元素中的元素集合 包括子代和後代

18. 有哪些查詢節點的選擇器？

:first 查詢第一個， :last 查詢最後一個，

:odd查詢奇數可是索引從0開始 :even 查詢偶數，

:eq(index)查詢相等的 , :gt(index)查詢大於index的 ,

:lt查詢小於index :header 選取全部的標題等

19.你知道jQuery中的事件冒泡嗎，它是怎麼執行的，何如來中止冒泡事件？

事件冒泡是從裏面的往外面開始觸發。

在jQuery中提供了stopPropagation()方法能夠中止冒泡。

20.單擊超連接後會自動跳轉，單擊"提交"按鈕後表單會提交等，有時候我想阻止這些默認的行爲，該怎麼辦？

能夠用 event.preventDefault()

或 在事件處理函數中返回false，即 return false;

三.你平時是如何學習前端開發的？

（ps:我這邊對您的狀況已經基本瞭解，您那邊有沒有什麼想要問個人？好的，那就先這樣，咱們後續會再聯繫您，再見！）