Web前端面試寶典（最新）

時間 2019-11-07

標籤 web 前端面試寶典最新欄目 HTML 简体版

原文原文鏈接

第一部分：HTML問答題

1.簡述一下你對HTML語義化的理解？

用正確的標籤作正確的事情。javascript

html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析;即便在沒有樣式CSS狀況下也以一種文檔格式顯示，而且是容易閱讀的;php

搜索引擎的爬蟲也依賴於HTML標記來肯定上下文和各個關鍵字的權重，利於SEO;css

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

2.Label的做用是什麼？是怎麼用的？

label標籤來定義表單控制間的關係,當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控件上。前端

<label for="Name">Number:</label>html5

<input type=「text「name="Name" id="Name"/>java

<label>Date:<input type="text" name="B"/></label>node

3.iframe有那些缺點？

*iframe會阻塞主頁面的Onload事件；react

*搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO;jquery

*iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。

使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript。動態給iframe添加src屬性值，這樣能夠繞開以上兩個問題。

4.HTML與XHTML —— 兩者有什麼區別，你以爲應該使用哪個並說出理由。

1.XHTML 元素必須被正確地嵌套。

錯誤：<p><span>this is example.</p></span>

正確：<p><span>this is example.</span></p>

2.XHTML 元素必須被關閉。

錯誤：<p>this is example.

正確：<p>this is example.</p>

3.標籤名必須用小寫字母。

錯誤：<P>this is example.<P>

正確：<p>this is example.</p>

3.1空標籤也必須被關閉

錯誤：<br>

正確：<br/>

4.XHTML 文檔必須擁有根元素。

全部的 XHTML 元素必須被嵌套於 <html> 根元素中。

5.常見的瀏覽器內核有哪些？

Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]

Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等

Presto內核：Opera7及以上。 [Opera內核原爲：Presto，現爲：Blink;]

Webkit內核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

6.簡述一下你對HTML語義化的理解？

用正確的標籤作正確的事情。

html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析;

即便在沒有樣式CSS狀況下也以一種文檔格式顯示，而且是容易閱讀的;

搜索引擎的爬蟲也依賴於HTML標記來肯定上下文和各個關鍵字的權重，利於SEO;

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

7.HTML5的form如何關閉自動完成功能？

給不想要提示的 form 或某個 input 設置爲 autocomplete=off。

8.實現不使用 border 畫出1px高的線，在不一樣瀏覽器的標準模式與怪異模式下都能保持一致的效果。

9.title與h1的區別、b與strong的區別、i與em的區別？

title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取也有很大的影響；

strong是標明重點內容，有語氣增強的含義，使用閱讀設備閱讀網絡時：<strong>會重讀，而<B>是展現強調內容。

i內容展現爲斜體，em表示強調的文本；

Physical Style Elements -- 天然樣式標籤

b, i, u, s, pre

Semantic Style Elements -- 語義樣式標籤

strong, em, ins, del, code

應該準確使用語義樣式標籤, 但不能濫用, 若是不能肯定時首選使用天然樣式標籤。

10.請描述下SEO中的TDK？

在SEO中，所謂的TDK其實就是title、description、keywords這三個標籤，這三個標籤在網站的優化過程當中

title標題標籤，description描述標籤，keywords關鍵詞標籤

11.簡單書寫HTML代碼：請寫出一個html網站代碼，內容爲一個圖片，連接到「http://www.baidu.com」，圖片路徑爲「./img/logo.png」,爲圖片設置替換文本」webfoss」,新網頁在新窗口打開；

答： <a href=」http://www.baidu.com」 alt=」webfoss」 target=」_blank」><img src=」./img/logo.png」></a>

12.標籤上title與alt屬性的區別是什麼？

alt是給搜索引擎識別，在圖像沒法顯示時的替代文本；title是關於元素的註釋信息，主要是給用戶解讀。當鼠標放到文字或是圖片上時有title文字顯示。（由於IE不標準）在IE瀏覽器中alt起到了title的做用，變成文字提示。在定義img對象時，將alt和title屬性寫全，能夠保證在各類瀏覽器中都能正常使用。

13.前端頁面有哪三層構成，分別是什麼？做用是什麼？

分紅：結構層、表示層、行爲層。

結構層（structural layer）

由 HTML 或 XHTML之類的標記語言負責建立。標籤，也就是那些出如今尖括號裏的單詞，對網頁內容的語義含義作出了描述，但這些標籤不包含任何關於如何顯示有關內容的信息。例如，P標籤表達了這樣一種語義：「這是一個文本段。」

表示層（presentation layer）

由 CSS 負責建立。 CSS對「如何顯示有關內容」的問題作出了回答。

行爲層（behaviorlayer）

負責回答「內容應該如何對事件作出反應」這一問題。這是 Javascript 語言和 DOM主宰的領域。

14.每一個HTML文件頭裏都有個很重要的東西，Doctype，知道這是幹什麼的麼？

<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標籤以前。

做用：

1.告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。

2.告訴瀏覽器按照何種規範解析頁（若是你的頁面沒有DOCTYPE的聲明，那麼compatMode默認就是BackCompat,瀏覽器按照本身的方式解析渲染頁面）

15.DIV+CSS佈局較table有什麼優點？

一、速率更快，頁面體積變小，瀏覽速度變快，這就使得對於某些控制主機流量的網站來講是最大的優點了；

二、更好地被搜索引擎收錄，大部分html頁面的樣式寫入了CSS文件中，便於被搜索引擎採集收錄；

三、對瀏覽者和瀏覽器更具優點，因爲CSS富含豐富的樣式，使頁面更加靈活性，它能夠根據不一樣的瀏覽器，而達到顯示效果的統一和不變形；

四、修改更有效率，因爲使用了DIV+CSS製做方法，在修改頁面的時候更加容易省時，提升工做效率；

16.爲何用多個域名存儲網站資源更有效？

一、CDN緩存更方便

二、突破瀏覽器併發限制

三、節約cookie帶寬

四、節約主域名的鏈接數，優化頁面響應速度

五、防止沒必要要的安全問題

17.簡要說明一下作好SEO須要考慮哪些方面？

1.TDK

2.圖片+alt

3.友情連接

4.站點地圖

第二部分：HTML單選題

1.如下描述錯誤的是（A）

html須要先編譯以後才能執行
html須要存放在應用服務器端，客戶端請求後纔會將html程序返回給客戶端
html是須要瀏覽器解析的
html語言就是把咱們須要的內容顯示在瀏覽器，可是html語言自己不顯示

2.如下描述錯誤的是(C)

A.html分爲<html><head><body>三個基本標記結構

B.head頭標籤，能夠添加關鍵字描述網站優化網站

C.一般咱們顯示的內容都會放在<body>標籤，一般html只能使用一次

D.<!DOCTYPE>屬於HTML標籤，它是一種標準通用標記語言的文檔類型聲明

3.在HTML語言中，設置表格單元格之間距離的是（B）和單元格和文字之間距離的是（C）

A.border

B.cellspacing

C.cellpadding

D.width

4.如下對標籤描述正確的(多選)（ABC）

A.h1,h2,h3,h4,h5,h6標籤是顯示標題從h1到h6從大到小的過程

B.b標籤呈現粗體文本

C.I標籤呈現斜體文字

5.如下描述錯誤的是（D）

html分爲 <html> <head> <body>三個基本標記結構。
head頭標籤能夠加關鍵字、描述網站、優化網站
一般咱們顯示的內容都會放在<body>標籤，一般html只能使用一次。
<!DOCTYPE> : 屬於html標籤，它是一種標準通用標記語言的文檔類型聲明。

6.如下說法錯誤的是（D）

A.<p> 標籤：標籤訂義段落

B.<br> : 簡單的換行

C.<dl>標籤：自定義列表

D.<dd>: 自定義標題

7.如下對標籤描述正確的（多選）（A,C,D）

