前端面試問題總結
阿新 • • 發佈：2019-02-07
}
xhr.open();
// 如果為POST
xhr.open('POST','1.php',true);
// 設定請求主題的訊息型別
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
beforeSend();
xhr.send();
5、跨域請求
瀏覽器從某個域名下的資源訪問另一個域名下的資源，可能是協議，域名，埠號不同
1)、方案1
給被跨域訪問的資源新增相應訊息頭部，設定允許來至於那個域名下的頁面訪問當前頁面
header("Access-Control-Allow-Origin:http://xx.com");
2)、方案2
JSONP
客戶端定義操作JSON資料的函式，開始請求資源。
被請求資源在設定header頭部的時候，把Json改成js格式的型別，
返回客戶端的時候，字串改成 “函式名(json引數)” 的形式
....
6、 HTML5新增了那些標籤，廢除了那些標籤
新的表單元素
datalist 、progress 、meter、output
7、 HTML5新增了那些標籤屬性，廢除了那些標籤屬性
新的input type
(1)、number顯示一個數字輸入框
(2)、email顯示一個郵件地址輸入框
(3)、url 顯示一個url地址輸入框
(4)、tel顯示一個電話號碼輸入框
(5)、search顯示搜尋輸入框
(6)、range顯示一個範圍選擇滑塊
(7)、color顯示一個顏色選擇框
(8)、date顯示一個日期選擇框
(9)、month 顯示一個月份選擇器
(10)、week顯示一個星期/周選擇器
表單新屬性
(1)、placeholder：站位訊息
(2)、autoplay自動獲得焦點
(3)、multiple:多選，用於email和file
(4)、autocomplete:自動完成
(5)、form:自定當前輸入域所屬的表單
(6)、required:必填項
(7)、min：最小值
(8)、max:最大值
(9)、min-length / max-length ： 最小/最大長度
(10)、pattern ：定義正則表示式
PS:總結6、7
(1)新的input type——10個
number、email、url、tel、search、range、color、date、month、week
(2)新的表單元素——4個
datalist、progress、meter、output
(3)表單元素新的屬性——11個
placeholder、autofocus、autocomplete、multiple、form
---------------------- 驗證相關
required、min、max、minlength、maxlength、pattern
8、SVG和Canvas的比較
SVG Canvas
繪製的是向量圖 繪製的是點陣圖
每個圖形/影象都是獨立的標籤 只有畫布是標籤
容易為每個圖形新增事件監聽 不能為每個圖形新增獨立的事件監聽
可以無限縮放，適合地圖 不能無限放大，適合表現顏色細節，例如遊戲
9、描述一下瀏覽器的執行緒模型
Program: 程式，編寫好的程式碼經過處理，可以在計算機上執行，放在檔案系統上
Progress:程序/任務，程式從磁碟中調入記憶體，分配必須可執行程式碼空間、資料空間，隨時準備被CPU執行
thread:執行緒，程序內部執行程式碼的基本單位
程序和執行緒的關係：
程序是作業系統分配記憶體的基本單位
執行緒是執行程式碼的基本單位
執行緒處於程序內部，一個程序內部必須至少有一個執行緒，也可以有多個執行緒，這些執行緒之間可以沒有影響，併發執行（巨集觀上是同時執行，微觀上看是交替執行）
10、JS內建物件
String、Number、Boolean----原始型別
Array Math Date RegExp Error Function Object Global(在瀏覽器中被替換window)；
11、檢索關鍵詞的位置
while((i=str.indexOf("關鍵詞",fromi))!=-1){
i // 關鍵詞的位置
};
while((i=str.lastIndexOf("關鍵詞",fromi))!=-1){
i // 關鍵詞的位置
}
12、Error 專門封裝錯誤資訊的物件
6種
SyntaxError ReferenceError TypeError RangeError URIError EvalError
13、try catch中的return
如果finally中有return 則使用finally中的return 返回
如果finally中沒有return ,try中的return，會先獲得要返回的值，但掛起，暫不返回，要等finally中的程式碼執行完，才返回
14、檢索 reg.exec(str);
while((arr=reg.exec(str))!=null){
arr[0] //本次找到的關鍵詞
arr[i] //第i個分組的子內容
arr.index //本次找打的關鍵詞位置
}
15、Date API
FullYear Month Date Day
Hours Minutes Seconds Miliseconds
Day 沒有set 方法 其他都有get set方法
<三>型別3
連結：https://zhuanlan.zhihu.com/p/23906368來源：知乎
1、什麼是盒子模型？
在網頁中，一個元素佔有空間的大小由幾個部分構成，其中包括元素的內容（content），元素的內邊距（padding），元素的邊框（border），元素的外邊距（margin）四個部分。這四個部分佔有的空間中，有的部分可以顯示相應的內容，而有的部分只用來分隔相鄰的區域或區域。4個部分一起構成了css中元素的盒模型。
2、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
行內元素：a、b、span、img、input、strong、select、label、em、button、textarea
塊級元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系沒有內容的HTML元素，例如：br、meta、hr、link、input、img
3、CSS實現垂直水平居中
一道經典的問題，實現方法有很多種，以下是其中一種實現：
HTML結構：
<div class="wrapper">
<div class="content"></div>
</div>
CSS：
.wrapper{position:relative;}
.content{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute; //父元素需要相對定位
top: 50%;
left: 50%;
margin-top:-100px ; //二分之一的height，width
margin-left: -100px;
}
4、簡述一下src與href的區別
href 是指向網路資源所在位置，建立和當前元素（錨點）或當前文件（連結）之間的連結，用於超連結。
src是指向外部資源的位置，指向的內容將會嵌入到文件中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文件內，例如js指令碼，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源載入、編譯、執行完畢，圖片和框架等元素也如此，類似於將所指向資源嵌入當前標籤內。這也是為什麼將js指令碼放在底部而不是頭部。
5、什麼是CSS Hack?
一般來說是針對不同的瀏覽器寫不同的CSS,就是 CSS Hack。
IE瀏覽器Hack一般又分為三種，條件Hack、屬性級Hack、選擇符Hack（詳細參考CSS文件：css文件）。例如：
// 1、條件Hack
<!--[if IE]>
<style>
.test{color:red;}
</style>
<![endif]-->
// 2、屬性Hack
.test{
color:#0909;
*color:#f00;
_color:#ff0;
}
// 3、選擇符Hack
* html .test{color:#090;}
* + html .test{color:#ff0;}
6、簡述同步和非同步的區別
同步是阻塞模式，非同步是非阻塞模式。
同步就是指一個程序在執行某個請求的時候，若該請求需要一段時間才能返回資訊，那麼這個程序將會一直等待下去，直到收到返回資訊才繼續執行下去；
非同步是指程序不需要一直等下去，而是繼續執行下面的操作，不管其他程序的狀態。當有訊息返回時系統會通知程序進行處理，這樣可以提高執行的效率。
7、px和em的區別
px和em都是長度單位