前端面試送命題（三）- 面試題篇

前言

前端入門很容易，簡單地用html搭一個頁面框架；會用一些css基本樣式；懂得用jquery的dom交互，就基本可以挺着胸說自己是個前端工程師了。

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

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

內容

JavaScript中如何檢測一個變量是字符串類型？

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

trim()的使用場景

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

this的典型應用

//1 input點擊，獲取值
<input type="button" id="text" value="點擊一下" />
<script type="text/javascript">
    var btn = document.getElementById("text");
    btn.onclick = function() {
        alert(this.value);    //此處的this是按鈕元素
    }
</script>

//2 構造函數
function Hello(name, color) {
　　this.name = name;
　　this.color = color;
}

//3 在html元素事件屬性中使用
<input type=”button” onclick=”showInfo(this);” value=”點擊一下”/>

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);  // true
alert(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,如www.bb.com訪問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    

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

//方法1
var arr = [0,2,3,4,4,0,2];
var obj = {};
var tmp = [];
for(var i = 0 ;i< arr.length;i++){
   if( !obj[arr[i]] ){
      obj[arr[i]] = 1;
      tmp.push(arr[i]);
   }
}
console.log(tmp);

//方法2
var arr = [2,3,4,4,5,2,3,6],
   arr2 = [];
for(var i = 0;i< arr.length;i++){
    if(arr2.indexOf(arr[i]) < 0){
        arr2.push(arr[i]);
    }
}
console.log(arr2);

//方法3
var arr = [2,3,4,4,5,2,3,6];
var arr2 = arr.filter(function(element,index,self){
return self.indexOf(element) === index;
});
console.log(arr2);

Jquery 屬性的幾種操作方式

//addClass
$(selector).addClass(class)：為每個匹配的元素添加指定的類名
//removeClass
$(selector).removeClass(class)：從所有匹配的元素中刪除全部或者指定的類，刪除class中某個值；
//toggleClass
$(selector).toggleClass(class)：如果存在（不存在）就刪除（添加）一個類
//removeAttr
$(selector).removeAttr(class);刪除class這個屬性；

$(document).ready與window.onload()?

1.window.onload方法是在網頁中所有的元素(包括元素的所有關聯文件)完全加載到瀏覽器后才執行的。
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:'http://www.baidu.com',
    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。優先級：瀏覽器默認設置<用戶設置<外部樣式<內聯樣式<HTML中的style樣式；
3.將CSS與DOM合並，構建渲染樹（Render Tree）
4.布局和繪制，重繪（repaint）和重排（reflow）