前言javascript
前端入門很容易，簡單地用html搭一個頁面框架；會用一些css基本樣式；懂得用jquery的dom交互，就基本能夠挺着胸說本身是個前端工程師了。css
可是前端提高異常艱難，算法、數據結構、oop；javascript、dom、css、html5這些僅僅是標配；性能優化、安全性、代碼優雅性、seo，這些也是必然須要瞭解的。前端開發環境很輕便，也很繁瑣，各類框架、架構模式的應用也是衡量專業程度的標準。html
在這裏總結了一些面試題供前端們參考。前端
內容html5
JavaScript中如何檢測一個變量是字符串類型？java
typeof(obj) === "string" //true obj.constructor === String //true
trim()的使用場景jquery
var str = " hello word "; str = str.trim(); console.log(str); //hello word,trim只會去掉字符中先後的空格，不會去除文字中的空格
this的典型應用web
//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
什麼是跨域？ajax
因爲瀏覽器同源策略，凡是發送請求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、能在保證最不失真的狀況下儘量壓縮圖像文件的大小。 二、對於須要高保真的較複雜的圖像，PNG雖然能無損壓縮，但圖片文件較大，不適合應用在Web頁面上。
瀏覽器渲染頁面流程
1.解析HTML文件，建立DOM樹。 自上而下，遇到任何樣式（link、style）與腳本（script）都會阻塞（外部樣式不阻塞後續外部腳本的加載）。 2.解析CSS。優先級：瀏覽器默認設置<用戶設置<外部樣式<內聯樣式<HTML中的style樣式； 3.將CSS與DOM合併，構建渲染樹（Render Tree） 4.佈局和繪製，重繪（repaint）和重排（reflow）