Web前端面試寶典（最新）

半指溫柔樂發表於2018-03-04
Web前端面試

第一部分：HTML問答題

 

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

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

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

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

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

 

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

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

<label for=”Name”>Number:</label>

<input type=“text“name=”Name” id=”Name”/>

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

 

3.iframe有那些缺點？

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

*搜尋引擎的檢索程式無法解讀這種頁面，不利於SEO;

*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高的線，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果。

<div style=”height:1px;overflow:hidden;background:red”></div>

 

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有什麼優勢？

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

2、更好地被搜尋引擎收錄，大部分html頁面的樣式寫入了CSS檔案中，便於被搜尋引擎採集收錄；

3、對瀏覽者和瀏覽器更具優勢，由於CSS富含豐富的樣式，使頁面更加靈活性，它可以根據不同的瀏覽器，而達到顯示效果的統一和不變形；

4、修改更有效率，由於使用了DIV+CSS製作方法，在修改頁面的時候更加容易省時，提高工作效率；

 

16.為什麼用多個域名儲存網站資源更有效？

1、CDN快取更方便

2、突破瀏覽器併發限制

3、節約cookie頻寬

4、節約主域名的連線數，優化頁面響應速度

5、防止不必要的安全問題

 

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

1.TDK

2.圖片+alt

3.友情連結

4.站點地圖

 

 

第二部分：HTML單選題

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

  1. html需要先編譯之後才能執行
  2. html需要存放在應用伺服器端，客戶端請求後才會將html程式返回給客戶端
  3. html是需要瀏覽器解析的
  4. 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）

  1. html分為 <html> <head> <body>三個基本標記結構。
  2. head頭標籤可以加關鍵字、描述網站、優化網站
  3. 通常我們顯示的內容都會放在<body>標籤，通常html只能使用一次。
  4. <!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 style=”margin:0 auto;width:50%;”></div>
   <div>

<div style=”width:50%;float:left;”></div>

 

<div style=”width:50%;float:left;”></div>

   </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問答題

 

1、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的區別是什麼？

1、 property是DOM中的屬性，是JavaScript裡的物件；而attribute是HTML標籤上的特性，它的值只能夠是字串；

2、DOM物件初始化時會在建立預設的基本property；只有在HTML標籤中定義的attribute才會被儲存在property的attributes屬性中；

3、attribute會初始化property中的同名屬性，但自定義的attribute不會出現在property中；

4、propety是物件，而attribute的值都是字串；

5、最關鍵的兩句話：

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)實現對該陣列的降序排列，輸出[6、5、4、3、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();

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單選題

1、 下列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++)

 

2、 下列的哪一個表示式將會返回假（B）

A、 !(3<1)

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

C、 (“a”==”a”)&&(“C”!=”d”)

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

 

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

A、 onclick

B、 onmouseover

C、 onsubmit

D、 Onp

 

4、 有語句“var x = 0;while(   )x+=2;”，要使while迴圈體執行10次，空白的迴圈判斷式應該為（D ）

A、 x < 10;

B、 x <= 10;

C、 x < 20;

D、 x <= 20;

 

5、 以下說法中錯誤的是（D ）

A、 var a = 111;

B、 var a = “張三”;

C、 var _name = “小明”;

D、 var &_id = “1”;

 

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

A、 if( i == 0)

B、 if( i = 0)

 

7、下列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

 

8、下列的哪一個表示式將會返回假（）

  1. !(3 <= 1)
  2. (4 >= 4) && (5 <= 2)
  3. ( “a” == “a”) && (“C” != “d”)
  4. (2<3) || (3<2)

答案：B

 

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

  1. onclick
  2. onmouseover
  3. onsubmit
  4. onp

答案：D

 

10、有語句“var x = 0; while( )x+2;”,要是while迴圈體執行10次，空白的迴圈判定式應該為（）

  1. x < 10
  2. x <= 10
  3. x < 20
  4. x <= 20;

答案：C

 

11、以下說法錯誤的是（）

  1. var a = 111;
  2. VAR a = ‘張三’;
  3. var _name = “小明”;
  4. var &_id=1;

答案：BD

 

12、以下JS的判斷語句中（）是正確的

  1. if (i == 0)
  2. if (i =0)

答案：A

 

13、以下不是引入js的方式選項的是（D）

A．使用script標籤

