前端工程師面(筆)試題部分彙總

時間 2019-11-25

標籤前端工程師試題部分彙總简体版

原文原文鏈接

HTML 部分php

1）DOCTYPE 是什麼，有什麼做用，爲何要用 html5 標準的 DOCTYPE（初級）css

<!DOCTYPE> 聲明位於文檔的最前面（處於 <html> 標籤以前）。告知瀏覽器以何種模式來渲染文檔。html

<!DOCTYPE html>讓瀏覽器以自身的最高模式來渲染，儘可能匹配 web 標準。html5

DOCTYPE 不存在或格式不正確會致使文檔以混雜模式呈現。css3

2）請分別列舉至少 3 個 html 中默認的塊級元素和行內元素（初級）web

塊級元素：div、table、ul、p、ol、form、h1~h六、dlajax

行內元素：span、a、em、strong、img、label數組

3）請列舉出至少 3 個 html5 中新增的語義化標籤（初級）瀏覽器

main、nav、aside、article、header、footer、section 等安全

4）要實現一組單選框 radio，屬性上須要知足什麼條件（初級）

name 屬性必須同樣

5）從 SEO 角度，請給出至少 2 條 html 書寫上的注意點（中級）

a 標籤必定要寫 title 屬性

img 標籤必定要寫 alt、title 屬性

選用語義化的 html 標籤

6）請列舉出至少 3 個 html5 中新增的表單控件（中級）

email、url、number、range、Date pickers、search、color、datalist

7）談下對 html 語義化的理解（中級）

去掉或者丟失樣式的時候可以讓頁面呈現出清晰的結構

有利於 SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重；

方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；

便於團隊開發和維護，語義化更具可讀性，遵循 W3C 標準減小差別化。

CSS 部分

1）請列舉出至少 5 個具備繼承特性的 css 屬性（初級）

font-size font-family color line-height text-align text-indent list-style 等，4 個便可

2）請闡述下 display:none 和 visibility:hidden 的區別（初級）

display:none 隱藏對應的元素，在文檔佈局中再也不給它分配空間 visibility:hidden 隱藏對應的元素，可是在文檔佈局中仍保留原來的空間。

3）請簡述（或者圖示）下 w3c 標準的盒模型（初級）

標準和模型包含：內容（content）、內邊距（padding）、邊框（border），外邊距（margin）

4）請列出 display 屬性除了 none 之外的其餘 3 個經常使用值，並分別說明每一個值的做用（初級）

display: inline|block|inline-block

inline 佈局特色轉爲行內元素

block 佈局特色轉爲塊級元素

inline-block 佈局上同時具備行內、塊級元素的特徵

5）在頁面重構時，爲何要先重置 css 樣式，你本身是如何處理的？（初級）

6）請對下面的一段 css 屬性定義的寫法進行簡化（初級）

padding-left: 10px;padding-right: 10px;

padding-top: 4px; padding-bottom: 8px;

padding: 4px 10px 8px

7）請列舉出至少 4 個 css3 屬性（初級）

border-raduis box-shadow text-shadow transform transition 等

8）請列舉出至少 6 種 css 選擇器（初級）

id 選擇器（#id）

類選擇器（.clazzname）

標籤選擇器（div、h一、p）

後代選擇器（li a）

屬性選擇器（a[ref=」external」]）

孩子選擇器（ul > li）

9）position 屬性的 3 個值：relative、absolute、fixed 分別是相對什麼進行定位（初級）

relative：無 top、left 設置時，元素自身在文檔流中的位置

absolute：相對於上級元素中第一個 position 屬性非 static 的元素

fixed：相對於瀏覽器視窗

10）css3 中哪一個屬性能夠對 DOM 元素的盒模型進行調整，該屬性有哪些值，請分別闡述（或者圖示）下不一樣值對盒模型的影響（中級）

box-sizing: content-box|border-box

context-box 即 w3c 標準盒模型

border-box 使得 content 包含了 padding、border

11）請簡述下 CSS sprites 的原理，代碼層面涉及哪一個 css 屬性（中級）

CSS Sprites 其實就是把網頁中一些背景圖片整合到一張圖片文件中。這樣能夠減小不少圖片請求的開銷，由於請求耗時比較長；請求雖然能夠併發，可是也有限

制，通常瀏覽器都是 6 個。再利用 CSS 的 background-image、background-repeat、background-position 的組合進行背景定位，background-position 能夠用數字能精確的定位出背景圖片的位置。

對於將來而言，http2 協議應用的話，就不須要這樣作了。

