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

時間 2019-11-09

標籤前端面試筆試知識彙總答案欄目快樂工作简体版

原文原文鏈接

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

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

二、瀏覽器與服務器創建TCP鏈接（默認端口80）(詳細點能夠說下三次握手的過程)php

三、應用層客戶端發送HTTP請求。css

四、服務器響應請求：查找客戶端請求的資源，並返回響應報文，響應報文中包括一個重要的信息——狀態碼（200-300，成功；304使用緩存）。html

五、服務器返回相應文件給瀏覽器。前端

六、Tcp鏈接釋放(能夠說下四次揮手的過程)。vue

七、瀏覽器對HTML文件進行解析構建DOM樹，構建渲染樹，js根據DomAPI操做執行綁定事件等，頁面顯示完成。html5

二、兩欄分佈

第一種採用calc；java

第二種採用:都設置position:absolute; 而後設置右邊的left:309px; width:auto;jquery

三、Cookie的讀取，set,以及刪除

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

CSRF

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

你這能夠這麼理解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）對於普通網民，須要注意儘可能抵擋誘惑，別去點擊非知名網站的連接。

五、跨域的實現方式

因爲瀏覽器同源策略，凡是發送請求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請求，而且不能訪問響應的文本，只能監聽是否響應而已，能夠用來追蹤廣告點擊。

六、php包含文件有哪些？

include_once()語句的語法和include()語句相似，主要區別也是避免屢次包含一個文件而引發函數或變量的重複定義。

require_once語句有一個引用鏈，它能夠保證文件加入你的程序僅僅只有一次，並且會避開變量值和函數名之間的衝突。

和require_once語句同樣，include_once語句把include的功能擴展了。在程序執行期間，將指定的文件包含進來，若是從文件引用進來的程序先前已經包含過的時候，include_once()就不會把它再包含進來。也就是僅僅能夠引用同一個文件一次！

require()所包含的文件中不能包含控制結構，並且不能使用return這樣的語句。在require()所包含的文件中使用return語句會產生處理錯誤。

不象include()語句，require()語句會無條件地讀取它所包含的文件的內容，而無論這些語句是否執行。因此若是你想按照不一樣的條件包含不一樣的文件，就必須使用include()語句。固然，若是require()所在位置的語句不被執行，require()所包含的文件中的語句也不會被執行。

七、php有哪些安全問題？

一、SQL注入

所謂SQL注入，就是經過把SQL命令插入到Web表單提交或輸入域名或頁面請求的查詢字符串，最終達到欺騙服務器執行惡意的SQL命令。具體來講，它是利用現有應用程序，將(惡意)的SQL命令注入到後臺數據庫引擎執行的能力，它能夠經過在Web表單中輸入(惡意)SQL語句獲得一個存在安全漏洞的網站上的數據庫，而不是按照設計者意圖去執行SQL語句。

二、Xss

三、Csrf

八、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()方法能夠綁定動態添加到頁面元素的事件

十、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元素

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

　　 border-radius

box-shadow

text-shadow

-webkit-gradient

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

　　 background-origin

　　 background-clip

　　 background-size

　　 multiple backgrounds

　　 border-image

四、 CSS3特效部分3：變形

　　 rotate

　　 X/Y/Z

scale

translate

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

　　 transition-timing-function,transition-delay'

skew

matrix

五、 CSS3特效部分4：動畫

　　　animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

-webkit-animation-direction

十一、移動端適配問題

下面這段代碼，作過移動端項目的同窗必定不會陌生。

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

十二、盒模型

1三、http1.1 和http2之間的區別

1四、HTTP最多見的響應頭以下所示

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

Content-Encoding：文檔的編碼（Encode）方法。只有在解碼以後才能夠獲得Content-Type頭指定的內容類型。利用gzip壓縮文檔可以顯著地減小HTML文檔的下載時間。Java的GZIPOutputStream能夠很方便地進行gzip壓縮，但只有Unix上的Netscape和Windows上的IE 四、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，本網站的截圖以下：

1五、Flex佈局是什麼？

Flex是Flexible Box的縮寫，意爲"彈性佈局"，用來爲盒狀模型提供最大的靈活性。任何一個容器均可以指定爲Flex佈局。Webkit內核的瀏覽器，必須加上-webkit前綴。子元素的float、clear和vertical-align屬性將失效。採用Flex佈局的元素，稱爲Flex容器（flex container），簡稱"容器"。它的全部子元素自動成爲容器成員，稱爲Flex項目（flex item），簡稱"項目"。

如下6個屬性設置在容器上。

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

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

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

默認狀況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，若是一條軸線排不下，如何換行。

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

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。

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

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

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

屬性定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用

屬性定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。