面試題總結

時間 2019-11-12

標籤面試總結欄目快樂工作简体版

原文原文鏈接

CSS篇：前端

一、CSS是什麼、用來作什麼？nginx

答：用於佈局與美化頁面，是一種標記語言，不須要編譯。經過更改CSS代碼來改變網頁的總體表現形式。web

二、EM、PX、REM的區別？數據庫

答：EM：根據一個基點來設置本身的大小，是一個相對值，並不是固定，通常根據父元素屬性設置自己大小，與PX換算是：body{font-size=62.5%}。IE6,IE8不支持。apache

PX：就是像素，比較穩定和精確。可是大小被固定了，當瀏覽器視口改變時，內容不能相對應的改變。canvas

REM：相對於根元素<Html>來設置自身大小，咱們只須要在根元素肯定一個參考值。IE6,IE8不支持。api

三、Doctype的做用？跨域

答：用於聲明HTML文檔使用哪一種規範（HTML/XHTML）。數組

四、XHTML與HTML有什麼區別？瀏覽器

答：HTML是一種基本的Web設計語言；XHTML是一種基於XML的置標語言。

XHTML更加嚴格：元素必須被正確嵌套、必須被關閉、標籤名必須使用小寫、文檔必須有根元素。

五、行內元素、塊級元素、Void空元素？

答：行內：a、span、i、img、em、select、lable

塊級：div、dl、dt、dd、ul、li、p、form、table、h1—h6

Void：br、hr

六、CSS選擇器有哪些，優先級？

答：主要爲三類：ID》Class》標籤

可組合爲：後代、子代、羣組、僞類、通用

七、CSS盒模型？

答：外邊距：margin，邊框：border，內邊距：padding

八、Display有哪些主要屬性，做用？

答：none：隱藏元素；block：元素顯示爲塊級元素，先後顯示換行符；

inline：默認，顯示爲內聯元素；inline-block：行內塊元素。

九、Position有哪些主要屬性，做用？

答：absolute：絕對定位，相對於第一個有定位屬性的父級元素來定位；

fixed：絕對定位，相對於瀏覽器窗口進行定位；

Relative：相對定位，相對於當前正常位置經行定位；

inherit：規定從父元素繼承position的值。

十、前端頁面由那三層構成？

答：結構層：HTML；表現層：CSS；行爲層：JavaScript。

十一、什麼是語義化的標籤，有什麼優勢？

答：能直觀認識的標籤；能使搜索引擎快速的抓取。

十二、如何對網頁經行優化？

答：文件合併、文件壓縮、使用CDN託管、將一些小圖片作成雪碧圖，減小對服務器端的請求次數。

1三、HTML5有什麼新標籤？

答：header：頭部；footer：尾部；nav：導航/菜單；video：視頻；audio：音頻；canvas：畫布；figure：圖文並茂；...

1四、列舉CSS3一些屬性？

答：border-radius:圓角；box-shadow：邊框陰影；text-overflow：文本溢出；background：背景圖片可用多張；transform：使什麼變形；transition：過渡時間。...

1五、如何讓一段文本中的全部首字母大寫？

答：text-transform：capitalize；uppercase（全部單詞大寫）；lowercase（全部單詞小寫）。

1六、減小頁面加載時間的方法？

答：儘可能減小HTTP請求次數；CSS文件放頭部；JS文件放尾部；壓縮CSS、JS文件；儘量優化代碼，減小DCOM元素；AJAX採用緩存調用。

1七、爲何要初始CSS樣式？

答：由於瀏覽器的兼容問題，不一樣瀏覽器之間的默認屬性不一樣，若是不初始化CSS樣式，頁面在不一樣瀏覽器之間顯示會有差別。

1八、當float與margin同時使用時，IE6的雙邊差距BUG怎麼解決？

答：只須要給第一個浮動元素的CSS樣式加上display：inline屬性。

1九、Firefox中標籤的居中解決方法？

答：除了父級元素設置text-align：center屬性；子級元素還應該設置margin：0 auto。

20、如何利用button實現連接功能？

答：<input type=button value="test" onclick="window.navigate('http://hao123.com')" />只針對IE；
<input type=button value="test" onclick="location.href = 'http://hao123.com'" />兼容全部瀏覽器。

JS篇：

一、JavaScript是一門什麼樣的語言，它有哪些特色？

答：是一種腳本語言；

特色：1）語法相似於常見高級語言；

2）腳本語言，不須要編譯就能夠由解釋器直接運行；

3）變量鬆散定義，屬於弱類型語言；

4）面向對象。

二、閉包的原理與好處和壞處？

答：閉包：閉包是一個擁有許多變量和綁定了這些變量的環境表達式，一般是一個函數，所以這些變量也是該表達式的一部分；也就是說JS中全部的function都是一個閉包，只是嵌套的function所產生的閉包更爲強大。

好處：1）建立一個匿名函數，並當即執行，因爲外部沒法引用內部變量，所以在執行後能很快釋放，不會形成全局污染。

2）緩存，能夠將值存儲起來，當須要調用的時候，首先在緩存中查找，若是找不到再進行計算，而後更新緩存並返回值。

3）實現封裝。

4）實現面向對象中的對象。

壞處：閉包會致使變量不能釋放，引發內存泄露。

三、類的三大特性？

