整理一些最近經(jīng)常遇到的前端面試題

2024-05-06 16:36:46

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

前言

本文主要整理了一些最近遇到的前端面試題，方便大家在面試前有所準(zhǔn)備，文中給出了詳細(xì)的解答，下面話不多說了，來看看詳細(xì)的介紹吧。

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

答:

title是設(shè)置鼠標(biāo)移動到圖片上時顯示的內(nèi)容，而alt是用于當(dāng)圖片沒有正常顯示時出現(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));//objectalert(typeof(NaN));//numberalert(typeof(undefined));//undefinedalert(typeof(“undefined”));//stringalert(NaN == undefined);//falsealert(NaN == NaN);//false

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

答:

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

6、用原生js封裝一個添加監(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ù)就稱為跨域請求。跨域請求我們使用普通的ajax請求是無法進行的同源策略，一般來說位于 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的核心機制，它是在IE5中首先引入的，是一種支持異步請求的技術(shù)。簡單的說，也就是javascript可以及時向服務(wù)器提出請求和處理響應(yīng)，而不阻塞用戶。達(dá)到無刷新的效果。

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

答:

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

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

答:

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

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

11、用原生js封裝一個能獲取元素到頁面最上方和最左側(cè)的函數(shù)，再用JQ封裝一個同樣的函數(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、如何實現(xiàn)一個EventEmitter

答:

主要分三步：定義一個子類，調(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實現(xiàn)一個文件的復(fù)制

答:

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

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

答:

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

15、使用node構(gòu)建一個服務(wù)器并對向”/post”發(fā)起的post請求進行處理，要求拿到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ù)先加載到瀏覽器中，這對圖片畫廊及圖片占據(jù)很大比例的網(wǎng)站來說十分有利，它保證了圖片快速、無縫地發(fā)布，也可幫助用戶在瀏覽網(wǎng)站內(nèi)容時獲得更好的用戶體驗。

實例代碼：

//obj.imgArr 圖片數(shù)組//obj.loadingProgress 加載進度//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實現(xiàn)頁面結(jié)構(gòu)，CSS完成頁面的表現(xiàn)與風(fēng)格，JavaScript實現(xiàn)一些客戶端的功能與業(yè)務(wù)。

19、什么是語義化的HTML?

答:

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

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

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

答:

水平居中設(shè)置:

1.行內(nèi)元素

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

2.Flex布局

設(shè)置display:flex;justify-content:center; (靈活運用,支持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這個必須不要忘記了;

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

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

使用:before元素;

21、CSS3有哪些新特性？

答:

CSS3實現(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)雅降級和漸進增強？

答:

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

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

24、JavaScript原型，原型鏈都是什么? 有什么特點？

答:

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

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

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

答:

阻止冒泡:

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

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

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

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

低版本瀏覽器:return false

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

答:

//一般情況下，這樣就可以自動播放了，但是一些奇葩iPhone機不可以 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ù)，多個參數(shù)用&連接。URL的編碼格式采用的是ASCII編碼，而不是uniclde，即是說所有的非ASCII字符都要編碼之后再傳輸。

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

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

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

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

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

關(guān)于安全性

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

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

答:

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

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

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

區(qū)別：

Cookie: