福利1：某知名網際網路下載服務提供商前端工程師筆試題

題目部分

一、單選題

1．下列選項中，不是把網頁抽象成三部分（HTML、CSS和JavaScript）後的優點的是（ ）。

A．增強HTML文件的可讀性

B．跨平臺，可方便遷移到不同裝置中

C．在HTML文件中可按需載入相應的檔案，減少不必要的請求

D．將相關功能的檔案集中到一起，更易於維護和呼叫

2．以下能夠控制元素的盒模型的屬性是（ ）。

A．box-sizing B．box-shadow C．box-flex D．box-pack

3．常用的HTTP位於TCP/IP的（ ）。

A．應用層 B．傳輸層 C．表示層D．會話層

4．對下面程式碼的描述中，正確的是（ ）。 A．回撥函式會在延遲2s後執行一次

B．回撥函式會以2s為間隔重複執行

C．回撥函式會在延遲2min後執行一次

D．回撥函式會重複執行2000次

5．敏捷軟體開發方法是一種（ ）。

A．數學觀 B．建模觀 C．工程觀D．協作觀

6．某公司使用包過濾防火牆控制進出公司區域網的資料，在不考慮使用代理伺服器的情況下，下面描述錯誤的是（ ）。

A．該防火牆能夠使公司員工只能訪問Internet上與其業務聯絡的公司的IP地址

B．該防火牆能夠僅允許HTTP通過，不允許其他協議通過，如TCP/UDP

C．該防火牆能夠使員工不能直接訪問FTP伺服器埠號為21的FTP地址

D．該防火牆能夠僅允許公司中具有某些特定IP地址的計算機可以訪問外部網路

7．為了使虛存系統有效地發揮其預期的作用，所執行的程式應具有的特性是（ ）。

A．該程式不應含有過多的I/O操作

B．該程式大小不應超過實際的記憶體容量

C．該程式的指令相關不應過多

D．該程式應當具有較好的區域性性

8．如果入棧序列是a1，a3，a5，a2，a4，a6，出棧序列是a5，a4，a2，a6，a3，a1，那麼棧的容量最小是（ ）。

A．2 B．3 C．4 D．5

9．對於一棵排序二叉樹，可以得到有序序列的遍歷方式是（ ）遍歷。

A．前序 B．中序 C．後序 D．都可以

二、多選題

1．以下對網頁的描述中，正確的是（ ）。

A．網頁由HTML、CSS和JavaScript組成

B．HTML負責內容和結構

C．CSS負責樣式呈現

D．JavaScript負責動態互動

2．以下屬於CSS3中全新的特性的是（ ）。

A．選擇器 B．動畫 C．伸縮盒D．陰影

3．jQuery中被譽為工廠函式的是（ ）。

A．ready() B．jQuery() C．$() D．function()

三、填空題

1．下面的div元素，在W3C盒模型中的寬度是__________px，在IE盒模型中的寬度是__________px。 2．執行下面的程式碼，在控制檯輸出的x為__________，y為________。 3．執行下面的程式碼後，在控制檯輸出的y為__________。 4．0 || 1得到的結果為__________，0 && 1 得到的結果為__________。

四、問答題

1．HTML的含義是什麼？

2．什麼是XHTML？

3．什麼是CSS前處理器？

4．什麼是盒模型？

5．什麼是網際網路？

6．請簡單介紹一下HTTP。

7．相等（=）和全等 （===）運算子有哪些區別？

8．split()與join()方法有哪些區別?

9．兩個運算子typeof與instanceof有哪些區別？

五、程式設計題

1．用純CSS實現一個三角形。

2．請用JavaScript實現氣泡排序。

3．請實現一個遍歷至100的迴圈，在能被3整除時輸出“three”，在能被5整除時輸出 “five”，在能同時被3和5整除時輸出“all”。

4．不借助第三方類庫，用多種方式讀取下面文字框中的value屬性值。 六、開放題

1．你對我們公司有什麼瞭解？

2．如果你在這次面試中沒有被錄用，你會怎麼辦?

3．如果你被錄取了，接下來將如何開展工作？

詳細解讀

一、單選題

1．答案：B

