2019校招前端筆試面試題
01你做的頁面在哪些流覽器測試過？這些瀏覽器的核心分別是什麼?
答案
IE: trident核心
Firefox：gecko核心
Safari:webkit核心
Opera:以前是presto核心，Opera現已改用Google Chrome的Blink核心
Chrome:Blink(基於webkit，Google與Opera Software共同開發)
02Javascript中的定時器有哪些？
答案
1.setTimeout 只執行一次
2.setInterval 會一直重複執行
03img的alt與title有何異同？ strong與em的異同？
答案
a:alt(alt text):為不能顯示影象、窗體或applets的使用者代理（UA），alt屬性用來指定替換文字。替換文字的語言由lang屬性指定。(在IE瀏覽器下會在沒有title時把alt當成 tool tip顯示)
title(tool tip):該屬性為設定該屬性的元素提供建議性的資訊。
strong:粗體強調標籤，強調，表示內容的重要性
em:斜體強調標籤，更強烈強調，表示內容的強調點
04一個200*200的div在不同解析度螢幕上下左右居中，用css實現
答案
<style>
/*一個200*200的div在不同解析度螢幕上下左右居中，用css實現*/
div
{
background: red;
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
margin-left:-50px;
height:-50px;
z-index:1000;
}
</style>
05為什麼利用多個域名來儲存網站資源會更有效？
答案
-
CDN快取更方便;
2.突破瀏覽器併發限制;
3.節約cookie頻寬;
4.節約主域名的連線數，優化頁面響應速度;
5.防止不必要的安全問題。
06寫一個左中右佈局佔滿螢幕，其中左右兩塊是固定寬度200 ，中間自適應寬，要求先載入中間塊，請寫出結構及樣式的相關程式碼:
答案
HTML程式碼:
CSS程式碼:
07請描述
08有哪項方式可以對一個DOM設定它的CSS樣式？
答案
1.外部樣式表，引入一個外部css檔案
2.內部樣式表，將css程式碼放在 <head> 標籤內部
3.內聯樣式，將css樣式直接定義在 HTML 元素內部
09CSS的盒子模型？
答案
（1）兩種， IE 盒子模型、標準 W3C 盒子模型；IE 的content部分包含了 border 和 pading;
（2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)。
10html語義化是什麼？
答案
當頁面樣式載入失敗的時候能夠讓頁面呈現出清晰的結構；
有利於seo優化，利於被搜尋引擎收錄（更便於搜尋引擎的爬蟲程式來識別）；
便於專案的開發及維護，使html程式碼更具有可讀性，便於其他裝置解析。
11$(document).ready()方法和window.onload有什麼區別？
答案
(1)、window.onload方法是在網頁中所有的元素(包括元素的所有關聯檔案)完全載入到瀏覽器後才執行的。
(2)、$(document).ready() 方法可以在DOM載入就緒時就對其進行操縱，並呼叫執行繫結的函式。
12前端頁面有哪三層構成，分別是什麼?作用是什麼?
答案
1.結構層 Html
2.表示層 CSS
3.行為層 js
13css優先順序演算法如何計算？
答案
!important > id > class > 標籤
!important 比 內聯優先順序高
*優先順序就近原則，樣式定義最近者為準;
*以最後載入的樣式為準;
14請寫出你對閉包的理解，並列出簡單的理解 ?
答案
使用閉包主要是為了設計私有的方法和變數。閉包的優點是可以避免全域性變數的汙染，缺點是閉包會常駐記憶體，會增大記憶體使用量，使用不當很容易造成記憶體洩露。
閉包有三個特性：
1.函式巢狀函式
2.函式內部可以引用外部的引數和變數
3.引數和變數不會被垃圾回收機制回收
15split() 、join() 的區別?
答案
split()是切割成陣列的形式，join()是將陣列轉換成字串
16陣列方法pop() push() unshift() shift()?
答案
pop()尾部刪除
Push()尾部新增
Unshift()頭部新增
shift()頭部刪除
17JavaScript的資料型別都有什麼？
答案
基本資料型別：String,boolean,Number,Undefined, Null；
引用資料型別：Object(Array,Date,RegExp,Function)。
18對該陣列numberArray = [3,9,4,6,1,5]; 實現降序排列?
答案
實現對該陣列的降序排列，輸出[9,6,5,4,3,1]？
numberArray.sort(function(a,b){return b-a})；
19寫一個function，清除字串前後的空格?（相容所有瀏覽器）
答案
20列舉瀏覽器物件模型BOM裡常用的至少4個物件，並列舉window物件的常用方法至少5個?
答案
物件：window, document, location, screen, history, navigator
方法：alert(), confirm(), prompt(), open(), close()
21閉包是什麼，有什麼特性，對頁面有什麼影響?
答案
我的理解是，閉包就是能夠讀取其他函式內部變數的函式。在本質上，閉包就是將函式內部和函式外部連線起來的一座橋樑。
function outer(){
var num = 666;
function inner(){
var n = 999;
alert(n + num);
}
return inner;
}
outer()();
22什麼是javascript 中的垃圾回收機制？
答案
在Javascript中，如果一個物件不再被引用，那麼這個物件就會被GC回收。
如果兩個物件互相引用，而不再被第3者所引用，那麼這兩個互相引用的物件也會被回收。因為函式a被b引用，b又被a外的c引用，這就是為什麼函式a執行後不會被回收的原因
23請儘可能詳盡的解釋ajax的工作原理？
答案
Ajax的工作原理相當於在使用者和伺服器之間加了—箇中間層，使使用者操作與伺服器響應非同步化。這樣把以前的一些伺服器負擔的工作轉嫁到客戶端，利於客戶端閒置的處理能力來處理，減輕伺服器和頻寬的負擔，從而達到節約ISP的空間及頻寬租用成本的目的。
簡單來說通過XmlHttpRequest物件來向伺服器發非同步請求，從伺服器獲得資料，然後用javascript來操作DOM而更新頁面。這其中最關鍵的一步就是從伺服器獲得請求資料。要清楚這個過程和原理，我們必須對 XMLHttpRequest有所瞭解。
相關程式碼:
<script>
window.onload = function (ev) {
var oBtn = document.querySelector("button");
oBtn.onclick = function (ev1) {
// 1.建立一個非同步物件
var xmlhttp=new XMLHttpRequest();
// 2.設定請求方式和請求地址
/*
method：請求的型別；GET 或 POST
url：檔案在伺服器上的位置
async：true（非同步）或 false（同步）
*/
xmlhttp.open("GET", "04-ajax-get.php", true);
// 3.傳送請求
xmlhttp.send();
// 4.監聽狀態的變化
xmlhttp.onreadystatechange = function (ev2) {
/*
0: 請求未初始化
1: 伺服器連線已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應已就緒
*/
if(xmlhttp.readyState === 4){
// 判斷是否請求成功
if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
xmlhttp.status === 304){
// 5.處理返回的結果
console.log("接收到伺服器返回的資料");
}else{
console.log("沒有接收到伺服器返回的資料");
}
}
}
}
}
</script>
24如何解決跨域問題?
答案
理解跨域的概念：協議、域名、埠都相同才同域，否則都是跨域；
出於安全考慮，伺服器不允許ajax跨域獲取資料，但是可以跨域獲取檔案內容，所以基於這一點，可以動態建立script標籤，使用標籤的src屬性訪問js檔案的形式獲取js指令碼，並且這個js指令碼中的內容是函式呼叫，該函式呼叫的引數是伺服器返回的資料，為了獲取這裡的引數資料，需要事先在頁面中定義回撥函式，在回撥函式中處理伺服器返回的資料，這就是解決跨域問題的主流解決方案。
25闡述一下非同步載入？
答案
1. 非同步載入的方案： 動態插入 script 標籤
2. 通過 ajax 去獲取 js 程式碼，然後通過 eval 執行
3. script 標籤上新增 defer 或者 async 屬性
4. 建立並插入 iframe，讓它非同步執行 js
26說說你對this的理解？
答案
在JavaScript中，this通常指向的是我們正在執行的函式本身，或者是，指向該函式所屬的物件。
全域性的this → 指向的是Window
函式中的this → 指向的是函式所在的物件
物件中的this → 指向其本身
27判斷一個字串中出現次數最多的字元，並統計次數?(程式設計題)
答案
<script>
var s = 'bbcitcxyllkkjjfffdddsbbbbbb';
var obj = {};
var maxn = -1;
var letter;
for(var i = 0; i < s.length; i++) {
if(obj[s[i]]) {
obj[s[i]]++;
if(obj[s[i]] > maxn) {
maxn = obj[s[i]];
letter = s[i];
}
} else {
obj[s[i]] = 1;
if(obj[s[i]] > maxn) {
maxn = obj[s[i]];
letter = s[i];
}
}
}
alert(letter + ': ' + maxn);
</script>
面試只是一個開始,未來的路還很長,最後希望即將畢業的你能順利拿到Offer
技術不需要不斷更新,讓我們一起探索更多的技術吧