針對簡歷面試題總結

一、JavaScript this指針、閉包、做用域

this：指向調用上下文

閉包：內部函數能夠訪問它們所在的外部函數中聲明的全部局部變量、參數和聲明的其餘內部函數。當其中一個這樣的內部函數在包含它們的外部函數以外被調用時，就會造成閉包。

閉包的好處：
（1）不增長額外的全局變量，
（2）執行過程當中全部變量都是在匿名函數內部。
閉包的缺點：

（1）濫用閉包函數會形成內存泄露，由於閉包中引用到的包裹函數中定義的變量都永遠不會被釋放，內存消耗很大，因此不能濫用閉包，不然會形成網頁的性能問題，在IE中可能致使內存泄露。解決方法是，在必要的時候，及時釋放這個閉包函數,(在退出函數以前，將不使用的局部變量所有刪除。)

（2） 閉包會在父函數外部，改變父函數內部變量的值。因此，若是你把父函數看成對象（object）使用，把閉包看成它的公用方法（Public Method），把內部變量看成它的私有屬性（private value），這時必定要當心，不要隨便改變父函數內部變量的值。

做用域：做用域就是變量與函數的可訪問範圍，即做用域控制着變量與函數的可見性和生命週期。在JavaScript中，變量的做用域有全局做用域和局部做用域兩種。

全局做用域:在代碼中任何地方都能訪問到的對象擁有全局做用域

（1）最外層函數和在最外層函數外面定義的變量擁有全局做用域

（2）全部末定義直接賦值的變量自動聲明爲擁有全局做用域

（3）全部window對象的屬性擁有全局做用域

 局部做用域（Local Scope）　:

和全局做用域相反，局部做用域通常只在固定的代碼片斷內可訪問到，最多見的例如函數內部，全部在一些地方也會看到有人把這種做用域稱爲函數做用域，

 

2. Javascript做用域鏈?

理解變量和函數的訪問範圍和生命週期，全局做用域與局部做用域的區別，JavaScript中沒有塊做用域，函數的嵌套造成不一樣層次的做用域，嵌套的層次造成鏈式形式，經過做用域鏈查找屬性的規則須要深刻理解。

"鏈式做用域"結構（chain scope），子對象會一級一級地向上尋找全部父對象的變量。因此，父對象的全部變量，對子對象都是可見的，反之則不成立。

 

三、JavaScript原型，原型鏈 ? 有什麼特色？

*  原型對象也是普通的對象，是對象一個自帶隱式的 __proto__ 屬性，原型也有可能有本身的原型，若是一個原型對象的原型不爲null的話，咱們就稱之爲原型鏈。

*  原型鏈是由一些用來繼承和共享屬性的對象組成的（有限的）對象鏈。

* JavaScript的數據對象有那些屬性值？

　　writable：這個屬性的值是否能夠改。

　　configurable：這個屬性的配置是否能夠刪除，修改。

　　enumerable：這個屬性是否能在for…in循環中遍歷出來或在Object.keys中列舉出來。

　　value：屬性值。

* 當咱們須要一個屬性的時，Javascript引擎會先看當前對象中是否有這個屬性， 若是沒有的話，就會查找他的Prototype對象是否有這個屬性。

 function clone(proto) {

　　function Dummy() { }

　　Dummy.prototype = proto;

　　Dummy.prototype.constructor = Dummy;

　　return new Dummy(); //等價於Object.create(Person);

 }

        function object(old) {

         function F() {};

         F.prototype = old;

         return new F();

        }

var newObj = object(oldObject);

九、b繼承a的方法

考點：繼承的多種方式

function b(){}

b.protoototype=new a;

十一、事件委託是什麼

符合W3C標準的事件綁定addEventLisntener /attachEvent

讓利用事件冒泡的原理，讓本身的所觸發的事件，讓他的父元素代替執行！

Javascript的事件流模型都有什麼？

「事件冒泡」：事件開始由最具體的元素接受，而後逐級向上傳播

