個(gè)人博客搭建完成芜抒，歡迎大家來(lái)訪問(wèn)哦
黎默丶lymoo的博客
個(gè)人整理的一些最近碰到的一些較為有用的前端題目
標(biāo)簽屬性中title和alt的區(qū)別
答:title是設(shè)置鼠標(biāo)移動(dòng)到圖片上時(shí)顯示的內(nèi)容，而alt是用于當(dāng)圖片沒(méi)有正常顯示時(shí)出現(xiàn)的提示文字，另外alt還用于在seo中針對(duì)圖片的優(yōu)化說(shuō)明.
隱藏元素的幾種方法
答: 1.display:none;
2.visibility:hidden;
3.opacity:0;
4.position:absolute;
left:-10000px;
JavaScript中有哪幾種數(shù)據(jù)類型
答:JavaScript中有5種簡(jiǎn)單數(shù)據(jù)類型（也稱為基本數(shù)據(jù)類型）:Undefined、Null、Boolean、Number和String。還有1種復(fù)雜數(shù)據(jù)類型——Object中跌，Object本質(zhì)上是由一組無(wú)序的名值對(duì)組成的
回答以下輸出的類型
答:alert(typeof(null));//object
alert(typeof(NaN));//number
alert(typeof(undefined));//undefined
alert(typeof("undefined"));//string
alert(NaN == undefined);//false
alert(NaN == NaN);//false
用jquery和原生js獲取元素中的內(nèi)容
答:JS:document.getElementById(“div1”).innerHTML;
document.querySelector(“#div1”).innerText;
JQ:$(“#div1”).html()
用原生js封裝一個(gè)添加監(jiān)聽(tīng)事件的兼容寫法
答:
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);
}
}
對(duì)跨域的理解和解決辦法
答:跨域簡(jiǎn)單的理解即為當(dāng)前服務(wù)器目錄下的前端需求要請(qǐng)求非本服務(wù)器(本域名)下的后臺(tái)服務(wù)就稱為跨域請(qǐng)求」酱郏跨域請(qǐng)求我們使用普通的ajax請(qǐng)求是無(wú)法進(jìn)行的同源策略漩符，一般來(lái)說(shuō)位于 server1.example.com 的網(wǎng)頁(yè)無(wú)法與不是 server2.example.com的服務(wù)器溝通，或者說(shuō)如果在server1.example.com下想獲取server2.example.com的話就得用跨域請(qǐng)求驱还。
跨域的解決方法及解決：通過(guò)script標(biāo)簽請(qǐng)求嗜暴，或者通過(guò)jQuery跨域
Ajax的原理
答:Ajax的原理簡(jiǎn)單來(lái)說(shuō)通過(guò)XmlHttpRequest對(duì)象來(lái)向服務(wù)器發(fā)異步請(qǐng)求，從服務(wù)器獲得數(shù)據(jù)议蟆，然后用javascript來(lái)操作DOM而更新頁(yè)面闷沥。
XMLHttpRequest是ajax的核心機(jī)制，它是在IE5中首先引入的咪鲜，是一種支持異步請(qǐng)求的技術(shù)。簡(jiǎn)單的說(shuō)撞鹉，也就是javascript可以及時(shí)向服務(wù)器提出請(qǐng)求和處理響應(yīng)疟丙，而不阻塞用戶颖侄。達(dá)到無(wú)刷新的效果。
jQuery庫(kù)中的$()是什么
答:$()函數(shù)用于將任何對(duì)象包裹成jQuery對(duì)象享郊，接著你就被允許調(diào)用定義在 jQuery對(duì)象上的多個(gè)不同方法览祖。你甚至可以將一個(gè)選擇器字符串傳入$()函數(shù)，它會(huì)返回一個(gè)包含所有匹配的DOM元素?cái)?shù)組的jQuery對(duì)象炊琉。
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樹(shù)的等待，而無(wú)需對(duì)圖像或外部資源加載的等待舔清，從而執(zhí)行起來(lái)更快丝里。使用jQuery $(document).ready()的另一個(gè)優(yōu)勢(shì)是你可以在網(wǎng)頁(yè)里多次使用它，瀏覽器會(huì)按它們?cè)贖TML頁(yè)面里出現(xiàn)的順序執(zhí)行它們体谒，相反對(duì)于onload技術(shù)而言杯聚，只能在單一函數(shù)里使用。鑒于這個(gè)好處抒痒，用jQuery的ready()函數(shù)比用JavaScript的window.onload 事件要更好些幌绍。
用原生js封裝一個(gè)能獲取元素到頁(yè)面最上方和最左側(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
如何實(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傳遞消息真方便!');
如何通過(guò)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);
如何理解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ù)的排列順序是不一致的、異步的耍攘。
使用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);
用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)求
圖片預(yù)加載的意義和原理
答:預(yù)加載圖片是提高用戶體驗(yàn)的一個(gè)很好方法畔勤。圖片預(yù)先加載到瀏覽器中，這對(duì)圖片畫廊及圖片占據(jù)很大比例的網(wǎng)站來(lái)說(shuō)十分有利扒磁，它保證了圖片快速庆揪、無(wú)縫地發(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);
}
瀏覽器頁(yè)面有哪三層構(gòu)成缸榛，分別是什么，作用是什么?
答:瀏覽器頁(yè)面構(gòu)成：結(jié)構(gòu)層兰伤、表示層内颗、行為層
分別是：HTML、CSS医清、JavaScript
作用：HTML實(shí)現(xiàn)頁(yè)面結(jié)構(gòu)起暮，CSS完成頁(yè)面的表現(xiàn)與風(fēng)格，JavaScript實(shí)現(xiàn)一些客戶端的功能與業(yè)務(wù)会烙。
什么是語(yǔ)義化的HTML?
答:直觀的認(rèn)識(shí)標(biāo)簽负懦，對(duì)于搜索引擎的抓取有好處，用正確的標(biāo)簽做正確的事情柏腻！
html語(yǔ)義化就是讓頁(yè)面的內(nèi)容結(jié)構(gòu)化纸厉，便于對(duì)瀏覽器、搜索引擎解析五嫂，在沒(méi)有樣式CCS情況下也以一種文檔格式顯示颗品，并且是容易閱讀的。搜索引擎的爬蟲依賴于標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重沃缘，利于SEO躯枢。使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解槐臀。
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元素;
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等
事件委托是什么祠够？
答:利用事件冒泡的原理压汪，使自己的所觸發(fā)的事件，讓它的父元素代替執(zhí)行古瓤！
什么叫優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)止剖？
答:優(yōu)雅降級(jí):Web站點(diǎn)在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器落君，則代碼會(huì)檢查以確認(rèn)它們是否能正常工作穿香。由于IE獨(dú)特的盒模型布局問(wèn)題，針對(duì)不同版本的IE的hack實(shí)踐過(guò)優(yōu)雅降級(jí)了,為那些無(wú)法支持功能的瀏覽器增加候選方案绎速，使之在舊式瀏覽器上以某種形式降級(jí)體驗(yàn)卻不至于完全失效皮获。
漸進(jìn)增強(qiáng)：從被所有瀏覽器支持的基本功能開(kāi)始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁(yè)面增加無(wú)害于基礎(chǔ)瀏覽器的額外樣式和功能的朝氓。當(dāng)瀏覽器支持時(shí)魔市，它們會(huì)自動(dòng)地呈現(xiàn)出來(lái)并發(fā)揮作用。
JavaScript原型赵哲，原型鏈都是什么? 有什么特點(diǎn)待德？
答:原型對(duì)象也是普通的對(duì)象，是對(duì)象一個(gè)自帶隱式的 proto屬性枫夺，原型也有可能有自己的原型将宪，如果一個(gè)原型對(duì)象的原型不為null的話，我們就稱之為原型鏈。
原型鏈?zhǔn)怯梢恍┯脕?lái)繼承和共享屬性的對(duì)象組成的（有限的）對(duì)象鏈较坛。
如何阻止事件冒泡和默認(rèn)事件
答:阻止冒泡:
現(xiàn)代瀏覽器:e.stopPropagation
低版本瀏覽器:e.cancelBubble=true
阻止默認(rèn)事件:
現(xiàn)代瀏覽器:e.preventDefult()
低版本瀏覽器:return false
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);
解釋GET/POST的區(qū)別
答:GET請(qǐng)求丑勤，請(qǐng)求的數(shù)據(jù)會(huì)附加在URL之后华嘹，以?分割URL和傳輸數(shù)據(jù)，多個(gè)參數(shù)用&連接法竞。URL的編碼格式采用的是ASCII編碼耙厚，而不是uniclde，即是說(shuō)所有的非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ī)范中，沒(méi)有對(duì)URL的長(zhǎng)度和傳輸?shù)臄?shù)據(jù)大小進(jìn)行限制絮爷。但是在實(shí)際開(kāi)發(fā)過(guò)程中趴酣，對(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ì)比較低
描述一下cookies，sessionStorage和localStorage的區(qū)別
答:sessionStorage和localStorage是HTML5 Web Storage API 提供的缆娃，可以方便的在web請(qǐng)求之間保存數(shù)據(jù)捷绒。有了本地?cái)?shù)據(jù)，就可以避免數(shù)據(jù)在瀏覽器和服務(wù)器間不必要地來(lái)回傳遞贯要。
sessionStorage暖侨、localStorage、cookie都是在瀏覽器端存儲(chǔ)的數(shù)據(jù)崇渗，其中 sessionStorage的概念很特別字逗，引入了一個(gè)“瀏覽器窗口”的概念京郑。sessionStorage 是在同源的同窗口（或tab）中，始終存在的數(shù)據(jù)葫掉。也就是說(shuō)只要這個(gè)瀏覽器窗口沒(méi)有關(guān)閉些举，即使刷新頁(yè)面或進(jìn)入同源另一頁(yè)面，數(shù)據(jù)仍然存在俭厚。關(guān)閉窗口后户魏，sessionStorage即被銷毀。同時(shí)“獨(dú)立”打開(kāi)的不同窗口挪挤，即使是同一頁(yè)面绪抛， 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ù)量無(wú)限制
SessionStorage:
只在Session內(nèi)有效
存儲(chǔ)量更大（推薦沒(méi)有限制，但是實(shí)際上各瀏覽器也不同）
image和canvas在處理圖片的時(shí)候有什么區(qū)別碎紊？
答:image是通過(guò)對(duì)象的形式描述圖片的佑附。
canvas通過(guò)專門的API將圖片繪制在畫布上。
響應(yīng)式布局的時(shí)候仗考，輪播圖使用兩張不同的圖片去適配大屏幕和超小屏幕音同，還是一張圖片進(jìn)行壓縮適配不同終端，說(shuō)明原因秃嗜？
答:最好使用兩張不同大小的圖片去適配大屏幕和超小屏幕瘟斜，這樣可以針對(duì)不同設(shè)備的屏幕大小缸夹，來(lái)加載響應(yīng)的圖片，減少超小屏幕設(shè)備的網(wǎng)絡(luò)流量消耗螺句，加快響應(yīng)速度虽惭，同時(shí)防止圖片在大屏幕下分辨率不夠?qū)е率д娴膯?wèn)題。
原文鏈接
