前端筆試題Q&A

時間 2019-11-20

標籤前端筆試 q&a 欄目快樂工作简体版

原文原文鏈接

這是一篇前端崗位筆試題，我總結了相應的答案。若有疏漏和錯誤，歡迎指出。javascript

1、HTML部分css

1.Doctype做用？標準模式與兼容模式有什麼區別?html

<!DOCTYPE> 聲明不是 HTML 標籤；它是指示 web 瀏覽器關於頁面使用哪一個 HTML 版本進行編寫的指令，能夠避免不一樣瀏覽器以不一樣的模式來呈現文檔。
標準模式（嚴格模式）用於呈現遵循最新標準的網頁。
兼容模式（怪異/鬆散模式）頁面以寬鬆的向後兼容的方式顯示。前端

2.HTML5爲何只須要寫<!DOCTYPE HTML>？html5

HTML5以前是基於SGML的，須要對DTD進行引用。而HTML5並不基於SGML，因此不須要DTD進行引用，但須要doctype來規範瀏覽器的行爲。java

3.行內元素有哪些？塊級元素有哪些？空元素有哪些？node

（1）行內元素有：a span img input select strong等jquery

（2）塊級元素有：div ul ol li h1 p等web

（3）空元素有：<br/><img/><hr/><link/><meta/><input/><source/><base/>等算法

4.頁面導入樣式時，使用link和import有什麼區別？

（1）link屬於XHTML標籤，除了加載css外，還能夠用於定義RSS，定義rel鏈接屬性等做用，而@import是css提供的，只能用於加載css；

（2）頁面被加載時，link就會被加載，而@import須要網頁徹底載入之後纔會加載。

（3）link是XHTML標籤，無兼容問題；@import在低版本的瀏覽器不支持。

（4）link支持使用javascript控制DOM去改變樣式；而@import不支持。

5.html5有哪些新特性、移除了哪些元素？如何處理HTML5新標籤的兼容問題？

主要是關於圖像，位置，存儲，多任務等功能的增長。繪畫canvas；音視頻元素audio和video；
本地離線存儲localStorage長期存儲數據，瀏覽器關閉後數據不丟失；
sessionStorage的數據在瀏覽器關閉後自動刪除；
增長語義化標籤，如header,footer,nav,article,section等
增長了一些表單控件：calendar、date、time、email等
新的技術：webworker、websocket、Geolocation

html5移除了一些純表現的元素：big、font、s、strike等；還移除了一些會影響性能的元素：frame、frameset。noframes

6.HTML5的離線緩存有哪些？

2、CSS部分

1.介紹一下CSS的盒子模型？

盒子模型（框模型）包含了元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）幾個元素。

它有兩種模式，標準模式和怪異模式。
標準模式會被設置的padding撐開，而怪異模式則至關於將盒子的大小固定時，再將內容裝入盒子，這樣盒子的大小就不會被padding所撐開。
標準模式：盒子總寬度 = 內容區寬度 + padding + border + margin
怪異模式：盒子總寬度 = width + margin

2.CSS選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？ CSS3新增僞類有哪些？

css選擇符有以下：
1.元素選擇符：*、類型選擇符E、ID選擇符E#id、類選擇符E.class
2.關係選擇符：包含選擇符(E F)、子選擇符(E>F)、相鄰選擇符(E~F)
3.屬性選擇符：E[att]、E[att='val']、E[~='val']、E[att^='val']、E[$='val']、E[*='val']、E[att|='val']
4.僞類選擇符：E:link、E:visited、E:hover、E:active、E:focus、E:first-child、E:nth-child(n)等
5.僞對象選擇符：E:first-letter、E:first-line、E:before、E:after、E::placeholder、E::selection

能夠繼承的樣式有：font-size,font-family,color,text-indent
不能夠繼承的樣式有：border,padding,margin,width,height

