前端面试题整理【转】
HTML&CSS
----------------------------
?
1.請描述一下 cookies，sessionStorage 和 localStorage 的區別？
cookie是網站為了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（通常經過加密）。
cookie數據始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和服務器間來回傳遞。
sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
存儲大小：
cookie數據大小不能超過4k。
sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
有期時間：
localStorage ? ?存儲持久數據，瀏覽器關閉后數據不丟失除非主動刪除數據；
sessionStorage ?數據在當前瀏覽器窗口關閉后自動刪除。
cookie ? ? ? ? ?設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉
?
2.iframe有那些缺點？
iframe會阻塞主頁面的Onload事件；
搜索引擎的檢索程序無法解讀這種頁面，不利于SEO;
iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript動態給iframe添加src屬性值，這樣可以繞開以上兩個問題。
?
3.如何實現瀏覽器內多個標簽頁之間的通信?
WebSocket、SharedWorker
也可以調用localstorge、cookies等本地存儲方式。
localstorge另一個瀏覽上下文里被添加、修改或刪除時，它都會觸發一個事件，我們通過監聽事件，控制它的值來進行頁面信息通信。
注意quirks：Safari 在無痕模式下設置localstorge值時會拋出 QuotaExceededError 的異常。
?
4.如何在頁面上實現一個圓形的可點擊區域？
（1）map+area或者svg
（2）border-radius
（3）純js實現 需要求一個點在不在圓上簡單算法、獲取鼠標坐標等等
?
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”的組合進行背景定位，這樣可以減少很多圖片請求的開銷，因為請求耗時比較長；請求雖然可以并發，但是如果請求太多會給服務器增加很大的壓力。
?
8.display:none和visibility:hidden的區別？
display:none ?隱藏對應的元素，在文檔布局中不再給它分配空間，它各邊的元素會合攏，就當他從來不存在。
visibility:hidden ?隱藏對應的元素，但是在文檔布局中仍保留原來的空間。
?
9.position的absolute與fixed區別
absolute浮動定位是相對于父級中設置position為relative或者absolute最近的父級元素
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實現局部刷新.
?
其他
----------------------------
?
1.一個頁面從輸入 URL 到頁面加載顯示完成，這個過程中都發生了什么？
（1）查找瀏覽器緩存
（2）DNS解析、查找該域名對應的IP地址、重定向（301）、發出第二個GET請求
（3）進行HTTP協議會話
（4）客戶端發送報頭(請求報頭)
（5）服務器回饋報頭(響應報頭)
（6）html文檔開始下載
（7）文檔樹建立，根據標記請求所需指定MIME類型的文件
（8）文件顯示
2.為什么換工作？
3.你常用的開發工具是什么，為什么？
4.對前端界面工程師這個職位是怎么樣理解的？它的前景會怎么樣？
5.加班的看法？
加班就像借錢，原則應當是------救急不救窮
轉載于:https://www.cnblogs.com/Candy1029/p/5540418.html
總結
以上是生活随笔為你收集整理的前端面试题整理【转】的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 第十三周学习进度条
- 下一篇： 判断浏览器是否支持某个css属性