B引入外部的js檔案  

C在事件中編寫js  

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

 

14、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）

  1. fun1
  2. fun2
  3. 執行錯誤
  4. 兩個函式都被繫結

 

16.以下那條會產生執行錯誤(A)

  1. var obj = ()
  2. var obj = []
  3. var obj = 11
  4. var obj

 

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

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

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

C. 數字+null = 數字

D．數字+undefined = isNaN   （NaN）

 

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

  1. 使用script標籤
  2. 引入外部的javascript檔案
  3. 在事件中編寫javascript
  4. 使用<link></link>引入

 

 

第六部分：HTML5+CSS3

1.HTML5、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]>

<script type=”text/javascript” src=”js/html5shiv.js”></script>

<![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標籤定義: 使網頁適配裝置寬度。

<meta name=”viewport” content=”width=device-width,initial-scale=1,maximum-scale=1″ />

使用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是阿里的字型庫，可以定製自己要的字型圖示。

 

優勢：

1、輕量性：一個圖示字型比一系列的影像（特別是在Retina屏中使用雙倍影像）要小。一旦圖示字型載入了，圖示就會馬上渲染出來，不需要下載一個影像。可以減少HTTP請求，還可以配合HTML5離線儲存做效能優化。

2、靈活性：圖示字型可以用過font-size屬性設定其任何大小，還可以加各種文字效果，包括顏色、Hover狀態、透明度、陰影和翻轉等效果。可以在任何背景下顯示。使用點陣圖的話，必須得為每個不同大小和不同效果的影像輸出一個不同檔案。

3、相容性：網頁字型支援所有現代瀏覽器，包括IE低版本。詳細相容性可以點選這裡。

 

弊端：

只能單色

跨域問題

字型圖示庫似乎體積顯得有些過大

 

19.什麼是響應式設計？

它是關於網站的製作或網頁製作的工作。不同的裝置有不同的尺寸和不同的功能。響應式設計是讓所有的人能在這些裝置上讓網站執行正常。一部分是媒體查詢和不同的視覺效果。一部分是不同的資源（如不同的Javascript來處理觸控與點選自動適應螢幕的對比）。

 

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

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

定義了role屬性，並且值為navigation的任何元素，其子元素列表下的除郵箱連結之外的所有連結元素。

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

 

 

第七部分：必考題

HTML+CSS篇：

1.如何處理HTML5新標籤的瀏覽器相容問題？（自己需要試試）

<!–[if lt IE 9]>

<script type=”text/javascript” src=”js/html5shiv.js”></script>

<![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:value9;} .gte IE 8{property:value ;} .lte IE 7{*property:value;} .IE 8/9{property:value ;} .IE 9{property:value9 ;} .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+已經不再支援條件註釋)： <!–[if IE]>IE瀏覽器顯示的內容 <![endif]–>，針對IE6及以下版本： <!–[if lt IE 6]>只在IE6-顯示的內容 <![endif]–>。這類Hack不僅對CSS生效，對寫在判斷語句裡面的所有程式碼都會生效。

 

只在IE下生效 <!–[if IE]> 這段文字只在IE瀏覽器顯示 <![endif]–>

只在IE6下生效 <!–[if IE 6]> 這段文字只在IE6瀏覽器顯示 <![endif]–>

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

只在IE8上不生效 <!–[if ! IE 8]> 這段文字在非IE8瀏覽器顯示 <![endif]–>

非IE瀏覽器生效 <!–[if !IE]> 這段文字只在非IE瀏覽器顯示 <![endif]–>

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

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

transition必須通過一些行為才能觸發（js或者偽類來觸發），animation的話不需要直接就可以觸發。

 

JS篇:

  1. 知道不知道事件冒泡？知不知道阻止瀏覽器的預設行為？對應的原生相容性寫法該怎麼寫

知道事件冒泡，一般我們需要阻止事件冒泡。

 

事件冒泡

父元素和子元素上面的話都新增的有click（不僅僅是click事件，只要保證是同一個事件即可）。子元素的click事件觸發的時候，會導致該click事件冒泡到它的父元素上面，為了阻止父元素的事件觸發，我們一般需要給子元素的事件裡寫上阻止事件冒泡的方法

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

相容性寫法：

if(event.stopPropagation){

    event.stopPropagation();

}else if(event.cancelBubble){

    event.cancelBubble = true;

}

 

