web前端開發面試題-基礎篇
最近更新時間：2017年7月19日09:50:06
IT行業發展迅速並且熱火朝天，每年都呈現人才緊缺現象，同時高薪崗位更是數不勝數，但要想過五關斬六將進入大廠，就需要謙虛學習基礎知識，不斷總結經驗。企業的競爭，本質是人才的競爭，優秀的人才進入優秀的企業，是符合社會發展規律不變的定律。
1、CSS選擇器有哪些？它們的優先順序是怎樣的？
選擇器型別：id選擇器（ # myid）、類選擇器（.myclassname）、標籤選擇器（div, h1, p）、相鄰選擇器（h1 + p）、子選擇器（ul > li）、後代選擇器（li a）、萬用字元選擇器（ * ）、屬性選擇器（a[rel = "external"]）、偽類選擇器（a:hover, li:nth-child）
選擇器優先順序：就近原則-同權重情況下樣式定義最近者為準;載入樣式以最後載入的定位為準;
優先順序為:!important > id > class > tag，同時important 比 內聯優先順序高
權重的規則：標籤的權重為1，class的權重為10，id的權重為100；如果權重相同，則最後定義的樣式會起作用
2、列出px、em、rem三者的區別，以及各自的適應場景
px：畫素，相對長度單位，相對於顯示器螢幕解析度而言；
em：相對長度單位，相對於當前物件內的文字字號，如果當前物件沒有設定字型尺寸，則相對於瀏覽器預設字號
rem：，root em，相對長度單位，相對於HTML根元素的字號尺寸
3、寫出一個兩列等高，左列固定寬度為200px，右列自適應瀏覽器的佈局
父元素flex佈局，左側子元素flex-basis:200px，右側子元素flex:1；
更多可參考我的文章《》
4、你做的頁面在哪些瀏覽器測試過？常見瀏覽器的核心分別是什麼？
瀏覽器核心：IE-Trident，Firefox-Gecko，Opera-Blink，Chrome-Webkit，Safari-Webkit，360-相容模式Trident+極速模式Webkit
5、一個圓心座標為(0,0)的圓，半徑r=10，求45°方向的點座標(x,y)
x = Math.cos(Math.PI/4)*r
y = Math.sin(Math.PI/4)*r
6、定義一個方法，用於將string中的每個字元之間加一個空格，並輸出
如：'hello' -> 'h e l l o
function joinSpace(str){
return str.split('').join(' ')
}
7、獲取JavaScript物件鍵名
var obj = {name: 'wan',age: 20, sex: 'male'}; var objKey = []; for(var item in obj){ if(obj.hasOwnProperty(item)){ objKey.push(item); } } //for(var item in obj){ // objKey.push(item); //} console.log(objKey);//["name", "age", "sex"]
8、獲取頁面html標籤的個數
var elementArr = document.getElementsByTagName('*')
var tagNameArr = []
for(var i= 0,len=elementArr.length;i<len;i++){
if(tagNameArr.indexOf(elementArr[i].tagName) == -1){
tagNameArr.push(elementArr[i].tagName)
}
}詳解：
document.getElementsByTagName('html');返回文件的html物件集合,typeof為object
document.getElementsByTagName('*');返回文件的所有元素集合，是一個物件
document物件屬性和方法：
document.URL;//返回文件完整的URL
document.referrer;//返回本文件的引用地址，載入當前文件的文件的URL
document.cookie;//設定或返回與當前文件有關的所有cookie
document.getElementsByTagName('html')[0];返回文件的html元素物件，元素節點有以下屬性和方法：
element.addEventListener();//向指定元素新增事件控制代碼
element.appendChild();//為元素新增一個新的子元素
element.attributes();//返回元素的屬性陣列
element.tagName();//返回字串型別的大寫元素名
9、DOM事件流包括哪幾個階段
事件流，從頁面接收事件的順序；IE的事件流叫做事件冒泡；Netscape的事件流叫做事件捕獲；
“DOM2級事件”規定的事件流包括三個階段：事件捕獲階段、處於目標階段和事件冒泡階段
document.addEventListener(type, handler, false);//true事件捕獲模式，false事件冒泡模式
10、事件委託的實現原理是什麼，優缺點
原理：事件冒泡，子元素的單機事件會冒泡到頂層元素document物件上
優點：DOM操作少，只獲取一個頂層DOM元素；減少事件註冊，節省記憶體佔用；簡化了DOM節點更新時的事件更新
缺點：不支援不冒泡的事件；出現不期望的事件誤判
適合採用事件委託技術的事件包括：click、mousedown、mouseup、keydown、keyup、keypress
不冒泡的事件：blur、focus、load、unload
11、call和apply的區別
語法一：func.call(thisObj,a,b,c...) || func.apply(thisObj,array)
定義：將函式（方法） func 繫結到物件 thisObj 上去執行，改變了函式func 原有的 this 的指向，this指向了物件thisObj（js中的函式是物件，函式名是對 Function 物件的引用）
語法二：obj.call(thisObj,a,b,c...) || obj.apply(thisObj,array)
定義：將物件 obj 的屬性和方法新增到物件 thisObj 上，即 thisObj 繼承了 obj
區別：call的引數個數，從第二個開始 大於等於 0個，為單個變數；apply的引數只有兩個，第二個引數為一個數組，即array = [a,b,c...]；
例項一：借調方法，物件sub借調物件add的方法add（函式也是物件）
function add(a,b){return a+b}
function sub(a,b){return a-b}
add.call(sub,3,1)//4
sub.call(add,3,1)//2
add.call(sub,3,1) === add(3,1)
例項二：改變this指向
function a(){console.log(this)}
var obj = {}
a()//window
a.call()//window
a.call(obj)//obj
例項三：實現繼承
function Animal(name){this.name=name;this.showName=function(){alert(this.name)}}
function Cat(name){
Animal.call(this,name); //將Animal物件的屬性和方法應用到Cat上，因此Cat繼承了Animal的所有屬性和方法
}
var cat = new Cat(“Black Cat”);
cat.showName(); //Black Cat
例項四：多重繼承
function add(a,b){return a+b}
function sub(a,b){return a-b}
function calc(a,b){
add.call(this)
sub.call(this)
}
12、為下面的類增加一個方法method1
var A = function(){}
A.prototype.method1 = function(a,b){return a+b}
13、typeof 和 instanceof 操作的用法、例項
typeof操作符判斷基本資料型別；instanceof檢測物件的繼承關係，左運算元是物件，右運算元是建構函式
console.log(typeof null);//object
console.log(typeof undefined);//undefined
console.log(typeof 'a');//string
console.log(typeof 1);//number
console.log(typeof true);//boolean
console.log(typeof []);//object
instanceof可以準確判斷 左物件 是 右物件 的例項
console.log([] instanceof Array);//true
console.log('a' instanceof String);//false
console.log(/a/ instanceof RegExp);//true
console.log([] instanceof Object);//true
14、html元素新增事件的方法
原生方法：
①<input type='buttom' value='click me' onclick='try{showMessage()}catch(ex){}'>
var btn = document.getElementById('myBtn')
②btn.onclick = function(){}
③btn.addEventListener('click',function(){},false)//false在冒泡階段呼叫事件處理程式
IE：btn.attachEventListener('click',function(){},false)
15、js中改變this指向的方法
call、apply、bind，this總是指向呼叫它的物件
new function01（），改變了建構函式this的指向，指向建立的物件
16、用js程式碼完成，body裡面生成100個div，內容是1-100自身序號，顏色按照紅、黃、藍、綠交替變色，10行10列
17、不定寬高的img在固定寬高的容器內水平垂直居中，寫出html和css
18、清除浮動的原理和實現方法
19、實現Parent類和Child類，並建立Parent和Child的繼承關係
function Parent(){
this.surname = 'wan';
this.work = function(){console.log('i like work')}
}
function Child(){}
原型鏈繼承：Child.prototype = new Parent()
例項化：let person = new Child();
console.log(person.surname);//wan
person.work();//i like work
建構函式繼承：function Child(){Parent.call(this)}
組合繼承：
function Child(){
Parent.call(this);//繼承屬性
}
Child.prototype = new Parent();//繼承方法
原型式繼承：
function object(obj){
function Func(){};
Func.prototype = obj;
return new Func();
}
var Child = object(Parent);
寄生式繼承：
寄生組合式繼承：
20、頁面的三種彈窗
alert警告框；confirm確認框；prompt提示框
21、rgba()和opacity的透明效果有什麼不同
程式碼上的不同：
#out1{width: 10rem;height: 10rem;opacity: 0.2;background: #fda247;}
#out2{width: 10rem;height: 10rem;background: rgba(253,162,71,0.2);margin-top: 1rem;}
效果上的不同：opacity方案，子元素文字內容同時透明；rgba方案，子元素內容不透明
22、解釋原型和原型鏈
原型：即物件原型，原型物件上定義方法和屬性的目的是為了被子類繼承和使用。原型鏈的形成真正是靠__proto__ 而非prototype
原型鏈：每個物件都有原型，物件的原型指向原型物件，即子物件的原型指向父物件，父物件的原型指向爺爺物件，這種原型層層連線起來的就構成了原型鏈。
23、ajax中get請求與post請求的區別
get請求會將引數跟在url後進行傳遞，而post請求則是作為http訊息的實體內容傳送給web伺服器，但是這種區別對使用者是不可見的;
使用Get請求傳送資料量小,Post請求傳送資料量大;
get安全性非常低，post安全性較高;
在以下情況中，請使用 POST 請求：無法使用快取檔案（更新伺服器上的檔案或資料庫）；向伺服器傳送大量資料（POST 沒有資料量限制）；傳送包含未知字元的使用者輸入時，POST 比 GET 更穩定也更可靠
若符合下列任一情況，則用GET方法：請求是為了查詢資源，HTML表單資料僅用來幫助搜尋。請求結果無持續性的副作用。收集的資料及HTML表單內的輸入欄位名稱的總長不超過1024個字元。
24、降低頁面載入時間的方法
25、jQuery為DOM元素繫結點選事件的方法和區別
.click(function(){})
.bind({'click mouseleave',function(){}},{'click mouseleave',function(){}}) //在.bind()繫結事件的時候，這些元素必須已經存在。
.on() //為動態繫結事件
.one("click", function() {alert("This will be displayed only once.");});//繫結一個事件，並且只執行一次，然後刪除自己，
26、使用原生js為以下li實現事件委託，點選後列印對應的node-type屬性值
<ul id="test">
<li node-type="1">b</li>
<li node-type="2">a</li>
<li node-type="3">t</li>
</ul>
var ele = document.getElementById('test');
ele.addEventListener('click',function(e){
var value = e.target.attributes[0].nodeValue;
console.log(value);
},false)
27、函式節流定義、作用、示例
函式節流：某些程式碼不可以在沒有間斷的情況下連續重複執行，不僅消耗記憶體大、佔用CPU時間長，同時還會造成不期望的後果，必須採取節流手段；
基本思想：第一次呼叫函式，建立一個定時器，在指定的時間間隔後執行程式碼；第二次呼叫，清除前一次的定時器並設定另一個；
目的：只用在執行函式的請求停止了一段時間之後才執行；
var processor = {
timeoutId: null,
performProcessing: function(){
//執行的程式碼
},
process: function(){
clearTimeout(this.timeoutId);
var that = this;
this.timeoutId = setTimeout(function(){
that.performProcessing();
},500);
}
}
processor.process();
在微信小程式開發中，scroll-view標籤用於建立可滾動的列表區域，這個屬性可以繫結使用者滾動到列表底部的事件，如下：<scroll-view scroll-y bindscrolltolower="bottom"></scroll-view>，但是，頁面到達底部之前的臨界點，這個事件會重複觸發無數次，導致向後臺請求分頁資料無數次。此時，可以採用函式節流技術；
方案二：
var lastTime = Date.now();
if(Date.now() - lastTime > 20000)}{
lastTime = Date.now();
do something...
//時間間隔2s才能執行的方法
}
28、開發過程中如何除錯抓包（http、https）
pc端：chrome瀏覽器-Network
手機的通訊包：Fiddler是一個http協議除錯代理工具，它能夠記錄並檢查所有你的電腦和網際網路之間的http通訊，設定斷點，檢視所有的“進出”Fiddler的資料（指cookie,html,js,css等檔案，這些都可以讓你胡亂修改的意思）。 Fiddler 要比其他的網路偵錯程式要更加簡單，因為它不僅僅暴露http通訊還提供了一個使用者友好的格式。
29、http狀態碼
1資訊，2成功，3重定向，4客戶端錯誤，5伺服器錯誤
302請求的資源被臨時移動；303檢視其他地址；304請求的資源未修改，讀取快取資源；403請求被伺服器拒絕；404無法找到資源；500伺服器內部錯誤；502無效請求
30、常見的相容性問題，列舉三種
所謂的瀏覽器相容性問題，是指因為不同的瀏覽器對同一段程式碼有不同的解析，造成頁面顯示效果不統一的情況。在大多數情況下，我們的需求是，無論使用者用什麼瀏覽器來檢視我們的網站或者登陸我們的系統，都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。
html，H5新標籤低版本瀏覽器無法解析；img標籤的alt屬性不同瀏覽器解析不同
css，margin和padding屬性不同瀏覽器的初始值不同；font-size在chrome瀏覽器中最小字型是12px
js，標準的時間繫結方法為addEventListener，IE下是attachEvent
31、ajax的原生js過程
參考我的文章《AJAX-前後端開發的紐帶》
32、頁面中如何響應滑鼠點選並提取點選座標
document.onclick = clickStat;
function clickStat() {
var e = arguments[0] || window.event,x = '',y = '';
if(e.clientX || e.clientY){
x = e.clientX;
y = e.clientY;
}else{//相容ie
x = e.clientX + document.body.scrollLeft - document.body.clientLeft;
y = e.clientY + document.documentElement.scrollTop;
}
console.log(x,y)
}
33、js捕獲離開（重新整理、關閉、後退）頁面事件
onbeforeunload 事件在即將離開當前頁面（重新整理或關閉）時觸發。該事件可用於彈出對話方塊，提示使用者是繼續瀏覽頁面還是離開當前頁面。對話方塊預設的提示資訊根據不同的瀏覽器有所不同，標準的資訊類似 "確定要離開此頁嗎？"。該資訊不能刪除。但你可以自定義一些訊息提示與標準資訊一起顯示在對話方塊。
注意： 如果你沒有在 <body> 元素上指定 onbeforeunload 事件，則需要在 window 物件上新增事件，並使用 returnValue 屬性建立自定義資訊。
window.onbeforeunload = function(){
setTimeout(function(){console.log('cancel');},1000);
return '確定離開？'
}
34、ajax請求時，如何解析JSON資料
eval();//此方法不推薦
eval( '(' + jsonDate + ')' );
JSON.parse();//推薦方法
JSON.parse( jsonDate );
eval();方法解析的時候不會去判斷字串是否合法，而且json物件中的js方法也會被執行，這是非常危險的；
35、原生js實現get請求
//原生js實現ajaxget請求
function originAjax(){
var xhr;
if (window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行程式碼
xhr = new XMLHttpRequest();
}
else {
// IE6, IE5 瀏覽器執行程式碼
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange=function(){
if(xhr.readyState == 4 && xhr.status == 200) {
//xhr.responseText:{isSuccess:1}
if(xhr.responseText.isSuccess == 1){
console.log('request success')
}else{
console.log('request err')
}
}
}
xhr.open("GET","http://192.166.65.131?code=10",true);//true 非同步
xhr.send();//xhr.send(string);string僅用於 POST 請求
}
36、css實現，滑鼠放在一個div上時該元素在2s內旋轉180°
#lamp{
width: 400px;
height: 40px;
background: #ff0000;
}
#lamp:hover{
animation: rotate 2s;
-webkit-animation: rotate 2s; /* Safari and Chrome */
}
@keyframes rotate
{
from {transform: rotate(0deg);}
to {transform: rotate(180deg);}
}
@-webkit-keyframes rotate /* Safari and Chrome */
{
from {transform: rotate(0deg);}
to {transform: rotate(180deg);}
}
37、定義一個類的私有屬性和公有屬性
function Person(){
var sex = 'man';//var 私有
this.surnname = 'wan';//this 公有
}
38、