前端面試題集錦

時間  2019-11-17
標籤 端面 試題 集錦 简体版
原文   原文鏈接

來源：http://www.qdfuns.com/notes/23515/fa8b1e788ac39b04108fc33e5b543c4a.htmljavascript

整理了一些關於前端的面試題

HTML&CSS

1.請描述一下 cookie，sessionStorage 和 localStorage 的區別？
cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）。
cookie數據始終在同源的http請求中攜帶（即便不須要），也會在瀏覽器和服務器間來回傳遞。
sessionStorage 和 localStorage不會自動把數據發給服務器，僅在本地保存。
存儲大小：
cookie 數據大小不能超過4k 。
sessionStorage 和 localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。
有效期時長：
localStorage    存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；
sessionStorage  數據在當前瀏覽器窗口關閉後自動刪除。
cookie          設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉html


2.iframe有那些缺點？
iframe會阻塞主頁面的Onload事件；
搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO;
iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。
使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript動態給iframe添加src屬性值，這樣能夠繞開以上兩個問題。前端

優勢：局部刷新 不用每次請求就刷新整個頁面。java


3.如何實現瀏覽器內多個標籤頁之間的通訊?
WebSocket、SharedWorker
也能夠調用localstorge、cookies等本地存儲方式。
localstorge另外一個瀏覽上下文裏被添加、修改或刪除時，它都會觸發一個事件，咱們經過監聽事件，控制它的值來進行頁面信息通訊。
注意quirks：Safari 在無痕模式下設置localstorge值時會拋出 QuotaExceededError 的異常。面試


4.如何在頁面上實現一個圓形的可點擊區域？
（1）map+area或者svg
（2）border-radius
（3）純js實現 須要求一個點在不在圓上簡單算法、獲取鼠標座標等等ajax


5.介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不一樣的？
（1）有兩種： IE 盒子模型、W3C 盒子模型。
（2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)。
（3）區  別： IE的content部分把 border 和 padding計算了進去。算法


6.CSS優先級算法如何計算？
優先級就近原則，同權重狀況下樣式定義最近者爲準;
載入樣式以最後載入的定位爲準;
優先級爲:
!important >  id > class > tag
important比內聯優先級高(style)數據庫


7.爲何要使用CSS sprites（精靈）
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background-position」的組合進行背景定位，這樣能夠減小不少圖片請求的開銷，由於請求耗時比較長；請求雖然能夠併發，可是若是請求太多會給服務器增長很大的壓力。（性能優化）json


8.display:none 和 visibility:hidden的區別？
display:none  隱藏對應的元素，在文檔佈局中再也不給它分配空間，它各邊的元素會合攏，就當他歷來不存在 ，不佔位。
visibility:hidden  隱藏對應的元素，可是在文檔佈局中仍保留原來的空間，佔位。跨域


9.position的absolute與fixed區別
absolute 浮動定位是相對於父級中設置position爲relative或者absolute最近的父級元素（往上找不到父集的relation 就以html定位）。
fixed浮動定位是相對於瀏覽器視窗的。


10.IE 8如下版本的瀏覽器中的盒模型有什麼不一樣？
IE8如下瀏覽器的盒模型中定義的元素的寬高不包括內邊距和邊框

 


JavaScript

1.JS數組去重
如下是展現三種方法：

 
Array.prototype.unique1 = function () {
   var n = []; //一個新的臨時數組
   for (var i = 0; i < this.length; i++) //遍歷當前數組
   {
     //如果當前數組的第i已經保存進了臨時數組，那麼跳過，
     //否則把當前項push到臨時數組裏面
     if (n.indexOf(this[i]) == -1) n.push(this[i]);
   }
   return n;
}
 
Array.prototype.unique2 = function()
{
     var n = {},r=[]; //n爲hash表，r爲臨時數組
     for(var i = 0; i < this.length; i++) //遍歷當前數組
     {
        if (!n[this[i]]) //如果hash表中沒有當前項
        {
            n[this[i]] = true; //存入hash表
            r.push(this[i]); //把當前數組的當前項push到臨時數組裏面
        }
     }
     return r;
}
 
