前端的面試題都有哪些

這篇文章給大家介紹前端的面試題都有哪些，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

1、標(biāo)簽屬性中title和alt的區(qū)別

答:

title是設(shè)置鼠標(biāo)移動(dòng)到圖片上時(shí)顯示的內(nèi)容，而alt是用于當(dāng)圖片沒有正常顯示時(shí)出現(xiàn)的提示文字，另外alt還用于在seo中針對(duì)圖片的優(yōu)化說明.

2、隱藏元素的幾種方法

答:

     1.display:none;

     2.visibility:hidden;

     3.opacity:0;

     4.position:absolute;

        left:-10000px;

3、JavaScript中有哪幾種數(shù)據(jù)類型

答:

JavaScript中有5種簡(jiǎn)單數(shù)據(jù)類型（也稱為基本數(shù)據(jù)類型）:Undefined、Null、Boolean、Number和String。還有1種復(fù)雜數(shù)據(jù)類型——Object，Object本質(zhì)上是由一組無序的名值對(duì)組成的

4、回答以下輸出的類型

答:

alert(typeof(null));//object
alert(typeof(NaN));//number
alert(typeof(undefined));//undefined
alert(typeof(“undefined”));//string
alert(NaN == undefined);//false
alert(NaN == NaN);//false

5、用jquery和原生js獲取元素中的內(nèi)容

答:

JS:document.getElementById(“div1”).innerHTML;
document.querySelector(“#div1”).innerText;
JQ:$(“#div1”).html()

6、用原生js封裝一個(gè)添加監(jiān)聽事件的兼容寫法

答:

function addEvent(obj,event,fn){
 //現(xiàn)代：addEventLister 不用加on
 //ie：touchEvent 需要加on
 if (window.addEventListener){
 obj.addEventListener(event,fn);
 }else{
 obj.attachEvent("on"+event, fn);
 }
}

7、對(duì)跨域的理解和解決辦法

答:

跨域簡(jiǎn)單的理解即為當(dāng)前服務(wù)器目錄下的前端需求要請(qǐng)求非本服務(wù)器(本域名)下的后臺(tái)服務(wù)就稱為跨域請(qǐng)求。跨域請(qǐng)求我們使用普通的ajax請(qǐng)求是無法進(jìn)行的同源策略，一般來說位于 server1.example.com 的網(wǎng)頁無法與不是 server2.example.com的服務(wù)器溝通，或者說如果在server1.example.com下想獲取server2.example.com的話就得用跨域請(qǐng)求。

跨域的解決方法及解決：通過script標(biāo)簽請(qǐng)求，或者通過jQuery跨域

8、Ajax的原理

答:

Ajax的原理簡(jiǎn)單來說通過XmlHttpRequest對(duì)象來向服務(wù)器發(fā)異步請(qǐng)求，從服務(wù)器獲得數(shù)據(jù)，然后用javascript來操作DOM而更新頁面。

XMLHttpRequest是ajax的核心機(jī)制，它是在IE5中首先引入的，是一種支持異步請(qǐng)求的技術(shù)。簡(jiǎn)單的說，也就是javascript可以及時(shí)向服務(wù)器提出請(qǐng)求和處理響應(yīng)，而不阻塞用戶。達(dá)到無刷新的效果。

9、jQuery庫中的$()是什么

答:

$()函數(shù)用于將任何對(duì)象包裹成jQuery對(duì)象，接著你就被允許調(diào)用定義在 jQuery對(duì)象上的多個(gè)不同方法。你甚至可以將一個(gè)選擇器字符串傳入$()函數(shù)，它會(huì)返回一個(gè)包含所有匹配的DOM元素?cái)?shù)組的jQuery對(duì)象。

10、JavaScript的window.onload事件和jQuery的ready函數(shù)有何不同

答:

