前端面試筆試知識彙總1（含答案）

另外兩篇文章連結如下：

前端面試筆試知識彙總2（含答案）；

前端面試筆試知識彙總3（含答案）；

結合我的秋招面經來看，效果更佳：2017年秋季校招前端面經（百度，騰訊，網易，華為，樂視等）

以及各個公司校招筆試題回憶錄：各個公司前端筆試題回顧

1、從輸入網址到顯示網頁的過程分析

1、應用層DNS解析域名：用戶端先檢查本地是否有對應的IP位址，若找到則傳回響應的IP位址。若沒找到則請求上級DNS伺服器，直至找到或到根節點。

2、浏覽器與伺服器建立TCP連接配接（預設端口80）(詳細點可以說下三次握手的過程)

3、應用層用戶端發送HTTP請求。

4、伺服器響應請求：查找用戶端請求的資源，并傳回響應封包，響應封包中包括一個重要的資訊——狀态碼（200-300，成功；304使用緩存）。

5、伺服器傳回相應檔案給浏覽器。

6、Tcp連接配接釋放(可以說下四次揮手的過程)。

  7、浏覽器對HTML檔案進行解析建構DOM樹 ，建構渲染樹 ，js根據DomAPI操作執行綁定事件等，頁面顯示完成。

2、兩欄分布

第一種采用calc；

第二種采用:都設定position:absolute; 然後設定右邊的left:309px;  width:auto;

3、Cookie的讀取，set,以及删除

4、前端存在哪些安全問題？

CSRF

CSRF（Cross-site request forgery），中文名稱：跨站請求僞造，也被稱為：one click attack/session riding，縮寫為：CSRF/XSRF。

你這可以這麼了解CSRF攻擊：攻擊者盜用了你的身份，以你的名義發送惡意請求。CSRF能夠做的事情包括：以你名義發送郵件，發消息，盜取你的賬号，甚至于購買商品，虛拟貨币轉賬......造成的問題包括：個人隐私洩露以及财産安全。

1. 檢查報頭中的Referer參數確定請求發自正确的網站（但XHR請求可調用setRequestHeader方法來修改Referer報頭）；

2. 對于任何重要的請求都需要重新驗證使用者的身份；

3. 建立一個唯一的令牌（Token），将其存在服務端的session中及用戶端的cookie中，對任何請求，都檢查二者是否一緻。

XSS的預防可以從多方面着手：

xss表示Cross Site Scripting(跨站腳本攻擊)，它與SQL注入攻擊類似，SQL注入攻擊中以SQL語句作為使用者輸入，進而達到查詢/修改/删除資料的目的，而在xss攻擊中，通過插入惡意腳本，實作對使用者遊覽器的控制。

（1）如前面所述，浏覽器自身可以識别簡單的XSS攻擊字元串，進而阻止簡單的XSS攻擊；

（2）從根本上說，解決辦法是消除網站的XSS漏洞，這就需要網站開發者運用轉義安全字元等手段，始終把安全放在心上；

（3）對于普通網民，需要注意盡量抵擋誘惑，别去點選非知名網站的連結。

5、跨域的實作方式

由于浏覽器同源政策，凡是發送請求url的協定、域名、端口三者之間任意一與目前頁面位址不同即為跨域。

JSONP

　　這種方式主要是通過動态插入一個script标簽。浏覽器對script的資源引用沒有同源限制，同時資源加載到頁面後會立即執行（沒有阻塞的情況下）。

通過修改document.domain來跨子域

浏覽器都有一個同源政策，其限制之一就是第一種方法中我們說的不能通過ajax的方法去請求不同源中的文檔。 它的第二個限制是浏覽器中不同域的架構之間是不能進行js的互動操作的。有一點需要說明，不同的架構 之間（父子或同輩），是能夠擷取到彼此的window對象的，但蛋疼的是你卻不能使用擷取到的window對象的屬性和方法(html5中的 postMessage方法是一個例外，還有些浏覽器比如ie6也可以使用top、parent等少數幾個屬性)，總之，你可以當做是隻能擷取到一個幾乎 無用的window對象。比如，有一個頁面，它的位址是http://www.example.com/a.html  ， 在這個頁面裡面有一個iframe，它的src是http://example.com/b.html, 很顯然，這個頁面與它裡面的iframe架構是不同域的，是以我們是無法通過在頁面中書寫js代碼來擷取iframe中的東西的：

