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

fanux 發布于2019-08-29 13:29 / 1274人閱讀

摘要：例如浮動元素會形成浮動元素內部子元素主要受該浮動元素影響，但是兩個浮動元素互相不影響。

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、的作用
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中聲明，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"
響應式頁面

文檔聲明的作用

讓瀏覽器解析器知道需要用什么規范來解析文檔

嚴格模式和混雜模式

嚴格模式：瀏覽器最高標準呈現頁面
混雜模式：頁面以一種比較寬松的向后兼容的方式顯示

的作用

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

常見瀏覽器內核

IE 用的是trident
firefox Gecko
opera Blink
safari Chrome webkit

頁面導入樣式時，使用link和@import有什么區別

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

瀏覽器內核的理解

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

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

GPU云服務器云服務器面試問題 javaee面試問題前端面試 cdn常見面試問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112631.html

優秀文章收藏（慢慢消化）持續更新~

摘要：整理收藏一些優秀的文章及大佬博客留著慢慢學習原文協作規范中文技術文檔協作規范阮一峰編程風格凹凸實驗室前端代碼規范風格指南這一次，徹底弄懂執行機制一次弄懂徹底解決此類面試問題瀏覽器與的事件循環有何區別筆試題事件循環機制異步編程理解的異步 better-learning 整理收藏一些優秀的文章及大佬博客留著慢慢學習原文:https://www.ahwgs.cn/youxiuwenzhan...

JeOam 2019-08-23 18:24 評論0 收藏0
前端面試題總結——JS（持續更新中）

摘要：在此基礎上加入了回調函數，加載完之后會執行中定義的函數，所需要的數據會以參數的形式傳遞給該函數。通常的做法是，為它們指定回調函數。前端面試題總結——JS（持續更新中） 1.javascript的typeof返回哪些數據類型 Object number function boolean underfind string 2.例舉3種強制類型轉換和2種隱式類型轉換？強制（parseIn...

shery 2019-08-22 16:20 評論0 收藏0
前端最實用書簽(持續更新)

摘要：前言一直混跡社區突然發現自己收藏了不少好文但是管理起來有點混亂所以將前端主流技術做了一個書簽整理不求最多最全但求最實用。前言一直混跡社區,突然發現自己收藏了不少好文但是管理起來有點混亂; 所以將前端主流技術做了一個書簽整理,不求最多最全,但求最實用。書簽源碼書簽導入瀏覽器效果截圖showImg(https://segmentfault.com/img/bVbg41b?w=107...

sshe 2019-08-23 12:00 評論0 收藏0
前端面試題總結——HTML(持續更新中)

摘要：等知名網站已經開始測試并使用格式。頁面加載速度更快結構化清晰頁面顯示簡潔。表現與結構相分離。易于優化搜索引擎更友好，排名更容易靠前。用于替換當前元素，用于在當前文檔和引用資源之間確立聯系。前端面試題總結——HTML(持續更新中) 1.什么是HTML？ HTML：HyperText Markup Language超文本標記語言 2.XHTML和HTML有什么區別 HTML是一種基本的W...

afishhhhh 2019-08-01 18:38 評論0 收藏0
前端面試題總結——HTML(持續更新中)

摘要：等知名網站已經開始測試并使用格式。頁面加載速度更快結構化清晰頁面顯示簡潔。表現與結構相分離。易于優化搜索引擎更友好，排名更容易靠前。用于替換當前元素，用于在當前文檔和引用資源之間確立聯系。前端面試題總結——HTML(持續更新中) 1.什么是HTML？ HTML：HyperText Markup Language超文本標記語言 2.XHTML和HTML有什么區別 HTML是一種基本的W...

binta 2019-08-26 17:15 評論0 收藏0