「事件捕捉」：事件由最不具體的節點先接收，而後逐級向下，一直到最具體的

「DOM事件流」：三個階段：事件捕捉，目標階段，事件冒泡

9九、字符串反轉，如將 '12345678' 變成 '87654321'

//大牛作法； //思路：先將字符串轉換爲數組 split()，利用數組的反序函數 reverse()顛倒數組，再利用 jion() 轉換爲字符串 var str = '12345678'; str = str.split('').reverse().join('');

 

1五、javascript的本地對象，內置對象和宿主對象

本地對象爲array obj regexp等能夠new實例化

內置對象爲gload Math 等不能夠實例化的

宿主爲瀏覽器自帶的document,window 等

 

 

5.不一樣瀏覽器的兼容前綴？

-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */

8四、Jquery與jQuery UI 有啥區別？

*jQuery是一個js庫，主要提供的功能是選擇器，屬性修改和事件綁定等等。

*jQuery UI則是在jQuery的基礎上，利用jQuery的擴展性，設計的插件。

提供了一些經常使用的界面元素，諸如對話框、拖動行爲、改變大小行爲等等

六、針對 jQuery 的優化方法？

a、優先使用ID選擇器

b、jquery獲取到的DOM元素若是須要屢次使用，建議使用一個變量將其保存起來，由於操做DOM的過程是很是耗費性能的

c、在class前使用tag(標籤名)

d、給選擇器一個上下文

e、慎用 .live()方法（應該說盡可能不要使用）

f、使用data()方法存儲臨時變量

15七、請儘量詳盡的解釋ajax的工做原理

思路：先解釋異步，再解釋ajax如何使用

Ajax的原理簡單來講經過XmlHttpRequest對象來向服務器發異步請求，從服務器得到數據，而後用javascript來操做DOM而更新頁面。這其中最關鍵的一步就是從服務器得到請求數據。要清楚這個過程和原理，咱們必須對 XMLHttpRequest有所瞭解。

　啊

200、jQuery框架中$.ajax()的經常使用參數有哪些？

type

類型：String

默認值: "GET")。請求方式 ("POST" 或 "GET")， 默認爲 "GET"。注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可使用，但僅部分瀏覽器支持。

url

類型：String

默認值: 當前頁地址。發送請求的地址。

success

類型：Function

請求成功後的回調函數。

參數：由服務器返回，並根據 dataType 參數進行處理後的數據；描述狀態的字符串。

這是一個 Ajax 事件。

options

類型：Object

可選。AJAX 請求設置。全部選項都是可選的。

async

類型：Boolean

默認值: true。默認設置下，全部請求均爲異步請求。若是須要發送同步請求，請將此選項設置爲 false。

注意，同步請求將鎖住瀏覽器，用戶其它操做必須等待請求完成才能夠執行。

beforeSend(XHR)

類型：Function

發送請求前可修改 XMLHttpRequest 對象的函數，如添加自定義 HTTP 頭。

XMLHttpRequest 對象是惟一的參數。

這是一個 Ajax 事件。若是返回 false 能夠取消本次 ajax 請求。

cache

類型：Boolean

默認值: true，dataType 爲 script 和 jsonp 時默認爲 false。設置爲 false 將不緩存此頁面。

jQuery 1.2 新功能。

contentType

類型：String

默認值: "application/x-www-form-urlencoded"。發送信息至服務器時內容編碼類型。

默認值適合大多數狀況。若是你明確地傳遞了一個 content-type 給 $.ajax() 那麼它一定會發送給服務器（即便沒有數據要發送）。

data

類型：String

發送到服務器的數據。將自動轉換爲請求字符串格式。GET 請求中將附加在 URL 後。查看 processData 選項說明以禁止此自動轉換。必須爲 Key/Value 格式。若是爲數組，jQuery 將自動爲不一樣值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換爲 '&foo=bar1&foo=bar2'。

dataFilter

類型：Function