在頁面 http://www.example.com/a.html 中設定document.domain:

在頁面 http://example.com/b.html 中也設定document.domain，而且這也是必須的，雖然這個文檔的domain就是example.com,但是還是必須顯示的設定document.domain的值：

這樣我們就可以通過js通路到iframe中的各種屬性和對象了。

使用HTML5中新引進的window.postMessage方法來跨域傳送資料

window.postMessage(message,targetOrigin)  方法是html5新引進的特性，可以使用它來向其它的window對象發送消息，無論這個window對象是屬于同源或不同源，目前IE8+、 FireFox、Chrome、Opera等浏覽器都已經支援window.postMessage方法。

調用postMessage方法的window對象是指要接收消息的那一個window對象，該方法的第一個參數message為要發送的消息，類 型隻能為字元串；第二個參數targetOrigin用來限定接收消息的那個window對象所在的域，如果不想限定域，可以使用通配符 *  。

需要接收消息的window對象，可是通過監聽自身的message事件來擷取傳過來的消息，消息内容儲存在該事件對象的data屬性中。

上面所說的向其他window對象發送消息，其實就是指一個頁面有幾個架構的那種情況，因為每一個架構都有一個window對象。在讨論第二種方法 的時候，我們說過，不同域的架構間是可以擷取到對方的window對象的，而且也可以使用window.postMessage這個方法。下面看一個簡單 的示例，有兩個頁面

圖檔ping

圖檔可以從任何URL中加載，是以将img的src設定成其他域的URL，即可以實作簡單的跨域，可以使用onload和onerror事件來确定是否接受到了響應。

這裡建立了一個img對象，給出的url是部落格位址，這裡是個error事件，是以彈出error；如果将URL改為一張圖檔http://images.jb51.net//710118/o_MacBook%20Air.png，就會彈出onload加載資訊success，進而實作了簡單的跨域。

使用圖檔ping跨域隻能發送get請求，并且不能通路響應的文本，隻能監聽是否響應而已，可以用來追蹤廣告點選。

6、php包含檔案有哪些？

include_once()語句的文法和include()語句類似，主要差別也是避免多次包含一個檔案而引起函數或變量的重複定義。

require_once語句有一個引用鍊，它可以保證檔案加入你的程式僅僅隻有一次，而且會避開變量值和函數名之間的沖突。

和require_once語句一樣，include_once語句把include的功能擴充了。在程式執行期間，将指定的文 件包含進來，如果從檔案引用進來的程式先前已經包含過的時候，include_once()就不會把它再包含進來。也就是僅僅可以引用同一個檔案一次！

require()所包含的檔案中不能包含控制結構，而且不能使用return這樣的語句。在require()所包含的檔案中使用return語句會産生處理錯誤。

不象include()語句，require()語句會無條件地讀取它所包含的檔案的内容，而不管這些語句是否執行。是以如果你 想按照不同的條件包含不同的檔案，就必須使用include()語句。當然，如果require()所在位置的語句不被執行，require()所包含的 檔案中的語句也不會被執行。

7、php有哪些安全問題？

1、SQL注入

所謂SQL注入，就是通過把SQL指令插入到Web表單送出或輸入域名或頁面請求的查詢字元串，最終達到欺騙伺服器執行惡意的SQL指令。具體來說，它是利用現有應用程式，将(惡意)的SQL指令注入到背景資料庫引擎執行的能力，它可以通過在Web表單中輸入(惡意)SQL語句得到一個存在安全漏洞的網站上的資料庫，而不是按照設計者意圖去執行SQL語句。

2、Xss

3、Csrf

8、jquery綁定click的方法有幾種

bind()函數隻能針對已經存在的元素進行事件的設定；但是live(),on(),delegate()均支援未來新添加元素的事件設定；

bind()函數在jquery1.7版本以前比較受推崇，1.7版本出來之後，官方已經不推薦用bind()，替代函數為on(),這也是1.7版本新添加的函數，同樣，可以用來代替live()函數，live()函數在1.9版本已經删除；

live()函數和delegate()函數兩者類似，但是live()函數在執行速度，靈活性和CSS選擇器支援方面較delegate()差些。

on()方法綁定事件可以提升效率

on()方法可以綁定動态添加到頁面元素的事件

10、css3新特性（最熟悉的）

1: CSS3選擇器部分

　　   E[att^="val"]            比對具有att屬性、且值以val開頭的E元素

         E[att$="val"]            比對具有att屬性、且值以val結尾的E元素

         E[att*="val"]            比對具有att屬性、且值中含有val的E元素

         E:root                比對文檔的根元素。在HTML中，根元素永遠是HTML

         E:nth-child(n)           比對父元素中的第n個子元素E

         E:nth-last-child(n)     比對父元素中的倒數第n個結構子元素E

         E:nth-of-type(n)        比對同類型中的第n個同級兄弟元素E

         E:nth-last-of-type(n)     比對同類型中的倒數第n個同級兄弟元素E

         E:last-child            比對父元素中最後一個E元素

         E:first-of-type          比對同級兄弟元素中的第一個E元素

         E:only-child            比對屬于父元素中唯一子元素的E

         E:only-of-type         比對屬于同類型中唯一兄弟元素的E

         E:empty              比對沒有任何子元素（包括text節點）的元素E

         :target            比對相關URL指向的E元素

         E:enabled          比對所有使用者界面（form表單）中處于可用狀态的E元素

         E:disabled          比對所有使用者界面（form表單）中處于不可用狀态的E元素

         E:checked          比對所有使用者界面（form表單）中處于選中狀态的元素E

         E::selection        比對E元素中被使用者選中或處于高亮狀态的部分

         E:not(s)           比對所有不比對簡單選擇符s的元素E

         E ~ F              比對E元素之後的F元素

2、 CSS3特效部分1：圓角，陰影，漸變

　　   border-radius

         box-shadow

         text-shadow

         -webkit-gradient

3、 CSS3特效部分2：背景，邊框背景

　　   background-origin

　　   background-clip

　　   background-size

　　   multiple backgrounds

　　   border-image

4、 CSS3特效部分3： 變形

　　   rotate

　　   X/Y/Z

         scale

         translate

　　   transform-origin,transition-property,transition-duration,

　　   transition-timing-function,transition-delay'

         skew

         matrix

5、 CSS3特效部分4：動畫

　　　animation-name

         animation-duration

         animation-timing-function

         animation-delay

         animation-iteration-count

         -webkit-animation-direction

11、移動端适配問題

下面這段代碼，做過移動端項目的同學一定不會陌生。

假設你已經見過上面的代碼，并有所應用，對響應式設計如何工作有大概的了解，但不一定清楚一些細節。最近在做一個移動端的項目，要求做到精确還原設計稿，像素級。

12、盒模型

13、http1.1 和http2之間的差別

14、HTTP最常見的響應頭如下所示

 Allow：伺服器支援哪些請求方法（如GET、POST等）；

• Content-Encoding： 文檔的編碼（Encode）方法。隻有在解碼之後才可以得到Content-Type頭指定的内容類型。利用gzip壓縮文檔能夠顯著地減少HTML文檔 的下載下傳時間。Java的GZIPOutputStream可以很友善地進行gzip壓縮，但隻有Unix上的Netscape和Windows上的IE 4、IE 5才支援它。是以，Servlet應該通過檢視Accept-Encoding頭（即request.getHeader("Accept- Encoding")）檢查浏覽器是否支援gzip，為支援gzip的浏覽器傳回經gzip壓縮的HTML頁面，為其他浏覽器傳回普通頁面；

