NO IMAGE

最近發現一套前端面試的筆試題,個人覺的還是考察的蠻細的,涵蓋了很多前端知識,於是摘錄下來,空餘時間學習一下,鞏固一下自己的基礎。

前端工程師面試(筆試)題
HTML 部分
1)DOCTYPE 是什麼,有什麼作用,為什麼要用 html5 標準的DOCTYPE(初級)
<!DOCTYPE>宣告位於文件的最前面(處於 <html> 標籤之前)。告知瀏覽器以何種模式來渲染文件。
<!DOCTYPE html>讓瀏覽器以自身的最高模式來渲染,儘量匹配 web 標準。
DOCTYPE 不存在或格式不正確會導致文件以混雜模式呈現。
2)請分別列舉至少 3 個 html 中預設的塊級元素和行內元素(初級)
塊級元素:div、table、ul、p、ol、form、h1~h6、dl
行內元素:span、a、em、strong、img、label
3)請列舉出至少 3 個 html5 中新增的語義化標籤(初級)
main、nav、aside、article、header、footer、section等
4)要實現一組單選框 radio,屬性上需要滿足什麼條件(初級)
name 屬性必須一樣
5)從 SEO 角度,請給出至少 2 條 html 書寫上的注意點(中級)
a 標籤一定要寫 title 屬性
img 標籤一定要寫 alt、title 屬性
選用語義化的 html 標籤
6)請列舉出至少 3 個 html5 中新增的表單控制元件(中級)
email、url、number、range、Date pickers、search、color、datalist
7)談下對 html 語義化的理解(中級)
去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構
有利於 SEO:和搜尋引擎建立良好溝通,有助於爬蟲抓取更多的有效資訊:爬蟲依賴於標籤來確定上下文和各個關鍵字的權重;
方便其他裝置解析(如螢幕閱讀器、盲人閱讀器、移動裝置)以意義的方式來渲染網頁;
便於團隊開發和維護,語義化更具可讀性,遵循 W3C標準減少差異化。
CSS 部分
1)請列舉出至少 5 個具有繼承特性的 css 屬性(初級)
font-size font-family color line-height text-align text-indent list-style 等,4 個即可
2)請闡述下 display:none 和 visibility:hidden 的區別(初級)
display:none 隱藏對應的元素,在文件佈局中不再給它分配空間
visibility:hidden 隱藏對應的元素,但是在文件佈局中仍保留原來的空間。
3)請簡述(或者圖示)下 w3c 標準的盒模型(初級)
標準和模型包含:內容(content)、內邊距(padding)、邊框(border),外邊距(margin)
4)請列出 display 屬性除了none 以外的其他 3 個常用值,並分別說明每個值的作用(初級)
display: inline|block|inline-block
inline 佈局特點轉為行內元素
block 佈局特點轉為塊級元素
inline-block 佈局上同時具有行內、塊級元素的特徵
5)在頁面重構時,為什麼要先重置 css 樣式,你自己是如何處理的?(初級)
因為瀏覽器的相容問題,不同瀏覽器對有些標籤的預設值是不同的,如果沒對 CSS 初始化往往會出現瀏覽器之間的頁面顯示差異。
6)請對下面的一段 css 屬性定義的寫法進行簡化(初級)
padding-left: 10px;
padding-right: 10px;
padding-top:4px;
padding-bottom: 8px;
padding: 4px10px 8px
7)請列舉出至少 4 個 css3 屬性(初級)
border-raduis box-shadow text-shadow transform transition 等
8)請列舉出至少 6 種 css 選擇器(初級)
id 選擇器(#id)
類選擇器(.clazzname)
標籤選擇器(div、h1、p)
後代選擇器(li a)
屬性選擇器(a[ref=”external”])
孩子選擇器(ul > li)
9)position 屬性的 3 個值:relative、absolute、fixed 分別是相對什麼進行定位(初級)
relative:無 top、left 設定時,元素自身在文件流中的位置
absolute:相對於上級元素中第一個 position 屬性非 static 的元素
fixed:相對於瀏覽器視窗
10)css3 中哪個屬性可以對 DOM 元素的盒模型進行調整,該屬性有哪些值,請分別闡述(或者圖示)下不同值對盒模型的影響(中級)
box-sizing: content-box|border-box
context-box 即 w3c 標準盒模型
border-box 使得content 包含了 padding、border
11)請簡述下 CSS sprites 的原理,程式碼層面涉及哪個 css 屬性(中級)
CSS Sprites 其實就是把網頁中一些背景圖片整合到一張圖片檔案中。這樣可以減少很多圖片請求的開銷,因為請求耗時比較長;請求雖然可以併發,但是也有限
制,一般瀏覽器都是 6 個。再利用 CSS 的background-image、background-repeat、background-position 的組合進行背景定位,background-position 可以用
數字能精確的定位出背景圖片的位置。
對於未來而言,http2協議應用的話,就不需要這樣做了。
12)css 中@import 指令的作用,它有何缺陷(中級)
在 css檔案中引入外部的 css 程式碼塊
缺陷:不利於多個 css 檔案的並行下載,會造成阻塞,對頁面渲染不利。
13)為什麼對元素使用了 float 浮動,一定要有清除浮動(中級)
浮動的框可以左右移動,直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。浮動框不屬於文件中的普通流,當一個元素浮動之後,不會影響到塊級框的佈局而
只會影響內聯框(通常是文字)的排列,文件中的普通流就會表現得和浮動框不存在一樣,當浮動框高度超出包含框的時候,也就會出現包含框不會自動伸高來閉合浮
動元素(“高度塌陷”現象)。
正是因為浮動的這種特性,導致本屬於普通流中的元素浮動之後,包含框內部由於不存在其他普通流元素了,也就表現出高度為 0(高度塌陷)。在實際佈局中,
往往這並不是我們所希望的,所以需要閉合浮動元素,使其包含框表現出正常的高度。
14)請列舉 3 種常用的清除浮動的方式(中級)
用空標籤:通過一個內容為空的標籤,併為其定義 CSS 程式碼:clear:both 來清除浮動
使用 overflow 屬性:在需要清除浮動的元素中定義CSS 屬性:”overflow:hidden”,為了相容 IE6 同時要加上”zoom:1″
使用 after 偽類清除浮動
15)請列舉至少 2 個 IE7 中的常見 bug,以及解決方案(中級)
1,百分比佈局時,IE7 的計算精度沒有其他瀏覽器高,1 行 5 列,每列width20%的浮動佈局,在 IE7 會出現錯位。
解決方案為,為 IE7寫 hack,*width:19.99%
2,IE7 不支援opcity 屬性。
解決辦法:filter: alpha(opacity=60); opacity:0.6;
3,overflow:hidden 屬性在 IE7 中不起作用,如果 overflow:hidden 父元素裡面的子元素採用了絕對定位的方式佈局,父元素上的 overflow: hidden 會失效。
解決方案:在 overflow:hidden 屬性的元素上新增 position: relative;
4,IE7 瀏覽器對絕對定位的元素設定了很高的 z-index 確不能顯示在上層。原因是 IE7 中層級的比較先比較絕對定位元素的相對定位點元素的 z-index。所以,
解決方案: 給相對定位點的元素設定較高的 z-index, 如果祖先元素中有很多 position:relative 的元素, 則比較的是第一個祖先元素 position: relative
的層級,給第一個祖先元素設定較高的層級即可。
16)頁面重構過程中,從 ps 中匯出圖片素材時,如何選取合適的匯出格式(中級)
當圖片色彩豐富且無透明要求時,建議儲存 JPG格式並且選擇合適的品質。
當圖片色彩不太豐富(單一顏色的小圖示)無論有沒有透明度的要求,請儲存為 png-8 格式
當圖片有半透明要求時,請儲存為 png-24 格式
17)請簡述下對漸進增強、優雅降級的理解(中級)
漸進增強 progressive enhancement:針對低版本瀏覽器進行構建頁面,保證最基本的功能,然後再針對高階瀏覽器進行效果、互動等改進和追加功能達到更好
的使用者體驗。
優雅降級 graceful degradation:一開始就構建完整的功能,然後再針對低版本瀏覽器進行相容。
優雅降級是從複雜的現狀開始,並試圖減少使用者體驗的供給,而漸進增強則是從一個非常基礎的,能夠起作用的版本開始,並不斷擴充,以適應未來環境的需要。
降級(功能衰減)意味著往回看;而漸進增強則意味著朝前看,同時保證其根基處於安全地帶。
18)什麼是 BFC,請談談對此概念的理解(高階)
BFC,塊級格式化上下文,一個建立了新的 BFC 的盒子是獨立佈局的,盒子裡面的子元素的樣式不會影響到外面的元素。在同一個 BFC 中的兩個毗鄰的塊級盒在垂
直方向(和佈局方向有關係)的 margin 會發生摺疊。(W3C CSS 2.1 規範中的一個概念,它決定了元素如何對其內容進行佈局,以及與其他元素的關係和相互作用。)
19)請簡述下低版本 IE(6,7)中下特有的 hasLayout 屬性(高階)
“Layout”是一個 Internet Explorer for Windows 的私有概念,它決定了一個元素如何顯示以及約束其包含的內容、如何與其他元素互動和建立聯絡、如何
響應和傳遞應用程式事件、使用者事件等。這種渲染特性可以通過某些 CSS 屬性被不可逆轉地觸發。而有些HTML 元素則預設就具有”layout”。
IE6-7 使用佈局的概念來控制元素的尺寸和定位,那些擁有佈局(have layout)的元素負責本身及其子元素的尺寸設定和定位。如果一個元素的 hasLayout 為
false,那麼它的尺寸和位置由最近擁有佈局的祖先元素控制。
JavaScript 部分
1)JavaScript 有哪幾種資料型別(初級)
簡單:Number,Boolean,String,Null,Undefined
複合:Object,Array,Function
2)請編寫一個 JavaScript 函式 parseQueryString,它的用途是把 URL 引數解析為一個物件,如:(初級)
var url = “http://witmax.cn/index.php?key0=0&key1=1&key2=2″;
function parseQueryString(url) {
var params = {};
var arr = url.split(“?”);
if (arr.length <=1){
return params;
}
arr =arr[1].split(“&”);
for (var i = 0, l= arr.length; i < l; i ) {
vara = arr[i].split(“=”);
params[a[0]] = a[1];
}
return params;
}
3)js 中 split()和 join() 方法的區別(初級)
前者是將字串切割成陣列的形式,後者是將陣列轉換成字串
4)已知有字串 foo=”get-element-by-id”,寫一個function 將其轉化成駝峰表示法”getElementById”。(初級)
function combo(str) {
var arr = str.split(‘-‘);
for(var i =0; i<arr.length; i ){
arr[i] = arr[i].charAt(0).toUpperCase() arr[i].substr(1, arr[i].length – 1);
}
str =arr.join(”);
return str;
}
5)請計算下面變數的值(初級)
var a= (Math.PI );
var b = (Math.PI );
alert(a);
alert(b);
答案: 3.141592653589793,3.141592653589793
6)請寫出以下 js 表示式的值(初級)
4 “3”
3 “a”
var a=”4″; a 3
3 null
3 true
3 “a”-3
undefined==null
1===true
答案:”43″,”3a”,”43″,3,4,NaN,true,false
7)有如下 html,如何用 js 獲得被選中的 option 的 text 描述(非 value)(初級)
<select id=”select_id”>
<option vlue=”1″>text1</option>
<option vlue=”2″>text2</option>
<option vlue=”3″>text3</option>
<option vlue=”4″>text4</option>
</select>
答案:
var s = document.getElementById(“select_id”),
index = s.options.selectedIndex;
var text = s.options[index].text;
alert(text);
8)js 怎樣新增、移除、移動、複製、建立和查詢節點(初級)
1)建立新節點
createDocumentFragment() //建立一個 DOM 片段
createElement() //建立一個具體的元素
createTextNode() //建立一個文字節點
2)新增、移除、替換、插入
appendChild() //新增
removeChild() //移除
replaceChild() //替換
insertBefore() //插入
3)查詢
getElementsByTagName() //通過標籤名稱
getElementsByName() //通過元素的 Name 屬性的值
getElementById() //通過元素 Id,唯一性
9)看下面程式碼,給出輸出結果。(初級)
for(var i =1; i < 3; i ){
setTimeout(function(){
console.log(i);
}, 10);
}
答案:3,3
10)按順序寫出 alert 彈出視窗的內容。(中級)
var name = “The Window”;
var object = {
name : “My Object”,
getNameFunc: function() {
alert(‘1.’ this.name);
return function(){
return this.name;
};
}
};
var func = object.getNameFunc();
alert(‘2.’ func());
alert(‘3.’ func.call(object));
alert(‘4.’ func.apply(object));
答案: 1.My Object,2.The Window, 3.My Object, 4.My Object
11)簡述建立 ajax 過程(中級)
1. 建立`XMLHttpRequest`物件,也就是建立一個非同步呼叫物件.
2. 建立一個新的`HTTP`請求,並指定該`HTTP`請求的方法、`URL`及驗證資訊.
3. 設定響應`HTTP`請求狀態變化的函式.
4. 傳送`HTTP`請求.
5. 獲取非同步呼叫返回的資料.
6. 使用 JavaScript和 DOM實現區域性重新整理.
var xmlHttp = new XMLHttpRequest();
xmlHttp.open(‘GET’,’demo.php’,’true’);
xmlHttp.send()
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState ===4 & xmlHttp.status === 200){
}
}
12)說說你對作用域鏈的理解(中級)
作用域鏈的作用是保證執行環境裡有權訪問的變數和函式是有序的,作用域鏈的變數只能向上訪問,變數訪問到 window 物件即被終止,作用域鏈向下訪問變數是
不被允許的。
13)說說你對閉包的理解(中級)
使用閉包主要是為了設計私有的方法和變數。閉包的優點是可以避免全域性變數的汙染,缺點是閉包會常駐記憶體,會增大記憶體使用量,使用不當很容易造成記憶體洩露。
閉包有三個特性:
1. 函式巢狀函式
2. 函式內部可以引用外部的引數和變數
3. 引數和變數不會被垃圾回收機制回收
14)null 和 undefined 的區別?(中級)
null 是一個表示”無”的物件,轉為數值時為 0;undefined 是一個表示”無”的原始值,轉為數值時為 NaN。
當宣告的變數還未被初始化時,變數的預設值為 undefined。
null 用來表示尚未存在的物件,常用來表示函式企圖返回一個不存在的物件。
undefined 表示”缺少值”,就是此處應該有一個值,但是還沒有定義。典型用法是:
(1)變數被宣告瞭,但沒有賦值時,就等於 undefined。
(2) 呼叫函式時,應該提供的引數沒有提供,該引數等於 undefined。
(3)物件沒有賦值的屬性,該屬性的值為 undefined。
(4)函式沒有返回值時,預設返回 undefined。
null 表示”沒有物件”,即該處不應該有值。典型用法是:
(1) 作為函式的引數,表示該函式的引數不是物件。
(2) 作為物件原型鏈的終點。
15)call() 和 apply() 的區別和作用?(中級)
作用:動態改變某個類的某個方法的執行環境(執行上下文)。
區別:用法上不同,主要是引數不完全同,call 方法接受的引數是不固定的,第一個是呼叫的物件 ,第二個引數數量不確定,apply 方法固定是兩個引數,第一
個是呼叫的物件,第二個是一個帶有下標的陣列
16)請簡述兩種實現非同步載入 js 的方法(中級)
1.動態插入 script 標籤
2.通過 ajax 去獲取 js 程式碼,然後通過 eval 執行
3.script 標籤上新增 defer 或者async 屬性
4.建立並插入 iframe,讓它非同步執行 js
17)GET 和 POST 的區別,何時使用 POST?(中級)
GET:一般用於資訊獲取,使用 URL 傳遞引數,對所傳送資訊的數量也有限制,一般在 2000 個字元
POST:一般用於修改伺服器上的資源,對所傳送的資訊沒有限制。
GET 方式需要使用 Request.QueryString 來取得變數的值,而 POST 方式通過 Request.Form 來獲取變數的值,
也就是說 Get 是通過位址列來傳值,而 Post 是通過提交表單來傳值。
在以下情況中,請使用 POST 請求:
無法使用快取檔案(更新伺服器上的檔案或資料庫)
向伺服器傳送大量資料(POST 沒有資料量限制)
傳送包含未知字元的使用者輸入時,POST 比 GET 更穩定也更可靠
18)請實現 js 物件的深度克隆(中級)
function clone(Obj) {
var buf;
if (Obj instanceof Array) {
buf= []; //建立一個空的陣列
vari = Obj.length;
while (i–) {
buf[i] = clone(Obj[i]);
}
return buf;
}elseif (Obj instanceof Object){
buf= {}; //建立一個空物件
for(var k in Obj) { //為這個物件新增新的屬性
buf[k] = clone(Obj[k]);
}
return buf;
}else{
return Obj;
}
}
19)請在 js 的 Array 本地物件增加一個原型方法,他的用途是刪除陣列中重複的條目,並將新的陣列返回(中級)
以下是陣列去重的三種方法:
Array.prototype.unique1 = function () {
var n= [];//一個新的臨時陣列
for (var i = 0; i< this.length; i ) {//遍歷當前陣列
//如果當前陣列的第 i 已經儲存進了臨時陣列,那麼跳過,
//否則把當前項 push到臨時陣列裡面
if (n.indexOf(this[i]) == -1) n.push(this[i]);
}
return n;
}
Array.prototype.unique2 = function() {
var n ={},r=[]; //n 為hash 表,r 為臨時陣列
for(vari = 0; i < this.length; i ) {//遍歷當前陣列
if (!n[this[i]]) {//如果 hash 表中沒有當前項
n[this[i]] = true; //存入 hash 表
r.push(this[i]); //把當前陣列的當前項 push 到臨時陣列裡面
}
}
return r;
}
Array.prototype.unique3 = function() {
var n =[this[0]]; //結果陣列
for(vari = 1; i < this.length; i ) {//從第二項開始遍歷
//如果當前陣列的第 i 項在當前陣列中第一次出現的位置不是 i,
//那麼表示第 i 項是重複的,忽略掉。否則存入結果陣列
if (this.indexOf(this[i]) == i) n.push(this[i]);
}
return n;
}
20)請簡述如何實現一個對頁面某個節點的拖曳功能?(使用原生 JS)(中級)
給需要拖拽的節點繫結 mousedown, mousemove, mouseup 事件
mousedown 事件觸發後,開始拖拽
mousemove 時,需要通過 event.clientX 和 clientY 獲取拖拽位置,並實時更新位置
mouseup 時,拖拽結束
需要注意瀏覽器邊界的情況
21)請解釋什麼是事件代理(中級)
事件代理(Event Delegation),又稱之為事件委託。是 JavaScript 中常用繫結事件的常用技巧。顧名思義,“事件代理”即是把原本需要繫結的事件委託給
父元素,讓父元素擔當事件監聽的職務。事件代理的原理是 DOM 元素的事件冒泡。使用事件代理的好處是可以提高效能。
22)DOM 元素的 attribute 和 property 屬性的區別是什麼?(中級)
attribute 是 dom 元素在文件中作為 html 標籤擁有的屬性;
property 就是 dom 元素在 js 中作為物件擁有的屬性。
所以:對於 html 的標準屬性來說,attribute 和 property 是同步的,是會自動更新的,但是對於自定義的屬性來說,他們是不同步的
23)用 JS 寫一個實現繼承的方法。(中級)
function Parent(age) {
this.name =[ ‘mike’, ‘jack’, ‘smith’ ];
this.age = age;
}
Parent.prototype.run = function() {
return this.name ‘ are both’ this.age;
};
function Child(age) {
Parent.call(this,age);// 物件冒充,給超型別傳參
}
Child.prototype =new Parent();// 原型鏈繼承
24)Javascript 垃圾回收方法(高階)
1. 標記清除(mark and sweep)
這是 JavaScript最常見的垃圾回收方式,當變數進入執行環境的時候,比如函式中宣告一個變數,垃圾回收器將其標記為“進入環境”, 當變數離開環境的時候(函
數執行結束)將其標記為“離開環境”。
垃圾回收器會在執行的時候給儲存在記憶體中的所有變數加上標記,然後去掉環境中的變數以及被環境中變數所引用的變數(閉包),在這些完成之後仍存在標記的
就是要刪除的變數了
2. 引用計數(reference counting)
在低版本 IE 中經常會出現記憶體洩露,很多時候就是因為其採用引用計數方式進行垃圾回收。引用計數的策略是跟蹤記錄每個值被使用的次數,當宣告瞭一個變數
並將一個引用型別賦值給該變數的時候這個值的引用次數就加 1,如果該變數的值變成了另外一個,則這個值得引用次數減 1,當這個值的引用次數變為 0 的時候,說
明沒有變數在使用,這個值沒法被訪問了,因此可以將其佔用的空間回收,這樣垃圾回收器會在執行的時候清理掉引用次數為 0 的值佔用的空間。
25)你覺得 jQuery 或 zepto原始碼有哪些寫的好的地方(高階)
jquery 原始碼封裝在一個匿名函式的自執行環境中,有助於防止變數的全域性汙染,然後通過傳入 window 物件引數,可以使 window 物件作為區域性變數使用,好處是
當 jquery中訪問 window 物件的時候, 就不用將作用域鏈退回到頂層作用域了, 從而可以更快的訪問window物件。 同樣, 傳入 undefined引數,可以縮短查詢undefined
時的作用域鏈。
(function( window, undefined ) {
//用一個函式域包起來,就是所謂的沙箱
//在這裡邊 var 定義的變數,屬於這個函式域內的區域性變數,避免汙染全域性
//把當前沙箱需要的外部變數通過函式引數引入進來
//只要保證引數對內提供的介面的一致性,你還可以隨意替換傳進來的這個引數
window.jQuery = window.$ = jQuery;
})( window );
jquery 將一些原型屬性和方法封裝在了 jquery.prototype 中,為了縮短名稱,又賦值給了 jquery.fn,這是很形象的寫法。
有一些陣列或物件的方法經常能使用到,應將它們儲存為區域性變數以提高訪問速度。
將全域性物件 window 作為引數傳入,則可以使之在匿名函式內部作為區域性變數訪問,提供訪問速度。
jquery 實現的鏈式呼叫可以節約程式碼,所返回的都是同一個物件,可以提高程式碼效率。
Web 安全
1)cookie 和 session 的區別:(初級)
1. cookie 資料存放在客戶的瀏覽器上,session 資料放在伺服器上。
2. cookie 不是很安全,別人可以分析存放在本地的 cookie 並進行 cookie 欺騙。考慮到安全應當使用 session。
3. session 會在一定時間內儲存在伺服器上。當訪問增多,會比較佔用你伺服器的效能。考慮到減輕伺服器效能方面,應當使用 cookie。
4. 單個 cookie 儲存的資料不能超過 4K,很多瀏覽器都限制一個站點最多儲存 20 個cookie。
5. 所以個人建議:
將登陸資訊等重要資訊存放為 session
其他資訊如果需要保留,可以放在 cookie 中
2)sql 注入原理(中級)
就是通過把 SQL命令插入到 Web 表單遞交或輸入域名或頁面請求的查詢字串,最終達到欺騙伺服器執行惡意的 SQL 命令。
總的來說有以下幾點:
1. 永遠不要信任使用者的輸入,要對使用者的輸入進行校驗,可以通過正規表示式,或限制長度,對單引號和雙”-“進行轉換等。
2. 永遠不要使用動態拼裝 SQL,可以使用引數化的SQL 或者直接使用儲存過程進行資料查詢存取。
3. 永遠不要使用管理員許可權的資料庫連線,為每個應用使用單獨的許可權有限的資料庫連線。
4. 不要把機密資訊明文存放,請加密或者 hash 掉密碼和敏感的資訊。
3)XSS 原理(中級)
Xss(cross-site scripting)攻擊指的是攻擊者往 Web 頁面裡插入惡意 html 標籤或者 javascript 程式碼。比如:攻擊者在論壇中放一個看似安全的連結,騙取
使用者點選後,竊取cookie 中的使用者私密資訊;或者攻擊者在論壇中加一個惡意表單,當使用者提交表單的時候,卻把資訊傳送到攻擊者的伺服器中,而不是使用者原本以
為的信任站點。
4)XSS 防範方法(中級)
首先程式碼裡對使用者輸入的地方和變數都需要仔細檢查長度和對”<”,”>”,”;”,”’”等字元做過濾; 其次任何內容寫到頁面之前都必須加以encode, 避免不小心把html
tag 弄出來。這一個層面做好,至少可以堵住超過一半的 XSS 攻擊。
首先,避免直接在 cookie 中洩露使用者隱私,例如 email、密碼等等。
其次,通過使 cookie 和系統 ip 繫結來降低 cookie 洩露後的危險。這樣攻擊者得到的 cookie 沒有實際價值,不可能拿來重放。
儘量採用 POST 而非 GET 提交表單
5)XSS 與 CSRF有什麼區別嗎?(中級)
XSS 是獲取資訊,不需要提前知道其他使用者頁面的程式碼和資料包。CSRF 是代替使用者完成指定的動作,需要知道其他使用者頁面的程式碼和資料包。
要完成一次 CSRF 攻擊,受害者必須依次完成兩個步驟:
1. 登入受信任網站 A,並在本地生成 Cookie。
2. 在不登出 A 的情況下,訪問危險網站 B。
6)CSRF的防禦(中級)
服務端的 CSRF 方式方法很多樣,但總的思想都是一致的,就是在客戶端頁面增加偽隨機數。
通過驗證碼的方法
效能部分
1)談談我們可以從哪些方面進行效能優化(中級)
程式碼層面:避免使用 css表示式,避免使用高階選擇器,通配選擇器。
快取利用:快取 Ajax,使用 CDN,使用外部 js 和 css 檔案以便快取,新增 Expires 頭,服務端配置 Etag,減少 DNS 查詢等
請求數量:合併樣式和指令碼,使用 css圖片精靈,初始首屏之外的圖片資源按需載入,靜態資源延遲載入。
請求頻寬:壓縮檔案,開啟 GZIP,
2)程式碼層面我們可以做哪些優化(中級)
用 hash-table 來優化查詢
少用全域性變數
用 innerHTML 代替 DOM 操作,減少 DOM 操作次數,優化 javascript 效能
用 setTimeout 來避免頁面失去響應
快取 DOM 節點查詢的結果
避免使用 CSS Expression
避免全域性查詢
避免使用 with 語句(with 會建立自己的作用域,會增加作用域鏈長度)
多個變數宣告合併
3)移動端效能優化(中級)
儘量使用 css3 動畫,開啟硬體加速。適當使用 touch 事件代替 click 事件。避免使用 css3 漸變陰影效果。
4)什麼是 Etag?(高階)
當傳送一個伺服器請求時,瀏覽器首先會進行快取過期判斷。瀏覽器根據快取過期時間判斷快取檔案是否過期。
情景一:若沒有過期,則不向伺服器傳送請求,直接使用快取中的結果,此時我們在瀏覽器控制檯中可以看到 200OK(from cache) ,此時的情況就是完全使用
快取,瀏覽器和伺服器沒有任何互動的。
情景二:若已過期,則向伺服器傳送請求,此時請求中會帶上①中設定的檔案修改時間,和 Etag
然後,進行資源更新判斷。伺服器根據瀏覽器傳過來的檔案修改時間,判斷自瀏覽器上一次請求之後,檔案是不是沒有被修改過;根據 Etag,判斷檔案內容自上一
次請求之後,有沒有發生變化
情形一: 若兩種判斷的結論都是檔案沒有被修改過, 則伺服器就不給瀏覽器發index.html 的內容了, 直接告訴它, 檔案沒有被修改過, 你用你那邊的快取吧—— 304
Not Modified,此時瀏覽器就會從本地快取中獲取 index.html 的內容。此時的情況叫協議快取,瀏覽器和伺服器之間有一次請求互動。
情形二:若修改時間和檔案內容判斷有任意一個沒有通過,則伺服器會受理此次請求,之後的操作同①
試題說明
重構工程師的題目主要從 HTML 部分和 CSS 部分的初級中級題目,以及 JavaScript 部分的初級題目。
該文件中的所有題目都適用於前端工程師,但側重於 JavaScript 部分中的初級中級題目以及效能部分的題目。