12）css 中@import 指令的做用，它有何缺陷（中級）

在 css 文件中引入外部的 css 代碼塊缺陷：不利於多個 css 文件的並行下載，會形成阻塞，對頁面渲染不利。

13）爲何對元素使用了 float 浮動，必定要有清除浮動（中級）

浮動的框能夠左右移動，直至它的外邊緣遇到包含框或者另外一個浮動框的邊緣。浮動框不屬於文檔中的普通流，當一個元素浮動以後，不會影響到塊級框的佈局而只會影響內聯框（一般是文本）的排列，文檔中的普通流就會表現得和浮動框不存在同樣，當浮動框高度超出包含框的時候，也就會出現包含框不會自動伸高來閉合浮動元素（「高度塌陷」現象）。

正是由於浮動的這種特性，致使本屬於普通流中的元素浮動以後，包含框內部因爲不存在其餘普通流元素了，也就表現出高度爲 0（高度塌陷）。在實際佈局中，每每這並非咱們所但願的，因此須要閉合浮動元素，使其包含框表現出正常的高度。

14）請列舉 3 種經常使用的清除浮動的方式（中級）

用空標籤：經過一個內容爲空的標籤，併爲其定義 CSS 代碼：clear:both 來清除浮動

使用 overflow 屬性：在須要清除浮動的元素中定義 CSS 屬性：」overflow:hidden」，爲了兼容 IE6 同時要加上」zoom:1″

使用 after 僞類清除浮動

15）請列舉至少 2 個 IE7 中的常見 bug，以及解決方案（中級）

1，百分比佈局時，IE7 的計算精度沒有其餘瀏覽器高，1 行 5 列，每列 width20%的浮動佈局，在 IE7 會出現錯位。

解決方案爲，爲 IE7 寫 hack，*width:19.99%

2，IE7 不支持 opcity 屬性。

解決辦法：filter: alpha(opacity=60); opacity:0.6;

3，overflow:hidden 屬性在 IE7 中不起做用，若是 overflow:hidden 父元素裏面的子元素採用了絕對定位的方式佈局，父元素上的 overflow: hidden 會失效。

解決方案：在 overflow:hidden 屬性的元素上添加 position: relative; 4，IE7 瀏覽器對絕對定位的元素設置了很高的 z-index 確不能顯示在上層。緣由是 IE7 中層級的比較先比較絕對定位元素的相對定位點元素的 z-index。因此，

解決方案：給相對定位點的元素設置較高的 z-index，若是祖先元素中有不少 position:relative 的元素，則比較的是第一個祖先元素 position：relative

的層級，給第一個祖先元素設定較高的層級便可。

16）頁面重構過程當中，從 ps 中導出圖片素材時，如何選取合適的導出格式（中級）

當圖片色彩豐富且無透明要求時，建議保存 JPG 格式而且選擇合適的品質。

當圖片色彩不太豐富(單一顏色的小圖標)不管有沒有透明度的要求，請保存爲 png-8 格式當圖片有半透明要求時，請保存爲 png-24 格式

17）請簡述下對漸進加強、優雅降級的理解（中級）

漸進加強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

優雅降級 graceful degradation：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。

優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給，而漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要。降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶。

18）什麼是 BFC，請談談對此概念的理解（高級）

BFC，塊級格式化上下文，一個建立了新的 BFC 的盒子是獨立佈局的，盒子裏面的子元素的樣式不會影響到外面的元素。在同一個 BFC 中的兩個毗鄰的塊級盒在垂直方向（和佈局方向有關係）的 margin 會發生摺疊。（W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行佈局，以及與其餘元素的關係和相互做用。）

19）請簡述下低版本 IE（6,7）中下特有的 hasLayout 屬性（高級）

「Layout」是一個 Internet Explorer for Windows 的私有概念，它決定了一個元素如何顯示以及約束其包含的內容、如何與其餘元素交互和創建聯繫、如何響應和傳遞應用程序事件、用戶事件等。這種渲染特性能夠經過某些 CSS 屬性被不可逆轉地觸發。而有些 HTML 元素則默認就具備」layout」。

IE6-7 使用佈局的概念來控制元素的尺寸和定位，那些擁有佈局（have layout）的元素負責自己及其子元素的尺寸設置和定位。若是一個元素的 hasLayout 爲false，那麼它的尺寸和位置由最近擁有佈局的祖先元素控制。

JavaScript 部分

1）JavaScript 有哪幾種數據類型（初級）

簡單：Number，Boolean，String，Null，Undefined