• Content-Length： 表示内容長度。隻有當浏覽器使用持久HTTP連接配接時才需要這個資料。如果你想要利用持久連接配接的優勢，可以把輸出文檔寫入 ByteArrayOutputStram，完成後檢視其大小，然後把該值放入Content-Length頭，最後通過 byteArrayStream.writeTo(response.getOutputStream()發送内容；

• Content-Type： 表 示後面的文檔屬于什麼MIME類型。Servlet預設為text/plain，但通常需要顯式地指定為text/html。由于經常要設定 Content-Type，是以HttpServletResponse提供了一個專用的方法setContentTyep。 可在web.xml檔案中 配置擴充名和MIME類型的對應關系；

• Date：目前的GMT時間。你可以用setDateHeader來設定這個頭以避免轉換時間格式的麻煩；

• Expires：指明應該在什麼時候認為文檔已經過期，進而不再緩存它。

• Last-Modified：文檔的最後改動時間。客戶可以通過If-Modified-Since請求頭提供一個日期，該請求将被視為一個條件GET，隻有改動時間遲于指定時間的文檔才會傳回，否則傳回一個304（Not Modified）狀态。Last-Modified也可用setDateHeader方法來設定；

• Location：表示客戶應當到哪裡去提取文檔。Location通常不是直接設定的，而是通過HttpServletResponse的sendRedirect方法，該方法同時設定狀态代碼為302；

• Refresh：表示浏覽器應該在多少時間之後重新整理文檔，以秒計。除了重新整理目前文檔之外，你還可以通過setHeader("Refresh", "5; URL=http://host/path")讓浏覽器讀取指定的頁面。注意這種功能通常是通過設定HTML頁面HEAD區的<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://host/path"> 實作，這是因為，自動重新整理或重定向對于那些不能使用CGI或Servlet的HTML編寫者十分重要。但是，對于Servlet來說，直接設定 Refresh頭更加友善。注意Refresh的意義是“N秒之後重新整理本頁面或通路指定頁面”，而不是“每隔N秒重新整理本頁面或通路指定頁面”。是以，連續 重新整理要求每次都發送一個Refresh頭，而發送204狀态代碼則可以阻止浏覽器繼續重新整理，不管是使用Refresh頭還是<META HTTP-EQUIV="Refresh" ...>。注意Refresh頭不屬于HTTP 1.1正式規範的一部分，而是一個擴充，但Netscape和IE都支援它。

csdn，本網站的截圖如下：

15、Flex布局是什麼？

Flex是Flexible Box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為Flex布局。Webkit核心的浏覽器，必須加上-webkit字首。子元素的float、clear和vertical-align屬性将失效。采用Flex布局的元素，稱為Flex容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱"項目"。

以下6個屬性設定在容器上。

1、flex-direction： row | row-reverse | column | column-reverse;

屬性決定主軸的方向（即項目的排列方向）。

2、flex-wrap： nowrap | wrap | wrap-reverse;

預設情況下，項目都排在一條線（又稱"軸線"）上。

flex-wrap

屬性定義，如果一條軸線排不下，如何換行。

3、flex-flow：<flex-direction> || <flex-wrap>;

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。

4、justify-content：     flex-start | flex-end | center | space-between | space-around;

屬性定義了項目在主軸上的對齊方式。

5、align-items：flex-start | flex-end | center | baseline |stretch;

屬性定義了多根軸線的對齊方式。如果項目隻有一根軸線，該屬性不起作用

6、align-content： flex-start | flex-end | center | space-between | space-around |

屬性定義了多根軸線的對齊方式。如果項目隻有一根軸線，該屬性不起作用。

項目的屬性

以下6個屬性設定在項目上。

1

、ord

er：order屬性定義項目的排列順序。數值越小，排列越靠前，預設為0。

2

、flex-grow

屬性定義項目的放大比例，預設為

，即如果存在剩餘空間，也不放大。如果所有項目的

flex-grow

屬性都為1，則它們将等分剩餘空間（如果有的話）。如果一個項目的

flex-grow

屬性為2，其他項目都為1，則前者占據的剩餘空間将比其他項多一倍。

3

、flex-shrink

:

屬性定義了項目的縮小比例，預設為1，即如果空間不足，該項目将縮小。

4

、flex-basis

:

<length> | auto; /* default auto */;

屬性定義了在配置設定多餘空間之前，項目占據的主軸空間（main size）。浏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即項目的本來大小。

5

、Flex

:

none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

;

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為

0 1 auto

。後兩個屬性可選。該屬性有兩個快捷值：auto (11 auto) 和 none (0 0 auto)。

6

、align-self

:

auto | flex-start | flex-end | center | baseline | stretch;

align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆寫align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。

16、柯裡化

17、Bind函數

18、Js繼承

缺點：屬性共享；

借用構造函數：函數複用問題無從談起。

組合模式

19、深拷貝

20、淺複制

樹林美麗、幽暗而深邃，但我有諾言尚待實作，還要奔行百裡方可沉睡。 -- 羅伯特·弗羅斯特