前端面試送命題：面試題篇

前言

很容易，簡單地用html搭一個頁面框架；會用一些css基本樣式；懂得用jquery的dom互動，就基本可以挺著胸說自己是個了。

但是前端提升異常艱難，演算法、資料結構、oop；javascript、dom、css、html5這些僅僅是標配；效能最佳化、安全性、程式碼優雅性、seo，這些也是必然需要了解的。前端開發環境很輕便，也很繁瑣，各種框架、架構模式的應用也是衡量專業程度的標準。

在這裡總結了一些面試題供前端們參考。

內容

JavaScript中如何檢測一個變數是字串型別？

typeof(obj) === "string"   //trueobj.constructor === String  //true

trim()的使用場景

var str = "   hello  word  ";
str = str.trim();
console.log(str); //hello word,trim只會去掉字元中前後的空格，不會去除文字中的空格

this的典型應用

//1 input點選，獲取值

instanceof還是typeof？

//相同點：JavaScript 中 typeof 和 instanceof 常用來判斷一個變數是否為空，或者是什麼型別的。//細節區別：//1.typeof 一般只能返回如下幾個結果：number,boolean,string,function,object,undefined。//2.typeof 來獲取一個變數是否存在，如 if(typeof a!="undefined"){alert("ok")}，而不要去使用 if(a) 因為如果 a 不存在（未宣告）則會出錯。//3.對於 Array,Null 等特殊物件使用 typeof 一律返回 object，這正是 typeof 的侷限性。var a = new Array(); 
alert(a instanceof Array);  // truealert(a instanceof Object)  // true

什麼是跨域？

由於瀏覽器同源策略，凡是傳送請求url的協議、域名、埠三者之間任意一與當前頁面地址不同即為跨域。存在跨域的情況：1.網路協議不同，如http協議訪問https協議。2.埠不同，如80埠訪問8080埠。3.域名不同，如qianduanblog.com訪問baidu.com。4.子域名不同，如abc.qianduanblog.com訪問def.qianduanblog.com。5.域名和域名對應ip,如訪問8.8.8.8.

JavaScript物件導向？

//物件導向的基本特徵：多型，繼承，封包（完全參考java）//prototype 原型鏈來達到繼承的效果function animal(name){    this.name = name;
}
animal.prototype.sayName = function(){
    console.log("name is "+this.name);
}var animal1 = new animal("動物");
animal1.sayName();  //動物 
function dog(name){    this.name = name;
}
dog.prototype = new animal()var dog1= new dog("哈士奇");
dog1.sayName();   //哈士奇