JavaScript的window.onload事件和jQuery的ready函數(shù)之間的主要區(qū)別是，前者除了要等待DOM被創(chuàng)建還要等到包括大型圖片、音頻、視頻在內(nèi)的所有外部資源都完全加載。如果加載圖片和媒體內(nèi)容花費(fèi)了大量時(shí)間，用戶就會(huì)感受到定義在window.onload 事件上的代碼在執(zhí)行時(shí)有明顯的延遲。

另一方面，jQuery的ready()函數(shù)只需對(duì)DOM樹的等待，而無需對(duì)圖像或外部資源加載的等待，從而執(zhí)行起來更快。使用jQuery $(document).ready()的另一個(gè)優(yōu)勢(shì)是你可以在網(wǎng)頁里多次使用它，瀏覽器會(huì)按它們?cè)贖TML頁面里出現(xiàn)的順序執(zhí)行它們，相反對(duì)于onload技術(shù)而言，只能在單一函數(shù)里使用。鑒于這個(gè)好處，用jQuery的ready()函數(shù)比用JavaScript的window.onload 事件要更好些。

11、用原生js封裝一個(gè)能獲取元素到頁面最上方和最左側(cè)的函數(shù)，再用JQ封裝一個(gè)同樣的函數(shù)

答:

原生:

function offset(obj){
 var l = 0;
 var t = 0;
 while(obj){
 l+=obj.offsetLeft;
 t+=obj.offsetTop;
 obj = obj.offsetParent;
 }
 return {left:l,top:t};
}

jQuery：

$().offset().left;$().offset().top

12、如何實(shí)現(xiàn)一個(gè)EventEmitter

答:

主要分三步：定義一個(gè)子類，調(diào)用構(gòu)造函數(shù)，繼承EventEmitter

var util = require('util');
var EventEmitter = require('events');
function MyEmitter() {
 EventEmitter.call(this);
} // 構(gòu)造函數(shù)
util.inherits(MyEmitter, EventEmitter); // 繼承
var em = new MyEmitter();
em.on('hello', function(data) {
 console.log('收到事件hello的數(shù)據(jù):', data);
}); // 接收事件，并打印到控制臺(tái)
em.emit('hello', 'EventEmitter傳遞消息真方便!');

13、如何通過stream實(shí)現(xiàn)一個(gè)文件的復(fù)制

答:

var fs = require("fs");
var rs = fs.createReadStream(“1.jpg");
var ws = fs.createWriteStream("2.jpg");
rs.pipe(ws);

14、如何理解node的同步和異步

答:

”同步模式”就是上一段的模式，后一個(gè)任務(wù)等待前一個(gè)任務(wù)結(jié)束，然后再執(zhí)行，程序的執(zhí)行順序與任務(wù)的排列順序是一致的、同步的；”異步模式”則完全不同，每一個(gè)任務(wù)有一個(gè)或多個(gè)回調(diào)函數(shù)（callback），前一個(gè)任務(wù)結(jié)束后，不是執(zhí)行后一個(gè)任務(wù)，而是執(zhí)行回調(diào)函數(shù)，后一個(gè)任務(wù)則是不等前一個(gè)任務(wù)結(jié)束就執(zhí)行，所以程序的執(zhí)行順序與任務(wù)的排列順序是不一致的、異步的。

15、使用node構(gòu)建一個(gè)服務(wù)器并對(duì)向”/post”發(fā)起的post請(qǐng)求進(jìn)行處理，要求拿到post請(qǐng)求傳輸?shù)臄?shù)據(jù)（不包括文件上傳）

答:

var http = require("http");
var queryString = require("querystring");
var server = http.createServer(function (req,res) {
 if(urlObj.pathname == "/post"){
 var str = "";
 req.on("data",function (chunk) {
 str+=chunk;
 });
 req.on("end",function () {
 var query = queryString.parse(str);
 console.log(query);
 })
 res.end("你請(qǐng)求的地址是"+urlObj.pathname);
 }
});
server.listen(8080);

16、用node模擬客戶端發(fā)起請(qǐng)求

答:

var http = require("http");
var request = http.request({
 host:"localhost",
 port:"8080",
 path:"/request",
 method:"post"
},function (res) {
 res.on("data",function (chunk) {
 console.log(chunk.toString());
 });
});
request.write("user=zhang&pass=111");
request.end("請(qǐng)求結(jié)束");//結(jié)束本次請(qǐng)求

17、圖片預(yù)加載的意義和原理

答:

預(yù)加載圖片是提高用戶體驗(yàn)的一個(gè)很好方法。圖片預(yù)先加載到瀏覽器中，這對(duì)圖片畫廊及圖片占據(jù)很大比例的網(wǎng)站來說十分有利，它保證了圖片快速、無縫地發(fā)布，也可幫助用戶在瀏覽網(wǎng)站內(nèi)容時(shí)獲得更好的用戶體驗(yàn)。

實(shí)例代碼：

//obj.imgArr 圖片數(shù)組
//obj.loadingProgress 加載進(jìn)度
//obj.loadingOver 加載結(jié)果
(function (){
 var imgObjs = [];
 loadingFn = function (obj) {
 var index = 0; 
 for (var i = 0; i < obj.imgArr.length; i++) {
 var imgObj = new Image();
 imgObj.onload = function() {
 index++;
 imgObjs.push(this);
 if (obj.loadingProgress){
 obj.loadingProgress(index, this);
 }
 if (index > obj.imgArr.length-1){
 obj.loadingOver(imgObjs);
 }
 }
 imgObj.src = obj.imgArr[i];
 }
 console.log(obj);
 }

18、瀏覽器頁面有哪三層構(gòu)成，分別是什么，作用是什么?

答:

瀏覽器頁面構(gòu)成：結(jié)構(gòu)層、表示層、行為層

分別是：HTML、CSS、JavaScript

作用：HTML實(shí)現(xiàn)頁面結(jié)構(gòu)，CSS完成頁面的表現(xiàn)與風(fēng)格，JavaScript實(shí)現(xiàn)一些客戶端的功能與業(yè)務(wù)。

19、什么是語義化的HTML?

答:

直觀的認(rèn)識(shí)標(biāo)簽，對(duì)于搜索引擎的抓取有好處，用正確的標(biāo)簽做正確的事情！

html語義化就是讓頁面的內(nèi)容結(jié)構(gòu)化，便于對(duì)瀏覽器、搜索引擎解析，在沒有樣式CCS情況下也以一種文檔格式顯示，并且是容易閱讀的。搜索引擎的爬蟲依賴于標(biāo)記來確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于SEO。使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。

20、CSS居中（包括水平居中和垂直居中）

答:

水平居中設(shè)置:

1.行內(nèi)元素

設(shè)置 text-align:center；

2.Flex布局

設(shè)置display:flex;justify-content:center; (靈活運(yùn)用,支持Chroime，F(xiàn)irefox，IE9+)

垂直居中設(shè)置：

1.父元素高度確定的單行文本（內(nèi)聯(lián)元素）

設(shè)置 height = line-height；

2.父元素高度確定的多行文本（內(nèi)聯(lián)元素）

a:插入 table （插入方法和水平居中一樣），然后設(shè)置 vertical-align:middle；

b:先設(shè)置 display:table-cell 再設(shè)置 vertical-align:middle；

塊級(jí)元素居中方案

水平居中設(shè)置：

1.定寬塊狀元素

設(shè)置 左右 margin 值為 auto；

2.不定寬塊狀元素

a:在元素外加入 table 標(biāo)簽（完整的，包括 table、tbody、tr、td），該元素寫在 td 內(nèi)，然后設(shè)置 margin 的值為 auto；

b:給該元素設(shè)置 displa:inine 方法；

c:父元素設(shè)置 position:relative 和 left:50%，子元素設(shè)置 position:relative 和 left:50%；

垂直居中設(shè)置：

使用position:absolute（fixed） ,設(shè)置left、top、margin-left、margin-top的屬性;

利用position:fixed（absolute）屬性，margin:auto這個(gè)必須不要忘記了;

利用display:table-cell屬性使內(nèi)容垂直居中;

使用css3的新屬性transform:translate(x,y)屬性;

使用:before元素;

21、CSS3有哪些新特性？

答:

CSS3實(shí)現(xiàn)圓角（border-radius: 8px），陰影（box-shadow: 10px），

對(duì)文字加特效（text-shadow），線性漸變（gradient），變換（transform）

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

還增加了更多的CSS選擇器，多背景，rgba等

22、事件委托是什么？

答:

利用事件冒泡的原理，使自己的所觸發(fā)的事件，讓它的父元素代替執(zhí)行！

23、什么叫優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)？

答:

優(yōu)雅降級(jí):Web站點(diǎn)在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會(huì)檢查以確認(rèn)它們是否能正常工作。由于IE獨(dú)特的盒模型布局問題，針對(duì)不同版本的IE的hack實(shí)踐過優(yōu)雅降級(jí)了,為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級(jí)體驗(yàn)卻不至于完全失效。

漸進(jìn)增強(qiáng)：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎(chǔ)瀏覽器的額外樣式和功能的。當(dāng)瀏覽器支持時(shí)，它們會(huì)自動(dòng)地呈現(xiàn)出來并發(fā)揮作用。

24、JavaScript原型，原型鏈都是什么? 有什么特點(diǎn)？

答:

原型對(duì)象也是普通的對(duì)象，是對(duì)象一個(gè)自帶隱式的 proto屬性，原型也有可能有自己的原型，如果一個(gè)原型對(duì)象的原型不為null的話，我們就稱之為原型鏈。

原型鏈?zhǔn)怯梢恍┯脕砝^承和共享屬性的對(duì)象組成的（有限的）對(duì)象鏈。