給 Ajax 返回的原始數據的進行預處理的函數。提供 data 和 type 兩個參數：data 是 Ajax 返回的原始數據，type 是調用 jQuery.ajax 時提供的 dataType 參數。函數返回的值將由 jQuery 進一步處理。

dataType

類型：String

預期服務器返回的數據類型。若是不指定，jQuery 將自動根據 HTTP 包 MIME 信息來智能判斷，好比 XML MIME 類型就被識別爲 XML。在 1.4 中，JSON 就會生成一個 JavaScript 對象，而 script 則會執行這個腳本。隨後服務器端返回的數據會根據這個值解析後，傳遞給回調函數。可用值:

• "xml": 返回 XML 文檔，可用 jQuery 處理。
• "html": 返回純文本 HTML 信息；包含的 script 標籤會在插入 dom 時執行。
• "script": 返回純文本 JavaScript 代碼。不會自動緩存結果。除非設置了 "cache" 參數。注意：在遠程請求時(不在同一個域下)，全部 POST 請求都將轉爲 GET 請求。（由於將使用 DOM 的 script標籤來加載）
• "json": 返回 JSON 數據 。
• "jsonp": JSONP 格式。使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 爲正確的函數名，以執行回調函數。
• "text": 返回純文本字符串

error

類型：Function

默認值: 自動判斷 (xml 或 html)。請求失敗時調用此函數。

有如下三個參數：XMLHttpRequest 對象、錯誤信息、（可選）捕獲的異常對象。

若是發生了錯誤，錯誤信息（第二個參數）除了獲得 null 以外，還多是 "timeout", "error", "notmodified" 和 "parsererror"。

這是一個 Ajax 事件。

寫一個post請求並帶有發送數據和返回數據的樣例

$.ajax({
    url:"1.html",
    data:{name:"張三",age:18},//post數據
    dataType:"json",
    type:"POST",
    success:function(data){
        //data：返回的數據
    },
    error:function(){
        //異常處理
    }
});

 

五、簡述ajax 的過程。

1. 建立XMLHttpRequest對象,也就是建立一個異步調用對象

2. 建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息

3. 設置響應HTTP請求狀態變化的函數

4. 發送HTTP請求

5. 獲取異步調用返回的數據

6. 使用JavaScript和DOM實現局部刷新

9六、解釋jsonp的原理，以及爲何不是真正的ajax

JSONP的最基本的原理是：動態添加一個<script>標籤，而script標籤的src屬性是沒有跨域的限制的。這樣說來，這種跨域方式其實與ajax XmlHttpRequest協議無關了。

動態建立script標籤，回調函數

Ajax是頁面無刷新請求數據操做

1四、什麼是Ajax和JSON，它們的優缺點。

Ajax是全稱是asynchronous JavaScript andXML，即異步JavaScript和xml，用於在Web頁面中實現異步數據交互，實現頁面局部刷新。

優勢：可使得頁面不重載所有內容的狀況下加載局部內容，下降數據傳輸量，避免用戶不斷刷新或者跳轉頁面，提升用戶體驗

缺點：對搜索引擎不友好；要實現ajax下的先後退功能成本較大；可能形成請求數的增長跨域問題限制；

JSON是一種輕量級的數據交換格式，ECMA的一個子集

優勢：輕量級、易於人的閱讀和編寫，便於機器（JavaScript）解析，支持複合數據類型（數組、對象、字符串、數字）

1七、ajax請求的時候get 和post方式的區別

get通常用來進行查詢操做，url地址有長度限制，請求的參數都暴露在url地址當中，若是傳遞中文參數，須要本身進行編碼操做，安全性較低。

post請求方式主要用來提交數據，沒有數據長度的限制，提交的數據內容存在於http請求體中，數據不會暴漏在url地址中。

16五、HTTP協議中，GET和POST有什麼區別？分別適用什麼場景 ？

get傳送的數據長度有限制，post沒有

get經過url傳遞，在瀏覽器地址欄可見，post是在報文中傳遞

 

適用場景：