阻止瀏覽器預設行為

當我們不希望一些瀏覽器預設行為觸發的時候，就需要給對應的事件新增上阻止瀏覽器預設行為。

場景：

禁止a連結的點選後發生跳轉

禁止UC等手機瀏覽器左右滑動切換到前一頁或者下一頁(我們可以通過給document的touchmove事件加上阻止瀏覽器預設行為的方法)

 

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

1， 提高效能。

2， 新新增的元素還會有之前的事件。

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

1>提高效能 2>新新增的元素還會有之前的事件

 

  1. 什麼是閉包（closure），為什麼要用它？

閉包就是能夠讀取其他函式內部變數的函式，如果一個函式內部又定義了一個內部函式，並將該內部函式作為返回值返回或者儲存在某個物件的屬性裡，這時就會形成一個閉包。

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

 

閉包的優缺點

閉包的優點：

1.快取

2.物件導向中的物件

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

4.匿名自執行函式，匿名自執行函式可以減小記憶體消耗

閉包的缺點：

1.閉包有一個非常嚴重的問題，那就是記憶體浪費問題，這個記憶體浪費不僅僅因為它常駐記憶體，更重要的是，對閉包的使用不當的話會造成無效記憶體的產生

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

因此在指令碼中，最好小心使用閉包，它同時會涉及到記憶體和速度問題。不過我們可以通過把跨作用域變數儲存在區域性變數中，然後直接訪問區域性變數，來減輕對執行速度的影響。

 

 

  1. 知道原型和原型鏈麼，一般什麼時候需要用？

原型：

主要作用是用於繼承

原型的作用是為函式物件宣告通用的變數或者函式，建構函式的例項都會從原型上繼承屬性和方法。

每個物件中都有__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為止。任何一步一旦找到就立馬停止，不會繼續往下找。

 

  1. 有沒有封裝過外掛，你一般怎麼封裝呢

逼格低點的話這樣說：

封裝過，以前我主要是把一些公共的功能封裝成函式來實現簡單封裝，比如tab切換封裝的時候我會定義一個叫tab的函式，選項卡節點和內容節點作為函式tab的引數。假如我一個頁面有多個tab切換，我只需要執行函式的時候給函式傳入不同的引數即可。

 

逼格高點的這樣說：

封裝過，我們主要用物件導向中的混合模式來封裝外掛，把可變的屬性或者方法（通常都是屬性）在建構函式內定義，把一些不變的屬性或者方法（通常是方法）定義在函式的原型上面。我們封裝好的外掛通常會放在一個匿名自執行函式裡面，這樣做的目的是為了避免變數衝突。

 

  1. 怎麼判斷一個變數str是否被賦值？

typeof str == “undefined”

 

  1. 怎麼判斷一個變數arr的話是否為陣列（此題用typeof不行）

instanceof arr Array

 

  1. 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在輸入的時候英文首字母的預設大寫

<input autocapitalize=”off” autocorrect=”off” />

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. 網頁前端效能優化的方式有哪些？

1.壓縮css,js,圖片

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

3.使用CDN

4.減少dom元素數量

5.圖片懶載入

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

7.減少dom的訪問（快取dom）

8.巧用事件委託

9.樣式表置頂、指令碼置低

 

  1. 簡單描述一下你做過的專案研發流程？

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

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

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

4>程式碼review（由我們組長來幫我們做）

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

 

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

nodejs可以做一些伺服器端的應用，比如我們可以用它搭建一個webserver（基於express框架可以實現）。我本人呢nodejs搭建webserver這塊主要也是從網上看到一些文件自學的，談不上精通。

 

我們公司的話主要用gulp來實現我們前端自動化。比如以前我們公司做webapp的專案有這樣的需求，我們會用sass這個預編譯器，我們寫css3屬性的時候我們經常還會用autoprefixer這個外掛，我們釋出上線的時候還需要把css檔案進行壓縮，如果沒有一個很好的工具能幫我們管理並自動實現上面的操作的話，還是挺麻煩的。現在我們就可以用gulp來實現這些操作的自動化

 

  1. 你有跟後端合作的經驗是吧，你們都怎麼協作的呀？

第一種回答：（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框架

1、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
本文屬於個人原創，轉載請註明出處，辛辛苦苦整理的，多謝配合。


相關文章