//call()/apply()方法function teacher(name,age){    this.name = name;    this.age = age;    this.sayhi = function(){
        alert('name:'+name+", age:"+age);
    }
}function student(){    var args = arguments;
    teacher.call(this,args[0],args[1]);    // teacher.apply(this,arguments);}var teacher1 = new teacher('xiaoming',23);
teacher1.sayhi();var student1 = new student('xiaolan',12);
student1.sayhi();// alert: name:xiaoming, age:23// alert: name:xiaolan, age:12

function teacher(name,age){    this.name = name;    this.age = age;
}
teacher.prototype.sayName = function(){
    console.log('name:'+this.name);
}
teacher.prototype.sayAge = function(){
    console.log('age:'+this.age);
}function student(){    var args = arguments;
    teacher.call(this,args[0],args[1]);
}
student.prototype = new teacher();var student1 = new student('xiaolin',23);
student1.sayName();
student1.sayAge();// name:xiaolin// age:23

function Person(name,age){    this.name = name;    this.age = age;    this.show = function(){
        console.log(this.name+", "+this.age);
    }
}function Student(name,age){    this.student = Person; //將Person類的建構函式賦值給this.student
    this.student(name,age); //js中實際上是透過物件冒充來實現繼承的
    delete this.student; //移除對Person的引用}var s = new Student("小明",17);
s.show();var p = new Person("小花",18);
p.show();// 小明, 17// 小花, 18

寫一個方法，去掉重複的元素

//方法1var arr = [0,2,3,4,4,0,2];var obj = {};var tmp = [];for(var i = 0 ;i
Jquery 屬性的幾種操作方式
//addClass$(selector).addClass(class)：為每個匹配的元素新增指定的類名//removeClass$(selector).removeClass(class)：從所有匹配的元素中刪除全部或者指定的類，刪除class中某個值；//toggleClass$(selector).toggleClass(class)：如果存在（不存在）就刪除（新增）一個類//removeAttr$(selector).removeAttr(class);刪除class這個屬性；
$(document).ready與window.()?
1.window.方法是在網頁中所有的元素(包括元素的所有關聯檔案)完全載入到瀏覽器後才執行的。2.$(document).ready() 方法可以在DOM載入就緒時就對其進行操縱，並呼叫執行繫結的函式。
$.get,$.post與$.ajax
相同點：都是非同步請求的方式來獲取服務端的資料；
不同點：1、請求方式不同：$.get() 方法使用GET方法來進行非同步請求的。$.post() 方法使用POST方法來進行非同步請求的。2、引數傳遞方式不同：get請求會將引數跟在URL後進行傳遞，而POST請求則是作為HTTP訊息的實體內容傳送給Web伺服器的，這種傳遞是對使用者不可見的。3、資料傳輸大小不同：get方式傳輸的資料大小不能超過2KB 而POST要大的多4、安全問題： GET 方式請求的資料會被瀏覽器快取起來，因此有安全問題。
Ajax：
Ajax 是一種用於建立快速動態網頁的技術。Ajax 是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。
$.get 與 $.post 都是$.ajax的語法糖。
例子
$.ajax({
    url:'',
    type:'POST',
    data:data,
    cache:true,
    headers:{},
    beforeSend：function(){},
    success:function(){},
    error:function(){},
    complete:function(){}
});
jquery事件bind
定義和用法：主要用於給選擇到的元素上繫結特定事件型別的監聽函式；
語法：bind(type,[data],function(eventObject))；
特點：
　　(1)、適用於頁面元素靜態繫結。只能給呼叫它的時候已經存在的元素繫結事件，不能給未來新增的元素繫結事件。
　　(2)、當頁面載入完的時候，你才可以進行bind()，所以可能產生效率問題。
例項如下：$( "#members li a" ).bind( "click", function( e ) {} );
jquery事件live
定義和用法：主要用於給選擇到的元素上繫結特定事件型別的監聽函式；
語法：live(type, [data], fn);
特點：
　　(1)、live方法並沒有將監聽器繫結到自己(this)身上，而是繫結到了this.context上了。
　　(2)、live正是利用了事件委託機制來完成事件的監聽處理，把節點的處理委託給了document，新新增的元素不必再繫結一次監聽器。
　　(3)、使用live（）方法但卻只能放在直接選擇的元素後面，不能在層級比較深，連綴的DOM遍歷方法後面使用，即$(“ul”).live...可以，但$("body").find("ul").live...不行； 
例項如下：$( document ).on( "click", "#members li a", function( e ) {} );
jquery事件delegate
定義和用法：將監聽事件繫結在就近的父級元素上
語法：delegate(selector,type,[data],fn)
特點：
　　(1)、選擇就近的父級元素，因為事件可以更快的冒泡上去，能夠在第一時間進行處理。
　　(2)、更精確的小範圍使用事件代理，效能優於.live()。可以用在動態新增的元素上。
例項如下：
$("#info_table").delegate("td","click",function(){/*顯示更多資訊*/});
$("table").find("#info").delegate("td","click",function(){/*顯示更多資訊*/});
jquery事件on
定義和用法：將監聽事件繫結到指定元素上。
語法：on(type,[selector],[data],fn)
例項如下：$("#info_table").on("click","td",function(){/*顯示更多資訊*/});引數的位置寫法與delegate不一樣。
說明：on方法是當前JQuery推薦使用的事件繫結方法，附加只執行一次就刪除函式的方法是one()。
總結：.bind(), .live(), .delegate(),.on()分別對應的相反事件為：.unbind(),.die(), .undelegate(),.off()
什麼是盒子模型
在網頁中，一個元素佔有空間的大小由幾個部分構成，其中包括元素的內容（content），元素的內邊距（padding），
元素的邊框（border），元素的外邊距（margin）四個部分。這四個部分佔有的空間中，有的部分可以顯示相應的內容，而有的部分只用來分隔相鄰的區域或區域。
4個部分一起構成了css中元素的盒模型。
三種降低頁面載入時間的方法
壓縮css、js檔案
合併js、css檔案，減少http請求
外部js、css檔案放在最底下
減少dom操作，儘可能用變數替代不必要的dom操作
三種常見的web攻擊
1.XSS（Cross-Site Scripting，跨站指令碼攻擊）：指透過存在安全漏洞的Web網站註冊使用者的瀏覽器內執行非法的HTML標籤或者JavaScript進行的一種攻擊。2.SQL隱碼攻擊3.CSRF（Cross-Site Request Forgeries，跨站點請求偽造）：指攻擊者透過設定好的陷阱，強制對已完成的認證使用者進行非預期的個人資訊或設定資訊等某些狀態更新。
針對頁面內容的最佳化
1.減少 HTTP 請求 (Make Fewer HTTP Requests)2.減少 DOM 元素數量 (Reduce the Number of DOM Elements)3.使得 Ajax 可快取 (Make Ajax Cacheable)
針對修飾檔案的最佳化
1.把 CSS 放到內碼表上端 (Put Stylesheets at the Top)2.從頁面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External)3.精簡 JavaScript 與 CSS (Minify JavaScript and CSS)4.避免 CSS 表示式 (Avoid CSS Expressions)
針對指令碼的最佳化
1. 指令碼放到 HTML 內碼表底部 (Put Scripts at the Bottom)2. 從頁面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External)3. 精簡 JavaScript 與 CSS (Minify JavaScript and CSS)4. 移除重複指令碼 (Remove Duplicate Scripts)
針對圖片類檔案的最佳化
1.最佳化圖片2 不要在 HTML 中使用縮放圖片3 使用恰當的圖片格式4 使用 CSS Sprites 技巧對圖片最佳化
影像格式的區別
向量圖：圖示字型，如 font-awesome；svg 
普通圖：gif,jpg(jpeg),png
區別：
　　1、gif:是是一種無損，8點陣圖片格式。具有支援動畫，索引透明，壓縮等特性。適用於做色彩簡單(色調少)的圖片，如logo,各種小圖示icons等。
　　2、JPEG格式是一種大小與質量相平衡的壓縮圖片格式。適用於允許輕微失真的色彩豐富的照片，不適合做色彩簡單(色調少)的圖片，如logo,各種小圖示icons等。
　　3、png:PNG可以細分為三種格式:PNG8，PNG24，PNG32。後面的數字代表這種PNG格式最多可以索引和儲存的顏色值。
關於透明：PNG8支援索引透明和alpha透明;PNG24不支援透明;而PNG32在24位的PNG基礎上增加了8位（256階）的alpha通道透明;

優缺點：
　　1、能在保證最不失真的情況下儘可能壓縮影像檔案的大小。
　　2、對於需要高保真的較複雜的影像，PNG雖然能無失真壓縮，但圖片檔案較大，不適合應用在Web頁面上。
瀏覽器渲染頁面流程
1.解析HTML檔案，建立DOM樹。
自上而下，遇到任何樣式（link、style）與指令碼（script）都會阻塞（外部樣式不阻塞後續外部指令碼的載入）。2.解析CSS。優先順序：瀏覽器預設設定
原文出處：https://www.cnblogs.com/peiyu1988/p/9501449.html