答：繼承、封裝、多態

四、JS的Typeof的返回數據類型有哪些？

答：Object、number、function、boolean、string、undefined。

五、JS獲得DOM的方法？

答：根據ID獲取對象：document.getElementById（ID）；

根據Tag獲取對象數組：document.getElementsByTagName（「p」）；

根據Name獲取對象數組：document.getElementsByName（NAME）；

根據Class獲取對象數組：document.getElementsByClass（.Class）。

六、IE與火狐事件機制有什麼區別；阻止冒泡事件的代碼？

答：function stopEvent(){ //阻止冒泡事件

//取消事件冒泡

var e=arguments.callee.caller.arguments[0]||event; //若省略此句，下面的e改成event， IE運行能夠，可是其餘瀏覽器就不兼容

if (e && e.stopPropagation) {

// this code is for Mozilla and Opera

e.stopPropagation();

} else if (window.event) {

// this code is for IE

window.event.cancelBubble = true;

}

通常在IE環境下能夠省略掉（var e=arguments.callee.caller.arguments[0]||event;）直接運行便可，可是在FF下不行了，它會報e.stopPropagation沒有定義，因此要事先定義，才能兼容。

七、Document.onload（）和Document.ready（）的區別？

答：onload：是在整個文檔加載完成後就能夠直接對DOM進行操做；

ready：是在DOM加載完成後就能夠直接對DOM進行操做；

在原生JS中並無Document.ready的直接方法。

八、JS中split（）與join（）的區別？

答：split（）：用於把一個字符串分割成字符串數組；

join（）：用於把數組中的全部元素放入一個字符串，元素經過指定的分隔符進行分割；例如：join（「#」），#是任意的。

AJAX篇：

1、AJAX何時調用？

答：AJAX主要用於提高用戶體驗，可是不能濫用。多用於提交Form表單或一些不用刷新整個頁面而須要獲取後臺數據的時候。下降服務器壓力。

2、JsonP的原理及優缺點？

答：JsonP全稱是JSON with Padding，是爲了解決跨域請求資源而產生的解決方案。

原理：利用<script>標籤沒有跨域限制的「漏洞」來達到與第三方通信的目的。當須要通信時，本站腳本建立一個 <script>元素，地址指向第三方的API網址，形如<script src="http://www.example.net/api?param1=1¶m2=2"></script>
並提供一個回調函數來接收數據（函數名可約定，或經過地址參數傳遞）。

優勢：它不像XMLHttpRequest對象實現的Ajax請求那樣受到同源策略的限制；它的兼容性更好，在更加古老的瀏覽器中均可以運行，不須要 XMLHttpRequest或ActiveX的支持；而且在請求完畢後能夠經過調用 callback的方式回傳結果。

缺點：它只支持GET請求而不支持POST等其它類型的HTTP請求；它只支持跨域HTTP請求這種狀況，不能解決不一樣域的兩個頁面之間如何進行 JavaScript調用的問題。

3、GET請求與POST請求差異？

答：GET：1）Get是向服務器發索取數據的一種請求；

2）Get是獲取信息，而不是修改信息，相似數據庫查詢功能同樣，數據不會被修改；

3）Get傳輸的數據有大小限制，由於GET是經過URL提交數據，那麼GET可提交的數據量就跟URL的長度有直接關係了，不一樣的瀏覽器對URL的長度的限制是不一樣的。

4）Get請求的參數會跟在url後進行傳遞，請求的數據會附在URL以後，以?分割 URL和傳輸數據，參數之間以&相連,％XX中的XX爲該符號以16進製表示的 ASCII，若是數據是英文字母/數字，原樣發送，若是是空格，轉換爲+，若是是中文/其餘字符，則直接把字符串用BASE64加密。

POST：1）Post是向服務器提交數據的一種請求；

2）Post請求做爲HTTP消息的實際內容發送給web服務器，數據放置在HTML Header 內提交，Post沒有限制提交的數據；

3）Post比Get安全，對於敏感數據和不是中文字符的數據，用post；

4）POST表示可能修改變服務器上的資源的請求，在服務器端，用Post方式提交的數據只能用Request.Form來獲取。

4、NodeJS？

答：Node.js 是服務器端的JavaScript運行環境，它具備無阻塞(non-blocking)和事件驅動(event-driven)等的特點，Node.js 採用V8引擎，實現了相似Apache和 nginx的web服務，能夠經過它來搭建基於 JavaScript的Web App。NodeJS 被設計用來解決服務端阻塞問題.

開發篇：

一、啥子是模塊化開發及優勢？

答：在軟件開發過程當中，把一個源代碼的結構分割成一個元系統和一系列的模塊；元系統是指一個可以保持系統運行的最小系統；模塊是一個較大系統的獨立部件，能獨立出來，又能夠在總體中運轉。

1）便於維護，在不影響整個系統運轉的狀況下將一些舊版本的模塊替換掉；

2）方便分工，提升開發效率；

3）開發者可根據某種特定功能進行獨立開發而不用去協調與其它模塊之間的關係；

4）便於用戶根據我的需求選擇適合本身的模塊安裝。

框架：

一、LESS與SASS的特性？

答：less是基於JS在客戶端運行；sass是基於rubu環境在服務器端運行。

聲明：less：@；sass：$。

1）結構清晰，便於擴展。