另外兩篇文章鏈接如下：
結合我的秋招面經來看，效果更佳：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
-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、order：order屬性定義項目的排列順序。數值越小，排列越靠前，默認為0。
2、flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。如果所有項目的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、淺復制