第一篇：整理總結的一些前端面試題

整理總結的一些前端面試題

HTML面試題

1.XHTML和HTML有什么區別

?

HTML是一種基本的WEB網頁設計語言，XHTML是一個基于XML的置標語言 最主要的不同：

? ? ? ?

XHTML 元素必須被正確地嵌套。XHTML 元素必須被關閉。標簽名必須用小寫字母。XHTML 文檔必須擁有根元素。

2.前端頁面有哪三層構成，分別是什么?作用是什么? ?

結構層 Html 表示層 CSS 行為層 js;

3.你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什么? ?

Ie(Ie內核)火狐（Gecko）谷歌（webkit,Blink）opera(Presto),Safari(wbkit)4.什么是語義化的HTML? ?

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

html語義化就是讓頁面的內容結構化，便于對瀏覽器、搜索引擎解析；

在沒有樣式CCS情況下也以一種文檔格式顯示，并且是容易閱讀的。搜索引擎的爬蟲依賴于標記來確定上下文和各個關鍵字的權重，利于 SEO。

?

使閱讀源代碼的人對網站更容易將網站分塊，便于閱讀維護理解。

5.HTML5 為什么只需要寫!DOCTYPE HTML？

?

HTML5 不基于 SGML，因此不需要對DTD進行引用，但是需要doctype來規范瀏覽器的行為（讓瀏覽器按照它們應該的方式來運行）；而HTML4.01基于SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

6.Doctype作用？標準模式與兼容模式各有什么區別? ?

!DOCTYPE聲明位于位于HTML文檔中的第一行，處于html 標簽之前。告知瀏覽器的解析器用什么文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。

?

標準模式的排版 和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。7.html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

?

HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。

? ? ?

繪畫 canvas

用于媒介回放的 video 和 audio 元素

本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失；

? ?

sessionStorage 的數據在瀏覽器關閉后自動刪除 語意化更好的內容元素，比如 article、footer、header、nav、section ? ?

表單控件，calendar、date、time、email、url、search 新的技術webworker, websockt, Geolocation 移除的元素

?

純表現的元素：basefont，big，center，font, s，strike，tt，u；

?

對可用性產生負面影響的元素：frame，frameset，noframes；

支持HTML5新標簽：

?

IE8/IE7/IE6支持通過document.createElement方法產生的標簽，? ?

可以利用這一特性讓這些瀏覽器支持HTML5新標簽，瀏覽器支持新標簽后，還需要添加標簽默認的樣式：

8.請描述一下 cookies，sessionStorage 和 localStorage 的區別？

?

cookie在瀏覽器和服務器間來回傳遞。sessionStorage和localStorage不會

? ? ?

sessionStorage和localStorage的存儲空間更大； sessionStorage和localStorage有更多豐富易用的接口； sessionStorage和localStorage各自獨立的存儲空間；

9.如何實現瀏覽器內多個標簽頁之間的通信? ?

調用localstorge、cookies等本地存儲方式

CSS面試題

1.簡要說一下CSS的元素分類

? ?

塊級元素：div,p,h1,form,ul,li;

行內元素 : span>,a,label,input,img,strong,em;2.CSS隱藏元素的幾種方法（至少說出三種）

?

Opacity:元素本身依然占據它自己的位置并對網頁的布局起作用。它也將響應用戶交互;?

Visibility:與 opacity 唯一不同的是它不會響應任何用戶交互。此外，元素在讀屏軟件中也會被隱藏;?

Display:display 設為 none 任何對該元素直接打用戶交互操作都不可能生效。此外，讀屏軟件也不會讀到元素的內容。這種方式產生的效果就像元素完全不存在;? ?

Position:不會影響布局，能讓元素保持可以操作;

Clip-path:clip-path 屬性還沒有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，瀏覽器支持度還要低;3.CSS清除浮動的幾種方法（至少兩種）

? ? ? ?

使用帶clear屬性的空元素 使用CSS的overflow屬性； 使用CSS的:after偽元素； 使用鄰接元素處理；

4.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元素;5.寫出幾種IE6 BUG的解決方法

? ? ?

雙邊距BUG float引起的 使用display

3像素問題 使用float引起的 使用dislpay:inline-3px 超鏈接hover 點擊后失效 使用正確的書寫順序 link visited hover active ? ? ? ? ?

Ie z-index問題 給父級添加position:relative Png 透明 使用js代碼 改

Min-height 最小高度！Important 解決’ select 在ie6下遮蓋 使用iframe嵌套

為什么沒有辦法定義1px左右的寬度容器（IE6默認的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

6.對于SASS或是Less的了解程度？喜歡那個？

?

語法介紹

7.Bootstrap了解程度 ?

特點，排版，插件的使用;8.頁面導入樣式時，使用link和@import有什么區別？

?

link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS;?

頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;?

import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題;9.介紹一下CSS的盒子模型？

?

有兩種，IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 pading;?

盒模型： 內容(content)、填充(padding)、邊界(margin)、邊框(border).10.CSS 選擇符有哪些？哪些屬性可以繼承？優先級算法如何計算？ CSS3新增偽類有那些？

? ? ? ? ?

id選擇器（# myid）類選擇器（.myclassname）標簽選擇器（div, h1, p）相鄰選擇器（h1 + p）子選擇器（ul > li）? ? ? ? ?

后代選擇器（li a）通配符選擇器（*）

屬性選擇器（a[rel = “external”]）偽類選擇器（a: hover, li: nth – child）

可繼承的樣式： font-size font-family color, UL LI DL DD DT;? ? ?

JavaScript

不可繼承的樣式：border padding margin width height;優先級就近原則，同權重情況下樣式定義最近者為準;優先級為: 1 2!important > id > class > tag important 比 內聯優先級高

11.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 JavaScript面試題

1.javascript的typeof返回哪些數據類型 ?

Ｏbject number function boolean underfind;2.例舉3種強制類型轉換和2種隱式類型轉換? ?

強制（parseInt,parseFloat,number）隱式（== – ===）；

3.數組方法pop()push()unshift()shift()? ?

Push()尾部添加 pop()尾部刪除 Unshift()頭部添加 shift()頭部刪除

4.ajax請求的時候get 和post方式的區別? ?

一個在url后面 一個放在虛擬載體里面 有大小限制

?

安全問題

應用不同 一個是論壇等只需要請求的，一個是類似修改密碼的;5.call和apply的區別

? ?

Object.call(this,obj1,obj2,obj3)Object.apply(this,arguments)6.ajax請求時，如何解釋json數據

?

使用eval parse,鑒于安全性考慮 使用parse更靠譜;7.事件委托是什么 ?

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

8.閉包是什么，有什么特性，對頁面有什么影響?簡要介紹你理解的閉包

?

閉包就是能夠讀取其他函數內部變量的函數。

9.添加 刪除 替換 插入到某個接點的方法

obj.appendChidl()obj.innersetBefore obj.replaceChild obj.removeChild 10.說一下什么是javascript的同源策略？

?

一段腳本只能讀取來自于同一來源的窗口和文檔的屬性，這里的同一來源指的是主機名、協議和端口號的組合

11.編寫一個b繼承a的方法;JavaScript 2 3 4 5 6 7 8 9 10 11 function A(name){ this.name = name;

this.sayHello = function(){alert(this.name+” say Hello!”);};

}

function B(name,id){ this.temp = A;

this.temp(name);//相當于new A();

delete this.temp;

this.id = id;

this.checkId = function(ID){alert(this.id==ID)};

}

12.如何阻止事件冒泡和默認事件 JavaScript 2 3 4 5 6 7 8 function stopBubble(e)

{

if(e && e.stopPropagation)e.stopPropagation()

else

window.event.cancelBubble=true

}

return false

13.下面程序執行后彈出什么樣的結果? JavaScript 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 14.談談This對象的理解。

function fn(){ this.a = 0;

this.b = function(){ alert(this.a)

} }

fn.prototype = { b: function(){ this.a = 20;alert(this.a);

}，c: function(){ this.a = 30;alert(this.a);

} }

var myfn = new fn();

myfn.b();myfn.c();

this是js的一個關鍵字，隨著函數使用場合不同，this的值會發生變化。但是有一個總原則，那就是this指的是調用函數的那個對象。

this一般情況下：是全局對象Global。作為方法調用，那么this就是指這個對象 15.下面程序的結果

JavaScript function fun(n,o){ 2 3 4 5 6 7 8 9 10 11 //答案：

console.log(o)return {

fun:function(m){ return fun(m,n);

} };}

var a = fun(0);a.fun(1);a.fun(2);a.fun(3);

var b = fun(0).fun(1).fun(2).fun(3);var c = fun(0).fun(1);c.fun(2);c.fun(3);

//a: undefined,0,0,0 //b: undefined,0,1,2 //c: undefined,0,1,1 16.下面程序的輸出結果

JavaScript 2 3 4 5 6 7 8 9 var name = 'World!';(function(){

if(typeof name === 'undefined'){

var name = 'Jack';

console.log('Goodbye ' + name);

} else {

console.log('Hello ' + name);

} })();

17.了解Node么？Node的使用場景都有哪些？

?

高并發、聊天、實時消息推送

18.介紹下你最常用的一款框架

?

jquery,rn,angular等;19.對于前端自動化構建工具有了解嗎？簡單介紹一下 ?

Gulp,Grunt等；

20.介紹一下你了解的后端語言以及掌握程度

其它

1.對Node的優點和缺點提出了自己的看法？

(優點）

因為Node是基于事件驅動和無阻塞的，所以非常適合處理并發請求，因此構建在Node上的代理服務器相比其他技術實現（如Ruby）的服務器表現要好得多。

此外，與Node代理服務器交互的客戶端代碼是由javascript語言編寫的，因此客戶端和服務器端都用同一種語言編寫，這是非常美妙的事情。（缺點）

Node是一個相對新的開源項目，所以不太穩定，它總是一直在變，而且缺少足夠多的第三方庫支持。看起來，就像是Ruby/Rails當年的樣子。2.你有哪些性能優化的方法？

（1）減少http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN托管，data緩存，圖片服務器。

（2）前端模板 JS+數據，減少由于HTML標簽導致的帶寬浪費，前端用變量保存AJAX請求結果，每次操作本地變量，不用請求，減少請求次數

（3）用innerHTML代替DOM操作，減少DOM操作次數，優化javascript性能。（4）當需要設置的樣式很多時設置className而不是直接操作style。（5）少用全局變量、緩存DOM節點查找的結果。減少IO讀取操作。

（6）避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。（7）圖片預加載，將樣式表放在頂部，將腳本放在底部 加上時間戳。

（8）避免在頁面的主體布局中使用table，table要等其中的內容完全下載之后才會顯示出來，顯示div+css布局慢。對普通的網站有一個統一的思路，就是盡量向前端優化、減少數據庫操作、減少磁盤IO。向前端優化指的是，在不影響功能和體驗的情況下，能在瀏覽器執行的不要在服務端執行，能在緩存服務器上直接返回的不要到應用服務器，程序能直接取得的結果不要到外部取得，本機內能取得的數據不要到遠程取，內存能取到的不要到磁盤取，緩存中有的不要去數據庫查詢。減少數據庫操作指減少更新次數、緩存結果減少查詢次數、將數據庫執行的操作盡可能的讓你的程序完成（例如join查詢），減少磁盤IO指盡量不使用文件系統作為緩存、減少讀寫文件次數等。程序優化永遠要優化慢的部分，換語言是無法“優化”的。

3.http狀態碼有那些？分別代表是什么意思？ 100-199 用于指定客戶端應相應的某些動作。200-299 用于表示請求成功。

300-399 用于已經移動的文件并且常被包含在定位頭信息中指定新的地址信息。400-499 用于指出客戶端的錯誤。400

1、語義有誤，當前請求無法被服務器理解。401 當前請求需要用戶驗證 403 服務器已經理解請求，但是拒絕執行它。500-599 用于支持服務器錯誤。503 – 服務不可用 4.一個頁面從輸入 URL 到頁面加載顯示完成，這個過程中都發生了什么？（流程說的越詳細越好）

? ?

查找瀏覽器緩存

DNS解析、查找該域名對應的IP地址、重定向（301）、發出第二個GET請求

? ? ? ? ? ? ?

進行HTTP協議會話 客戶端發送報頭(請求報頭)文檔開始下載

文檔樹建立，根據標記請求所需指定MIME類型的文件 文件顯示

瀏覽器這邊做的工作大致分為以下幾步：

加載：根據請求的URL進行域名解析，向服務器發起請求，接收文件（HTML、JS、CSS、圖象等）。

?

解析：對加載到的資源（HTML、JS、CSS等）進行語法解析，建議相應的內部數據結構（比如HTML的DOM樹，JS的（對象）屬性表，CSS的樣式規則等等）

5.你常用的開發工具是什么，為什么？

?

Sublime,Atom,Nodepad++;6.說說最近最流行的一些東西吧？常去哪些網站？

?

Node.js、MVVM、React-native,Angular,Weex等 ?

CSDN,Segmentfault,博客園,掘金,Stackoverflow,伯樂在線等

第二篇：前端面試題

1.自我評價一下HTML/CSS/JS的掌握情況

2.簡述HTML經常使用的標簽和作用。

Div/a/p/span/li/ul/ol/table/tr/td

3.你認為最常遇到的兼容Bug有哪些?有哪些問題是你認為解決起來最麻煩的?

IE6 PNG

IE6 Fixed

4.塊級元素和行內元素都有哪些? 行內元素有哪些特點?

5.介紹所知道的CSS hack技巧(如：_，*，+，9，!important 之類)

6.CSS定位方式有哪些?position屬性的值有哪些?他們之間的區別是什么?

在CSS中關于定位的內容是：position:relative | absolute | static | fixed

? static 沒有特別的設定，遵循基本的定位規定，不能通過z-index進行層次分級。? relative 不脫離文檔流，參考自身靜態位置通過 top,bottom,left,right 定位，并且可以通過z-index進行層次分級。

? absolute 脫離文檔流，通過 top,bottom,left,right 定位。選53D6其最近的父級定位元素，當父級 position 為 static 時，absolute元素將以body坐標原點進行定位，可以通過z-index進行層次分級。

? fixed 固定定位，這里他所固定的對像是可視窗口而并非是body或是父級元素。可通過z-index進行層次分級。

7.函數的幾種定義方法

function a(){},var a = function(){}

8.對象的定義方法

a = new Object(), a = {}

9.類的定義方法（prototype）（繼承）

Var a = function(){}

a.prototype = {}

new a();

10.this 關鍵字的指向

obj.foo()== obj

foo()== window;

new obj.foo()== obj //方法調用模式,this指向obj //函數調用模式,this指向window //構造器調用模式, this指向新建立對象

foo.call(obj)== obj;//APPLY調用模式,this指向obj

11.DOM操作

在

將Body的innerHTML重寫和將