天天看點

前端面試筆試知識彙總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、淺複制

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

繼續閱讀