25、如何阻止事件冒泡和默認(rèn)事件

答:

阻止冒泡:

現(xiàn)代瀏覽器:e.stopPropagation

低版本瀏覽器:e.cancelBubble=true

阻止默認(rèn)事件:

現(xiàn)代瀏覽器:e.preventDefult()

低版本瀏覽器:return false

26、iOS蘋果和微信中音頻和視頻實(shí)現(xiàn)自動(dòng)播放的方法

答:

//一般情況下，這樣就可以自動(dòng)播放了，但是一些奇葩iPhone機(jī)不可以 
document.getElementById('audio').play(); 
//必須在微信Weixin JSAPI的WeixinJSBridgeReady才能生效 
document.addEventListener("WeixinJSBridgeReady", function () { 
 document.getElementById('audio').play(); 
 document.getElementById('video').play(); 
}, false);

27、解釋GET/POST的區(qū)別

答:

GET請(qǐng)求，請(qǐng)求的數(shù)據(jù)會(huì)附加在URL之后，以?分割URL和傳輸數(shù)據(jù)，多個(gè)參數(shù)用&連接。URL的編碼格式采用的是ASCII編碼，而不是uniclde，即是說所有的非ASCII字符都要編碼之后再傳輸。

POST請(qǐng)求：POST請(qǐng)求會(huì)把請(qǐng)求的數(shù)據(jù)放置在HTTP請(qǐng)求包的包體中。

因此，GET請(qǐng)求的數(shù)據(jù)會(huì)暴露在地址欄中，而POST請(qǐng)求則不會(huì)。

關(guān)于傳輸數(shù)據(jù)的大小

在HTTP規(guī)范中，沒有對(duì)URL的長(zhǎng)度和傳輸?shù)臄?shù)據(jù)大小進(jìn)行限制。但是在實(shí)際開發(fā)過程中，對(duì)于GET，特定的瀏覽器和服務(wù)器對(duì)URL的長(zhǎng)度有限制。因此，在使用GET請(qǐng)求時(shí)，傳輸數(shù)據(jù)會(huì)受到URL長(zhǎng)度的限制。

