整理一些最近經常遇到的前端面試題

2019-11-19 16:44:50

字體：大中小

來源：轉載

供稿：網友

前言

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

1、標簽屬性中title和alt的區別

答:

title是設置鼠標移動到圖片上時顯示的內容，而alt是用于當圖片沒有正常顯示時出現的提示文字，另外alt還用于在seo中針對圖片的優化說明.

2、隱藏元素的幾種方法

答:

1.display:none;

2.visibility:hidden;

3.opacity:0;

4.position:absolute;

left:-10000px;

3、JavaScript中有哪幾種數據類型

答:

JavaScript中有5種簡單數據類型（也稱為基本數據類型）:Undefined、Null、Boolean、Number和String。還有1種復雜數據類型――Object，Object本質上是由一組無序的名值對組成的

4、回答以下輸出的類型

答:

alert(typeof(null));//objectalert(typeof(NaN));//numberalert(typeof(undefined));//undefinedalert(typeof(“undefined”));//stringalert(NaN == undefined);//falsealert(NaN == NaN);//false

5、用jquery和原生js獲取元素中的內容

答:

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

6、用原生js封裝一個添加監聽事件的兼容寫法

答:

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

7、對跨域的理解和解決辦法

答:

跨域簡單的理解即為當前服務器目錄下的前端需求要請求非本服務器(本域名)下的后臺服務就稱為跨域請求?？缬蛘埱笪覀兪褂闷胀ǖ腶jax請求是無法進行的同源策略，一般來說位于 server1.example.com 的網頁無法與不是 server2.example.com的服務器溝通，或者說如果在server1.example.com下想獲取server2.example.com的話就得用跨域請求。

跨域的解決方法及解決：通過script標簽請求，或者通過jQuery跨域

8、Ajax的原理

答:

Ajax的原理簡單來說通過XmlHttpRequest對象來向服務器發異步請求，從服務器獲得數據，然后用javascript來操作DOM而更新頁面。

XMLHttpRequest是ajax的核心機制，它是在IE5中首先引入的，是一種支持異步請求的技術。簡單的說，也就是javascript可以及時向服務器提出請求和處理響應，而不阻塞用戶。達到無刷新的效果。

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

答:

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

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

答:

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

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

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

答:

原生:

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、如何實現一個EventEmitter

答:

主要分三步：定義一個子類，調用構造函數，繼承EventEmitter

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

13、如何通過stream實現一個文件的復制

答:

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

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

答:

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

15、使用node構建一個服務器并對向”/post”發起的post請求進行處理，要求拿到post請求傳輸的數據（不包括文件上傳）

答:

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模擬客戶端發起請求

答:

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("請求結束");//結束本次請求

17、圖片預加載的意義和原理

答:

預加載圖片是提高用戶體驗的一個很好方法。圖片預先加載到瀏覽器中，這對圖片畫廊及圖片占據很大比例的網站來說十分有利，它保證了圖片快速、無縫地發布，也可幫助用戶在瀏覽網站內容時獲得更好的用戶體驗。

實例代碼：

//obj.imgArr 圖片數組//obj.loadingProgress 加載進度//obj.loadingOver 加載結果(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、瀏覽器頁面有哪三層構成，分別是什么，作用是什么?

答:

瀏覽器頁面構成：結構層、表示層、行為層

分別是：HTML、CSS、JavaScript

作用：HTML實現頁面結構，CSS完成頁面的表現與風格，JavaScript實現一些客戶端的功能與業務。

19、什么是語義化的HTML?

答:

直觀的認識標簽，對于搜索引擎的抓取有好處，用正確的標簽做正確的事情！

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

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

答:

水平居中設置:

1.行內元素

設置 text-align:center；

2.Flex布局

設置display:flex;justify-content:center; (靈活運用,支持Chroime，Firefox，IE9+)

垂直居中設置：

1.父元素高度確定的單行文本（內聯元素）

設置 height = line-height；

2.父元素高度確定的多行文本（內聯元素）

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

b:先設置 display:table-cell 再設置 vertical-align:middle；

塊級元素居中方案

水平居中設置：

1.定寬塊狀元素

設置左右 margin 值為 auto；

2.不定寬塊狀元素

a:在元素外加入 table 標簽（完整的，包括 table、tbody、tr、td），該元素寫在 td 內，然后設置 margin 的值為 auto；

b:給該元素設置 displa:inine 方法；

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

垂直居中設置：

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

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

利用display:table-cell屬性使內容垂直居中;

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

使用:before元素;

21、CSS3有哪些新特性？

答:

CSS3實現圓角（border-radius: 8px），陰影（box-shadow: 10px），

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

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

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

22、事件委托是什么？

答:

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

23、什么叫優雅降級和漸進增強？

答:

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

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

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

答:

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

原型鏈是由一些用來繼承和共享屬性的對象組成的（有限的）對象鏈。

25、如何阻止事件冒泡和默認事件

答:

阻止冒泡:

現代瀏覽器:e.stopPropagation

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

阻止默認事件:

現代瀏覽器:e.preventDefult()

低版本瀏覽器:return false

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

答:

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

27、解釋GET/POST的區別

答:

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

POST請求：POST請求會把請求的數據放置在HTTP請求包的包體中。

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

關于傳輸數據的大小

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

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

關于安全性

Get是Form的默認方法，安全性相對比較低

28、描述一下cookies，sessionStorage和localStorage的區別

答:

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

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

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

區別：

Cookie: