前言

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

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

答:

title是設置鼠標移動到圖片上時顯示的內(nèi)容，而alt是用于當圖片沒有正常顯示時出現(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種復雜數(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封裝一個添加監(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、對跨域的理解和解決辦法

答:

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

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

8、Ajax的原理

答:

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

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

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ù)里使用。鑒于這個好處，用jQuery的ready()函數(shù)比用JavaScript的window.onload 事件要更好些。

11、用原生js封裝一個能獲取元素到頁面最上方和最左側的函數(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)用構造函數(shù)，繼承EventEmitter

var util = require('util');
var EventEmitter = require('events');
function MyEmitter() {
 EventEmitter.call(this);
} // 構造函數(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)一個文件的復制

答:

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

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

答:

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

15、使用node構建一個服務器并對向”/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("請求結束");//結束本次請求

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

答:

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

實例代碼：

//obj.imgArr 圖片數(shù)組
//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實現(xiàn)頁面結構，CSS完成頁面的表現(xiàn)與風格，JavaScript實現(xiàn)一些客戶端的功能與業(yè)務。

19、什么是語義化的HTML?

答:

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

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

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

答:

水平居中設置:

1.行內(nèi)元素

設置 text-align:center；

2.Flex布局

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

垂直居中設置：

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

設置 height = line-height；

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

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

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

塊級元素居中方案

水平居中設置：

1.定寬塊狀元素

設置 左右 margin 值為 auto；

2.不定寬塊狀元素

a:在元素外加入 table 標簽（完整的，包括 table、tbody、tr、td），該元素寫在 td 內(nèi)，然后設置 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屬性使內(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);//旋轉,縮放,定位,傾斜

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

22、事件委托是什么？

答:

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

23、什么叫優(yōu)雅降級和漸進增強？

答:

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

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

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

答:

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

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

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

答:

阻止冒泡:

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

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

阻止默認事件:

現(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請求則不會。

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

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

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

關于安全性

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

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

答:

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

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

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

區(qū)別：

Cookie:

• 每個域名存儲量比較?。ǜ鳛g覽器不同，大致 4K ）
• 所有域名的存儲量有限制（各瀏覽器不同，大致 4K ）
• 有個數(shù)限制（各瀏覽器不同）
• 會隨請求發(fā)送到服務器
  

LocalStorage:

• 永久存儲
• 單個域名存儲量比較大（推薦 5MB ，各瀏覽器不同）
• 總體數(shù)量無限制
  

SessionStorage:

• 只在Session內(nèi)有效
• 存儲量更大（推薦沒有限制，但是實際上各瀏覽器也不同）

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

答:

image是通過對象的形式描述圖片的。

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

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

答:

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

總結

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

最新評論