前端面試題 - JavaShuo

面試有幾點需注意： javascript

1.面試題目：根據你的等級和職位變化，入門級到專家級：範圍↑、深度↑、方向↑。 php

2.題目類型：技術視野、項目細節、理論知識題，算法題，開放性題，案例題。 css

3.進行追問：能夠確保問到你開始不懂或面試官開始不懂爲止，這樣能夠大大延展題目的區分度和深度，知道你的實際能力。由於這種關聯知識是長時期的學習，絕對不是臨時記得住的。回答問題再棒，面試官（多是你的直接領導面試），會考慮我要不要這我的作個人同事？因此態度很重要。（感受更像是相親） html

4.資深的工程師能把absolute和relative弄混，這樣的人不要也罷，由於團隊須要的你這我的具備能夠依靠的才能（靠譜）。前端

前端開發面試知識點大綱： html5

HTML&CSS： java

對Web標準的理解、瀏覽器內核差別、兼容性、hack、CSS基本功：佈局、盒子模型、選擇器優先級及使用、HTML5、CSS3、移動端適應 jquery

JavaScript： git

數據類型、面向對象、繼承、閉包、插件、做用域、跨域、原型鏈、模塊化、自定義事件、內存泄漏、事件機制、異步裝載回調、模板引擎、Nodejs、JSON、ajax等。程序員

其餘：

HTTP、安全、正則、優化、重構、響應式、移動端、團隊協做、可維護、SEO、UED、架構、職業生涯

不管工做年頭長短都應該必須掌握的知識點：

1、DOM結構 —— 兩個節點之間可能存在哪些關係以及如何在節點之間任意移動。

2、DOM操做 ——如何添加、移除、移動、複製、建立和查找節點等。

3、事件 —— 如何使用事件，以及IE和標準DOM事件模型之間存在的差異。

4、XMLHttpRequest —— 這是什麼、怎樣完整地執行一次GET請求、怎樣檢測錯誤。

5、嚴格模式與混雜模式 —— 如何觸發這兩種模式，區分它們有何意義。

(1）、<!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標籤以前。告知瀏覽器的解析器，用什麼文檔類型規範來解析這個文檔。

（2）、嚴格模式的排版和 JS 運做模式是以該瀏覽器支持的最高標準運行。

（3）、在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。

（4）、DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。

6、盒模型 —— 外邊距、內邊距和邊框之間的關係，及IE8如下版本的瀏覽器中的盒模型

7、塊級元素與行內元素 —— 怎麼用CSS控制它們、以及如何合理的使用它們

8、浮動元素——怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。

9、HTML與XHTML——兩者有什麼區別，你以爲應該使用哪個並說出理由。

XHTML與HTML之間的主要差別是他遵照XML約定，這意味着與常規的HTML不一樣，全部XHTML屬性必須包含引號，全部元素必須是封閉的。概念上XHMLT頁面能夠做爲HTML文檔，而XHTML頁面是做爲XML發送給瀏覽器的，即便有錯誤也不會顯示頁面的。

10、JSON —— 做用、用途、設計結構。

html

11、行內元素有哪些？塊級元素有哪些？他們的區別？空(void)元素有那些？

（1）CSS規範規定，每一個元素都有display屬性，肯定該元素的類型，每一個元素都有默認的display值，

好比div默認display屬性值爲「block」，成爲「塊級」元素；

span默認display屬性值爲「inline」，是「行內」元素。

（2）行內元素有：a b span img input select strong（強調的語氣）

塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

（3）知名的空元素： <br> <hr> <img> <input> <link> <meta>

不爲人知的是： <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

區別：

1.行內元素與塊級元素直觀上的區別：

行內元素會在一條直線上排列，都是同一行的，水平方向排列；

塊級元素各佔據一行，垂直方向排列。塊級元素重新行開始結束接着一個斷行。

2.塊級元素能夠包含行內元素和塊級元素。行內元素不能包含塊級元素。

3.行內元素與塊級元素屬性的不一樣，主要是盒模型屬性上：

行內元素設置width無效，height無效(能夠設置line-height)；

margin上下無效。

12、link 和@import 的區別是？

（1）link屬於XHTML標籤，而@import是CSS提供的;

（2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;

（3）import只在IE5以上才能識別，而link是XHTML標籤，無兼容問題;

（4）link方式的樣式的權重高於@import的權重.

13、瀏覽器的內核分別是什麼?

IE瀏覽器的內核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera內核原爲Presto，現爲Blink；

14、常見兼容性問題？|| 常常遇到的CSS的兼容性有哪些？緣由，解決方法是什麼？

* png24位的圖片在iE6瀏覽器上出現背景，解決方案是作成PNG8.

* 瀏覽器默認的margin和padding不一樣。解決方案是加一個全局的*{margin:0;padding:0;}來統一。

* IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin狀況下，在ie6顯示margin比設置的大。浮動ie產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;} 這種狀況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入 ——_display:inline;將其轉化爲行內屬性。(_這個符號只有ie6會識別)

漸進識別的方式，從整體中逐漸排除局部。

首先，巧妙的使用「\9」這一標記，將IE遊覽器從全部狀況中分離出來。

接着，再次使用「+」將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。

css

.bb{

background-color:#f1ee18;/*全部識別*/

.background-color:#00deff\9; /*IE6、7、8識別*/

+background-color:#a200ff;/*IE6、7識別*/

_background-color:#1e0bd1;/*IE6識別*/

}

* IE下,可使用獲取常規屬性的方法來獲取自定義屬性,

也可使用getAttribute()獲取自定義屬性;

Firefox下,只能使用getAttribute()獲取自定義屬性.

解決方法:統一經過getAttribute()獲取自定義屬性.

* IE下,even對象有x,y屬性,可是沒有pageX,pageY屬性;

Firefox下,event對象有pageX,pageY屬性,可是沒有x,y屬性.

pageX（頁面座標） = ClientX(視口的座標) + srollLeft(滾輪的長度);

pageY = ClientY + scrollTop;

* 解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增長額外的HTTP請求數。

*FireFox不支持元素的innerText屬性，需用textContent

* Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示,

可經過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.

超連接訪問事後hover樣式就不出現了被點擊訪問過的超連接樣式不在具備hover和active瞭解決方法是改變CSS屬性的排列順序:

L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

* 在必定寬度下，溢出文字顯示省略號：textoverflow：ellipsis white-space：nowrap段落文本不換行

* border屬性中dotted與dashed的區別 dotted(點狀輪廓)在ie6下不兼容，顯示爲dashed(虛線輪廓)，而dashed顯示一致

*border:0;和border:none區別：

性能上：0會進行渲染，佔用內存值，none不會消耗內存值

兼容差別：只針對瀏覽器ie6,ie7與標籤button和input而言，0無效邊框仍然存在，none無邊框。火狐下none /0 表現一直均無邊框

*IE選擇符空格：IE有個BUG，在處理僞類時，若是僞類的名稱中帶有連字符」-」，僞類名稱後面就得跟一個空格，否則樣式的定義就無效

*Inline-block不支持問題

display:inline-block; /* 現代瀏覽器 +IE6、7 inline 元素 */

*display:inline; /* IE6、7 block 元素 */

*zoom:1;

Inline-block間隙問題

font-size:0;/* 全部瀏覽器 */

letter-spacing:-5px;/* Safari 等不支持字體大小爲 0 的瀏覽器 */

*letter-spacing:normal;

word-spacing:-1px;/* IE6、7 */

1.怪異盒模型

2.垂直外邊距重疊

3.浮動清除

4.inline-block的統一

5.ul的不一樣表現

6.IE的雙倍邊距

7.3px偏移

8.「斷頭臺」

9.多個浮動重複字樣

10.高度不固定heigth->min-height

11.透明度問題

12.img默認下有間距

13. IE6 IE7 IE8(Q) 中行內元素後相鄰的浮動元素在某些狀況下會折行放置在以前行內元素所在行框的底部

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

* HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。

* 繪畫 canvas

用於媒介回放的 video 和 audio 元素

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

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

語意化更好的內容元素，好比 article、footer、header、nav、section 利於搜索引擎搜索。更加友好。

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

新的技術webworker, websockt, Geolocation

*div、section、article的區別

section 表示一段專題性的內容，通常會帶有標題。

當元素內容聚合起來更加言之有物時，應該使用 article 來替換 section。

section 應用的典型場景有文章的章節、標籤對話框中的標籤頁、或者論文中有編號的部分

* 移除的元素

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

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

支持HTML5新標籤：

* IE8/IE7/IE6支持經過document.createElement方法產生的標籤，

能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，

瀏覽器支持新標籤後，還須要添加標籤默認的樣式：

* 固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

<!--[if lt IE 9]>

<![endif]-->

如何區分： DOCTYPE聲明\新增的結構元素\功能元素

16、語義化的理解？

用正確的標籤作正確的事情！，html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；在沒有樣式CCS狀況下也以一種文檔格式顯示，而且是容易閱讀的。搜索引擎的爬蟲依賴於標記來肯定上下文和各個關鍵字的權重，利於 SEO。使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

17、HTML5的離線儲存？

localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；

sessionStorage 數據在瀏覽器關閉後自動刪除。

18、iframe有那些缺點？

*iframe會阻塞主頁面的Onload事件；

*iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript

動態給iframe添加src屬性值，這樣能夠能夠繞開以上兩個問題。

19、請描述一下 cookies，sessionStorage 和 localStorage 的區別？

cookie在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會

sessionStorage和localStorage的存儲空間更大；

sessionStorage和localStorage有更多豐富易用的接口；

sessionStorage和localStorage各自獨立的存儲空間；

css

20、介紹一下CSS的盒子模型？

（1）有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 pading;

（2）盒模型：內容(content)、填充(padding)、邊界(margin)、邊框(border).

21、CSS 選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？ CSS3新增僞類有那些？

*

1.id選擇器（ # myid）

2.類選擇器（.myclassname）

3.標籤選擇器（div, h1, p）

4.相鄰選擇器（h1 + p）

5.子選擇器（ul < li）

6.後代選擇器（li a）

7.通配符選擇器（ * ）

8.屬性選擇器（a[rel = "external"]）

9.僞類選擇器（a: hover, li: nth - child）

* 可繼承的樣式： font-size font-family color, UL LI DL DD DT;

* 不可繼承的樣式：border padding margin width height ;

* 優先級就近原則，同權重狀況下樣式定義最近者爲準;

* 載入樣式以最後載入的定位爲準;

優先級爲: !important > 內聯 > id > class > tag

CSS3新增僞類舉例：

p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。

p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。

p:only-of-type 選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。

p:only-child 選擇屬於其父元素的惟一子元素的每一個 <p> 元素。

p:nth-child(2) 選擇屬於其父元素的第二個子元素的每一個 <p> 元素。

:enabled :disabled 控制表單控件的禁用狀態。

:checked 單選框或複選框被選中。

22、如何居中div？如何居中一個浮動元素？

給div設置一個寬度，而後添加margin:0 auto屬性

div{

width:200px;

margin:0 auto;

}

居中一個浮動元素

肯定容器的寬高寬500 高 300 的層

設置層的左、上外邊距分別爲寬、高的負1/2像素

.div {

Width:500px ; height:300px;//高度能夠不設

Margin: -150px 0 0 -250px;

position:relative;相對定位

background-color:pink;//方便看效果

left:50%;

top:50%;

}

23、列出display的值，說明他們的做用。position的值， relative和absolute定位原點是？

1.

block 象塊類型元素同樣顯示。

none 缺省值。象行內元素類型同樣顯示。

inline-block 象行內元素同樣顯示，但其內容象塊類型元素同樣顯示。

list-item 象塊類型元素同樣顯示，並添加樣式列表標記。

2.

*absolute

生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。

*fixed （老IE不支持）

生成絕對定位的元素，相對於瀏覽器窗口進行定位。

*relative

生成相對定位的元素，相對於其正常位置進行定位。

* static 默認值。沒有定位，元素出如今正常的流中

*（忽略 top, bottom, left, right z-index 聲明）。

* inherit 規定從父元素繼承 position 屬性的值。

24、CSS3有哪些新特性？

CSS3實現圓角（border-radius:8px），陰影（box-shadow:10px），

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

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

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

25、爲何要初始化CSS樣式。

- 由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。

- 固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化。

absolute的containing block計算方式跟正常流有什麼不一樣？

根元素

默認條件下，html元素爲包含塊，一些瀏覽器把body設爲包含塊。

非根元素分爲兩種狀況：

1、對於沒有設置position:absolute的非根元素如position:relative position:static

這種狀況下包含塊設置爲最近的塊級元素內容區的邊緣，注意是內容區的邊緣，而不是margin和padding邊緣。

2、使用了position:absolute絕對定位的元素，

這種狀況下包含塊設置在最近的postion不是static的祖先元素(這裏的祖先元素能夠是塊級元素，也但是內聯元素)

a、若是祖先元素是塊級元素，包含塊設爲該塊級元素的padding邊沿

b、若是祖先元素是內聯元素則包含塊設爲該內聯元素的內容邊沿

position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？

涉及到正常流、包含塊、浮動、BFC、hasLayout、塊行元素、行高

對BFC規範的理解？W3C CSS 2.1 規範中的一個概念,它決定了元素如何對其內容進行定位,以及與其餘元素的關係和相互做用。

BFC 定義

BFC(Block formatting context)直譯爲」塊級格式化上下文」。它是一個獨立的渲染區域，只有Block-level box參與，它規定了內部的Block-level Box如何佈局，而且與這個區域外部絕不相干。

BFC佈局規則：

內部的Box會在垂直方向，一個接一個地放置。

Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊

每一個元素的margin box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。

BFC的區域不會與float box重疊。

BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。

計算BFC的高度時，浮動元素也參與計算

2、哪些元素會生成BFC?

根元素

float屬性不爲none

position爲absolute或fixed

display爲inline-block, table-cell, table-caption, flex, inline-flex

overflow不爲visible

29、解釋下浮動和它的工做原理？清除浮動的技巧？

浮動：浮動的框能夠左右移動，直至它的外邊緣遇到包含框或者另外一個浮動框的邊緣。浮動框不屬於文檔中的普通流，當一個元素浮動以後，不會影響到塊級框的佈局而只會影響內聯框（一般是文本）的排列，文檔中的普通流就會表現得和浮動框不存在同樣，當浮動框高度超出包含框的時候，也就會出現包含框不會自動伸高來閉合浮動元素（「高度塌陷」現象）。

清除浮動的方法：1.經過在浮動元素的末尾添加一個空元素，設置 clear：both屬性，after僞元素其實也是經過 content 在元素的後面生成了內容爲一個點的塊級元素；

2.經過設置父元素 overflow 或者display：table 屬性來閉合浮動,觸發BFC/haslayout

從各個方面比較，after僞元素閉合浮動無疑是相對比較好的解決方案了

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }

.clearfix { *zoom:1; }

1) display:block 使生成的元素以塊級元素顯示,佔滿剩餘空間;

2) height:0 避免生成內容破壞原有佈局的高度。

3) visibility:hidden 使生成的內容不可見，並容許可能被生成內容蓋住的內容能夠進行點擊和交互;

4）經過 content:"."生成內容做爲最後一個元素，至於content裏面是點仍是其餘都是能夠的，例如oocss裏面就有經典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content 裏面內容爲空,一絲冰涼是不推薦這樣作的,firefox直到7.0 content:」" 仍然會產生額外的空隙；

5）zoom：1 觸發IE hasLayout。

經過分析發現，除了clear：both用來閉合浮動的，其餘代碼無非都是爲了隱藏掉content生成的內容，這也就是其餘版本的閉合浮動爲何會有font-size：0，line-height：0。

用過媒體查詢，針對移動端的佈局嗎？

<style>

/* 屏幕寬度小於400px; */

@media sreen and (max-device-width: 400px) {

h1 {

background: green;

}

/* //爲小於等於400px的顯示屏應用這個樣式 */

@import url("phone.css") screen and (max-device-width: 400px);

/* width 屏幕寬度（設備物理顯示區域） device-width 視口寬度（網頁實際顯示區域）*/

/* width、height、device-width、device-height、orientation、aspec-ratio、device-aspec-ratio、color、color-index、monochrome、resolution、scan、grid*/

@media sreen and (max-width: 960px) {}

@media sreen and (max-width: 768px) {}

@media sreen and (max-width: 550px) {}

@media sreen and (max-width: 320px) {}

javascript

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

原型：將對象的方法和屬性定義在對象的protortype上，讓全部的實例共享

原型鏈：基於原型的性質。構造函數的prototype指向原型，原型的contructor的指向構造函數，實例的_proto_屬性指向原型，由此構成原型鏈

32、eval是作什麼的？它的功能是把對應的字符串解析成JS代碼並運行；應該避免使用eval，不安全，很是耗性能（2次，一次解析成js語句，一次執行）。

33、null，undefined 的區別？

Undefined派生自null。Undefined表示值未定義，缺乏值；null表示值爲空，沒有對象，通常變量爲對象的時候初始化爲null。typeof undefined === ‘undefined’ typeof null === ‘object’

null是一個表示"無"的對象，轉爲數值時爲0；undefined是一個表示"無"的原始值，轉爲數值時爲NaN。

34、寫一個通用的事件偵聽器函數。

if (typeof xhong === ‘undefined’) {

window.xhong = {};

}

Xhong.event = {

onload : function(fn){

if (fn === null) {

fn = document;

}

var oldonload = window.onload;

if (typeof window.onload !== ‘function’) {

Window.onload = fn;

} else {

Window.onload = function(){

oldonload();

fn();

};

}

},

addEventListener: function(elem, type, handler){

if (elem.addEventListener) {

elem.addEventListener(type, handler, false);

} else if (elem.attachEvent) {

elem.attachEvent(‘on’+type, handler);

//elem.attachEvent(‘on’+type, function(){

return handler.call(elem, window.event);
});

} else {

elem[‘on’+type] = hanlder;

}

},

removeEventListener: function(elem,type, handler){

if (elem.removeEventListener) {

elem.removeEventListener(type, handler, false);

} else if (elem.detachEvent) {

elem.detachEvent(‘on’+type, handler);

} else {

elem[‘on’+type] = null;

}

},

getEvent: function(event){

return event || window.event;

},

getTarget: function(event){

return event.target || event.srcElement;

},

stopPropagation: function(event){

if (event.stopPropagation) {

event.stopPropagation();

} else {

event.cancelBubble = true;

}

},

preventDefault: function(event){

if (event.preventDefault) {

event.preventDefault();

} else {

event.returnValue = false;

}

35、Node.js的適用場景？高併發、聊天、實時消息推送

36、介紹js的基本數據類型。Undeinfed、Null、Boolean、Number、String、Object

37、Javascript如何實現繼承？經過原型和構造器實現。原理：向上遍歷原型鏈

38、["1", "2", "3"].map(parseInt) 答案是多少？

[1, NaN, NaN] 由於 parseInt 須要兩個參數 (val, radix) 但 map 傳了 3 個 (element, index, array)

39、如何建立一個對象? （畫出此對象的內存圖）

function Person(name, age) {

this.name = name;

this.age = age;

this.sing = function() { alert(this.name) }

}

40、談談This對象的理解。

this是js的一個關鍵字，隨着函數使用場合不一樣，this的值會發生變化。

可是有一個總原則，那就是this指的是調用函數的那個對象。

this通常狀況下：是全局對象Global。

做爲函數調用：this指向Global、

做爲方法調用：this就是指向所屬對象、

做爲構造函數調用：this指向一個鏈接該函數的prototype成員的新對象上、

做爲apply/call調用：this指向第一個參數值。

41、事件是？IE與火狐的事件機制有什麼區別？如何阻止冒泡？

1. 咱們在網頁中的某個操做（有的操做對應多個事件）。例如：當咱們點擊一個按鈕就會產生一個事件。是能夠被 JavaScript 偵測到的行爲。

2. 事件處理機制：IE是事件冒泡、火狐是事件捕獲；

3. ev.stopPropagation();

什麼是閉包（closure），爲何要用它？

閉包：有權訪問另一個函數做用域中的變量的函數。做用：1.能夠讀取函數內部數據。2.讓這些變量的值始終保持在內存中，信息隱藏封裝。3.緩存。4.內部的代碼處於私有狀態。

因爲閉包的[[Scope]]屬性包含與運行期上下文做用域鏈相同的對象引用，會產生反作用。一般，一個函數的激活對象與運行期上下文一同銷燬。當涉及閉包時，激活對象就沒法銷燬了，由於引用仍然存在於閉包的[[Scope]]屬性中。這意味着腳本中的閉包與非閉包函數相比，須要更多內存開銷。閉包致使內存泄漏。

執行say667()後,say667()閉包內部變量會存在,而閉包內部函數的內部變量不會存在.使得Javascript的垃圾回收機制GC不會收回say667()所佔用的資源，由於say667()的內部函數的執行須要依賴say667()中的變量。這是對閉包做用的很是直白的描述.

function say667() {

// Local variable that ends up within closure

var num = 666;

var sayAlert = function() { alert(num); }

num++;

return sayAlert;

}

var sayAlert = say667();

sayAlert()//執行結果應該彈出的667

"use strict";是什麼意思 ? 使用它的好處和壞處分別是什麼？

意思：使Javascript解釋器能夠用"嚴格"的語法來解析代碼

好處：這樣很巧妙地兼容了那些不支持strict mode老的瀏覽器，不會報錯。更早發現隱藏的錯誤

44、如何判斷一個對象是否屬於某個類？

使用instanceof （待完善）

if(a instanceof Person){

alert('yes');

}

45、new操做符具體幹了什麼呢?

當使用new建立對象的時候，

首先建立一個空對象而且this引用這個對象，同時還繼承該函數的原型。

2.屬性和方法被添加到this指向的對象中。

3.隱式的返回this。或者顯示返回其它對象

46、Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？

hasOwnProperty

47、JSON 的瞭解？

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫閱讀, 佔用帶寬小，傳輸速度快{'age':'12', 'name':'back'}

JSON解析和序列化Stringify()和parse()

Stringfigy第二個參數能夠用於過濾。

對象內部自定義的toJson對象能夠做爲函數過濾器的補充。序列化步驟：

1.若是有toJson()並且取得有效值則調用該方法，不然返回自己。

2.若是有第二個參數，則應用這個函數過濾器。

3.若是提供第三個參數，則執行相應的格式化。

48、js延遲加載的方式有哪些？

Defer(當即下載，延遲執行)和async（當即下載，但不能保證順序）、動態建立DOM方式（用得最多）、按需異步載入js(xhr注入)

ajax 是什麼?

Ajax:局部刷新，異步加載。

1.首先建立xmlhttprequest或者ActiveObjct對象

2.指定onreadystatechange事件，監聽readystate是否爲4的狀況下看status狀態碼是否爲200~300之間或者304，不然

3.open(請求類型,請求的url，是否異步);

4.使用setRequestHeader()設置自定義的請求頭部信息

4.send(請求主體發送的數據);

同步和異步的區別?

同步：後一個語句必須等到前一個語句執行結束才能開始執行。

異步: 建立eventloop線程執行異步語句，無需等待。

51、如何解決跨域問題?

jsonp、 iframe、window.name、window.postMessage、服務器上設置代理頁面

52、模塊化怎麼作？當即執行函數,不暴露私有成員

53、AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）規範區別？

AMD 是 RequireJS 在推廣過程當中對模塊定義的規範化產出。

CMD 是 SeaJS 在推廣過程當中對模塊定義的規範化產出。

區別：

1. 對於依賴的模塊，AMD 是提早執行，CMD 是延遲執行。不過 RequireJS 從 2.0 開始，也改爲能夠延遲執行（根據寫法不一樣，處理方式不一樣）。CMD 推崇 as lazy as possible.

2. CMD 推崇依賴就近，AMD 推崇依賴前置。看代碼：

// CMD

define(function(require, exports, module) {

var a = require('./a')

a.doSomething()

// 此處略去 100 行

var b = require('./b') // 依賴能夠就近書寫

b.doSomething()

// ... 

})

// AMD 默認推薦的是

define(['./a', './b'], function(a, b) { // 依賴必須一開始就寫好

a.doSomething()

// 此處略去 100 行

b.doSomething()

...

}) 

雖然 AMD 也支持 CMD 的寫法，同時還支持將 require 做爲依賴項傳遞，但 RequireJS 的做者默認是最喜歡上面的寫法，也是官方文檔裏默認的模塊定義寫法。

3. AMD 的 API 默認是一個當多個用，CMD 的 API 嚴格區分，推崇職責單一。好比 AMD 裏，require 分全局 require 和局部 require，都叫 require。CMD 裏，沒有全局 require，而是根據模塊系統的完備性，提供 seajs.use 來實現模塊系統的加載啓動。CMD 裏，每一個 API 都簡單純粹。

定位有差別。RequireJS 想成爲瀏覽器端的模塊加載器，同時也想成爲 Rhino / Node 等環境的模塊加載器。Sea.js 則專一於 Web 瀏覽器端，同時經過 Node 擴展的方式能夠很方便跑在 Node 環境中。

遵循的規範不一樣。RequireJS 遵循 AMD（異步模塊定義）規範，Sea.js 遵循 CMD （通用模塊定義）規範。規範的不一樣，致使了二者 API 不一樣。Sea.js 更貼近 CommonJS Modules/1.1 和 Node Modules 規範。

54、documen.write和 innerHTML的區別

document.write只能重繪整個頁面

innerHTML能夠重繪頁面的一部分

55、call() 和 .apply() 的區別？

對於apply和call二者在做用上是相同的，但二者在參數上有區別的。

對於第一個參數意義都同樣，但對第二個參數：

apply傳入的是一個參數數組，也就是將多個參數組合成爲一個數組傳入，而call則做爲call的參數傳入（從第二個參數開始）。

如 func.call(func1,var1,var2,var3)對應的apply寫法爲：func.apply(func1,[var1,var2,var3])

56、Jquery與jQuery UI 有啥區別？

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

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

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

57、JQuery的源碼看過嗎？能不能簡單說一下它的實現原理？

58、jquery 中如何將數組轉化爲json字符串，而後再轉化回來？

59、針對 jQuery 的優化方法？

1.使用最新版本的jquery類庫（記得測試本身的代碼，不是徹底向後兼容的）

2.使用合適的選擇器 id > tag > class > 屬性選擇器 > 僞類選擇器（性能上）

3.緩存對象。頻繁操做的DOM，先緩存起來再操做。用Jquery的鏈式調用更好。

4.循環時的DOM操做，先存儲元素元素列表

5.數組方式使用jquery對象。（如用for或while代替$.each()。檢測長度也是檢查jquery對象是否存在的方式）

6.事件代理

7.將本身的代碼轉成jquery插件（加強重用性，有效組織代碼）

8.使用join()來拼接字符串

9.合理使用html5的data屬性

10.儘可能使用原生的javascript方法

11.壓縮javascript代碼

60.JavaScript中的做用域與變量聲明提高？

做用域：做用域由定義時決定，而不是執行時決定。

變量提高：在使用var聲明變量的時候，會將變量的聲明提高到代碼塊的頂部。

如何編寫高性能的Javascript？

哪些操做會形成內存泄漏？

內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在。

垃圾回收器按期掃描對象，並計算引用了每一個對象的其餘對象的數量。若是一個對象的引用數量爲 0（沒有其餘對象引用過該對象），或對該對象的唯一引用是循環的，那麼該對象的內存便可回收。

setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏。

閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

JQuery一個對象能夠同時綁定多個事件，這是如何實現的？

其它問題

64.你遇到過比較難的技術問題是？你是如何解決的？

1.數據庫一對多的關係。須要使用checkbox展現.解決:原本可使用struct解決但那是不太熟練因此使用js裏面操做jsp

2.猜數字遊戲：判斷數字正確。想了好久。作出來了，後來發現用集合的思想實現的思路比較方便。

3.一些兼容性問題等

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

Jquery、boostrap。Sublime、使用原生js寫過一些小demo放在github上

67.頁面重構怎麼操做？

寫交互，畫交互原稿，寫靜態網頁。

68.列舉IE 與其餘瀏覽器不同的特性？

事件操做、css一些默認樣式、兼容性、調試工具

69.99%的網站都須要被重構是那本書上寫的？（重構之美？）

70.什麼叫優雅降級和漸進加強？

優雅降級：向後兼容。若是正確的使用了javascript腳本，就可讓訪問者在他們的瀏覽器不支持javascript的狀況下仍能繼續順利的瀏覽你的網站，也就是說，雖然某些功能不能沒法使用，但基本的操做仍能順利完成。

漸進加強：用一些額外的信息去包裹原始的數據

71.WEB應用從服務器主動推送Data到客戶端有那些方式？

xmlHttpRequest、websocket、webRTC

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

*（優勢）由於Node是基於事件驅動和無阻塞的，因此很是適合處理併發請求，

所以構建在Node上的代理服務器相比其餘技術實現（如Ruby）的服務器表現要好得多。

此外，與Node代理服務器交互的客戶端代碼是由javascript語言編寫的，

所以客戶端和服務器端都用同一種語言編寫，這是很是美妙的事情。

*（缺點）Node是一個相對新的開源項目，因此不太穩定，它老是一直在變，

並且缺乏足夠多的第三方庫支持。看起來，就像是Ruby/Rails當年的樣子。

73.你有哪些性能優化的方法？(減小延遲)（看雅虎14條性能優化原則）。

（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佈局慢。

74.http狀態碼有哪些？分別表明是什麼意思？

100-199 用於指定客戶端應相應的某些動做。 101協議轉換

200-299 用於表示請求成功。200請求成功、204無內容、206部份內容

300-399 用於已經移動的文件而且常被包含在定位頭信息中指定新的地址信息。 301永久重定向。302暫時重定向。304使用緩存

400-499 用於指出客戶端的錯誤。400 1、語義有誤，當前請求沒法被服務器理解。401 當前請求須要用戶驗證 403 服務器已經理解請求，可是拒絕執行它。

500-599 用於支持服務器錯誤。 503 – 服務不可用

75.一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？（流程說的越詳細越好）

查找瀏覽器緩存->DNS解析、查找該域名對應的IP地址->套接字發送數據->TCP鏈接->（SSL/TLS鏈接）->HTTP協議會話->客戶端發送報頭(請求報頭)->(重定向（301）->發出第二個GET請求)-> 服務器回饋報頭(響應報頭)->並行下載文->html->DOM ->css->CSSOM->js->渲染樹->繪製->加載

瀏覽器這邊作的工做大體分爲如下幾步：

加載：根據請求的URL進行域名解析，向服務器發起請求，接收文件（HTML、JS、CSS、圖象等）。

解析：對加載到的資源（HTML、JS、CSS等）進行語法解析，建議相應的內部數據結構（好比HTML的DOM樹，JS的（對象）屬性表，CSS的樣式規則等等）

除了前端之外還了解什麼其它技術麼？你最最厲害的技能是什麼？

SSH、php、正則、http

你經常使用的開發工具是什麼，爲何？

Sublime 好用，人性化。增快開發速度

Chrome 方便調試

78.對前端界面工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？

前端是最貼近用戶的程序員，比後端、數據庫、產品經理、運營、安全都近。

1、實現界面交互

2、提高用戶體驗

3、有了Node.js，前端能夠實現服務端的一些事情

前端的能力就是能讓產品從 90分進化到 100 分，甚至更好，參與項目，快速高質量完成實現效果圖，精確到1px；與團隊成員，UI設計，產品經理的溝通；作好的頁面結構，頁面重構和用戶體驗；處理hack，兼容、寫出優美的代碼格式；針對服務器的優化、擁抱最新前端技術。

79.加班的見解？

加班就像借錢，原則應當是------救急不救窮

80.平時如何管理你的項目？

1.根據能力和時間明確分工；2.組員討論肯定功能、樣式風格、編碼環境和模式，約定好各人各模塊寫好註釋，方便維護；4.分工玩討論統一編碼習慣，如前端人員肯定好全局樣式（globe.css）；5.肯定數據關係寫好數據庫；3.由前端人員溝通先快速開發出原型並整合後期加以優化；4.後臺人員寫好後臺並隨時與各個分工人員溝通及時修改錯誤。5.整合整個項目並進行測試。

編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）；標註樣式編寫人，各模塊都及時標註（標註關鍵樣式調用的地方）；頁面進行標註（例如頁面模塊開始和結束）；CSS跟HTML 分文件夾並行存放，命名都得統一（例如style.css）；JS 分文件夾存放命民以該JS 功能爲準英文翻譯；圖片採用整合的 images.png png8 格式文件使用儘可能整合在一塊兒使用方便未來的管理。

81.如何設計突發大規模併發架構？

82.說說最近最流行的一些東西吧？常去哪些網站？

Node.js、Mongodb、npm、MVVM、MEAN、three.js

83.移動端（Android IOS）怎麼作好用戶體驗?

清晰的視覺縱線、信息的分組、極致的減法、

利用選擇代替輸入、標籤及文字的排布方式、

依靠明文確認密碼、合理的鍵盤利用、

84.你在如今的團隊處於什麼樣的角色，起到了什麼明顯的做用？

85.你認爲怎樣纔是全端工程師（Full Stack developer）？

86.介紹一個你最得意的做品吧？

87.你的優勢是什麼？缺點是什麼？

88.如何管理前端團隊? 分工明確，多溝通，肯定好統一編碼習慣

89.最近在學什麼？能談談你將來3，5年給本身的規劃嗎？

90.想問公司的問題？

問公司問題：

目前關注哪些最新的Web前端技術（將來的發展方向）？

前端團隊如何工做的（實現一個產品的流程）？

公司的薪資結構是什麼樣子的？

如何發生reflow

添加或刪除可見的DOM元素

元素位置改變

元素尺寸改變（由於邊距，填充，邊框寬度，寬度，高度等屬性改變）

內容改變，例如，文本改變或圖片被另外一個不一樣尺寸的所替代

最初的頁面渲染

瀏覽器窗口改變尺寸

DOM值的獲取

92cookies和session的區別：

具體來講cookie機制採用的是在客戶端保持狀態的方案，而session機制採用的是在服務器端保持狀態的方案。

同時咱們也看到，因爲採用服務器端保持狀態的方案在客戶端也須要保存一個標識，因此session機制可能須要藉助於cookie機制

來達到保存標識的目的，但實際上它還有其餘選擇。

cookie機制。正統的cookie分發是經過擴展HTTP協議來實現的，服務器經過在HTTP的響應頭中加上一行特殊的指示以提示瀏覽器按照指示生成相應的cookie。

然而純粹的客戶端腳本如JavaScript或者VBScript也能夠生成cookie。而cookie的使用是由瀏覽器按照必定的原則在後臺自動發送給服務器的。瀏覽器檢查全部存儲的cookie，若是某個cookie所聲明的做用範圍大於等於將要請求的資源所在的位置，則把該cookie附在請求資源的HTTP請求頭上發送給服務器。cookie的內容主要包括：名字，值，過時時間，路徑和域。路徑與域一塊兒構成cookie的做用範圍。若不設置過時時間，則表示這個cookie的生命期爲瀏覽器會話期間，關閉瀏覽器窗口，cookie就消失。這種生命期爲瀏覽器會話期的cookie被稱爲會話cookie。會話cookie通常不存儲在硬盤上而是保存在內存裏，固然這種行爲並非規範規定的。若設置了過時時間，瀏覽器就會把cookie保存到硬盤上，關閉後再次打開瀏覽器，這些cookie仍然有效直到超過設定的過時時間。存儲在硬盤上的cookie能夠在不一樣的瀏覽器進程間共享，好比兩個IE窗口。而對於保存在內存裏的cookie，不一樣的瀏覽器有不一樣的處理方式

session機制。session機制是一種服務器端的機制，服務器使用一種相似於散列表的結構（也可能就是使用散列表）來保存信息。

當程序須要爲某個客戶端的請求建立一個session時，服務器首先檢查這個客戶端的請求裏是否已包含了一個session標識（稱爲session id），若是已包含則說明之前已經爲此客戶端建立過session，服務器就按照session id把這個session檢索出來使用（檢索不到，會新建一個），若是客戶端請求不包含session id，則爲此客戶端建立一個session而且生成一個與此session相關聯的session id，session id的值應該是一個既不會重複，又不容易被找到規律以仿造的字符串，這個session id將被在本次響應中返回給客戶端保存。保存這個session id的方式能夠採用cookie，這樣在交互過程當中瀏覽器能夠自動的按照規則把這個標識發送給服務器。通常這個cookie的名字都是相似於SEEESIONID。但cookie能夠被人爲的禁止，則必須有其餘機制以便在cookie被禁止時仍然可以把session id傳遞迴服務器。

一、cookie數據存放在客戶的瀏覽器上，session數據放在服務器上。

二、cookie不是很安全，別人能夠分析存放在本地的COOKIE並進行COOKIE欺騙

考慮到安全應當使用session。

三、session會在必定時間內保存在服務器上。當訪問增多，會比較佔用你服務器的性能

考慮到減輕服務器性能方面，應當使用COOKIE。

四、單個cookie保存的數據不能超過4K，不少瀏覽器都限制一個站點最多保存20個cookie。

五、因此我的建議：

將登錄信息等重要信息，存放爲SESSION

其餘信息若是須要保留，能夠放在COOKIE中

面試有幾點需注意：

1.面試題目：根據你的等級和職位變化，入門級到專家級：範圍↑、深度↑、方向↑。

2.題目類型：技術視野、項目細節、理論知識題，算法題，開放性題，案例題。

3.進行追問：能夠確保問到你開始不懂或面試官開始不懂爲止，這樣能夠大大延展題目的區分度和深度，知道你的實際能力。由於這種關聯知識是長時期的學習，絕對不是臨時記得住的。回答問題再棒，面試官（多是你的直接領導面試），會考慮我要不要這我的作個人同事？因此態度很重要。（感受更像是相親）

4.資深的工程師能把absolute和relative弄混，這樣的人不要也罷，由於團隊須要的你這我的具備能夠依靠的才能（靠譜）。

前端開發面試知識點大綱：

HTML&CSS：

對Web標準的理解、瀏覽器內核差別、兼容性、hack、CSS基本功：佈局、盒子模型、選擇器優先級及使用、HTML5、CSS3、移動端適應

JavaScript：

數據類型、面向對象、繼承、閉包、插件、做用域、跨域、原型鏈、模塊化、自定義事件、內存泄漏、事件機制、異步裝載回調、模板引擎、Nodejs、JSON、ajax等。

其餘：

HTTP、安全、正則、優化、重構、響應式、移動端、團隊協做、可維護、SEO、UED、架構、職業生涯

不管工做年頭長短都應該必須掌握的知識點：

1、DOM結構 —— 兩個節點之間可能存在哪些關係以及如何在節點之間任意移動。

2、DOM操做 ——如何添加、移除、移動、複製、建立和查找節點等。

3、事件 —— 如何使用事件，以及IE和標準DOM事件模型之間存在的差異。

4、XMLHttpRequest —— 這是什麼、怎樣完整地執行一次GET請求、怎樣檢測錯誤。

5、嚴格模式與混雜模式 —— 如何觸發這兩種模式，區分它們有何意義。

(1）、<!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標籤以前。告知瀏覽器的解析器，用什麼文檔類型規範來解析這個文檔。

（2）、嚴格模式的排版和 JS 運做模式是以該瀏覽器支持的最高標準運行。

（3）、在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。

（4）、DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。

6、盒模型 —— 外邊距、內邊距和邊框之間的關係，及IE8如下版本的瀏覽器中的盒模型

7、塊級元素與行內元素 —— 怎麼用CSS控制它們、以及如何合理的使用它們

8、浮動元素——怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。

9、HTML與XHTML——兩者有什麼區別，你以爲應該使用哪個並說出理由。

XHTML與HTML之間的主要差別是他遵照XML約定，這意味着與常規的HTML不一樣，全部XHTML屬性必須包含引號，全部元素必須是封閉的。概念上XHMLT頁面能夠做爲HTML文檔，而XHTML頁面是做爲XML發送給瀏覽器的，即便有錯誤也不會顯示頁面的。

10、JSON —— 做用、用途、設計結構。

html

11、行內元素有哪些？塊級元素有哪些？他們的區別？空(void)元素有那些？

（1）CSS規範規定，每一個元素都有display屬性，肯定該元素的類型，每一個元素都有默認的display值，

好比div默認display屬性值爲「block」，成爲「塊級」元素；

span默認display屬性值爲「inline」，是「行內」元素。

（2）行內元素有：a b span img input select strong（強調的語氣）

塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

（3）知名的空元素： <br> <hr> <img> <input> <link> <meta>

不爲人知的是： <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

區別：

1.行內元素與塊級元素直觀上的區別：

行內元素會在一條直線上排列，都是同一行的，水平方向排列；

塊級元素各佔據一行，垂直方向排列。塊級元素重新行開始結束接着一個斷行。

2.塊級元素能夠包含行內元素和塊級元素。行內元素不能包含塊級元素。

3.行內元素與塊級元素屬性的不一樣，主要是盒模型屬性上：

行內元素設置width無效，height無效(能夠設置line-height)；

margin上下無效。

12、link 和@import 的區別是？

（1）link屬於XHTML標籤，而@import是CSS提供的;

（2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;

（3）import只在IE5以上才能識別，而link是XHTML標籤，無兼容問題;

（4）link方式的樣式的權重高於@import的權重.

13、瀏覽器的內核分別是什麼?

IE瀏覽器的內核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera內核原爲Presto，現爲Blink；

14、常見兼容性問題？|| 常常遇到的CSS的兼容性有哪些？緣由，解決方法是什麼？

* png24位的圖片在iE6瀏覽器上出現背景，解決方案是作成PNG8.

* 瀏覽器默認的margin和padding不一樣。解決方案是加一個全局的*{margin:0;padding:0;}來統一。

* IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin狀況下，在ie6顯示margin比設置的大。浮動ie產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;} 這種狀況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入 ——_display:inline;將其轉化爲行內屬性。(_這個符號只有ie6會識別)

漸進識別的方式，從整體中逐漸排除局部。

首先，巧妙的使用「\9」這一標記，將IE遊覽器從全部狀況中分離出來。

接着，再次使用「+」將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。

css

.bb{

background-color:#f1ee18;/*全部識別*/

.background-color:#00deff\9; /*IE6、7、8識別*/

+background-color:#a200ff;/*IE6、7識別*/

_background-color:#1e0bd1;/*IE6識別*/

}

* IE下,可使用獲取常規屬性的方法來獲取自定義屬性,

也可使用getAttribute()獲取自定義屬性;

Firefox下,只能使用getAttribute()獲取自定義屬性.

解決方法:統一經過getAttribute()獲取自定義屬性.

* IE下,even對象有x,y屬性,可是沒有pageX,pageY屬性;

Firefox下,event對象有pageX,pageY屬性,可是沒有x,y屬性.

pageX（頁面座標） = ClientX(視口的座標) + srollLeft(滾輪的長度);

pageY = ClientY + scrollTop;

* 解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增長額外的HTTP請求數。

*FireFox不支持元素的innerText屬性，需用textContent

* Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示,

可經過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.

超連接訪問事後hover樣式就不出現了被點擊訪問過的超連接樣式不在具備hover和active瞭解決方法是改變CSS屬性的排列順序:

L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

* 在必定寬度下，溢出文字顯示省略號：textoverflow：ellipsis white-space：nowrap段落文本不換行

* border屬性中dotted與dashed的區別 dotted(點狀輪廓)在ie6下不兼容，顯示爲dashed(虛線輪廓)，而dashed顯示一致

*border:0;和border:none區別：

性能上：0會進行渲染，佔用內存值，none不會消耗內存值

兼容差別：只針對瀏覽器ie6,ie7與標籤button和input而言，0無效邊框仍然存在，none無邊框。火狐下none /0 表現一直均無邊框

*IE選擇符空格：IE有個BUG，在處理僞類時，若是僞類的名稱中帶有連字符」-」，僞類名稱後面就得跟一個空格，否則樣式的定義就無效

*Inline-block不支持問題

display:inline-block; /* 現代瀏覽器 +IE6、7 inline 元素 */

*display:inline; /* IE6、7 block 元素 */

*zoom:1;

Inline-block間隙問題

font-size:0;/* 全部瀏覽器 */

letter-spacing:-5px;/* Safari 等不支持字體大小爲 0 的瀏覽器 */

*letter-spacing:normal;

word-spacing:-1px;/* IE6、7 */

1.怪異盒模型

2.垂直外邊距重疊

3.浮動清除

4.inline-block的統一

5.ul的不一樣表現

6.IE的雙倍邊距

7.3px偏移

8.「斷頭臺」

9.多個浮動重複字樣

10.高度不固定heigth->min-height

11.透明度問題

12.img默認下有間距

13. IE6 IE7 IE8(Q) 中行內元素後相鄰的浮動元素在某些狀況下會折行放置在以前行內元素所在行框的底部

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

* HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。

* 繪畫 canvas

用於媒介回放的 video 和 audio 元素

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

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

語意化更好的內容元素，好比 article、footer、header、nav、section 利於搜索引擎搜索。更加友好。

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

新的技術webworker, websockt, Geolocation

*div、section、article的區別

section 表示一段專題性的內容，通常會帶有標題。

當元素內容聚合起來更加言之有物時，應該使用 article 來替換 section。

section 應用的典型場景有文章的章節、標籤對話框中的標籤頁、或者論文中有編號的部分

* 移除的元素

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

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

支持HTML5新標籤：

* IE8/IE7/IE6支持經過document.createElement方法產生的標籤，

能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，

瀏覽器支持新標籤後，還須要添加標籤默認的樣式：

* 固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

<!--[if lt IE 9]>

<![endif]-->

如何區分： DOCTYPE聲明\新增的結構元素\功能元素

16、語義化的理解？

用正確的標籤作正確的事情！，html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；在沒有樣式CCS狀況下也以一種文檔格式顯示，而且是容易閱讀的。搜索引擎的爬蟲依賴於標記來肯定上下文和各個關鍵字的權重，利於 SEO。使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

17、HTML5的離線儲存？

localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；

sessionStorage 數據在瀏覽器關閉後自動刪除。

18、iframe有那些缺點？

*iframe會阻塞主頁面的Onload事件；

*iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript

動態給iframe添加src屬性值，這樣能夠能夠繞開以上兩個問題。

19、請描述一下 cookies，sessionStorage 和 localStorage 的區別？

cookie在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會

sessionStorage和localStorage的存儲空間更大；

sessionStorage和localStorage有更多豐富易用的接口；

sessionStorage和localStorage各自獨立的存儲空間；

css

20、介紹一下CSS的盒子模型？

（1）有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 pading;

（2）盒模型：內容(content)、填充(padding)、邊界(margin)、邊框(border).

21、CSS 選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？ CSS3新增僞類有那些？

*

1.id選擇器（ # myid）

2.類選擇器（.myclassname）

3.標籤選擇器（div, h1, p）

4.相鄰選擇器（h1 + p）

5.子選擇器（ul < li）

6.後代選擇器（li a）

7.通配符選擇器（ * ）

8.屬性選擇器（a[rel = "external"]）

9.僞類選擇器（a: hover, li: nth - child）

* 可繼承的樣式： font-size font-family color, UL LI DL DD DT;

* 不可繼承的樣式：border padding margin width height ;

* 優先級就近原則，同權重狀況下樣式定義最近者爲準;

* 載入樣式以最後載入的定位爲準;

優先級爲: !important > 內聯 > id > class > tag

CSS3新增僞類舉例：

p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。

p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。

p:only-of-type 選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。

p:only-child 選擇屬於其父元素的惟一子元素的每一個 <p> 元素。

p:nth-child(2) 選擇屬於其父元素的第二個子元素的每一個 <p> 元素。

:enabled :disabled 控制表單控件的禁用狀態。

:checked 單選框或複選框被選中。

22、如何居中div？如何居中一個浮動元素？

給div設置一個寬度，而後添加margin:0 auto屬性

div{

width:200px;

margin:0 auto;

}

居中一個浮動元素

肯定容器的寬高寬500 高 300 的層

設置層的左、上外邊距分別爲寬、高的負1/2像素

.div {

Width:500px ; height:300px;//高度能夠不設

Margin: -150px 0 0 -250px;

position:relative;相對定位

background-color:pink;//方便看效果

left:50%;

top:50%;

}

23、列出display的值，說明他們的做用。position的值， relative和absolute定位原點是？

1.

block 象塊類型元素同樣顯示。

none 缺省值。象行內元素類型同樣顯示。

inline-block 象行內元素同樣顯示，但其內容象塊類型元素同樣顯示。

list-item 象塊類型元素同樣顯示，並添加樣式列表標記。

2.

*absolute

生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。

*fixed （老IE不支持）

生成絕對定位的元素，相對於瀏覽器窗口進行定位。

*relative

生成相對定位的元素，相對於其正常位置進行定位。

* static 默認值。沒有定位，元素出如今正常的流中

*（忽略 top, bottom, left, right z-index 聲明）。

* inherit 規定從父元素繼承 position 屬性的值。

24、CSS3有哪些新特性？

CSS3實現圓角（border-radius:8px），陰影（box-shadow:10px），

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

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

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

25、爲何要初始化CSS樣式。

- 由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。

- 固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化。

absolute的containing block計算方式跟正常流有什麼不一樣？

根元素

默認條件下，html元素爲包含塊，一些瀏覽器把body設爲包含塊。

非根元素分爲兩種狀況：

1、對於沒有設置position:absolute的非根元素如position:relative position:static

這種狀況下包含塊設置爲最近的塊級元素內容區的邊緣，注意是內容區的邊緣，而不是margin和padding邊緣。

2、使用了position:absolute絕對定位的元素，

這種狀況下包含塊設置在最近的postion不是static的祖先元素(這裏的祖先元素能夠是塊級元素，也但是內聯元素)

a、若是祖先元素是塊級元素，包含塊設爲該塊級元素的padding邊沿

b、若是祖先元素是內聯元素則包含塊設爲該內聯元素的內容邊沿

position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？

涉及到正常流、包含塊、浮動、BFC、hasLayout、塊行元素、行高

對BFC規範的理解？W3C CSS 2.1 規範中的一個概念,它決定了元素如何對其內容進行定位,以及與其餘元素的關係和相互做用。

BFC 定義

BFC(Block formatting context)直譯爲」塊級格式化上下文」。它是一個獨立的渲染區域，只有Block-level box參與，它規定了內部的Block-level Box如何佈局，而且與這個區域外部絕不相干。

BFC佈局規則：

內部的Box會在垂直方向，一個接一個地放置。

Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊

每一個元素的margin box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。

BFC的區域不會與float box重疊。

BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。

計算BFC的高度時，浮動元素也參與計算

2、哪些元素會生成BFC?

根元素

float屬性不爲none

position爲absolute或fixed

display爲inline-block, table-cell, table-caption, flex, inline-flex

overflow不爲visible

29、解釋下浮動和它的工做原理？清除浮動的技巧？

浮動：浮動的框能夠左右移動，直至它的外邊緣遇到包含框或者另外一個浮動框的邊緣。浮動框不屬於文檔中的普通流，當一個元素浮動以後，不會影響到塊級框的佈局而只會影響內聯框（一般是文本）的排列，文檔中的普通流就會表現得和浮動框不存在同樣，當浮動框高度超出包含框的時候，也就會出現包含框不會自動伸高來閉合浮動元素（「高度塌陷」現象）。

清除浮動的方法：1.經過在浮動元素的末尾添加一個空元素，設置 clear：both屬性，after僞元素其實也是經過 content 在元素的後面生成了內容爲一個點的塊級元素；

2.經過設置父元素 overflow 或者display：table 屬性來閉合浮動,觸發BFC/haslayout

從各個方面比較，after僞元素閉合浮動無疑是相對比較好的解決方案了

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }

.clearfix { *zoom:1; }

1) display:block 使生成的元素以塊級元素顯示,佔滿剩餘空間;

2) height:0 避免生成內容破壞原有佈局的高度。

3) visibility:hidden 使生成的內容不可見，並容許可能被生成內容蓋住的內容能夠進行點擊和交互;

4）經過 content:"."生成內容做爲最後一個元素，至於content裏面是點仍是其餘都是能夠的，例如oocss裏面就有經典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content 裏面內容爲空,一絲冰涼是不推薦這樣作的,firefox直到7.0 content:」" 仍然會產生額外的空隙；

5）zoom：1 觸發IE hasLayout。

經過分析發現，除了clear：both用來閉合浮動的，其餘代碼無非都是爲了隱藏掉content生成的內容，這也就是其餘版本的閉合浮動爲何會有font-size：0，line-height：0。

用過媒體查詢，針對移動端的佈局嗎？

<style>

/* 屏幕寬度小於400px; */

@media sreen and (max-device-width: 400px) {

h1 {

background: green;

}

/* //爲小於等於400px的顯示屏應用這個樣式 */

@import url("phone.css") screen and (max-device-width: 400px);

/* width 屏幕寬度（設備物理顯示區域） device-width 視口寬度（網頁實際顯示區域）*/

/* width、height、device-width、device-height、orientation、aspec-ratio、device-aspec-ratio、color、color-index、monochrome、resolution、scan、grid*/

@media sreen and (max-width: 960px) {}

@media sreen and (max-width: 768px) {}

@media sreen and (max-width: 550px) {}

@media sreen and (max-width: 320px) {}

javascript

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

原型：將對象的方法和屬性定義在對象的protortype上，讓全部的實例共享

原型鏈：基於原型的性質。構造函數的prototype指向原型，原型的contructor的指向構造函數，實例的_proto_屬性指向原型，由此構成原型鏈

32、eval是作什麼的？它的功能是把對應的字符串解析成JS代碼並運行；應該避免使用eval，不安全，很是耗性能（2次，一次解析成js語句，一次執行）。

33、null，undefined 的區別？

Undefined派生自null。Undefined表示值未定義，缺乏值；null表示值爲空，沒有對象，通常變量爲對象的時候初始化爲null。typeof undefined === ‘undefined’ typeof null === ‘object’

null是一個表示"無"的對象，轉爲數值時爲0；undefined是一個表示"無"的原始值，轉爲數值時爲NaN。

34、寫一個通用的事件偵聽器函數。

if (typeof xhong === ‘undefined’) {

window.xhong = {};

}

Xhong.event = {

onload : function(fn){

if (fn === null) {

fn = document;

}

var oldonload = window.onload;

if (typeof window.onload !== ‘function’) {

Window.onload = fn;

} else {

Window.onload = function(){

oldonload();

fn();

};

}

},

addEventListener: function(elem, type, handler){

if (elem.addEventListener) {

elem.addEventListener(type, handler, false);

} else if (elem.attachEvent) {

elem.attachEvent(‘on’+type, handler);

//elem.attachEvent(‘on’+type, function(){

return handler.call(elem, window.event);
});

} else {

elem[‘on’+type] = hanlder;

}

},

removeEventListener: function(elem,type, handler){

if (elem.removeEventListener) {

elem.removeEventListener(type, handler, false);

} else if (elem.detachEvent) {

elem.detachEvent(‘on’+type, handler);

} else {

elem[‘on’+type] = null;

}

},

getEvent: function(event){

return event || window.event;

},

getTarget: function(event){

return event.target || event.srcElement;

},

stopPropagation: function(event){

if (event.stopPropagation) {

event.stopPropagation();

} else {

event.cancelBubble = true;

}

},

preventDefault: function(event){

if (event.preventDefault) {

event.preventDefault();

} else {

event.returnValue = false;

}

35、Node.js的適用場景？高併發、聊天、實時消息推送

36、介紹js的基本數據類型。Undeinfed、Null、Boolean、Number、String、Object

37、Javascript如何實現繼承？經過原型和構造器實現。原理：向上遍歷原型鏈

38、["1", "2", "3"].map(parseInt) 答案是多少？

[1, NaN, NaN] 由於 parseInt 須要兩個參數 (val, radix) 但 map 傳了 3 個 (element, index, array)

39、如何建立一個對象? （畫出此對象的內存圖）

function Person(name, age) {

this.name = name;

this.age = age;

this.sing = function() { alert(this.name) }

}

40、談談This對象的理解。

this是js的一個關鍵字，隨着函數使用場合不一樣，this的值會發生變化。

可是有一個總原則，那就是this指的是調用函數的那個對象。

this通常狀況下：是全局對象Global。

做爲函數調用：this指向Global、

做爲方法調用：this就是指向所屬對象、

做爲構造函數調用：this指向一個鏈接該函數的prototype成員的新對象上、

做爲apply/call調用：this指向第一個參數值。

41、事件是？IE與火狐的事件機制有什麼區別？如何阻止冒泡？

1. 咱們在網頁中的某個操做（有的操做對應多個事件）。例如：當咱們點擊一個按鈕就會產生一個事件。是能夠被 JavaScript 偵測到的行爲。

2. 事件處理機制：IE是事件冒泡、火狐是事件捕獲；

3. ev.stopPropagation();

什麼是閉包（closure），爲何要用它？

閉包：有權訪問另一個函數做用域中的變量的函數。做用：1.能夠讀取函數內部數據。2.讓這些變量的值始終保持在內存中，信息隱藏封裝。3.緩存。4.內部的代碼處於私有狀態。

因爲閉包的[[Scope]]屬性包含與運行期上下文做用域鏈相同的對象引用，會產生反作用。一般，一個函數的激活對象與運行期上下文一同銷燬。當涉及閉包時，激活對象就沒法銷燬了，由於引用仍然存在於閉包的[[Scope]]屬性中。這意味着腳本中的閉包與非閉包函數相比，須要更多內存開銷。閉包致使內存泄漏。

執行say667()後,say667()閉包內部變量會存在,而閉包內部函數的內部變量不會存在.使得Javascript的垃圾回收機制GC不會收回say667()所佔用的資源，由於say667()的內部函數的執行須要依賴say667()中的變量。這是對閉包做用的很是直白的描述.

function say667() {

// Local variable that ends up within closure

var num = 666;

var sayAlert = function() { alert(num); }

num++;

return sayAlert;

}

var sayAlert = say667();

sayAlert()//執行結果應該彈出的667

"use strict";是什麼意思 ? 使用它的好處和壞處分別是什麼？

意思：使Javascript解釋器能夠用"嚴格"的語法來解析代碼

好處：這樣很巧妙地兼容了那些不支持strict mode老的瀏覽器，不會報錯。更早發現隱藏的錯誤

44、如何判斷一個對象是否屬於某個類？

使用instanceof （待完善）

if(a instanceof Person){

alert('yes');

}

45、new操做符具體幹了什麼呢?

當使用new建立對象的時候，

首先建立一個空對象而且this引用這個對象，同時還繼承該函數的原型。

2.屬性和方法被添加到this指向的對象中。

3.隱式的返回this。或者顯示返回其它對象

46、Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？

hasOwnProperty

47、JSON 的瞭解？

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫閱讀, 佔用帶寬小，傳輸速度快{'age':'12', 'name':'back'}

JSON解析和序列化Stringify()和parse()

Stringfigy第二個參數能夠用於過濾。

對象內部自定義的toJson對象能夠做爲函數過濾器的補充。序列化步驟：

1.若是有toJson()並且取得有效值則調用該方法，不然返回自己。

2.若是有第二個參數，則應用這個函數過濾器。

3.若是提供第三個參數，則執行相應的格式化。

48、js延遲加載的方式有哪些？

Defer(當即下載，延遲執行)和async（當即下載，但不能保證順序）、動態建立DOM方式（用得最多）、按需異步載入js(xhr注入)

ajax 是什麼?

Ajax:局部刷新，異步加載。

1.首先建立xmlhttprequest或者ActiveObjct對象

2.指定onreadystatechange事件，監聽readystate是否爲4的狀況下看status狀態碼是否爲200~300之間或者304，不然

3.open(請求類型,請求的url，是否異步);

4.使用setRequestHeader()設置自定義的請求頭部信息

4.send(請求主體發送的數據);

同步和異步的區別?

同步：後一個語句必須等到前一個語句執行結束才能開始執行。

異步: 建立eventloop線程執行異步語句，無需等待。

51、如何解決跨域問題?

jsonp、 iframe、window.name、window.postMessage、服務器上設置代理頁面

52、模塊化怎麼作？當即執行函數,不暴露私有成員

53、AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）規範區別？

AMD 是 RequireJS 在推廣過程當中對模塊定義的規範化產出。

CMD 是 SeaJS 在推廣過程當中對模塊定義的規範化產出。

區別：

1. 對於依賴的模塊，AMD 是提早執行，CMD 是延遲執行。不過 RequireJS 從 2.0 開始，也改爲能夠延遲執行（根據寫法不一樣，處理方式不一樣）。CMD 推崇 as lazy as possible.

2. CMD 推崇依賴就近，AMD 推崇依賴前置。看代碼：

// CMD

define(function(require, exports, module) {

var a = require('./a')

a.doSomething()

// 此處略去 100 行

var b = require('./b') // 依賴能夠就近書寫

b.doSomething()

// ... 

})

// AMD 默認推薦的是

define(['./a', './b'], function(a, b) { // 依賴必須一開始就寫好

a.doSomething()

// 此處略去 100 行

b.doSomething()

...

}) 

雖然 AMD 也支持 CMD 的寫法，同時還支持將 require 做爲依賴項傳遞，但 RequireJS 的做者默認是最喜歡上面的寫法，也是官方文檔裏默認的模塊定義寫法。

3. AMD 的 API 默認是一個當多個用，CMD 的 API 嚴格區分，推崇職責單一。好比 AMD 裏，require 分全局 require 和局部 require，都叫 require。CMD 裏，沒有全局 require，而是根據模塊系統的完備性，提供 seajs.use 來實現模塊系統的加載啓動。CMD 裏，每一個 API 都簡單純粹。

定位有差別。RequireJS 想成爲瀏覽器端的模塊加載器，同時也想成爲 Rhino / Node 等環境的模塊加載器。Sea.js 則專一於 Web 瀏覽器端，同時經過 Node 擴展的方式能夠很方便跑在 Node 環境中。

遵循的規範不一樣。RequireJS 遵循 AMD（異步模塊定義）規範，Sea.js 遵循 CMD （通用模塊定義）規範。規範的不一樣，致使了二者 API 不一樣。Sea.js 更貼近 CommonJS Modules/1.1 和 Node Modules 規範。

54、documen.write和 innerHTML的區別

document.write只能重繪整個頁面

innerHTML能夠重繪頁面的一部分

55、call() 和 .apply() 的區別？

對於apply和call二者在做用上是相同的，但二者在參數上有區別的。

對於第一個參數意義都同樣，但對第二個參數：

apply傳入的是一個參數數組，也就是將多個參數組合成爲一個數組傳入，而call則做爲call的參數傳入（從第二個參數開始）。

如 func.call(func1,var1,var2,var3)對應的apply寫法爲：func.apply(func1,[var1,var2,var3])

56、Jquery與jQuery UI 有啥區別？

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

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

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

57、JQuery的源碼看過嗎？能不能簡單說一下它的實現原理？

58、jquery 中如何將數組轉化爲json字符串，而後再轉化回來？

59、針對 jQuery 的優化方法？

1.使用最新版本的jquery類庫（記得測試本身的代碼，不是徹底向後兼容的）

2.使用合適的選擇器 id > tag > class > 屬性選擇器 > 僞類選擇器（性能上）

3.緩存對象。頻繁操做的DOM，先緩存起來再操做。用Jquery的鏈式調用更好。

4.循環時的DOM操做，先存儲元素元素列表

5.數組方式使用jquery對象。（如用for或while代替$.each()。檢測長度也是檢查jquery對象是否存在的方式）

6.事件代理

7.將本身的代碼轉成jquery插件（加強重用性，有效組織代碼）

8.使用join()來拼接字符串

9.合理使用html5的data屬性

10.儘可能使用原生的javascript方法

11.壓縮javascript代碼

60.JavaScript中的做用域與變量聲明提高？

做用域：做用域由定義時決定，而不是執行時決定。

變量提高：在使用var聲明變量的時候，會將變量的聲明提高到代碼塊的頂部。

如何編寫高性能的Javascript？

哪些操做會形成內存泄漏？

內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在。

垃圾回收器按期掃描對象，並計算引用了每一個對象的其餘對象的數量。若是一個對象的引用數量爲 0（沒有其餘對象引用過該對象），或對該對象的唯一引用是循環的，那麼該對象的內存便可回收。

setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏。

閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

JQuery一個對象能夠同時綁定多個事件，這是如何實現的？

其它問題

64.你遇到過比較難的技術問題是？你是如何解決的？

1.數據庫一對多的關係。須要使用checkbox展現.解決:原本可使用struct解決但那是不太熟練因此使用js裏面操做jsp

2.猜數字遊戲：判斷數字正確。想了好久。作出來了，後來發現用集合的思想實現的思路比較方便。

3.一些兼容性問題等

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

Jquery、boostrap。Sublime、使用原生js寫過一些小demo放在github上

67.頁面重構怎麼操做？

寫交互，畫交互原稿，寫靜態網頁。

68.列舉IE 與其餘瀏覽器不同的特性？

事件操做、css一些默認樣式、兼容性、調試工具

69.99%的網站都須要被重構是那本書上寫的？（重構之美？）

70.什麼叫優雅降級和漸進加強？

優雅降級：向後兼容。若是正確的使用了javascript腳本，就可讓訪問者在他們的瀏覽器不支持javascript的狀況下仍能繼續順利的瀏覽你的網站，也就是說，雖然某些功能不能沒法使用，但基本的操做仍能順利完成。

漸進加強：用一些額外的信息去包裹原始的數據

71.WEB應用從服務器主動推送Data到客戶端有那些方式？

xmlHttpRequest、websocket、webRTC

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

*（優勢）由於Node是基於事件驅動和無阻塞的，因此很是適合處理併發請求，

所以構建在Node上的代理服務器相比其餘技術實現（如Ruby）的服務器表現要好得多。

此外，與Node代理服務器交互的客戶端代碼是由javascript語言編寫的，

所以客戶端和服務器端都用同一種語言編寫，這是很是美妙的事情。

*（缺點）Node是一個相對新的開源項目，因此不太穩定，它老是一直在變，

並且缺乏足夠多的第三方庫支持。看起來，就像是Ruby/Rails當年的樣子。

73.你有哪些性能優化的方法？(減小延遲)（看雅虎14條性能優化原則）。

（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佈局慢。

74.http狀態碼有哪些？分別表明是什麼意思？

100-199 用於指定客戶端應相應的某些動做。 101協議轉換

200-299 用於表示請求成功。200請求成功、204無內容、206部份內容

300-399 用於已經移動的文件而且常被包含在定位頭信息中指定新的地址信息。 301永久重定向。302暫時重定向。304使用緩存

400-499 用於指出客戶端的錯誤。400 1、語義有誤，當前請求沒法被服務器理解。401 當前請求須要用戶驗證 403 服務器已經理解請求，可是拒絕執行它。

500-599 用於支持服務器錯誤。 503 – 服務不可用

75.一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？（流程說的越詳細越好）

查找瀏覽器緩存->DNS解析、查找該域名對應的IP地址->套接字發送數據->TCP鏈接->（SSL/TLS鏈接）->HTTP協議會話->客戶端發送報頭(請求報頭)->(重定向（301）->發出第二個GET請求)-> 服務器回饋報頭(響應報頭)->並行下載文->html->DOM ->css->CSSOM->js->渲染樹->繪製->加載

瀏覽器這邊作的工做大體分爲如下幾步：

加載：根據請求的URL進行域名解析，向服務器發起請求，接收文件（HTML、JS、CSS、圖象等）。

解析：對加載到的資源（HTML、JS、CSS等）進行語法解析，建議相應的內部數據結構（好比HTML的DOM樹，JS的（對象）屬性表，CSS的樣式規則等等）

除了前端之外還了解什麼其它技術麼？你最最厲害的技能是什麼？

SSH、php、正則、http

你經常使用的開發工具是什麼，爲何？

Sublime 好用，人性化。增快開發速度

Chrome 方便調試

78.對前端界面工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？

前端是最貼近用戶的程序員，比後端、數據庫、產品經理、運營、安全都近。

1、實現界面交互

2、提高用戶體驗

3、有了Node.js，前端能夠實現服務端的一些事情

前端的能力就是能讓產品從 90分進化到 100 分，甚至更好，參與項目，快速高質量完成實現效果圖，精確到1px；與團隊成員，UI設計，產品經理的溝通；作好的頁面結構，頁面重構和用戶體驗；處理hack，兼容、寫出優美的代碼格式；針對服務器的優化、擁抱最新前端技術。

79.加班的見解？

加班就像借錢，原則應當是------救急不救窮

80.平時如何管理你的項目？

1.根據能力和時間明確分工；2.組員討論肯定功能、樣式風格、編碼環境和模式，約定好各人各模塊寫好註釋，方便維護；4.分工玩討論統一編碼習慣，如前端人員肯定好全局樣式（globe.css）；5.肯定數據關係寫好數據庫；3.由前端人員溝通先快速開發出原型並整合後期加以優化；4.後臺人員寫好後臺並隨時與各個分工人員溝通及時修改錯誤。5.整合整個項目並進行測試。

編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）；標註樣式編寫人，各模塊都及時標註（標註關鍵樣式調用的地方）；頁面進行標註（例如頁面模塊開始和結束）；CSS跟HTML 分文件夾並行存放，命名都得統一（例如style.css）；JS 分文件夾存放命民以該JS 功能爲準英文翻譯；圖片採用整合的 images.png png8 格式文件使用儘可能整合在一塊兒使用方便未來的管理。

81.如何設計突發大規模併發架構？

82.說說最近最流行的一些東西吧？常去哪些網站？

Node.js、Mongodb、npm、MVVM、MEAN、three.js

83.移動端（Android IOS）怎麼作好用戶體驗?

清晰的視覺縱線、信息的分組、極致的減法、

利用選擇代替輸入、標籤及文字的排布方式、

依靠明文確認密碼、合理的鍵盤利用、

84.你在如今的團隊處於什麼樣的角色，起到了什麼明顯的做用？

85.你認爲怎樣纔是全端工程師（Full Stack developer）？

86.介紹一個你最得意的做品吧？

87.你的優勢是什麼？缺點是什麼？

88.如何管理前端團隊? 分工明確，多溝通，肯定好統一編碼習慣

89.最近在學什麼？能談談你將來3，5年給本身的規劃嗎？

90.想問公司的問題？

問公司問題：

目前關注哪些最新的Web前端技術（將來的發展方向）？

前端團隊如何工做的（實現一個產品的流程）？

公司的薪資結構是什麼樣子的？

如何發生reflow

添加或刪除可見的DOM元素

元素位置改變

元素尺寸改變（由於邊距，填充，邊框寬度，寬度，高度等屬性改變）

內容改變，例如，文本改變或圖片被另外一個不一樣尺寸的所替代

最初的頁面渲染

瀏覽器窗口改變尺寸

DOM值的獲取

92cookies和session的區別：

具體來講cookie機制採用的是在客戶端保持狀態的方案，而session機制採用的是在服務器端保持狀態的方案。

同時咱們也看到，因爲採用服務器端保持狀態的方案在客戶端也須要保存一個標識，因此session機制可能須要藉助於cookie機制

來達到保存標識的目的，但實際上它還有其餘選擇。

cookie機制。正統的cookie分發是經過擴展HTTP協議來實現的，服務器經過在HTTP的響應頭中加上一行特殊的指示以提示瀏覽器按照指示生成相應的cookie。

然而純粹的客戶端腳本如JavaScript或者VBScript也能夠生成cookie。而cookie的使用是由瀏覽器按照必定的原則在後臺自動發送給服務器的。瀏覽器檢查全部存儲的cookie，若是某個cookie所聲明的做用範圍大於等於將要請求的資源所在的位置，則把該cookie附在請求資源的HTTP請求頭上發送給服務器。cookie的內容主要包括：名字，值，過時時間，路徑和域。路徑與域一塊兒構成cookie的做用範圍。若不設置過時時間，則表示這個cookie的生命期爲瀏覽器會話期間，關閉瀏覽器窗口，cookie就消失。這種生命期爲瀏覽器會話期的cookie被稱爲會話cookie。會話cookie通常不存儲在硬盤上而是保存在內存裏，固然這種行爲並非規範規定的。若設置了過時時間，瀏覽器就會把cookie保存到硬盤上，關閉後再次打開瀏覽器，這些cookie仍然有效直到超過設定的過時時間。存儲在硬盤上的cookie能夠在不一樣的瀏覽器進程間共享，好比兩個IE窗口。而對於保存在內存裏的cookie，不一樣的瀏覽器有不一樣的處理方式

session機制。session機制是一種服務器端的機制，服務器使用一種相似於散列表的結構（也可能就是使用散列表）來保存信息。

當程序須要爲某個客戶端的請求建立一個session時，服務器首先檢查這個客戶端的請求裏是否已包含了一個session標識（稱爲session id），若是已包含則說明之前已經爲此客戶端建立過session，服務器就按照session id把這個session檢索出來使用（檢索不到，會新建一個），若是客戶端請求不包含session id，則爲此客戶端建立一個session而且生成一個與此session相關聯的session id，session id的值應該是一個既不會重複，又不容易被找到規律以仿造的字符串，這個session id將被在本次響應中返回給客戶端保存。保存這個session id的方式能夠採用cookie，這樣在交互過程當中瀏覽器能夠自動的按照規則把這個標識發送給服務器。通常這個cookie的名字都是相似於SEEESIONID。但cookie能夠被人爲的禁止，則必須有其餘機制以便在cookie被禁止時仍然可以把session id傳遞迴服務器。

一、cookie數據存放在客戶的瀏覽器上，session數據放在服務器上。

二、cookie不是很安全，別人能夠分析存放在本地的COOKIE並進行COOKIE欺騙

考慮到安全應當使用session。

三、session會在必定時間內保存在服務器上。當訪問增多，會比較佔用你服務器的性能

考慮到減輕服務器性能方面，應當使用COOKIE。

四、單個cookie保存的數據不能超過4K，不少瀏覽器都限制一個站點最多保存20個cookie。

五、因此我的建議：

將登錄信息等重要信息，存放爲SESSION

其餘信息若是須要保留，能夠放在COOKIE中