前端面試問題（持續更新）

時間 2019-11-08

原文原文鏈接

一、有關BFC的理解
二、盒模型的理解
三、box-sizing的理解
四、漸進加強 VS 優雅降級
五、url->頁面加載完成的整個流程
六、js組成部分
七、如何跨域訪問
八、js判斷數組
九、嚴格模式
十、ajax的優缺點
十一、HTML、XML、XHTML 有什麼區別
十二、html語義化
1三、內容與樣式分離
1四、meta標籤的使用
1五、文檔聲明的做用
1六、嚴格模式和混雜模式
1七、<!doctyle html>的做用
1八、常見瀏覽器內核
1九、頁面導入樣式時，使用link和@import有什麼區別
20、瀏覽器內核的理解

有關BFC的理解

BFC用來格式化塊級盒子
BFC: 提供一個環境，html元素會在這個環境中按照必定的規則進行佈局。
ex: 例如浮動元素會造成bfc,浮動元素內部子元素主要受該浮動元素影響，可是兩個浮動元素互相不影響。
這個能夠理解爲一個獨立容器，裏邊規則不會影響到外邊。
那麼什麼狀況下會生成bfc呢：
一、浮動元素，float除none之外的值
二、絕對定位，position(absolite,fixed)
三、dispaly = inline-blocks|table-cells|table-captions
四、overflow除visible之外的值
做用：css

一、能夠阻止元素被浮動元素覆蓋
二、包含浮動元素
三、若是屬於同一個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,這會單獨起一頁，這也是面一常常出的問題html

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: 這就不用說了，是繼承html5

漸進加強 VS 優雅降級

漸進加強：低瀏覽器實現基本功能，高級瀏覽器實現交互、效果達到更好的體驗
優雅降級：在高級瀏覽器實現完整功能，而後針對低級瀏覽器進行hack以便低級瀏覽器可以正常運行
二者是由於各類版本的瀏覽器對css3的支持狀況而不一樣所形成的css3

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

一、瀏覽器查詢域名對應的IP地址
二、瀏覽器根據IP地址與服務器創建socket鏈接
三、瀏覽器與服務器進行通訊：瀏覽器請求，服務器處理請求
四、瀏覽器與服務器斷開鏈接
這個內容太多了，我會專門寫一篇blog來解釋，可是面試這些回答這些就夠了git

js組成部分

一、ECMAScript 定義腳本語言的屬性、方法和對象
二、文檔對象類型(DOM)：把整個頁面規劃成由節點層級構成的文檔
三、瀏覽器對象模型(BOM)：處理瀏覽器寬口和框架github

如何跨域訪問

一、jsonp跨域訪問
二、window.name進行跨域
三、html5中的window.postMessage方法
四、http頭部信息中加入origin
這個在我一片blog中專門講到了兩種jsonp和origin現在最經常使用的兩種跨域請求方式web

js判斷數組

return Object.prototype.toString.call(arg) === '[object Array]'

嚴格模式

使用方法：進入嚴格模式的標誌 'use strict',語法更加嚴格，更安全，提升運行速度。
一、全局變量顯示聲明
二、靜態綁定：屬性和方法歸屬的對象，在編譯階段就肯定
三、加強的安全措施：①禁止this指向全局對象②禁止在函數內部遍歷調用棧
四、禁止刪除變量，除非建立對象使用configurable=true
五、顯示報錯：對對象的只讀屬性，只有getter的對象賦值，對禁止擴展的對象添加新屬性都會報錯
六、重名錯誤：對象不能有同名的參數，函數不能有重名的參數
七、禁止八進制表示法
八、禁止arguments賦值，不會追蹤參數的變化，禁止使用arguments.callee
九、函數必須聲明在頂層
十、新增保留字面試

ajax的優缺點

優勢：減輕服務器的負擔，按需取數據，最大程度減小冗餘請求，局部刷新。
缺點：瀏覽器之間有差別，對流媒體和移動設備支持不夠好ajax

HTML、XML、XHTML 有什麼區別

html:超文本標記語言，顯示信息，不區分大小寫
xhtml:升級版的html，區分大小寫
xml:可擴展標記語言被用來傳輸和存儲數據json

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有什麼區別

頁面被加載時，link被同時加載，@import會頁面加載完成後在加載

瀏覽器內核的理解

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

個人github,你的關注是我不斷前進的動力https://github.com/skychenbo/...

相關標籤/搜索

每日一句

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