前端的面試題都有哪些
這篇文章給大家介紹前端的面試題都有哪些，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
成都創(chuàng)新互聯(lián)公司專注于桂平企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計(jì),商城網(wǎng)站制作。桂平網(wǎng)站建設(shè)公司,為桂平等地區(qū)提供建站服務(wù)。全流程按需規(guī)劃網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)
1、標(biāo)簽屬性中title和alt的區(qū)別
答:
title是設(shè)置鼠標(biāo)移動(dòng)到圖片上時(shí)顯示的內(nèi)容，而alt是用于當(dāng)圖片沒有正常顯示時(shí)出現(xiàn)的提示文字，另外alt還用于在seo中針對圖片的優(yōu)化說明.
2、隱藏元素的幾種方法
答:
1.display:none;
2.visibility:hidden;
3.opacity:0;
4.position:absolute;
left:-10000px;
3、JavaScript中有哪幾種數(shù)據(jù)類型
答:
JavaScript中有5種簡單數(shù)據(jù)類型（也稱為基本數(shù)據(jù)類型）:Undefined、Null、Boolean、Number和String。還有1種復(fù)雜數(shù)據(jù)類型——Object，Object本質(zhì)上是由一組無序的名值對組成的
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、對跨域的理解和解決辦法
答:
跨域簡單的理解即為當(dāng)前服務(wù)器目錄下的前端需求要請求非本服務(wù)器(本域名)下的后臺服務(wù)就稱為跨域請求?？缬蛘埱笪覀兪褂闷胀ǖ腶jax請求是無法進(jìn)行的同源策略，一般來說位于 server1.example.com 的網(wǎng)頁無法與不是 server2.example.com的服務(wù)器溝通，或者說如果在server1.example.com下想獲取server2.example.com的話就得用跨域請求。
跨域的解決方法及解決：通過script標(biāo)簽請求，或者通過jQuery跨域
8、Ajax的原理
答:
Ajax的原理簡單來說通過XmlHttpRequest對象來向服務(wù)器發(fā)異步請求，從服務(wù)器獲得數(shù)據(jù)，然后用javascript來操作DOM而更新頁面。
XMLHttpRequest是ajax的核心機(jī)制，它是在IE5中首先引入的，是一種支持異步請求的技術(shù)。簡單的說，也就是javascript可以及時(shí)向服務(wù)器提出請求和處理響應(yīng)，而不阻塞用戶。達(dá)到無刷新的效果。
9、jQuery庫中的$()是什么
答:
$()函數(shù)用于將任何對象包裹成jQuery對象，接著你就被允許調(diào)用定義在 jQuery對象上的多個(gè)不同方法。你甚至可以將一個(gè)選擇器字符串傳入$()函數(shù)，它會返回一個(gè)包含所有匹配的DOM元素?cái)?shù)組的jQuery對象。
10、JavaScript的window.onload事件和jQuery的ready函數(shù)有何不同
答:
JavaScript的window.onload事件和jQuery的ready函數(shù)之間的主要區(qū)別是，前者除了要等待DOM被創(chuàng)建還要等到包括大型圖片、音頻、視頻在內(nèi)的所有外部資源都完全加載。如果加載圖片和媒體內(nèi)容花費(fèi)了大量時(shí)間，用戶就會感受到定義在window.onload 事件上的代碼在執(zhí)行時(shí)有明顯的延遲。
另一方面，jQuery的ready()函數(shù)只需對DOM樹的等待，而無需對圖像或外部資源加載的等待，從而執(zhí)行起來更快。使用jQuery $(document).ready()的另一個(gè)優(yōu)勢是你可以在網(wǎng)頁里多次使用它，瀏覽器會按它們在HTML頁面里出現(xiàn)的順序執(zhí)行它們，相反對于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);
}); // 接收事件，并打印到控制臺
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ù)器并對向”/post”發(fā)起的post請求進(jìn)行處理，要求拿到post請求傳輸?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("你請求的地址是"+urlObj.pathname);
}
});
server.listen(8080);16、用node模擬客戶端發(fā)起請求
答:
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("請求結(jié)束");//結(jié)束本次請求17、圖片預(yù)加載的意義和原理
答:
預(yù)加載圖片是提高用戶體驗(yàn)的一個(gè)很好方法。圖片預(yù)先加載到瀏覽器中，這對圖片畫廊及圖片占據(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)識標(biāo)簽，對于搜索引擎的抓取有好處，用正確的標(biāo)簽做正確的事情！
html語義化就是讓頁面的內(nèi)容結(jié)構(gòu)化，便于對瀏覽器、搜索引擎解析，在沒有樣式CCS情況下也以一種文檔格式顯示，并且是容易閱讀的。搜索引擎的爬蟲依賴于標(biāo)記來確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于SEO。使閱讀源代碼的人對網(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；
塊級元素居中方案
水平居中設(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），
對文字加特效（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ìn)增強(qiáng)？
答:
優(yōu)雅降級:Web站點(diǎn)在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認(rèn)它們是否能正常工作。由于IE獨(dú)特的盒模型布局問題，針對不同版本的IE的hack實(shí)踐過優(yōu)雅降級了,為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗(yàn)卻不至于完全失效。
漸進(jìn)增強(qiáng)：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎(chǔ)瀏覽器的額外樣式和功能的。當(dāng)瀏覽器支持時(shí)，它們會自動(dòng)地呈現(xiàn)出來并發(fā)揮作用。
24、JavaScript原型，原型鏈都是什么? 有什么特點(diǎn)？
答:
原型對象也是普通的對象，是對象一個(gè)自帶隱式的 proto屬性，原型也有可能有自己的原型，如果一個(gè)原型對象的原型不為null的話，我們就稱之為原型鏈。
原型鏈?zhǔn)怯梢恍┯脕砝^承和共享屬性的對象組成的（有限的）對象鏈。
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請求，請求的數(shù)據(jù)會附加在URL之后，以?分割URL和傳輸數(shù)據(jù)，多個(gè)參數(shù)用&連接。URL的編碼格式采用的是ASCII編碼，而不是uniclde，即是說所有的非ASCII字符都要編碼之后再傳輸。
POST請求：POST請求會把請求的數(shù)據(jù)放置在HTTP請求包的包體中。
因此，GET請求的數(shù)據(jù)會暴露在地址欄中，而POST請求則不會。
關(guān)于傳輸數(shù)據(jù)的大小
在HTTP規(guī)范中，沒有對URL的長度和傳輸?shù)臄?shù)據(jù)大小進(jìn)行限制。但是在實(shí)際開發(fā)過程中，對于GET，特定的瀏覽器和服務(wù)器對URL的長度有限制。因此，在使用GET請求時(shí)，傳輸數(shù)據(jù)會受到URL長度的限制。
對于POST，由于不是URL傳值，理論上是不會受限制的，但是實(shí)際上各個(gè)服務(wù)器會規(guī)定對POST提交數(shù)據(jù)大小進(jìn)行限制，Apache、IIS都有各自的配置。
關(guān)于安全性
Get是Form的默認(rèn)方法，安全性相對比較低
28、描述一下cookies，sessionStorage和localStorage的區(qū)別
答:
sessionStorage和localStorage是HTML5 Web Storage API 提供的，可以方便的在web請求之間保存數(shù)據(jù)。有了本地?cái)?shù)據(jù)，就可以避免數(shù)據(jù)在瀏覽器和服務(wù)器間不必要地來回傳遞。
sessionStorage、localStorage、cookie都是在瀏覽器端存儲的數(shù)據(jù)，其中 sessionStorage的概念很特別，引入了一個(gè)“瀏覽器窗口”的概念。sessionStorage 是在同源的同窗口（或tab）中，始終存在的數(shù)據(jù)。也就是說只要這個(gè)瀏覽器窗口沒有關(guān)閉，即使刷新頁面或進(jìn)入同源另一頁面，數(shù)據(jù)仍然存在。關(guān)閉窗口后，sessionStorage即被銷毀。同時(shí)“獨(dú)立”打開的不同窗口，即使是同一頁面， sessionStorage對象也是不同的。cookies會發(fā)送到服務(wù)器端。其余兩個(gè)不會。
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）和等號。Opera許cookie多達(dá)4096個(gè)字節(jié)，包括：名（name）、值（value）和等號。Internet Explorer允許cookie多達(dá)4095 個(gè)字節(jié)，包括：名（name）、值（value）和等號。
區(qū)別：
Cookie:
每個(gè)域名存儲量比較?。ǜ鳛g覽器不同，大致 4K ）
所有域名的存儲量有限制（各瀏覽器不同，大致 4K ）
有個(gè)數(shù)限制（各瀏覽器不同）
會隨請求發(fā)送到服務(wù)器
LocalStorage:
永久存儲
單個(gè)域名存儲量比較大（推薦 5MB ，各瀏覽器不同）
總體數(shù)量無限制
SessionStorage:
只在Session內(nèi)有效
存儲量更大（推薦沒有限制，但是實(shí)際上各瀏覽器也不同）
29、image和canvas在處理圖片的時(shí)候有什么區(qū)別？
答:
image是通過對象的形式描述圖片的。
canvas通過專門的API將圖片繪制在畫布上。
30、響應(yīng)式布局的時(shí)候，輪播圖使用兩張不同的圖片去適配大屏幕和超小屏幕，還是一張圖片進(jìn)行壓縮適配不同終端，說明原因？
答:
最好使用兩張不同大小的圖片去適配大屏幕和超小屏幕，這樣可以針對不同設(shè)備的屏幕大小，來加載響應(yīng)的圖片，減少超小屏幕設(shè)備的網(wǎng)絡(luò)流量消耗，加快響應(yīng)速度，同時(shí)防止圖片在大屏幕下分辨率不夠?qū)е率д娴膯栴}。
關(guān)于前端的面試題都有哪些就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
分享名稱：前端的面試題都有哪些
瀏覽路徑：http://m.jiaotiyi.com/article/joeeej.html