post通常用於表單提交

get通常用於簡單的數據查詢，嚴格要求不是那麼高的場景

 

3五、簡介盒子模型：

CSS的盒子模型有兩種：IE盒子模型、標準的W3C盒子模型模型

盒模型：內容、內邊距、外邊距（通常不計入盒子實際寬度）、邊框

 

3六、爲何要初始化樣式？

因爲瀏覽器兼容的問題，不一樣的瀏覽器對標籤的默認樣式值不一樣，若不初始化會形成不一樣瀏覽器之間的顯示差別

可是初始化CSS會對搜索引擎優化形成小影響

4、HTML5 CSS3

一、CSS3有哪些新特性？

1. CSS3實現圓角（border-radius），陰影（box-shadow），

2. 對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）

3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉,縮放,定位,傾斜

4. 增長了更多的CSS選擇器  多背景 rgba

5. 在CSS3中惟一引入的僞元素是 ::selection.

6. 媒體查詢，多欄佈局

7. border-image

二、html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

新特性：

1. 拖拽釋放(Drag and drop) API

2. 語義化更好的內容標籤（header,nav,footer,aside,article,section）

3. 音頻、視頻API(audio,video)

4. 畫布(Canvas) API

5. 地理(Geolocation) API

6. 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；

7. sessionStorage 的數據在瀏覽器關閉後自動刪除

8. 表單控件，calendar、date、time、email、url、search 

9. 新的技術webworker, websocket, Geolocation

移除的元素：

1. 純表現的元素：basefont，big，center，font, s，strike，tt，u；

2. 對可用性產生負面影響的元素：frame，frameset，noframes；

支持HTML5新標籤：

1. IE8/IE7/IE6支持經過 document.createElement 方法產生的標籤，能夠利用這一特性讓這些瀏覽器支持 HTML5 新標籤，瀏覽器支持新標籤後，還須要添加標籤默認的樣式（固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架）：

<!--[if lt IE 9]>

<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

<![endif]-->

如何區分：

DOCTYPE聲明新增的結構元素、功能元素

2八、如何垂直居中一個浮動元素？

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

// 方法一：已知元素的高寬 #div1{     background-color:#6699FF;     width:200px;     height:200px;     position: absolute;        //父元素須要相對定位     top: 50%;     left: 50%;     margin-top:-100px ;   //二分之一的height，width     margin-left: -100px;     }   //方法二:未知元素的高寬     #div1{     width: 200px;     height: 200px;     background-color: #6699FF;       margin:auto;     position: absolute;        //父元素須要相對定位     left: 0;     top: 0;     right: 0;     bottom: 0;     }

那麼問題來了，如何垂直居中一個<img>?（用更簡便的方法。）

1 2 3 4 5 6

#container     //<img>的容器設置以下 {     display:table-cell;     text-align:center;     vertical-align:middle; }

3九、Doctype的做用？嚴格模式與混雜模式的區別？

<!DOCTYPE>用於告知瀏覽器該以何種模式來渲染文檔

嚴格模式下：頁面排版及JS解析是以該瀏覽器支持的最高標準來執行

混雜模式：不嚴格按照標準執行，主要用來兼容舊的瀏覽器，向後兼容

4四、行內元素有哪些?塊級元素有哪些?CSS的盒模型?

答：塊級元素：div p h1 h2 h3 h4 form ul
行內元素: a b br i span input select
Css盒模型:內容，border ,margin，padding

 

三、本地存儲（Local Storage ）和cookies（儲存在用戶本地終端上的數據）之間的區別是什麼？

Cookies:服務器和客戶端均可以訪問；大小隻有4KB左右；有有效期，過時後將會刪除；

本地存儲：只有本地瀏覽器端可訪問數據，服務器不能訪問本地存儲直到故意經過POST或者GET的通道發送到服務器；每一個域5MB；沒有過時數據，它將保留知道用戶從瀏覽器清除或者使用Javascript代碼移除

 

