前端面試問題(持續更新)

B_Cornelius發表於2017-09-22
1、有關BFC的理解
2、盒模型的理解
3、box-sizing的理解
4、漸進增強 VS 優雅降級
5、url->頁面載入完成的整個流程
6、js組成部分
7、如何跨域訪問
8、js判斷陣列
9、嚴格模式
10、ajax的優缺點
11、HTML、XML、XHTML 有什麼區別
12、html語義化
13、內容與樣式分離
14、meta標籤的使用
15、文件宣告的作用
16、嚴格模式和混雜模式
17、<!doctyle html>的作用
18、常見瀏覽器核心
19、頁面匯入樣式時,使用link和@import有什麼區別
20、瀏覽器核心的理解複製程式碼

有關BFC的理解

BFC用來格式化塊級盒子
BFC: 提供一個環境,html元素會在這個環境中按照一定的規則進行佈局。
ex: 例如浮動元素會形成bfc,浮動元素內部子元素主要受該浮動元素影響,但是兩個浮動元素互相不影響。
這個可以理解為一個獨立容器,裡邊規則不會影響到外邊。
那麼什麼情況下會生成bfc呢:
1、浮動元素,float除none以外的值
2、絕對定位,position(absolite,fixed)
3、dispaly = inline-blocks|table-cells|table-captions
4、overflow除visible以外的值
作用:
1、可以阻止元素被浮動元素覆蓋
2、包含浮動元素
3、如果屬於同一個bfc的兩個元素上下margin會發生重疊,但如果兩個元素屬於兩個不同的bfc那麼margin就不會發生重疊

盒模型的理解

css盒子模型,包含了content,padding,border,margin
這些基本的比如比如哪兒是content大家都瞭解我就說了在設定width = 300px時代表的是content的寬度那麼最終的寬度是content+padding+border+margin.
css外邊距合併
剛才在bfc中提到,在一個bfc中,css外邊距是會發生重疊的,解決方法就是放在兩個bfc中。當我們使用盒模型的時候需要注意的是瀏覽器的相容性,這個很好解決在html中宣告 <!DOCTYPE html>,ul在mozilia預設有padding值,而在IE中只有margin有值
盒模型中我們常使用一個屬性叫box-sizing,這會單獨起一頁,這也是面一經常出的問題

box-sizing的理解

box-sizing: content-box|border-box|inherit
content-box是預設值,總寬度= margin+border+padding+width
border-box: 在css中設定的width = border + padding + content,那麼總寬度 = margin + width常在box寬度是100%,又想要兩邊有內間距
inherit: 這就不用說了,是繼承

漸進增強 VS 優雅降級

漸進增強:低瀏覽器實現基本功能,高階瀏覽器實現互動、效果達到更好的體驗
優雅降級: 在高階瀏覽器實現完整功能,然後針對低階瀏覽器進行hack以便低階瀏覽器能夠正常執行
兩者是因為各種版本的瀏覽器對css3的支援情況而不同所造成的

url->頁面載入完成的整個流程

1、瀏覽器查詢域名對應的IP地址
2、瀏覽器根據IP地址與伺服器建立socket連線
3、瀏覽器與伺服器進行通訊:瀏覽器請求,伺服器處理請求
4、瀏覽器與伺服器斷開連線
這個內容太多了,我會專門寫一篇blog來解釋,但是面試這些回答這些就夠了

js組成部分

1、ECMAScript 定義指令碼語言的屬性、方法和物件
2、文件物件型別(DOM):把整個頁面規劃成由節點層級構成的文件
3、瀏覽器物件模型(BOM):處理瀏覽器寬口和框架

如何跨域訪問

1、jsonp跨域訪問
2、window.name進行跨域
3、html5中的window.postMessage方法
4、http頭部資訊中加入origin
這個在我一片blog中專門講到了兩種jsonp和origin如今最常用的兩種跨域請求方式

js判斷陣列

return Object.prototype.toString.call(arg) === '[object Array]'複製程式碼

嚴格模式

使用方法:進入嚴格模式的標誌 'use strict',語法更加嚴格,更安全,提高執行速度。
1、全域性變數顯示宣告
2、靜態繫結:屬性和方法歸屬的物件,在編譯階段就確定
3、增強的安全措施:①禁止this指向全域性物件②禁止在函式內部遍歷呼叫棧
4、禁止刪除變數,除非建立物件使用configurable=true
5、顯示報錯:對物件的只讀屬性,只有getter的物件賦值,對禁止擴充套件的物件新增新屬性都會報錯
6、重名錯誤:物件不能有同名的引數,函式不能有重名的引數
7、禁止八進位制表示法
8、禁止arguments賦值,不會追蹤引數的變化,禁止使用arguments.callee
9、函式必須宣告在頂層
10、新增保留字

ajax的優缺點

優點:減輕伺服器的負擔,按需取資料,最大程度減少冗餘請求,區域性重新整理。
缺點:瀏覽器之間有差異,對流媒體和移動裝置支援不夠好

HTML、XML、XHTML 有什麼區別

html:超文字標記語言,顯示資訊,不區分大小寫
xhtml:升級版的html,區分大小寫
xml:可擴充套件標記語言被用來傳輸和儲存資料

html語義化

直觀認識標籤和屬性的作用,便於閱讀和維護

內容與樣式分離

可以確保網頁平穩退化,易於維護

meta標籤的使用

meta name="keyword" 告訴搜素引擎網頁的關鍵詞
meta name="description" 告訴搜素引擎站點的內容
mata name="author" content="name"站點製作望著
meta name="viewport" content="width=device-width, initial-scale=1.0"
響應式頁面

文件宣告的作用

讓瀏覽器解析器知道需要用什麼規範來解析文件

嚴格模式和混雜模式

嚴格模式:瀏覽器最高標準呈現頁面
混雜模式:頁面以一種比較寬鬆的向後相容的方式顯示

<!doctyle html>的作用

使用html5標準來解析渲染頁面,如果不寫就進入混雜模式

常見瀏覽器核心

IE 用的是trident
firefox Gecko
opera Blink
safari Chrome webkit複製程式碼

頁面被載入時,link被同時載入,@import會頁面載入完成後在載入

瀏覽器核心的理解

渲染引擎和JS引擎
渲染引擎:負責取得網頁的內容、整理訊息,以及計算網頁的顯示方式
JS引擎:解析和執行js來實現網頁的動態效果

我的github,你的關注是我不斷前進的動力github.com/skychenbo/i…

相關文章