優先級算法：
1.就近原則，同權重狀況樣式定義最近者爲準
2.載入樣式以最後載入的樣式爲準
3.！important > id > class > tag
4.!important權重最高，其次內聯樣式，最後樣式表樣式

CSS3新增僞類有：
p:first-of-type p:only-of-type p:nth-child :enabled :checked等

3.如何居中div？如何居中一個浮動元素？

塊級元素：
水平居中：設置寬度，左右外邊距爲auto
垂直居中：1.絕對定位法一：top:50%;margin-top:50%;
　　　　　2.絕對定位法二：top:50%;transform:translate(-50%,-50%);
　　　　 3.基於視口法： margin:50vh auto 0; transform: translateY(-50%);
　　　　 4.彈性盒子法：父元素：display:flex;　　子元素：margin:auto;

浮動元素：
1.計算法：啊哈，就是精確計算其外邊距使其居中
2.包裹法：讓一個div包裹該元素，而後讓div居中

4.absolute的containing block計算方式跟正常流有什麼不一樣？

absolute的包含快是離之最近的position屬性非static的祖先元素

5.position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？

6.display:inline-block 何時會顯示間隙？

兩個inline-block元素水平呈現時，中間如有空格或換行就會形成元素間有一塊間隙。這並不是是bug而是符合規範的表現。
想查看去除這個空隙的方案，請戳這裏 >> : chlick me!

3、JS部分

1.說幾條寫javascript的基本規範？

全部標籤都應當閉合；使用tab鍵來進行縮進；減小全局變量；變量聲明寫在對應做用域的頂部；
使用有意義的命名；函數應該短小精悍，一個函數只作一件事；學會寫註釋.........
推薦查看書籍：《clean code》

2.null和undefined的區別？

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

3.node.js的適用場景？

node.js擁有很強的處理併發的能力，但處理計算和邏輯的能力反而很弱。
因此node.js適用於須要對高併發進行高性能處理時的情景。例如實時聊天，本地化的音樂應用。

4.介紹js的基本數據類型？

js的數據類型分爲基本類型和引用類型。
基本類型有：number、string、boolean、null、undefined

5.['1','2','3'].map(parseInt) 答案是多少？

答案是 [1,NaN,NaN] 。

6.什麼是閉包，爲何要用它？

閉包是指有權訪問另外一個函數做用域中變量的函數，建立閉包的最多見方式是在一個函數內建立另外一個函數，經過另外一個函數訪問這個函數的局部變量，利用閉包能夠突破做用域鏈，將函數內部的變量和方法傳遞到外部。

7.‘use strict’;是什麼意思？使用它的好處和壞處分別是什麼？

表示使用嚴格模式，經過嚴格模式，在函數內部選擇進行較爲嚴格的全局或局部的錯誤條件檢測。

使用嚴格模式的好處是能夠提前知道代碼中存在的錯誤。
嚴格模式只有在js代碼的第一行纔會生效，多個js文件合併時可能會致使失效。

8.js延遲加載的方式有哪些？

1.使用setTimeout延遲方法的加載時間
2.將js文件放在頁面的底部
3.在script標籤中使用defer屬性
4.在script標籤中使用async屬性
5.動態建立DOM方法
6.使用jquery的getScript()方法

9.如何解決跨域問題？

跨域問題：它是因爲javascript語言安全限制中的同源策略形成的。
同源策略是指一段腳本只能讀取來自同一來源的窗口和文檔的屬性，這裏的同一來源指的是主機名、協議和端口號的組合

解決辦法：
1.使用跨域資源共享（CORS）
2.使用jsonp
3.document.domain + iframe
4.使用window.name + iframe
5.使用window.postMessage方法

10.json對象轉成json字符，json字符轉換成json對象的實現方法？

1.JSON.parse(jsonstr); //能夠將json字符串轉換成json對象2.JSON.stringify(jsonobj); //能夠將json對象轉換成json字符串3.使用 eval(); 將字符串轉換成json（慎用）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。