分析：把網頁抽象成三部分主要是為了使職責更分明，並且網頁並不會因為抽象成三部分後才能跨平臺。因此，選項B的描述並不準確。

2．答案：A

分析：選項B中的box-shadow屬性用於新增陰影；C、D兩個選項中的box-flex和box-pack都是舊版本的伸縮屬性，前者用於建立伸縮容器，後者用於主軸對齊。

3．答案：A

分析：TCP/IP是為網際網路服務的協議簇，它將通訊過程抽象為四層，分別是應用層、傳輸層、網際網路層和網路介面層。SMTP、FTP、HTTP等常用的協議都位於應用層。

4．答案：B

分析：setInterval()是一個定時器函式，它接收兩個引數，第一個引數是要執行的程式碼（字串或函式），第二個引數是延遲時間（以毫秒為單位）。第一個引數中的程式碼能在指定的時間後重復執行，由此可知，只有選項B的描述是正確的。

5．答案：D

分析：敏捷軟體開發方法是一種應對快速變化的需求的軟體開發能力。它們的具體名稱、理念、過程和術語都不盡相同，相對於“非敏捷”，敏捷更強調程式設計師團隊與業務專家之間的緊密協作、面對面的溝通（認為比書面的文件更有效）、頻繁交付新的軟體版本、緊湊而自我組織型的團隊、能夠很好地適應需求變化的程式碼編寫和團隊組織方法，也更注重作為軟體開發中人的作用。所以，敏捷軟體開發方法是一種創作與交流的協作觀。所以，選項D正確。

6．答案：B

分析：包過濾防火牆的作用通常是直接轉發報文，它對使用者完全透明，而且速度較快，一般包含有一個包檢查模組（通常稱為包過濾器），可以根據資料包中的各項資訊來控制站點與站點、站點與網路、網路與網路之間的相互訪問，但無法控制傳輸資料的內容，因為資料內容屬於應用層，而包過濾器工作在傳輸層和網路層。

對於選項A與選項D，無論是源IP地址還是目的IP地址，都是網路層的IP地址，都在包過濾防火牆的控制範圍內。因此，通過配置目的IP和源IP，可以使公司員工只能訪問網際網路上與其業務聯絡的公司的IP地址，可以僅允許公司中具有某些特定IP地址的計算機可以訪問外部網路。所以，選項A與選項D中的描述是正確的。

對於選項B，由於HTTP是超文字傳輸協議，是應用層協議，包過濾防火牆工作在傳輸層和網路層，因此，它無法實現對應用層協議的限制。所以，選項B中的描述是錯誤的。

對於選項C，預設情況下，FTP開放的埠號是21，它是傳輸層TCP的埠號。因此，雖然FTP是應用層協議，但是通過包過濾防火牆可以限制TCP埠號，即可以使員工不能直接訪問FTP伺服器埠號為21的FTP地址。所以，選項C中的描述是正確的。

7．答案：D

分析：對於選項A，程式不應含有過多的I/O操作，是原因，但這不是主要原因。所以，選項A錯誤。

對於選項B，顯然該描述正好和虛存的目的相悖。所以，選項B錯誤。

對於選項C，該程式的指令相關不應過多，是原因，但這不是主要原因。所以，選項C錯誤。

對於選項D，程式應當具有較好的區域性性，可以使虛存系統有效地發揮其預期的作用，描述正確。所以，選項D正確。

8．答案：C

分析：本題解題的關鍵是瞭解棧的後進先出的性質。通過入棧序列與出棧序列可以模擬一下其具體的出棧與入棧過程，過程如下：

第一步：a1進棧，此時棧中元素為1。

第二步：a3進棧，此時棧中元素為2。

第三步：a5進棧，此時棧中元素為3。

第四步：根據進棧出棧順序，a5出棧，a2進棧，此時棧中元素為3。

第五步：a4進棧，此時棧中元素為4。

第六步：根據進棧出棧順序，a4出棧，此時棧中元素為3。

第七步：根據進棧出棧順序，a2出棧，此時棧中元素為2。

第八步：a6進棧，此時棧中元素為3。

第九步：根據進棧出棧順序，a6出棧，此時棧中元素為2。

第十步：根據進棧出棧順序，a3出棧，此時棧中元素為1。