Array.prototype.unique3 = function()
{
     var n = [this[0]]; //結果數組
     for(var i = 1; i < this.length; i++) //從第二項開始遍歷
     {
        //如果當前數組的第i項在當前數組中第一次出現的位置不是i，
        //那麼表示第i項是重復的，忽略掉。否則存入結果數組
        if (this.indexOf(this[i]) == i) n.push(this[i]);
 
 


2.js操做獲取和設置cookie

//創建cookie
function setCookie(name, value, expires, path, domain, secure) {
     var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
     if (expires instanceof Date) {
        cookieText += '; expires=' + expires;
     }
     if (path) {
        cookieText += '; expires=' + expires;
     }
     if (domain) {
        cookieText += '; domain=' + domain;
     }
     if (secure) {
        cookieText += '; secure';
     }
     document.cookie = cookieText;
}
 
//獲取cookie
function getCookie(name) {
     var cookieName = encodeURIComponent(name) + '=';
     var cookieStart = document.cookie.indexOf(cookieName);
     var cookieValue = null;
     if (cookieStart > -1) {
        var cookieEnd = document.cookie.indexOf(';', cookieStart);
        if (cookieEnd == -1) {
            cookieEnd = document.cookie.length;
        }
        cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
     }
     return cookieValue;
}
 

3.ajax 有那些優缺點?如何解決跨域問題?
（Q1）
優勢：
（1）經過異步模式，提高了用戶體驗.
（2）優化了瀏覽器和服務器之間的傳輸，減小沒必要要的數據往返，減小了帶寬佔用.
（3）Ajax在客戶端運行，承擔了一部分原本由服務器承擔的工做，減小了大用戶量下的服務器負載。
（4）Ajax能夠實現動態不刷新（局部刷新）
缺點：
（1）安全問題 AJAX暴露了與服務器交互的細節。
（2）對搜索引擎的支持比較弱。
（3）不容易調試。
（Q2）jsonp、 iframe、window.name、window.postMessage、服務器上設置代理頁面。


4.JavaScript原型，原型鏈 ? 有什麼特色？
（1）原型對象也是普通的對象，是對象一個自帶隱式的 __proto__ 屬性，原型也有可能有本身的原型，若是一個原型對象的原型不爲null的話，咱們就稱之爲原型鏈。
（2）原型鏈是由一些用來繼承和共享屬性的對象組成的（有限的）對象鏈。


5.GET和POST的區別，什麼時候使用POST？
GET：通常用於信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，通常在2000個字符
POST：通常用於修改服務器上的資源，對所發送的信息沒有限制。
GET方式須要使用Request.QueryString來取得變量的值，而POST方式經過Request.Form來獲取變量的值，
也就是說Get是經過地址欄來傳值，而Post是經過提交表單來傳值。
然而，在如下狀況中，請使用 POST 請求：
沒法使用緩存文件（更新服務器上的文件或數據庫）
向服務器發送大量數據（POST 沒有數據量限制）
發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠


6.請解釋一下 JavaScript 的同源策略
概念:同源策略是客戶端腳本（尤爲是Javascript）的重要的安全度量標準。它最先出自Netscape Navigator2.0，其目的是防止某個文檔或腳本從多個不一樣源裝載。
這裏的同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議。
指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。
爲何要有同源限制？
咱們舉例說明：好比一個黑客程序，他利用Iframe把真正的銀行登陸頁面嵌到他的頁面上，當你使用真實的用戶名，密碼登陸時，他的頁面就能夠經過Javascript讀取到你的表單中input中的內容，這樣用戶名，密碼就輕鬆到手了。


7.Flash、Ajax各自的優缺點，在使用中如何取捨？
Flash適合處理多媒體、矢量圖形、訪問機器；對CSS、處理文本上不足，不容易被搜索。
Ajax對CSS、文本支持很好，支持搜索；多媒體、矢量圖形、機器訪問不足。
共同點：與服務器的無刷新傳遞消息、用戶離線和在線狀態、操做DOM


8.什麼是閉包？
閉包，官方對閉包的解釋是：一個擁有許多變量和綁定了這些變量的環境的表達式（一般是一個函數），於是這些變量也是該表達式的一部分。閉包的特色：
（1）做爲一個函數變量的一個引用，當函數返回時，其處於激活狀態。
（2） 一個閉包就是當一個函數返回時，一個沒有釋放資源的棧區。
簡單的說，Javascript容許使用內部函數---即函數定義和函數表達式位於另外一個函數的函數體內。並且，這些內部函數能夠訪問它們所在的外部函數中聲明的全部局部變量、參數和聲明的其餘內部函數。當其中一個這樣的內部函數在包含它們的外部函數以外被調用時，就會造成閉包。


9.javascript裏面的繼承怎麼實現，如何避免原型鏈上面的對象共享
用構造函數和原型鏈的混合模式去實現繼承，避免對象共享能夠參考經典的extend()函數，不少前端框架都有封裝的，就是用一個空函數當作中間變量


10.ajax過程
(1)建立XMLHttpRequest對象,也就是建立一個異步調用對象.
(2)建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息.
(3)設置響應HTTP請求狀態變化的函數.
(4)發送HTTP請求.
(5)獲取異步調用返回的數據.
(6)使用JavaScript和DOM實現局部刷新.

 

jQuery四種事件綁定方式.bind(),.live(),.delegate(),on()的區別

我的理解：
事件委託指的就是目標自身不處理事件，委託給其父元素或祖先元素，甚至是根元素（document）
bind 的優勢和缺點

優勢：

  • 這個方法提供了一種在各類瀏覽器之間對事件處理的兼容性解決方案
  • 很是方便簡單的綁定事件到元素上
  • .click(), .hover()...這些很是方便的事件綁定，都是bind的一種簡化處理方式
  • 對於利用ID選出來的元素是很是好的，不只僅是很快的能夠hook上去(由於一個頁面只有一個id),並且當事件發生時，handler能夠當即被執行(相對於後面的live, delegate)實現方式

缺點：

  • 它會綁定事件到全部的選出來的元素上
  • 它不會綁定到在它執行完後動態添加的那些元素上
  • 當元素不少時，會出現效率問題
  • 當頁面加載完的時候，你才能夠進行bind()，因此可能產生效率問題　　         

.live() 的優勢和缺點

優勢：

  • 這裏僅有一次的事件綁定，綁定到document上而不像.bind()那樣給全部的元素挨個綁定
  • 那些動態添加的elemtns依然能夠觸發那些早先綁定的事件，由於事件真正的綁定是在document上
  • 你能夠在document ready以前就能夠綁定那些須要的事件

缺點：

  • 從1.7開始已經不被推薦了，因此你也要開始逐步淘汰它了。
  • Chaining沒有被正確的支持
  • 當使用event.stopPropagation()是沒用的，由於都要到達document
  • 由於全部的selector/event都被綁定到document, 因此當咱們使用matchSelector方法來選出那個事件被調用時，會很是慢
  • 當發生事件的元素在你的DOM樹中很深的時候，會有performance問題

.delegate() 的優勢和缺點

優勢：

  • 你能夠選擇你把這個事件放到那個元素上了
  • chaining被正確的支持了
  • jQuery仍然須要迭代查找全部的selector/event data來決定那個子元素來匹配，可是由於你能夠決定放在那個根元素上，因此能夠有效的減少你所要查找的元素。
  • 能夠用在動態添加的元素上

缺點：

  • 須要查找那個那個元素上發生了那個事件了，儘管比document少不少了，不過，你仍是得浪費時間來查找。

注：.delegate() 比 .live() 好 

.On()的優勢和缺點

優勢：

  • 提供了一種統一綁定事件的方法
  • 仍然提供了.delegate()的優勢，固然若是須要你也能夠直接用.bind()

缺點：

  • 也許會對你產生一些困擾，由於它隱藏了一前面咱們所介紹的三種方法的細節。

結論：

  • 用.bind()的代價是很是大的，它會把相同的一個事件處理程序hook到全部匹配的DOM元素上
  • 不要再用.live()了，它已經再也不被推薦了，並且還有許多問題
  • .delegate()會提供很好的方法來提升效率，同時咱們能夠添加一事件處理方法到動態添加的元素上。
  • 咱們能夠用.on()來代替上述的3種方法

 

如何理解閉包？

1.閉包的概念
各類專業文獻上的「閉包」（closure）定義很是抽象，很難看懂。個人理解是，閉包就是可以讀取其餘函數內部變量的函數。
因爲在Javascript語言中，只有函數內部的子函數才能讀取局部變量，所以能夠把閉包簡單理解成「定義在一個函數內部的函數」。
因此，在本質上，閉包就是將函數內部和函數外部鏈接起來的一座橋樑。

2.閉包的用途
閉包能夠用在許多地方。它的最大用處有兩個，一個是前面提到的能夠讀取函數內部的變量，另外一個就是讓這些變量的值始終保持在內存中。

跨域請求資源的方法有哪些？

 1.單向跨域  jsonp

 2.雙向跨域  document.domain實現跨域

 

 

談談垃圾回收機制方式及內存管理

 

開發過程當中遇到的內存泄露狀況，如何解決的？


其餘

1.一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？
（1）查找瀏覽器緩存
（2）DNS解析、查找該域名對應的IP地址、重定向（301）、發出第二個GET請求
（3）進行HTTP協議會話
（4）客戶端發送報頭(請求報頭)
（5）服務器回饋報頭(響應報頭)
（6）html文檔開始下載
（7）文檔樹創建，根據標記請求所需指定MIME類型的文件
（8）文件顯示


2.爲何換工做？


3.你經常使用的開發工具是什麼，爲何？


4.對前端界面工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？


5.加班的見解？加班就像借錢，原則應當是------救急不救窮

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程