複合：Object，Array，Function

2）請編寫一個 JavaScript 函數 parseQueryString，它的用途是把 URL 參數解析爲一個對象，如：（初級）

var url = 「楓芸志″;

function parseQueryString(url) { var params = {};

var arr = url.split("?"); if (arr.length <= 1){

return params;

}

arr = arr[1].split("&");

for (var i = 0, l = arr.length; i < l; i++) { var a = arr[i].split("=");

params[a[0]] = a[1];

}

return params;

}

3）js 中 split()和 join() 方法的區別（初級）

前者是將字符串切割成數組的形式，後者是將數組轉換成字符串

4）已知有字符串 foo=」get-element-by-id」,寫一個 function 將其轉化成駝峯表示法」getElementById」。（初級）

function combo(str) {

var arr = str.split('-');

for(var i = 0; i< arr.length; i++){

arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substr(1, arr[i].length - 1);

}

str = arr.join(''); return str;

}

5）請計算下面變量的值（初級）

var a= (Math.PI++);

var b = (Math.PI++);

alert(a);

alert(b);

答案: 3.141592653589793，3.141592653589793

6）請寫出如下 js 表達式的值（初級）

4+"3"

3+"a"

var a="4"; a+3

3+null

3+true

3+「a」-3

undefined==null

1===true

答案："43"，"3a"，"43"，3，4，NaN，true，false

7）有以下 html，如何用 js 得到被選中的 option 的 text 描述（非 value）（初級）

<select id="select_id">

<option vlue="1">text1</option> <option vlue="2">text2</option> <option vlue="3">text3</option> <option vlue="4">text4</option>

</select>

答案：

var s = document.getElementById("select_id"), index = s.options.selectedIndex;

var text = s.options[index].text; alert(text);

8）js 怎樣添加、移除、移動、複製、建立和查找節點（初級）

<1>建立新節點

createDocumentFragment() //建立一個 DOM 片斷

createElement() //建立一個具體的元素

createTextNode() //建立一個文本節點

<2>添加、移除、替換、插入

appendChild() //添加

removeChild() //移除

replaceChild() //替換

insertBefore() //插入

<3>查找

getElementsByTagName() //經過標籤名稱

getElementsByName() //經過元素的 Name 屬性的值

getElementById() //經過元素 Id，惟一性

9）看下面代碼，給出輸出結果。（初級）

for(var i = 1; i < 3; i++){

setTimeout(function(){

console.log(i);

}, 10);

}

答案：3,3

10）按順序寫出 alert 彈出窗口的內容。（中級）

var name ="The Window";

var object = {

name : "My Object",

getNameFunc : function() {

alert('1.' + this.name);

return function() {

return this.name;

};

}

};

var func = object.getNameFunc();alert('2.' + func());

alert('3.' + func.call(object)); alert('4.' + func.apply(object));

答案: 1.My Object，2.The Window， 3.My Object， 4.My Object

11）簡述建立 ajax 過程（中級）

1. 建立`XMLHttpRequest`對象,也就是建立一個異步調用對象.

2. 建立一個新的`HTTP`請求,並指定該`HTTP`請求的方法、`URL`及驗證信息.

3. 設置響應`HTTP`請求狀態變化的函數.

4. 發送`HTTP`請求.

5. 獲取異步調用返回的數據.

6. 使用 JavaScript 和 DOM 實現局部刷新.

var xmlHttp = new XMLHttpRequest();

xmlHttp.open('GET','demo.php','true');

xmlHttp.send() xmlHttp.onreadystatechange = function(){

if(xmlHttp.readyState === 4 & xmlHttp.status === 200){

}

}

12）說說你對做用域鏈的理解（中級）

做用域鏈的做用是保證執行環境裏有權訪問的變量和函數是有序的，做用域鏈的變量只能向上訪問，變量訪問到 window 對象即被終止，做用域鏈向下訪問變量是

不被容許的。

13）說說你對閉包的理解（中級）

使用閉包主要是爲了設計私有的方法和變量。閉包的優勢是能夠避免全局變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易形成內存泄露。

閉包有三個特性：

1. 函數嵌套函數

2. 函數內部能夠引用外部的參數和變量

3. 參數和變量不會被垃圾回收機制回收

14）null 和 undefined 的區別？（中級）

null 是一個表示"無"的對象，轉爲數值時爲 0；undefined 是一個表示"無"的原始值，轉爲數值時爲 NaN。

當聲明的變量還未被初始化時，變量的默認值爲 undefined。