8七、前端開發的優化問題（看雅虎14條性能優化原則）。

參考資料：J:\代碼,PPT,筆記,電子書\面試題\雅虎14條優化規則.docx

  （1） 減小http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN託管，data緩存 ，圖片服務器。

  （2） 前端模板 JS+數據，減小因爲HTML標籤致使的帶寬浪費，前端用變量保存AJAX請求結果，每次操做本地變量，不用請求，減小請求次數

  （3） 用innerHTML代替DOM操做，減小DOM操做次數，優化javascript性能。

  （4） 當須要設置的樣式不少時設置className而不是直接操做style。

  （5） 少用全局變量、緩存DOM節點查找的結果。減小IO讀取操做。

  （6） 避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。

  （7） 圖片預加載，將樣式表放在頂部，將腳本放在底部  加上時間戳。

  （8） 避免在頁面的主體佈局中使用table，table要等其中的內容徹底下載以後纔會顯示出來，顯示比div+css佈局慢。

十一、   你所知道的頁面性能優化方法有那些？

壓縮、合併，減小請求，代碼層析優化。。。

2二、如何優化網頁加載速度？

   1.減小css，js文件數量及大小(減小重複性代碼，代碼重複利用)，壓縮CSS和Js代碼

   2.圖片的大小

   3.把css樣式表放置頂部，把js放置頁面底部

   4.減小http請求數

   5.使用外部 Js 和 CSS

五、你如何對網站的文件和資源進行優化？

文件合併

文件最小化/文件壓縮

使用CDN託管

緩存的使用

6.清除浮動？

一、對父級設置適合CSS高度：小結，使用設置高度樣式，清除浮動產生，前提是對象內容高度要能肯定並能計算好。

二、clear:both清除浮動： 在父級「</div>」結束前加此div引入「class="clear"」樣式。這樣便可清除浮動。方便適用，但會多加CSS和HTML標籤。clear{clear:both

}

<div class="divcss5"> 

    <div class="divcss5-left">left浮動</div> 

    <div class="divcss5-right">right浮動</div> 

    <div class="clear"></div> 

</div> 

三、父級div定義 overflow:hidden
對父級CSS選擇器加overflow:hidden樣式，能夠清除父級內使用float產生浮動。優勢是能夠不多CSS代碼便可解決浮動產生。

四、 //一種常見利用僞類清除浮動的代碼

.clearfix:after {

    content:"."; //這裏利用到了content屬性

    display:block;

    height:0;

    visibility:hidden;

    clear:both; }

.clearfix {

    *zoom:1;

}

 

五、父級div定義overflow:auto

六、父級div也一塊兒浮動

七、父級div定義display:table

8、結尾處加br標籤clear:both

11、前端歸納性問題

一、常使用的庫有哪些？經常使用的前端開發工具？開發過什麼應用或組件？

使用率較高的框架有jQuery、YUI、Prototype、Dojo、Ext.js、Mootools等。尤爲是jQuery，超過91%。

輕量級框架有Modernizr、underscore.js、backbone.js、Raphael.js等。（理解這些框架的功能、性能、設計原理）

前端開發工具：Sublime Text 、Eclipse、Notepad、Firebug、HttpWatch、Yslow。

開發過的插件：城市選擇插件，汽車型號選擇插件、幻燈片插件。彈出層。（寫過開源程序，加載器，js引擎更好）

10、NodeJs

七、對Node的優勢和缺點提出了本身的見解？

優勢：

1. 由於Node是基於事件驅動和無阻塞的，因此很是適合處理併發請求，所以構建在Node上的代理服務器相比其餘技術實現（如Ruby）的服務器表現要好得多。

2. 與Node代理服務器交互的客戶端代碼是由javascript語言編寫的，所以客戶端和服務器端都用同一種語言編寫，這是很是美妙的事情。

缺點：

1. Node是一個相對新的開源項目，因此不太穩定，它老是一直在變。

2. 缺乏足夠多的第三方庫支持。看起來，就像是Ruby/Rails當年的樣子（第三方庫如今已經很豐富了，因此這個缺點能夠說不存在了）。

1.Javascript

今天讓咱們站在語言的高度來看一下Javascript都有點什麼。由於是全局性的俯瞰，因此不針對細節做詳細的講解。

先來看一張圖吧：

 

解釋一下：

核心（ECMAScript)：定義了腳本語言的全部對象，屬性和方法。文檔對象模型（DOM)：HTML和XML應用程序接口。瀏覽器對象模型(BOM)：對瀏覽器窗口進行訪問操做

如今來具體的講一個各個成分：

關於ECMAScript

ECMAScript的工做是定義語法和對象，從最基本的數據類型、條件語句、關鍵字、保留字到 異常處理和對象定義都是它的範疇。在ECMAScript範疇內定義的對象也叫作原生對象。其實上它就是一套定義了語法規則的接口，而後由不一樣的瀏覽器對 其進行實現,最後咱們輸寫遵照語法規則的程序，完成應用開發需求。

關於DOM

根據DOM的定義(HTML和XML應用程序接口)可知DOM由兩個部分組成，針對於XML的DOM即DOM Core和針對HTML的DOM HTML。那DOM Core 和DOM HTML有什麼區別與聯繫呢？DOM Core的核心概念就是節點(Node)。DOM會將文檔中不一樣類型的元素(這裏不元素並不特指<div>這種tag,還包括屬性，註釋，文本之類）都看做爲不一樣的節點。

 

上圖描述了DOM CORE的結構圖，比較專業,來看一個簡單的：

view sourceprint?

1 <div id="container">

2 <span>hello world</span>

3 </div>

來看一下這段代碼在標準瀏覽器裏的DOM表現:

 

div和span元素被展示成了一個元素節點，對應到節點結構圖中的Element元素。"hello world"和div與span之間的間隔，被展示成了文本節點，對應到節點結構圖中的CharacterDate元素。DOM CORE在解析文檔時，會將全部的元素、屬性、文本、註釋等等視爲一個節點對象（或繼承自節點對象的對象,多態、向上轉型）,根據文本結構依次展示，最後行成了一棵"DOM樹"。

DOM HTML的核心概念是HTMLElement，DOM HTML會將文檔中的元素（這裏的元素特指<body>這種tag,不包括註釋，屬性，文本)都視爲HTMLElement。而元素的屬性，則爲HTMLElement的屬性。

再來看一個示例：

從Node接口提供的屬性，myElement.attributes["id"].value;很明顯myElement.attributes["id"]返回一個對象.value是獲得對象的value屬性。Element實現的方法返回 myElement.getAttributes("id");很明顯此時id如今只是一個屬性而已，這只是一個獲得屬性的操做。

其實上DOM Core和DOM html的外部調用接口相差並非很大，對於html文檔能夠用DOM html進行操做，針對xhtml能夠用DOM Core。

關於BOM

老規則，先來一張圖：

 

BOM與瀏覽器緊密結合,這些對象也被稱爲是宿主對象，即由環境提供的對象。這裏要強調一個奇怪 的對象Global對象，它表明一個全局對象，Javascript是不容許存在獨立的函數，變量和常量，若是沒有額外的定義，他們都做爲Global對 象的屬性或方法來看待.像parseInt(),isNaN(),isFinite()等等都做爲Global對象的方法來看待，像 Nan,Infinity等"常量"也是Global對象的屬性。像Boolean,String,Number，RegExp等內置的全局對象的構造函 數也是Global對象的屬性.可是Global對象實際上並不存在，也就是說你用Global.NaN訪問NaN將會報錯。實際上它是由window來 充當這個角色，而且這個過程是在javascript首次加載時進行的。

3六、模塊化開發怎麼作？

理解模塊化開發模式：瀏覽器端requirejs，seajs；服務器端nodejs；ES6模塊化；fis、webpack等前端總體模塊化解決方案；grunt、gulp等前端工做流的使用