A.h1,h2,h3,h4,h5,h6 標籤是顯示標題從h1到h6,從大到小的過程

B.tt標籤對錶格的限定標籤

C.b 標籤呈現粗體文本

D.i 標籤呈現斜體文字

8.在HTML語言中，設置表格單元格之間距離的標籤是（ B ）和單元格內文字與邊框的距離的標籤是（C）

A.<table border=」」>

B.<table cellspacing=」」>

C.<table cellpadding=」」>

D.<table width=」」>

第三部分：CSS問答題

1.介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不一樣的？

（1）有兩種， IE 盒子模型、W3C 盒子模型；

（2）盒模型：內容(content)、填充(padding)、邊界(margin)、邊框(border)；

（3）區別： IE的content部分把 border 和 padding計算了進去;

2.CSS選擇符有哪些？哪些屬性能夠繼承？

1.id選擇器（ # myid）

2.類選擇器（.myclassname）

3.標籤選擇器（div, h1, p）

4.相鄰選擇器（h1 + p）

5.子選擇器（ul > li）

6.後代選擇器（li a）

7.通配符選擇器（ * ）

8.屬性選擇器（a[rel = "external"]）

9.僞類選擇器（a:hover, li:nth-child）

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

不可繼承的樣式：border padding margin width height

3.css定義的權重

標籤的權重爲1，class的權重爲10，id的權重爲100

4.若是須要手動寫動畫，你認爲最小時間間隔是多久，爲何？

多數顯示器默認頻率是60Hz，即1秒刷新60次，因此理論上最小間隔爲1/60＊1000ms ＝ 16.7ms

5.簡單介紹下CSS的盒子模型，他都包含哪些屬性？

width,height,margin,padding,border

6.寬高都200px的div在瀏覽器窗口居中（水平垂直都居中）

position:fixed;width:200px;height:200px;left:50%;top:50%;

margin-left:-100px;margin-top:-100px;

7.一個滿屏品字佈局如何設計?

</div>

8.超連接訪問事後hover樣式就不出現了被點擊訪問過的超連接樣式不在具備hover和active瞭解決方法是改變CSS屬性的排列順序:

L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

9.display:none;跟visibility:hidden;的區別是啥？

display:none;不佔位，visibility:hidden;佔位

10.低版本瀏覽器不支持display:inline-block屬性，請問怎麼兼容

*display:inline;*zoom:1;

11.在使用display:inline-block時，inline-block元素會有4px左右的空隙，這是什麼緣由致使的以及解決方法

（1）取消換行和空格

（2）設置父元素的font-size爲0，在給子元素設置自身的字體大小

12.寫出下面三個的區別？

*height{}

_height{}

+height{}

* IE7及如下

_IE6

+IE7

13.Inline-block默認的對其方式是什麼？在使用inline-block時在內容不一樣的時候想要保持內容水平對齊，說一下你採用的方法？

默認對齊方式：base-line

水平對齊：vertical-align:top;

14.簡明說一下CSS link於@import的區別和用法

link是XHTML標籤，除了加載CSS外，還能夠定義RSS等其餘事務；@import屬於CSS範疇，只能加載CSS。

link引用CSS時，在頁面載入時同時加載；@import須要頁面網頁徹底載入之後加載。

link是XHTML標籤，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。

link支持使用Javascript控制DOM去改變樣式；而@import不支持。

第四部分：JS問答題

一、JS的數據類型有哪些？typeof運算符的執行結果都有哪些數據類型？

數據類型主要包括兩部分：

基本數據類型： Undefined、Null、Boolean、Number和String

引用數據類型： Array 、Object

typeof運算符的結果類型：

number,string，boolean,object,function,undefined

2.null，undefined 的區別?

null 表示一個對象被定義了，值爲「空值」；

undefined 表示不存在這個值。

3.怎麼判斷一個變量沒有被定義

typeof bianliang ==」undefined」

4.怎麼判斷一個變量arr的話是否爲數組（此題用typeof不行）

Arr instanceof Array

5.事件委託是什麼

事件委託就是事件目標自身不處理事件，而是把處理任務委託給其父元素或者祖先元素，甚至根元素（document）。

6.描述下JSON對象的兩個很重要的方法

JSON.parse() //JSON字符串轉換爲JSON對象

JSON.stringify() //JSON對象轉化爲字符串

7.寫一個函數getRandomNumber(startNum,endNum),去除startNum到endNum之間的任意隨機數

function getRandomNumber(startNum,endNum){

var endRand = endNum - startNum + 1;

//0~1中間的16位數字

var randNum = Math.random();

//隨機取出來0~9之間的任意一個數字

randNum = Math.floor(randNum * endRand);

return randNum+startNum;

}

8.寫一個通用的去除字符串左右空格的函數？

String.prototype.strim = function(){

return this.replace(/(^\s|\s$)/g,」」);

}

9.a = [1,2,3,4];b=a;a.push(2);b.push(3);請問，最終a,b的結果分別是多少？

a爲[1,2,3,4,2,3],b爲[1,2,3,4,2,3]

10.檢測瀏覽器的兩種方式

功能檢測「touchstart」 in document

特徵檢測 navigator.userAgent

11.「 ===」、「 ==」的區別？

==，當且僅當兩個運算數相等時，它返回 true，即不檢查數據類型

===，只有在無需類型轉換運算數就相等的狀況下，才返回 true，須要檢查數據類型

12.原型、原型鏈？

每一個由構造函數new出來的實例化對象都自帶一個_proto_屬性，該屬性指向建立它的構造函數的prototype對象。而prototype對象由於是實例，也有本身的_proto_屬性，指向它的原型對象。當咱們訪問一個對象的屬性時，若是這個對象內部不存在這個屬性，那麼他就會去prototype裏找這個屬性，這個prototype又會有本身的prototype，

因而就這樣一直找下去，也就是咱們平時所說的原型鏈的概念。

關係：instance.constructor.prototype = instance.__proto__

13.eval是作什麼的？

它的功能是把對應的字符串解析成JS代碼並運行；

應該避免使用eval，不安全，很是耗性能（2次，一次解析成js語句，一次執行）。

由JSON字符串轉換爲JSON對象的時候能夠用eval，var obj =eval('('+ str +')');

14.["1", "2", "3"].map(parseInt) 答案是多少？

[1, NaN, NaN] 由於 parseInt 須要兩個參數 (val, radix)，

其中 radix 表示解析時用的基數。

map 傳了 3 個 (element, index, array)，對應的 radix 不合法致使解析失敗。

15.簡單語言測試：有數組dataarray，值爲-100到100的整數，求出數組中大於0的數的和；

var x=0;