對(duì)于POST，由于不是URL傳值，理論上是不會(huì)受限制的，但是實(shí)際上各個(gè)服務(wù)器會(huì)規(guī)定對(duì)POST提交數(shù)據(jù)大小進(jìn)行限制，Apache、IIS都有各自的配置。

關(guān)于安全性

Get是Form的默認(rèn)方法，安全性相對(duì)比較低

28、描述一下cookies，sessionStorage和localStorage的區(qū)別

答:

sessionStorage和localStorage是HTML5 Web Storage API 提供的，可以方便的在web請(qǐng)求之間保存數(shù)據(jù)。有了本地?cái)?shù)據(jù)，就可以避免數(shù)據(jù)在瀏覽器和服務(wù)器間不必要地來回傳遞。

sessionStorage、localStorage、cookie都是在瀏覽器端存儲(chǔ)的數(shù)據(jù)，其中 sessionStorage的概念很特別，引入了一個(gè)“瀏覽器窗口”的概念。sessionStorage 是在同源的同窗口（或tab）中，始終存在的數(shù)據(jù)。也就是說只要這個(gè)瀏覽器窗口沒有關(guān)閉，即使刷新頁面或進(jìn)入同源另一頁面，數(shù)據(jù)仍然存在。關(guān)閉窗口后，sessionStorage即被銷毀。同時(shí)“獨(dú)立”打開的不同窗口，即使是同一頁面， sessionStorage對(duì)象也是不同的。cookies會(huì)發(fā)送到服務(wù)器端。其余兩個(gè)不會(huì)。

Microsoft指出Internet Explorer 8增加cookie限制為每個(gè)域名50個(gè)，但I(xiàn)E7似乎也允許每個(gè)域名50個(gè)cookie。Firefox每個(gè)域名cookie限制為50個(gè)。Opera每個(gè)域名cookie限制為30個(gè)。Firefox和Safari允許cookie多達(dá)4097個(gè)字節(jié)，包括名name）、值（value）和等號(hào)。Opera許cookie多達(dá)4096個(gè)字節(jié)，包括：名（name）、值（value）和等號(hào)。Internet Explorer允許cookie多達(dá)4095 個(gè)字節(jié)，包括：名（name）、值（value）和等號(hào)。

區(qū)別：

Cookie:

• 每個(gè)域名存儲(chǔ)量比較小（各瀏覽器不同，大致 4K ）

• 所有域名的存儲(chǔ)量有限制（各瀏覽器不同，大致 4K ）

• 有個(gè)數(shù)限制（各瀏覽器不同）

• 會(huì)隨請(qǐng)求發(fā)送到服務(wù)器
  

LocalStorage:

• 永久存儲(chǔ)

• 單個(gè)域名存儲(chǔ)量比較大（推薦 5MB ，各瀏覽器不同）

• 總體數(shù)量無限制
  

SessionStorage:

• 只在Session內(nèi)有效

• 存儲(chǔ)量更大（推薦沒有限制，但是實(shí)際上各瀏覽器也不同）

29、image和canvas在處理圖片的時(shí)候有什么區(qū)別？

答:

image是通過對(duì)象的形式描述圖片的。

canvas通過專門的API將圖片繪制在畫布上。

30、響應(yīng)式布局的時(shí)候，輪播圖使用兩張不同的圖片去適配大屏幕和超小屏幕，還是一張圖片進(jìn)行壓縮適配不同終端，說明原因？

答:

最好使用兩張不同大小的圖片去適配大屏幕和超小屏幕，這樣可以針對(duì)不同設(shè)備的屏幕大小，來加載響應(yīng)的圖片，減少超小屏幕設(shè)備的網(wǎng)絡(luò)流量消耗，加快響應(yīng)速度，同時(shí)防止圖片在大屏幕下分辨率不夠?qū)е率д娴膯栴}。

關(guān)于前端的面試題都有哪些就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。