第十一步：根據進棧出棧順序，a1出棧，此時棧中元素為0。

由以上分析可知，棧中元素最多的時候為4個，所以，棧容量至少為4。選項C正確。

9．答案：B

分析：排序二叉樹的特點為，對於一個結點而言，所有左子樹結點元素的值都小於這個結點元素的值，所有右子樹結點的元素的值都大於這個結點元素的值，且左右子樹都是排序二叉樹。由於中序遍歷的順序為左子樹、根、右子樹，顯然，中序遍歷得到的序列是有序的。所以，選項B正確。

二、多選題

1．答案：ABCD

分析：網頁由三部分組成，分別是HTML、CSS和JavaScript，三部分的職責正如選項B、選項C和選項D中所描述的那樣。

2．答案：BCD

分析：CSS3是一個規範集合，包括升級到版本3的CSS規範以及版本號還是1的新規範，動畫、伸縮盒和陰影是CSS3全新的特性。而選項A中的選擇器原先就存在，CSS3只是完善了它，使其擁有更豐富的功能。

3．答案：BC

分析：jQuery的工廠函式是選項B中的jQuery()，而該函式還有一個別名，也就是選項C中的“$”，用一個美元符號來代替函式名稱。

三、填空題

1．答案：122、100

分析：IE盒模型中內容的寬或高將會包含內邊距和邊框，題目中div元素的寬度為100px，那麼IE盒模型中的寬度也是100px。而W3C盒模型中內容的寬或高並不會包含內邊距和邊框，如果要獲取W3C盒模型的寬度，那麼需要把內容的寬度、內邊距以及邊框相加，在此題中得到的結果是122px。

2．答案：0、1

分析：如果把++運算子單獨放在一行，那麼它會和下面的語句合併，作為一個整體被解析。本題中的程式碼相當於“x;++y;”，程式碼執行後，x變數保持原樣，而y變數會加一。

3．答案：0

分析：switch語句中的x變數會與case子語句中的表示式進行全等（===）匹配，由於x變數是一個字串，而case子語句中的條件是數字，因此無法匹配case子語句，只能執行default子語句中的程式碼塊，y變數最終會被定義為0。

4．答案：1、0

分析：邏輯或（||）在布林運算過程中，如果碰到真值，那麼就會返回這個運算元。由於第一個表示式中的第二個運算元是真值，因此計算結果就是這個值，也就是1。邏輯與（&&）在布林運算過程中，如果碰到假值，那麼就會返回這個運算元。第二個表示式中的第一個運算元就是假值，因此直接返回它，也就是0。

四、問答題

1．答案：HTML（HyperText Markup Language）即超文字標記語言，是一種用於建立網頁的標記語言。HTML經歷過多個版本，包括HTML 2.0、HTML 3.x、HTML 4.x以及最新的HTML 5。HTML源於標準通用標記語言（Standard Generalized Markup Language，SGML），遵循SGML指定的語法和規則，但從HTML 5開始，將不再基於SGML。

2．答案：HTML的格式比較鬆散，這會導致一些問題，如相容性差、移植性差等。為了解決上述所列的種種問題，W3C在2000年釋出了XHTML 1.0。XHTML是XML的一種應用，作為HTML的一個子集，它完全相容HTML，但格式更嚴謹。XHTML有過三個版本，分別是1.0、1.1和2.0。XHTML 1.0與HTML 4.01的不同之處在於語法規則，前者需要按照XML的要求來規範HTML，其中，XML是SGML的一個子集。

3．答案：CSS前處理器（CSS Preprocessor）能為CSS增加程式設計特性，通過編譯器將使用新語法的檔案輸出為一個普通的CSS檔案，解決CSS難以複用、程式碼冗餘、可維護性低的問題。對CSS來說，它不是錦上添花而是雪中送炭，常用的前處理器有Less、Sass和Stylus。

4．答案：盒模型（Box Model，也稱為框模型）就是從盒子頂部俯視所得的一張平面圖，用於描述元素所佔用的空間。它有兩種盒模型：W3C盒模型和IE盒模型（IE6以下，不包含IE6以及怪異模式下的IE 5.5+）。兩者不同之處是對元素尺寸的計算方式。當用CSS給某個元素定義寬或高時，IE盒模型中內容的寬或高將會包含內邊距和邊框，而W3C盒模型並不會包含。

5．答案：網際網路一詞現在已經家喻戶曉，它是由許多網路互聯構成的一個巨型網路。早期的網路僅僅是連線計算機，而現代的網際網路連線的卻是全世界的人。網際網路已經不再是單純的以資料為核心，而是以人為中心，它已經滲透到了生活中的方方面面，顛覆了許多傳統模式，例如足不出戶就能購物、社交或娛樂。

6．答案：HTTP（HyperText Transfer Protocol）即超文字傳輸協議，是一種獲取網路資源（例如影象、HTML文件）的應用層協議，它是網際網路資料通訊的基礎，由請求和響應構成。通常，首先客戶端會發起HTTP請求（在請求報文中會指定資源的URL），然後用傳輸層的TCP建立連線，最後伺服器響應請求，做出應答，回傳資料報文。HTTP自問世到現在，經歷了幾次版本迭代，目前主流的版本是HTTP/1.1，新一代HTTP/2.0是HTTP/1.1的升級版，各方面都超越了前者，但新技術要做到軟硬體相容還需要時間。

7．答案：相等運算子用於比較兩個運算元是否相等，運算元會進行型別轉換。全等運算子用於比較兩個運算元是否嚴格相等，運算元不會進行型別轉換。如下程式碼所示，第一個表示式的計算結果為true，而第二個表示式的計算結果卻為false。 8．答案：首先，兩者所屬的物件不同，split()方法屬於String和RegExp物件，而join()方法屬於Array物件；其次，兩者的功能不同，split()方法能將字串分割為陣列，join()方法能將陣列中的元素銜接成一段字串。

9．答案：兩者之間主要有以下三個方面的區別：

（1）typeof運算子用於檢測資料型別，而instanceof運算子用於檢測物件之間的關聯性。

（2）typeof運算子執行完後會返回一個小寫字母的型別字串，而instanceof運算子執行完後會返回一個布林值。

（3）typeof運算子只需一個運算元，這個運算元可以是基本型別或函式，而instanceof運算子需要兩個運算元，並且左運算元不能是基本型別，右運算元必須是函式，否則運算結果將會沒有意義。

五、程式設計題

1．答案：先將元素（如div）的寬高設為0，邊框的寬度設為50px，4個部分的邊框可拼成一個正方形。然後將其他三部分的顏色設為透明，剩下的部分就是一個三角形，如下程式碼所示： 2．答案：氣泡排序是一種最基本的排序演算法。其核心思想是比較相鄰兩個位置的元素，當滿足指定的條件時，交換兩者的位置；當不滿足條件時，保持不變。如果用氣泡排序實現從小到大的排列，那麼可以像下面這麼寫。

3．答案：如果整數A除以非零整數B，得到的商為整數並且餘數為零，那麼就說明A能被B整除。在JavaScript中，如果對兩個整數（即兩個運算元）進行取餘運算，得到的餘數為零，那麼就能確定執行了一次整除操作。可以像下面這樣按要求輸出指定的值。

4．答案：先用4種方式查詢到文字框（如下所列），再讀取它的value屬性。

（1）使用DOM中的查詢方法getElementById()獲取文字框。

（2）使用Document物件的forms屬性，先通過數字索引獲取表單元素，再通過控制元件的id屬性獲取文字框。

（3）與第二種類似，只是通過id屬性獲取表單元素，其他都一樣。

（4）獲取表單元素的方式可以與第二種或第三種一樣，但通過Form物件的elements屬性來獲取文字框，具體程式碼如下所示： 六、開放題

1．提示：

回答這類問題的時候千萬要謹慎，不要泛泛而談，如果求職者的答案是完全不瞭解，那麼就沒有必要繼續面試了，當然錄用的可能性也幾乎就為零了。沒有哪一家企業希望對自己一無所知的人成為企業的一員，求職者被錄用的機會當然也就很渺茫了。求職者一定要有備而來，事先做好“功課”，多瞭解一些與企業有關的資訊，最好能夠表達出對企業有關方面非常感興趣，所以求職者必須能夠談論關於這個企業的產品、收入、業界聲望、服務、形象、目標、管理風格、職工、歷史和企業文化等問題，但是也不要表現出對這個企業的一切都瞭如指掌，最好回答能夠體現出自己對該公司做了一些研究，但是不要讓面試官被你打敗，同時表達出希望能夠了解關於公司更多情況的願望。

針對這樣的問題，可以採用這樣的態度來開始回答問題：“我覺得貴公司是我最感興趣的公司之一。在我的求職過程中，我也對比過很多其他同類型企業，我覺得貴公司在員工管理、人才培養、薪酬待遇等方面都非常優秀，出於這些原因，我還是更加傾向於貴公司。”但是也不要這樣說：“每個人都告訴我這個公司處於困境中，有各種各樣的麻煩，這就是我來這兒的原因”，即使那是你來的真實原因，不管怎麼樣，還是應該用一個積極的態度來回答這個問題。

有一個小竅門，就是回答的時候，儘量能夠與招聘廣告或宣講會上的內容一致，有條件的話，最好能同企業內部員工交流一下，做到知己知彼，那樣效果可能會更好。

2．提示：

求職是一個雙向選擇的過程，有接受就有拒絕，有成功就有失敗。所以，作為一名求職者，一定要清楚這一點，有時候即使自己的實力達到了企業的標準，也不能保證萬無一失，最終也有可能被企業拒絕。

當面試官對求職者提出此類問題時，並不表示求職者就沒有希望了，就一定不會被錄用。一般而言，沒有哪個面試官是因為要拒絕求職者才提出此類問題。如果真要拒絕求職者，也不用多此一舉提出此類問題了。提出這類問題的目的，主要是想考查求職者在遇到挫折時的一種應對措施，以此評價求職者的處事能力，畢竟未來的工作往往會有困難、有挫折。

作為面試官，一般希望求職者在遇到失敗時，能夠具備以下優良素質：

（1）敢於面對。面對失敗不氣餒，從心理意志和精神上體現出對這次失敗的抵抗力。

（2）自信。相信自己經歷了這次之後經過努力一定能行，能夠超越自我。

（3）善於反思。對於失敗的教訓能認真客觀地總結，能夠從自身的角度找差距，而不是怨天尤人。不要抱怨面試官不是“伯樂”，首先要看自己是不是“千里馬”。能夠正確對待自己，實事求是地評價自己，辯證地看待自己的長短得失。

（4）能夠走出陰影。每一次失敗都會給自己的心靈上抹上一層陰影，能克服這一次失敗帶給自己的心理壓力，時刻牢記自己的弱點，防患於未然，加強學習，提高自身素質。

（5）再接再厲，繼續努力。能夠在以後的學習工作中繼續努力，爭取取得下一次的成功。

3．提示：

面試官提出該類問題一方面是為了考查求職者的應變能力，另一方面也是為了考查求職者是否有一個良好的規劃，因為好的規劃是成功的開始。

所以，在回答此類問題時，應該著重突出以下幾個方面的內容：

（1）個人適應能力強。強調自己能夠儘快熟悉工作環境，融入工作集體，瞭解本單位的工作職能、組織架構以及自己的工作職責。

（2）謙虛謹慎、低調做人，不自高自大。強調進入一個新單位，面臨一個陌生的環境，自己作為一名新人，會有很多問題需要學習，自己一定會積極學習、虛心求教。向領導、向老同志、向同事學習，與他們多交流、多溝通，加深瞭解，增進感情；不爭名奪利，不斤斤計較；識大體、顧大局，爭取能夠早日勝任新的工作。

（3）服從安排。強調自己會遵守紀律，服從組織安排，在爭取自己權益的同時，也顧全企業大局，腳踏實地地從事本職工作。

（4）努力工作。強調自己儘快地進入工作角色，學習崗位相關知識，努力工作，以企業利益最大化為奮鬥目標，不斷開拓創新，為企業的美好明天貢獻自己的力量。

最後我先介紹一下自己，我從事java開發的全棧工程師5年，今年花了一個月整理了一份最適合2018年學習資料，這裡有許多想學習Java的，我這有一個java交流群，有興趣就進群看下，我們有大量的學習資料，還會在群裡直播授課

群號：644038439 邀請碼：炫邁