for(var i=0;i<dataarray.length;i++){

if(dataarray>0){

x+=dataarray[i];

}

16.簡單jQuery：請寫出代碼，ul標籤下面有1000個li，寫一個性能最高的方式實現，在點擊li後，輸出li的內容

$(「ul」).on(「click」,」li」,function(){

$(this).html(「hit」);

})

17.用fetch方法構造一個Get請求，要求把當前頁面cookie傳過去，請寫出代碼；

fetch(url,{

method:"GET",

credentials:"include",

body:document.cookie

})

18.簡述下爲什麼經過ajax發送的請求會出現亂碼問題，如何解決？

亂碼的問題就是編碼格式衝突，咱們須要傳輸中文數據前面加一個encodeURI()編碼，例如：encodeURI(j$("#fk_info").val())；在接受參數的頁面對傳過來的編碼事後的內容用後端語言進行解碼

19.簡述DOM，HTMLDOM的區別和聯繫

DOM分爲三部分：

（1）核心DOM：遍歷DOM樹、添加新節點、刪除節點、修改節點

（2）HTML DOM：以一種簡便的方法訪問DOM樹

（3）XML DOM：準用於操做XML文檔

核心DOM與HTML DOM的區別：

核心DOM ：

對象：Document,Node, ElementNode,TextNode,AttributeNode，CommentNode,NodeList

核心DOM提供了統一的操做接口，如：createElement、appendChild、setAttribute等

核心DOM建立新元素：var newNode=document.createElement("img")

給元素添加屬性：e.setAttribure()、e.setAttribureNode()

適用場合：核心DOM適合操做節點，如建立，刪除，查找等

HTML DOM：

對象：image,Table,Form,Input,Select等等HTML標籤對象化

HTML DOM提供了封裝好的各類對象，如：Select、Option等等

適用場合：HTML DOM適合操做屬性，如讀取或修改屬性的值

20.什麼是事件流

DOM(文檔對象模型)結構是一個樹型結構，當一個HTML元素產生一個事件時，該事件會在元素結點與根結點之間的路徑傳播，路徑所通過的結點都會收到該事件，這個傳播過程可稱爲DOM事件流。DOM同時支持兩種事件模型：捕獲型事件和冒泡型事件

21.JavaScript原型繼承是如何運做的？

每一個對象都會在其內部初始化一個屬性，就是prototype(原型)，當咱們訪問一個對象的屬性時，若是這個對象內部不存在這個屬性，那麼他就會去prototype裏找這個屬性，這個prototype又會有本身的prototype，因而就這樣一直找下去(知道找到null爲止)，也就是咱們平時所說的原型鏈的概念。

22.CORS是什麼？對於跨域請求，如何將附帶憑證（HTTP Cookie 及 HTTP認證信息）的請求發送至服務器端?

CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。

它容許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。只須要服務器端的Response header 設置下Access-Control-Allow-Origin便可。

只需把相應的cookie信息和認證信息做爲post請求發送給服務器端便可。

23.DOM元素Attribute與Property的區別是什麼？

一、 property是DOM中的屬性，是JavaScript裏的對象；而attribute是HTML標籤上的特性，它的值只可以是字符串；

二、DOM對象初始化時會在建立默認的基本property；只有在HTML標籤中定義的attribute纔會被保存在property的attributes屬性中；

三、attribute會初始化property中的同名屬性，但自定義的attribute不會出如今property中；

四、propety是對象，而attribute的值都是字符串；

五、最關鍵的兩句話：

attribute（特性），是咱們賦予某個事物的特質或對象。

property（屬性），是早已存在的不須要外界賦予的特質。

24.Long-Polling、WebSocket、SSE(Server-Sent Events)之間有什麼差別？請寫出WebSocket在瀏覽器端如何發送及接收消息的相關代碼實現（須要考慮傳輸一場並根據返回數據的格式作不一樣處理）

Long-Polling 本身主動請求數據來獲知文件知否發生變化缺點：會有不少無效請求

SSE 服務器端通知客戶端數據變化服務器端客戶端保持一個長鏈接缺點：保持長鏈接須要佔用大量的服務器端只要

WebSocket 實時通訊缺點：瀏覽器支持狀況沒有上面兩種方法好

25.實現如下函數：

add(10,10);==>20

add(10)(10);==>20

function add(num){

if(arguments.length==1){

return function(num1){

return num+num1;

}

}else{

var sum = 0;

for(var i=0;i<arguments.length;i++){

sum += arguments[i];

}

return sum;

}

26.實現如下代碼：

[a,b,3,4,5].copy();==>[a,b,3,4,5, a,b,3,4,5]

var array = ['a','b',3,4,5];

Array.prototype.copy = function(){

return this.concat(this);

}

console.log(array.copy());

27.指出下面代碼的區別

function Order(){

}

var order = Order(); （1）

var order = new Order();（2）

代碼（1）是將函數Order()做爲一個普通函數去調用的，代碼（2）是將Order()做爲一個構造函數去調用的；當函數Order的方法體中有this關鍵之的時候，做爲普通函數this指的是window對象，做爲構造函數存在的時候this指代的是本對象

28.var foo = "Hello";

(function (){

var bar = "World";

alert(foo+bar);

})();

alert(foo+bar);

以上語句會產生什麼樣的結果？

（1）HelloWorld

（2）undefined

29.函數call和apply的區別：

相同點:兩個方法產生的做用是徹底同樣的

不一樣點:方法傳遞的參數不一樣,call是參數日後累加，apply是把全部參數合併爲一個數組傳給函數的第二個參數

30.語句（window.foo||(window.foo=」bar」)）;執行後，window.foo的值是多少？

Bar

31.使用jquery作一次ajax請求，請求類型爲post，傳入參數是json格式，url爲http://xxx.com,傳入參數是{username：「abc」}，請求成功返回一個數組例如[1,2,3,4,5]而後對這個數組進行處理後獲得一個新的數組，[1,2,3,4,5, 1,2,3,4,5]並輸出到日誌

Array.prototype.copy = function(){

return this.concat(this);

}

$.ajax({

url:「http://xxx.com」,

type:'post',

dataType:「json」,

data: {username：「abc」},

success:function(data){

console.log(data.copy());

}

});

32．如下語句結果a，m的值

var a = "15.56";

var b = 20.23;

var a = parseInt(a)+parseInt(b);

var m = parseFloat(a);

a:35 m:35

33.var numberArray = [ 3,6,2,4,1,5 ]，

(1)實現對該數組的倒排，輸出[5,1,4,2,6,3]

var result = numberArray.reverse( );

alert(result);

(2)實現對該數組的降序排列，輸出[六、五、四、三、二、1]

var result = numberArray.sort(function(a,b){return b-a});

alert(result);

34.$(document).ready()是個什麼函數？爲何要用它。

問題一： $(document).ready()這個函數是用來取代頁面中的window.onload; 不一樣的是onload()的方法是在頁面加載完成後才發生，這包括DOM元素和其餘頁面元素（例如圖片）的加載，所以，使用document.ready()方法的執行速度比onload()的方法要快。

問題二：Javascript 只有在DOM元素已經定義之後才能夠對其執行某種操做，jQuery使用document.ready來保證所要執行的代碼是在DOM元素被加載完成的狀況下執行。

35.讀下面代碼：

window.color = 'red';

var o= {color:'blue'};

function sayColor(){

alert(this.color);

}

請在每行末尾寫出該行的輸出：

sayColor();

sayColor.call(this);

sayColor.call(window)

sayColor.call(o)

答案： red 、red、red、blue

36.請寫一個正則，匹配輸入的字符：第一個必須是字母或下劃線開頭，後面就是字母和數字或下劃線構成，長度5-20.

答案： /^[A-Za-z_]\w{4,19}$/

37.JS中原型鏈最上層的對象是 object 的原型對象，該對象的_proto_指針指向 null 的原型對象。

38.JS中使用 Object 對象的 defineProperty 函數定義對象屬性的訪問器。

39.如何對一篇文章進行敏感詞替換？假若有幾千個敏感詞。（寫一下思路便可）

將這篇文章以字符串的形式賦給一個變量。定義一個正則表達式，以全局匹配的方式查找全部敏感詞，並用replace方法替換掉

40.添加、刪除、更改、插入節點的方法

appendChild

removeChild

replaceChild

insertBefore

41.在javascript編程中，請至少說出三種異步操做的使用場景？

回調函數

事件監聽

Promise對象

Nodejs的異步方法

42.請用閉包的方式寫一個方法，第一次執行返回999，第二次返回1000.

function bb(){

var num = 999;

return function(){

return num++;

}

var fun = bb();

fun();

43.如今有一個數組[1,4,5,8,100],請寫一個方法，每秒輸出數組的第一個元素，知道整個數組輸出完畢

var arr = [1,4,5,8,100];

function output(){

setTimeout(function(){

console.log(arr.splice(0,1)[0]);

if(arr.length>0){

output();

}

},1000);

}

output();

44.請給Array本地對象的prototype添加一個原型方法，它的做用是剔除重複的條目，並將新數組返回

Array.prototype.unique = function(){//數組去除重複

var res = [];

var json = {};

for(var i = 0; i < this.length; i++){

if(!json[this[i]]){

res.push(this[i]);

json[this[i]] = 1;

}

return res;

}

第五部分：JS單選題

一、 下列JavaScript的循環語句中（D）是正確的

A、 if(var i < 10;i++)

B、 for(var i = 0;i < 10)

C、 for var i = 1 to 10

D、 for(var i = 0;i <= 10;i++)

二、 下列的哪個表達式將會返回假（B）

A、 !(3<1)

B、 (4>=4)&&(5<=2)

C、 (「a」==」a」)&&(「C」!=」d」)

D、 (2<3)||(3<2)

三、 下列選項中，（D）不是網頁事件

A、 onclick

B、 onmouseover

C、 onsubmit

D、 Onp

四、 有語句「var x = 0;while( )x+=2;」，要使while循環體執行10次，空白的循環判斷式應該爲（D ）

A、 x < 10;

B、 x <= 10;

C、 x < 20;

D、 x <= 20;

五、 如下說法中錯誤的是（D ）

A、 var a = 111;

B、 var a = 「張三」;

C、 var _name = 「小明」;

D、 var &_id = 「1」;

六、 下列JS的判斷語句中（A）是正確的

A、 if( i == 0)

B、 if( i = 0)

七、下列JavaScript的循環語句中（）是正確的

A.if(var i < 10; i++)

B.for(var i = 0;i < 10)

C.for var i = 1 to 10

D.for(var i=0; i<10; i++)

答案：D

八、下列的哪個表達式將會返回假（）

!(3 <= 1)
(4 >= 4) && (5 <= 2)
( 「a」 == 「a」) && (「C」 != 「d」)
(2<3) || (3<2)

答案：B

九、下列選項中，（）不是網頁中的事件

onclick
onmouseover
onsubmit
onp

答案：D

十、有語句「var x = 0; while( )x+2;」,要是while循環體執行10次，空白的循環斷定式應該爲（）

x < 10
x <= 10
x < 20
x <= 20;

答案：C

十一、如下說法錯誤的是（）

var a = 111;
VAR a = ‘張三’;
var _name = 「小明」;
var &_id=1;

答案：BD

十二、如下JS的判斷語句中（）是正確的

if (i == 0)
if (i =0)

答案：A

1三、如下不是引入js的方式選項的是（D）

A．使用script標籤

B引入外部的js文件

C在事件中編寫js

D使用<link></link>引入

1四、Js語句

var a1 = 10;

var a2 = 20;

alert("a1+a2="+a1+a2)將顯示的結果是(B)

A.a1+a2=30

B.a1+a2=1020

C.a1+a2=a1+a2

D.a1+a2=30+a1+a2

15.var a=document.getElementById(「id」);

a.onclick = fun1;

a.onclick = fun2;

對象a被綁定的點擊事件執行函數是什麼？（B）

fun1
fun2
執行錯誤
兩個函數都被綁定

16.如下那條會產生運行錯誤(A)

var obj = ()
var obj = []
var obj = 11
var obj

17.如下說法正確的是（C）

A．數字+字符=數字（字符）

B．數字+boolean = true；(數字)

C. 數字+null = 數字

D．數字+undefined = isNaN （NaN）

18.如下不是引入javascript的方式的選項是？ (D)

使用script標籤
引入外部的javascript文件
在事件中編寫javascript
使用<link></link>引入

第六部分：HTML5+CSS3

1.HTML五、CSS3裏面都新增了那些新特性？

新的語義標籤

本地存儲

離線存儲

Websocket

2d，3d變換

Transition,animation

媒體查詢

新的單位（rem,vw，vh等）

2.HTML5 爲何只須要寫 <!DOCTYPE HTML>？

HTML5 不基於 SGML（標準通用標記語言），所以不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行）；

而HTML4.01基於SGML,因此須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

3.如何處理HTML5新標籤的瀏覽器兼容問題？

IE8/IE7/IE6支持經過document.createElement方法產生的標籤，

能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，

瀏覽器支持新標籤後，還須要添加標籤默認的樣式。

<!--[if lt IE 9]>

<![endif]-->

將上代碼複製到head部分，記住必定要是head部分（由於IE必須在元素解析前知道這個元素，因此這個js文件不能在其餘位置調用，不然失效）

最後在css裏面加上這段：

article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

主要是讓這些html5標籤成塊狀，像div那樣。

4.cookies，sessionStorage 和 localStorage 的區別？

cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）。

cookie數據始終在同源的http請求中攜帶（即便不須要），記會在瀏覽器和服務器間來回傳遞。

sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

存儲大小：

cookie數據大小不能超過4k。

sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

生命週期：

localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；

sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除。

cookie 設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉

5.什麼叫優雅降級和漸進加強？

優雅降級：Web站點在全部新式瀏覽器中都能正常工做，若是用戶使用的是老式瀏覽器，則代碼會針對舊版本的IE進行降級處理了,使之在舊式瀏覽器上以某種形式降級體驗卻不至於徹底不能用。

如：border-shadow

漸進加強：從被全部瀏覽器支持的基本功能開始，逐步地添加那些只有新版本瀏覽器才支持的功能,向頁面增長不影響基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時，它們會自動地呈現出來併發揮做用。

如：默認使用flash上傳，但若是瀏覽器支持 HTML5 的文件上傳功能，則使用HTML5實現更好的體驗；

6.transition和animation的區別

transition是過渡，animation是動畫。transition只能從一種狀態過渡到另一種狀態，animation能夠定製複雜動畫，能夠定義動畫的區間等。

transition必須經過一些行爲才能觸發（js或者僞類來觸發），animation的話直接就能夠觸發。

7.HTML5的form如何關閉自動完成功能？

給不想要提示的 form 或某個 input 設置爲 autocomplete=off。

8.margin-left:calc(-100%-100px) 代碼中用到了一個calc（），這個函數的做用是什麼？

答：通過計算來肯定CSS屬性值。

calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能，你可使用calc()給元素的border、margin、pading、font-size和width等屬性設置動態值。calc()可使用數學運算中的簡單加（+）、減（-）、乘（*）和除（/）來解決問題，並且還能夠根據單位如px,em,rem和百分比來轉化計算

9.簡述HTML5新增的canvas、audio、svg標籤的做用

canvas被稱做畫布，canvas 元素使用 JavaScript 在網頁上繪製圖像。畫布是一個矩形區域,能夠控制其每一像素。

audio標籤能夠引用音頻資源，在頁面上播放音樂

svg用XML格式定義圖形，能夠用來製做矢量圖形。

10.簡述如何經過CSS進行響應式佈局的方式

響應式佈局使用媒體查詢@media 定義多個分辨率下的樣式，使頁面在不一樣的分辨率下顯示不一樣的樣式

11.CSS的單位中，設定元素的長度或寬度與父元素字體大小相關的單位是什麼？與html文檔元素大小相關的單位是什麼？

em 、rem

13.在CSS中使用 media 關鍵字判斷不一樣的屏幕使用不一樣CSS文件，使用 @media 個關鍵字判斷不一樣屏幕使用不一樣的CSS樣式類。

14.CSS3實現一段陰影文本持續淡入淡出？

HTML結構： <div class=」box」>文本</div>

CSS樣式：

.box {

text-shadow : 1px 1px 2px #F00;

-moz-animation:fade 1s infinite;

-webkit-animation:fade 1s infinite;

-o-animation:fade 1s infinite;

animation:fade 1s infinite;

}

@keyframes fade {

0% { opacity: 0;}

50% { opacity: 100;}

100% { opacity: 0;}

}

@-webkit-keyframes fade {

0% { opacity: 0;}

50% { opacity: 100;}

100% { opacity: 0;}

}

@-moz-keyframes fade {

0% { opacity: 0;}

50% { opacity: 100;}

100% { opacity: 0;}

}

@-o-keyframes fade {

0% { opacity: 0;}

50% { opacity: 100;}

100% { opacity: 0;}

}

15.簡述如何經過CSS進行響應式佈局的方式。

meta標籤訂義: 使網頁適配設備寬度。

使用Media Queries適配對應樣式

16.如何使用Canvas來畫一條簡單的線？

var canvas=document.getElementById("canvas");

var cxt=canvas.getContext('2d');

cxt.beginPath();

cxt.lineWidth=10;

cxt.strokeStyle="#00ff00";

cxt.moveTo(20,20);

cxt.lineTo(100,20);

cxt.stroke();

cxt.closePath();

17.rgba和opacity的透明效果有什麼不一樣？

opacity會繼承父元素的 opacity 屬性，而RGBA設置的元素的後代元素不會繼承不透明屬性。好比rgba的話,內部的文字透明度不會發生變化，而opacity的話，會影響到內部的文字

18.FontAwesome和iconfont是什麼？他們有什麼異同，問什麼要使用它，有什麼弊端？

兩個都是圖標字體。Font Awesome 是一套完美的圖標字體,主要目的是和 Bootstrap 搭配使用

Iconfont是阿里的字體庫，能夠定製本身要的字體圖標。

優點：

一、輕量性：一個圖標字體比一系列的圖像（特別是在Retina屏中使用雙倍圖像）要小。一旦圖標字體加載了，圖標就會立刻渲染出來，不須要下載一個圖像。能夠減小HTTP請求，還能夠配合HTML5離線存儲作性能優化。

二、靈活性：圖標字體能夠用過font-size屬性設置其任何大小，還能夠加各類文字效果，包括顏色、Hover狀態、透明度、陰影和翻轉等效果。能夠在任何背景下顯示。使用位圖的話，必須得爲每一個不一樣大小和不一樣效果的圖像輸出一個不一樣文件。

三、兼容性：網頁字體支持全部現代瀏覽器，包括IE低版本。詳細兼容性能夠點擊這裏。

弊端：

只能單色

跨域問題

字體圖標庫彷佛體積顯得有些過大

19.什麼是響應式設計？

它是關於網站的製做或網頁製做的工做。不一樣的設備有不一樣的尺寸和不一樣的功能。響應式設計是讓全部的人能在這些設備上讓網站運行正常。一部分是媒體查詢和不一樣的視覺效果。一部分是不一樣的資源（如不一樣的Javascript來處理觸摸與點擊自動適應屏幕的對比）。

20.解釋下這個CSS選擇器什麼發生什麼？

[role=navigation] > ul a:not([href^=mailto]) {}

定義了role屬性，而且值爲navigation的任何元素，其子元素列表下的除郵箱連接以外的全部連接元素。

可以用語言表達清楚這個選擇器，證實你理解他們和可使用他們作一些技術交流。

第七部分：必考題

HTML+CSS篇：

1.如何處理HTML5新標籤的瀏覽器兼容問題？（本身須要試試）

<!--[if lt IE 9]>

<![endif]-->

將上代碼複製到head部分，記住必定要是head部分（由於IE必須在元素解析前知道這個元素，因此這個js文件不能在其餘位置調用，不然失效）

最後在css裏面加上這段：

article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

主要是讓這些html5標籤成塊狀，像div那樣。

2.簡單介紹下CSS的盒子模型，他都包含哪些屬性？

width,height,margin,padding,border

3.寬高都200px的div在瀏覽器窗口居中（水平垂直都居中）?

position:fixed;width:200px;height:200px;left:50%;top:50%;margin-left:-100px;margin-top:-100px;

4.常常遇到的瀏覽器的兼容性有哪些？緣由，解決方法是什麼，經常使用hack的技巧？

不一樣瀏覽器都會帶有本身的瀏覽器默認樣式，通常咱們須要把這些瀏覽器默認自帶的樣式給清楚，通常咱們藉助reset.css（咱們公司裏開發前端頁面都用這個來清楚瀏覽器默認樣式）

display:inline-block（IE7及如下不支持）

須要對低版本IE特殊處理：{display:inline-block;*display:inline;*zoom:1;}

display:inline-block 何時會顯示間隙？怎樣消除間隙？

父元素font-size設置成0，子元素從新設置font-size

display:inline-block濫用容易出現佈局方面的問題，尤爲在左中右、左右等佈局方面的問題尤其突出。所以若是是左右佈局的話，儘可能都用浮動來代替

z-index在IE7及如下版本的話，有時會發現不是誰z-index設置的越高誰就顯示在最上面。碰到這種問題須要設置父元素有相對定位屬性元素的z-index。先比較父元素的z-index再比較子元素的

IE6雙邊距

IE6中，元素向左浮動而且設置了左側的外邊距出現了這樣的雙邊距bug。同理，元素向右浮動而且設置右邊距也會出現一樣的狀況。同一行若是有多個浮動元素，第一個浮動元素會出現這個雙邊距bug，其它的浮動元素則不會。只須要給浮動元素加上display:inline;這樣的CSS屬性就能夠了。

margin-top，margin-bottom的bug

父元素的第一個子元素設置了margin-top,會做用於父元素（值爲父元素的margin-top與該margin-top二者中的最大值)，而子元素和父元素的邊距則沒有發生變化。

5.IE8-(IE8及如下)rgba模式不兼容的解決方案

IE8以及如下用濾鏡， filter:Alpha(opacity=20);

6.CSS Hack

什麼是CSS hack

因爲不一樣廠商的流覽器或某瀏覽器的不一樣版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），對CSS的支持、解析不同，致使在不一樣瀏覽器的環境中呈現出不一致的頁面展示效果。這時，咱們爲了得到統一的頁面效果，就須要針對不一樣的瀏覽器或不一樣版本寫特定的CSS樣式，咱們把這個針對不一樣的瀏覽器/不一樣版本寫相應的CSS code的過程，叫作CSS hack!

CSS hack的原理

因爲不一樣的瀏覽器和瀏覽器各版本對CSS的支持及解析結果不同，以及CSS優先級對瀏覽器展示效果的影響，咱們能夠據此針對不一樣的瀏覽器情景來應用不一樣的CSS。

CSS hack分類

科普

lte：就是Less than or equal to的簡寫，也就是小於或等於的意思。

lt ：就是Less than的簡寫，也就是小於的意思。

gte：就是Greater than or equal to的簡寫，也就是大於或等於的意思。

gt ：就是Greater than的簡寫，也就是大於的意思。

! ：就是不等於的意思，跟javascript裏的不等於判斷符相同

CSS Hack大體有3種表現形式，CSS屬性前綴法、選擇器前綴法以及IE條件註釋法（即HTML頭部引用if IE）Hack，實際項目中CSS Hack大部分是針對IE瀏覽器不一樣版本之間的表現差別而引入的。

屬性前綴法(即類內部Hack)：例如 IE6能識別下劃線""和星號" * "，IE7能識別星號" * "，但不能識別下劃線""，IE6~IE10都認識"\9"，但firefox前述三個都不能認識.

.all IE{property:value\9;} .gte IE 8{property:value\0;} .lte IE 7{*property:value;} .IE 8/9{property:value\0;} .IE 9{property:value\9\0;} .IE 7{+property:value;} .IE 6{_property:value;} .not IE{property//:value;}

選擇器前綴法(即選擇器Hack)：例如 IE6能識別html .class{}，IE7能識別+html .class{}或者*:first-child+html .class{}。

IE條件註釋法(即HTML條件註釋Hack)：針對全部IE(注：IE10+已經再也不支持條件註釋)： ，針對IE6及如下版本： 。這類Hack不只對CSS生效，對寫在判斷語句裏面的全部代碼都會生效。

只在IE下生效

只在IE6下生效

只在IE6以上版本生效 <--[if gte IE 6]> 這段文字只在IE6以上(包括)版本IE瀏覽器顯示 <![endif]-->

只在IE8上不生效

非IE瀏覽器生效

7.讓學生寫一個CSS3動畫？並讓描述transition和animation的區別

transition是過渡，animation是動畫。transition只能從一種狀態過渡到另一種狀態，animation能夠定製複雜動畫，能夠定義動畫的區間等。

transition必須經過一些行爲才能觸發（js或者僞類來觸發），animation的話不須要直接就能夠觸發。

JS篇:

知道不知道事件冒泡？知不知道阻止瀏覽器的默認行爲？對應的原生兼容性寫法該怎麼寫

知道事件冒泡，通常咱們須要阻止事件冒泡。

事件冒泡

父元素和子元素上面的話都添加的有click（不只僅是click事件，只要保證是同一個事件便可）。子元素的click事件觸發的時候，會致使該click事件冒泡到它的父元素上面，爲了阻止父元素的事件觸發，咱們通常須要給子元素的事件裏寫上阻止事件冒泡的方法

場景：（下拉菜單）點擊空白區域關閉下拉菜單

兼容性寫法：

if(event.stopPropagation){

event.stopPropagation();

}else if(event.cancelBubble){

event.cancelBubble = true;

}

阻止瀏覽器默認行爲

當咱們不但願一些瀏覽器默認行爲觸發的時候，就須要給對應的事件添加上阻止瀏覽器默認行爲。

場景：

禁止a連接的點擊後發生跳轉

禁止UC等手機瀏覽器左右滑動切換到前一頁或者下一頁(咱們能夠經過給document的touchmove事件加上阻止瀏覽器默認行爲的方法)

知不知道用沒用過事件委託？它的好處是啥？

1， 提升性能。

2， 新添加的元素還會有以前的事件。

詳見：http://www.jb51.net/article/88425.htm

1>提升性能 2>新添加的元素還會有以前的事件

什麼是閉包（closure），爲何要用它？

閉包就是可以讀取其餘函數內部變量的函數，若是一個函數內部又定義了一個內部函數，並將該內部函數做爲返回值返回或者存儲在某個對象的屬性裏，這時就會造成一個閉包。

使用場景：1.匿名自執行函數2緩存 3實現封裝（封裝的方式有不少，閉包只是其中一種，不是說到封裝就必定會用閉包）

閉包的優缺點

閉包的優勢：

1.緩存

2.面向對象中的對象

3.實現封裝，防止變量跑到外層做用域中，發生命名衝突

4.匿名自執行函數，匿名自執行函數能夠減少內存消耗

閉包的缺點：

1.閉包有一個很是嚴重的問題，那就是內存浪費問題，這個內存浪費不只僅由於它常駐內存，更重要的是，對閉包的使用不當的話會形成無效內存的產生

2.性能問題使用閉包時，會涉及到跨做用域訪問，每次訪問都會致使性能損失。

所以在腳本中，最好當心使用閉包，它同時會涉及到內存和速度問題。不過咱們能夠經過把跨做用域變量存儲在局部變量中，而後直接訪問局部變量，來減輕對執行速度的影響。

知道原型和原型鏈麼，通常何時須要用？

原型：

主要做用是用於繼承

原型的做用是爲函數對象聲明通用的變量或者函數，構造函數的實例都會從原型上繼承屬性和方法。

每一個對象中都有__proto__屬性，這個屬性指向的就是它基於的原型對象。

原型鏈：

var person = function(name){

this.name = name

};

person.prototype.getName = function(){

return this.name;

}

var zjh = new person(‘zhangjiahao’);

zjh.getName(); //zhangjiahao

JS在建立對象（不管是普通對象仍是函數對象）的時候，都有一個叫作__proto__的內置屬性，用於指向建立它的函數對象的原型對象prototype。以上面的例子爲例：

console.log(zjh.__proto__ === person.prototype) //true

一樣，person.prototype對象也有__proto__屬性，它指向建立它的函數對象（Object）的prototype

console.log(person.prototype.__proto__ === Object.prototype) //true

繼續，Object.prototype對象也有__proto__屬性，但它比較特殊，爲null

console.log(Object.prototype.__proto__) //null

咱們把這個有__proto__串起來的直到Object.prototype.__proto__爲null的鏈叫作原型鏈

咱們調用一個對象的屬性或者方法的時候，會存在一個優先級的問題。優先級爲：

構造函數內定義的屬性>構造函數的原型上定義的屬性>沿着__proto__指定的原型（原型鏈）一直往上找，直到找到null爲止。任何一步一旦找到就立馬中止，不會繼續往下找。

有沒有封裝過插件，你通常怎麼封裝呢

逼格低點的話這樣說：

封裝過，之前我主要是把一些公共的功能封裝成函數來實現簡單封裝，好比tab切換封裝的時候我會定義一個叫tab的函數，選項卡節點和內容節點做爲函數tab的參數。假如我一個頁面有多個tab切換，我只須要執行函數的時候給函數傳入不一樣的參數便可。

逼格高點的這樣說：

封裝過，咱們主要用面向對象中的混合模式來封裝插件，把可變的屬性或者方法（一般都是屬性）在構造函數內定義，把一些不變的屬性或者方法（一般是方法）定義在函數的原型上面。咱們封裝好的插件一般會放在一個匿名自執行函數裏面，這樣作的目的是爲了不變量衝突。

怎麼判斷一個變量str是否被賦值？

typeof str == 「undefined」

怎麼判斷一個變量arr的話是否爲數組（此題用typeof不行）

instanceof arr Array

Ajax和jsonp的原理？

Ajax的原理（最次最次也得把XMLHttpRequest對象說出來）

Ajax基於XMLHttpRequest對象與Web服務器端進行異步數據通訊。

首先基於這個對象的open方法建立一個瀏覽器跟服務器端鏈接，經過send方法從瀏覽器向服務器端發送請求。咱們能夠經過這個對象的onreadystatechange事件來監聽請求的狀態，當請求成功以後的話，我能夠獲取到這個對象responseText等方法獲取到請求過來的數據，而後經過js對這些數據進行解析

Jsonp原理

Ajax不能跨域，可是script標籤和img標籤均可以跨域。jsonp的話就是動態建立一個script標籤，把jsonp數據格式(callback(json))的接口的地址賦值給咱們的script標籤的src屬性。每一次發送jsonp請求的時候都會建立一個全局的回調函數，全局回調函數名稱跟咱們jsonp接口裏面的函數名稱是一致的。全局函數裏面寫的就是對請求過來數據的操做。

Ajax不能跨域，JSONP能夠跨域。

移動篇：

1.大家移動端怎麼開發的？用的什麼單位、js框架呢、怎麼真機調試大家程序、怎麼解決前綴問題呢

首先咱們移動端用的是rem這個單位，移動端實際上還新增了vw,vh等一些單位，可是相對於rem來講，他們的兼容性都很差。rem是一個相對單位，是相對於根節點的font-size的比例。咱們還會引用一個外部的js，這個js能夠經過屏幕寬度動態計算根節點的font-size值。

咱們移動端用的JS框架是zepto.js，由於相應來講它的的體積的話要小不少。並且咱們項目中有時會須要使用一些觸屏事件，好比滑動事件，那麼咱們還會調用它裏面的touch模塊

咱們webapp的話都是基於gulp搭建的前端工程來開發，由於利用gulp起一個webserver特別簡單，而且我還能夠實現livereload功能（當我監控的文件發生變化的時候，能夠觸發瀏覽器的自動刷新功能），並且在css3裏面加前綴的話是一個很頭疼的問題，咱們如今只須要用autoprefixer模塊就能夠很容易實現自動加css3前綴這個功能了。

2. 移動端兼容性？

1>ios移動端click事件300ms的延遲響應. 用fastclick來解決

2>zepto的touch模塊的tap事件有點透的問題，也是用fastclick來解決

3>一些狀況下對非可點擊元素如(label,span)監聽click事件，ios下不會觸發，css增長cursor:pointer就搞定了

4>ios下取消input在輸入的時候英文首字母的默認大寫

5>fixed定位缺陷

ios下fixed元素容易定位出錯，軟鍵盤彈出時，影響fixed元素定位

android下fixed表現要比iOS更好，軟鍵盤彈出時，不會影響fixed元素定位

ios4下不支持position:fixed

解決方案：可用iScroll插件解決這個問題

6>Input 的placeholder會出現文本位置偏上的狀況

input 的placeholder會出現文本位置偏上的狀況：PC端設置line-height等於height可以對齊，而移動端仍然是偏上，解決是設置line-height：normal

7>calc的兼容性處理

CSS3中的calc變量在iOS6瀏覽器中必須加-webkit-前綴，目前的FF瀏覽器已經無需-moz-前綴。

Android瀏覽器目前仍然不支持calc，因此要在以前增長一個保守尺寸：

div {

width: 95%;

width: -webkit-calc(100% - 50px);

width: calc(100% - 50px);

}

8>在移動端修改難看的點擊的高亮效果，iOS和安卓下都有效：

* {-webkit-tap-highlight-color:rgba(0,0,0,0);}

9>阻止旋轉屏幕時自動調整字體大小

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

3.談談你對bootstrap的認識，用它作過項目麼？

用Bootstrap主要用來作一些響應式的網站，它裏面柵格化這塊比較強大，我能夠針對不一樣的屏幕尺寸定製不一樣頁面結構。

我還用它作事後臺管理系統，由於它裏面集成的有風格標準統一的組件、插件、全局樣式等，是咱們作後臺管理系統的話，不用再花大精力去佈局頁面了。並且甚至產品給咱們一個原型圖咱們就能夠開始開發，大大提升了開發效率。

綜合：

網頁前端性能優化的方式有哪些？

1.壓縮css,js,圖片

2.減小http請求次數，合併css,js 合併圖片（雪碧圖）

3.使用CDN

4.減小dom元素數量

5.圖片懶加載

6.靜態資源另外用無cookie的域名

7.減小dom的訪問（緩存dom）

8.巧用事件委託

9.樣式表置頂、腳本置低

簡單描述一下你作過的項目研發流程？

1>約定規範(目錄結構、命名規範、代碼書寫規範)

2>由咱們組長（公司有的叫組長有的叫leader）給咱們搭建前端工程gulp(最起碼把browsersync模塊能說出來，用它建立一個局域網server並實現監控文件有變化就自動刷新功能)（另外搭建前端工程的時候就會把咱們會用到的庫或者插件放進去）、拆分不一樣的前端模塊給咱們開發

3>正式開發（咱們經過git工具來進行）

4>代碼review（由咱們組長來幫咱們作）

5>交付給後端開發工程師，須要幫他們聯調的話到時再幫他們聯調

看你簡歷上面寫的你會nodejs還有gulp，能給我描述下你都用這倆東西作過什麼東西麼？

nodejs能夠作一些服務器端的應用，好比咱們能夠用它搭建一個webserver（基於express框架能夠實現）。我本人呢nodejs搭建webserver這塊主要也是從網上看到一些文檔自學的，談不上精通。

咱們公司的話主要用gulp來實現咱們前端自動化。好比之前咱們公司作webapp的項目有這樣的需求，咱們會用sass這個預編譯器，咱們寫css3屬性的時候咱們常常還會用autoprefixer這個插件，咱們發佈上線的時候還須要把css文件進行壓縮，若是沒有一個很好的工具能幫咱們管理並自動實現上面的操做的話，仍是挺麻煩的。如今咱們就能夠用gulp來實現這些操做的自動化

你有跟後端合做的經驗是吧，大家都怎麼協做的呀？

第一種回答：（smarty啥都描述不出來，ajax交互這塊特別特別差的學生，但這限定了你能就業的公司，由於大部分公司仍是但願他招的人是很全面的人才，因此這個不推薦）

咱們公司前端代碼作完以後，直接就把前端代碼的話交給後端了，頁面綁定數據和ajax這塊基本上都是後端開發工程師來完成的。除非他們碰到一些複雜點的js特別難寫或者有些js的話須要處理樣式這塊的話會來讓咱們弄。

第二種回答：（適合大部分同窗，前提你得理清楚）

咱們公司的話，後端用的php語言，平時的話咱們也會套一些smarty模板，只要咱們先後端約定一下數據格式，而後我按照smarty模板的一些語法把數據解析成最終的HTML。

另外咱們公司ajax這塊的話通常都由咱們前端來作，並且後端作的ajax這塊咱們一般也會去看下，尤爲是ajax調用成功還須要js操做css樣式這塊的狀況。Ajax接口這塊的話，咱們會事先約定下數據格式，咱們公司的接口通常都是json格式的，並且咱們有個文檔是專門描述這個接口（裏面一般會描述下返回結果是對象仍是數組，對應裏面的每一項又都是啥），咱們前端只須要把json格式的數據結合上html渲染到咱們也沒對應的位置便可。咱們拿到數據的話，如今通常不多直接用js拼接html了，通常會藉助js模板引擎（handlerbars）來作這方面工做。

其餘：

1.日常碰到問題通常都是怎麼解決的呢？

百度、看一些博客（csdn、博客園cnblogs）、去論壇提問（好比知乎）、開發者問答社區（segmentfault）、會加一些qq技術交流羣

看前端大牛的博客

玉伯 kissy框架（PC端淘寶、天貓）,sea.js（前端模塊加載器）

司徒正美 avalon（前端MVC框架）

阮一峯（翻譯了不少國外文檔）

張鑫旭（寫了大量的博客，用生活化的例子來解釋難點）

大漠窮秋（angular1，angular2慕課網視頻教程）

徐飛（技術棧）

樸靈

寸志

2.專業寬度方面：最近在學習哪些新技術呀，之後準備往哪方面發展？

我最近在學習react。。。

我最近在學習sea.js。。。

我最近在學require.js。。。

我最近正在惡補node.js。。。

技術方向：高級前端開發工程師、全棧工程師（前端+後端nodejs）、前端架構師

管理方向：前端leader(前端主管、前端經理)、項目經理、CTO

3.你都作過什麼項目呢？讓他具體聊某一個項目中運用的技術

注意：用心找本身作的項目中本身感受最拿出來手的（複雜度最高，用的技術最多的項目），描述的時候儘量往裏面添加一些技術名詞

佈局咱們用html5+css3

咱們會用reset.css重置瀏覽器的默認樣式

JS框架的話咱們選用的是jQuery(也多是Zepto)

咱們用版本控制工具git來協同開發

咱們會基於gulp搭建的前端自動化工程來開發（裏面包含有咱們的項目結構、咱們須要引用的第三方庫等一些信息，咱們還實現了sass編譯、CSS3加前綴等的自動化）

咱們的項目中還用到了表單驗證validate插件、圖片懶加載Lazyload插件

4.爲啥要離開上家單位呀（或者從前從事的不是計算機相關，爲啥改行了）？

1.千萬別說這行工資高之類的

2.要說，本身對這個很感興趣，大學的時候加入的有這個社團，跟着學長學了這個東西，越學越感興趣，因而利用大學課餘時間自學了前端的知識（也能夠把這個東西說成本身親戚）

5.咱們這邊的話會有加班的狀況，不知道你能接受不？

能夠，我的願意與公司一塊成長的，並且也有了解這行會有加班，會配合公司把項目用心完成的。

6.有沒有什麼問題要問我？

1.別問加班和啥時候調工資之類的

2.社保、公積金交麼（千萬別說基數是多少）

3.問公司作的項目主要是哪方面呢，我擅長的技術****（具體技術）不知道公司需不須要

注意：若是去的是國企，國企很強調奉獻，儘可能往這方面靠

面試公司前最好搜索下公司是幹什麼的，能把他們產品說上來點就更好了（上市公司、國企尤爲得這樣）

第八部分：前端MVC框架

一、Angular的數據綁定採用什麼機制？詳述原理。

髒檢查機制。

雙向數據綁定是 AngularJS 的核心機制之一。當 view 中有任何數據變化時，會更新到 model ，當 model 中數據有變化時，view 也會同步更新，顯然，這須要一個監控。

原理就是，Angular 在 scope 模型上設置了一個監聽隊列，用來監聽數據變化並更新 view 。每次綁定一個東西到 view 上時 AngularJS 就會往 $watch 隊列裏插入一條$watch ，用來檢測它監視的 model 裏是否有變化的東西。當瀏覽器接收到能夠被 angular context 處理的事件時， $digest 循環就會觸發，遍歷全部的 $watch ，最後更新 dom。

第九部分：優化

1.sprites是什麼，它的做用是什麼？

雪碧圖

減小http請求

2.前端優化經常使用技巧？

1.壓縮css,js,圖片

2.減小http請求次數，合併css,js 合併圖片（雪碧圖）

3.使用CDN

4.減小dom元素數量

5.圖片懶加載

6.靜態資源另外用無cookie的域名

7.減小dom的訪問（緩存dom）

8.巧用事件委託

9.樣式表置頂、腳本置低

3.若是已經開發完一個web應用用於手機端訪問，請問須要在哪方面優化頁面？

按需加載

靜態資源壓縮

巧用圖標字體

保證首屏相應速度

動畫能用css3實現的儘可能用css3實現

移動端事件優化（fastclick）

更多前端面試資料：https://juejin.im/post/5aae076d6fb9a028cc6100a9

做者：樂樂連接：http://www.cnblogs.com/le220/p/8469918.html 本文屬於我的原創，轉載請註明出處，辛辛苦苦整理的，多謝配合。若是對你有幫助，動動手指，點個贊，謝謝！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

Web前端面試寶典（最新）

第一部分：HTML問答題

1.簡述一下你對HTML語義化的理解？

2.Label的做用是什麼？是怎麼用的？

3.iframe有那些缺點？

4.HTML與XHTML —— 兩者有什麼區別，你以爲應該使用哪個並說出理由。

5.常見的瀏覽器內核有哪些？

6.簡述一下你對HTML語義化的理解？

7.HTML5的form如何關閉自動完成功能？

8.實現不使用 border 畫出1px高的線，在不一樣瀏覽器的標準模式與怪異模式下都能保持一致的效果。

9.title與h1的區別、b與strong的區別、i與em的區別？

10.請描述下SEO中的TDK？

11.簡單書寫HTML代碼：請寫出一個html網站代碼，內容爲一個圖片，連接到「http://www.baidu.com」，圖片路徑爲「./img/logo.png」,爲圖片設置替換文本」webfoss」,新網頁在新窗口打開；

12.標籤上title與alt屬性的區別是什麼？

13.前端頁面有哪三層構成，分別是什麼？做用是什麼？

14.每一個HTML文件頭裏都有個很重要的東西，Doctype，知道這是幹什麼的麼？

15.DIV+CSS佈局較table有什麼優點？

16.爲何用多個域名存儲網站資源更有效？

17.簡要說明一下作好SEO須要考慮哪些方面？

第二部分：HTML單選題

1.如下描述錯誤的是（A）

2.如下描述錯誤的是(C)

3.在HTML語言中，設置表格單元格之間距離的是（B）和單元格和文字之間距離的是（C）

4.如下對標籤描述正確的(多選)（ABC）

5.如下描述錯誤的是（D）

6.如下說法錯誤的是（D）

7.如下對標籤描述正確的（多選）（A,C,D）

8.在HTML語言中，設置表格單元格之間距離的標籤是（ B ）和單元格內文字與邊框的距離 的標籤是（C）

第三部分：CSS問答題

1.介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不一樣的？

2.CSS選擇符有哪些？哪些屬性能夠繼承？

3.css定義的權重

4.若是須要手動寫動畫，你認爲最小時間間隔是多久，爲何？

5.簡單介紹下CSS的盒子模型，他都包含哪些屬性？

6.寬高都200px的div在瀏覽器窗口居中（水平垂直都居中）

7.一個滿屏 品 字佈局 如何設計?

8.超連接訪問事後hover樣式就不出現了 被點擊訪問過的超連接樣式不在具備hover和active瞭解決方法是改變CSS屬性的排列順序:

9.display:none;跟visibility:hidden;的區別是啥？

10.低版本瀏覽器不支持display:inline-block屬性，請問怎麼兼容

11.在使用display:inline-block時，inline-block元素會有4px左右的空隙，這是什麼緣由致使的以及解決方法

12.寫出下面三個的區別？

13.Inline-block默認的對其方式是什麼？在使用inline-block時在內容不一樣的時候想要保持內容水平對齊，說一下你採用的方法？

14.簡明說一下CSS link於@import的區別和用法

第四部分：JS問答題

一、JS的數據類型有哪些？typeof運算符的執行結果都有哪些數據類型？

2.null，undefined 的區別?

3.怎麼判斷一個變量沒有被定義

4.怎麼判斷一個變量arr的話是否爲數組（此題用typeof不行）

5.事件委託是什麼

6.描述下JSON對象的兩個很重要的方法

7.寫一個函數getRandomNumber(startNum,endNum),去除startNum到endNum之間的任意隨機數

8.寫一個通用的去除字符串左右空格的函數？

9.a = [1,2,3,4];b=a;a.push(2);b.push(3);請問，最終a,b的結果分別是多少？

10.檢測瀏覽器的兩種方式

11.「 ===」、「 ==」的區別？

12.原型、原型鏈？

13.eval是作什麼的？

14.["1", "2", "3"].map(parseInt) 答案是多少？

15.簡單語言測試：有數組dataarray，值爲-100到100的整數，求出數組中大於0的數的和；

16.簡單jQuery：請寫出代碼，ul標籤下面有1000個li，寫一個性能最高的方式實現，在點擊li後，輸出li的內容

17.用fetch方法構造一個Get請求，要求把當前頁面cookie傳過去，請寫出代碼；

18.簡述下爲什麼經過ajax發送的請求會出現亂碼問題，如何解決？

19.簡述DOM，HTMLDOM的區別和聯繫

20.什麼是事件流

21.JavaScript原型繼承是如何運做的？

22.CORS是什麼？對於跨域請求，如何將附帶憑證（HTTP Cookie 及 HTTP認證信息）的請求發送至服務器端?

23.DOM元素Attribute與Property的區別是什麼？

24.Long-Polling、WebSocket、SSE(Server-Sent Events)之間有什麼差別？請寫出WebSocket在瀏覽器端如何發送及接收消息的相關代碼實現（須要考慮傳輸一場並根據返回數據的格式作不一樣處理）

25.實現如下函數：

26.實現如下代碼：

27.指出下面代碼的區別

29.函數call和apply的區別：

30.語句（window.foo||(window.foo=」bar」)）;執行後，window.foo的值是多少？

32．如下語句結果a，m的值

34.$(document).ready()是個什麼函數？爲何要用它。

36.請寫一個正則，匹配輸入的字符：第一個必須是字母或下劃線開頭，後面就是字母和數字或下劃線構成，長度5-20.

40.添加、刪除、更改、插入節點的方法

41.在javascript編程中，請至少說出三種異步操做的使用場景？

42.請用閉包的方式寫一個方法，第一次執行返回999，第二次返回1000.

43.如今有一個數組[1,4,5,8,100],請寫一個方法，每秒輸出數組的第一個元素，知道整個數組輸出完畢

8.在HTML語言中，設置表格單元格之間距離的標籤是（ B ）和單元格內文字與邊框的距離的標籤是（C）

7.一個滿屏品字佈局如何設計?

8.超連接訪問事後hover樣式就不出現了被點擊訪問過的超連接樣式不在具備hover和active瞭解決方法是改變CSS屬性的排列順序: