寫在前面
5月24到30這7天，IMWeb前端提升營，騰訊大佬們分享個人經驗，使出各種前端方面的大招。從中學習了很多前端方面的知識，也get到了前端學習的方法論，還有一些算法知識等等。
現将總結如下：（本文長度略長，看官保持耐心，嘿嘿）
早報前端面試題
每天早上，助教老師會發一些經典前端面試題，歸檔一下：
05/24
問題1: CSS引入的方式有哪些?
答案:
CSS與HTML文檔結合的4中方法：
1、使用<link>元素連結到外部的樣式檔案
2、在<head>元素中使用"style"元素來指定
3、使用CSS "@import"标記來導入樣式表單
4、在<body>内部的元素中使用"style"屬性來定義樣式 問題2: 行内元素有哪些？塊級元素有哪些？CSS的盒模型？
答案: 塊級元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容，border ,margin，padding 問題3: link和@import的差別是?
答案: 本質上，這兩種方式都是為了加載CSS檔案，但還是存在着細微的差别。
1、老祖宗的差别。link屬于XHTML标簽，而@import完全是CSS提供的一種方式。link标簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接配接屬性等，@import就隻能加載CSS了。
2、加載順序的差别。當一個頁面被加載的時候（就是被浏覽者浏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS會等到頁面全部被下載下傳完再被加載。
3、相容性的差别。由于@import是CSS2.1提出的是以老的浏覽器不支援，@import隻有在IE5以上的才能識别，而link标簽無此問題。
4、使用dom控制樣式時的差别。當使用javascript控制dom去改變樣式的時候，隻能使用link标簽，因為@import不是dom可以控制的。 問題4：
==
和
===
的不同
答案： 前者會自動轉換類型，後者不會 前端常見題目個人思考題：
1、你之前自認為做得最好的，最具有挑戰的一項需求是什麼，為什麼？現在回頭去看，還有哪些地方可以值得優化？
2、說一下h5中的離線存儲有哪些 05/25
問題1: XHTML和HTML有什麼差別?
答案:
HTML是一種基本的WEB網頁設計語言，XHTML是一個基于XML的置智語言
最主要的不同：
XHTML 元素必須被正确地嵌套。
XHTML 元素必須被關閉。
标簽名必須用小寫字母。
XHTML 文檔必須擁有根元素。 問題2: Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?
答案: 用于聲明文檔使用那種規範（html/Xhtml）一般為 嚴格 過度 基于架構的html文檔
加入XMl聲明可觸發，解析方式更改為IE5.5 擁有IE5.5的bug 問題3: 寫出幾種IE6 BUG的解決方法
答案:
1.雙邊距BUG float引起的 使用display
2.3像素問題 使用float引起的 使用dislpay:inline -3px
3.超連結hover 點選後失效 使用正确的書寫順序 link visited hover active
4.Ie z-index問題 給父級添加position:relative
5.Png 透明 使用js代碼 改
6.Min-height 最小高度 ！Important 解決’
7.select 在ie6下遮蓋 使用iframe嵌套
8.為什麼沒有辦法定義1px左右的寬度容器（IE6預設的行高造成的，使用over:hidden,zoom:0.08 line-height:1px） 問題4： IE和DOM事件流的差別
答案：
1.執行順序不一樣、
2.參數不一樣
3.事件加不加on
4.this指向問題 前端常見題目個人思考題 ：
1、談一談你做過的一個項目，業務邏輯子產品如何劃分的？
2、什麼是xss漏洞，怎麼防禦？ 05/26
問題1: 優先級算法如何計算？
答案:
重要性和來源的優先級排序從低到高是：
1、浏覽器預設樣式
2、使用者在浏覽器中定義的普通樣式（normal規則，不帶important規則）
3、開發人員定義的普通樣式（ normal規則，不帶important規則）
4、開發人員定義特殊樣式（帶important規則）
5、使用者在浏覽器中定義特殊樣式（帶important規則）
另外還有一些原則：
1、相同的樣式在CSS規則後添加了!important的優先于沒有添加的。
2、CSS規則在文檔中出現的順序後面定義的的優先于前面定義的。
3、加了!important的優先于内聯樣式。
4、内聯樣式優先于用link引入的樣式和頁面上<style>裡的樣式。 問題2: split() join() 的差別?
答案: 前者是切割成數組的形式，後者是将數組轉換成字元串 問題3: ajax請求的時候get 和post方式的差別?
答案:
1、一個在url後面 一個放在虛拟載體裡面
2、有大小限制
3、安全問題
4、應用不同 一個是論壇等隻需要請求的，一個是類似修改密碼的 問題4： IE和标準下有哪些相容性的寫法？
答案：
1、Var ev = ev || window.event
2、document.documentElement.clientWidth || document.body.clientWidth
3、Var target = ev.srcElement||ev.target 1、 說一下你了解的MVVM，畫一下你的設計模式。
2、 說一下h5中的離線存儲有哪些? 05/27
問題1: 清除浮動的幾種方式，各自的優缺點
答案:
1. 使用空标簽清除浮動 clear:both（理論上能清楚任何标簽，增加無意義的标簽）
2. 使用overflow:auto（空标簽元素清除浮動而不得不增加無意代碼的弊端,,使用zoom:1用于相容IE）
3. 是用afert僞元素清除浮動(用于非IE浏覽器) 問題2: call和apply的差別
答案: Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments) 問題3: <img>标簽上title與alt屬性的差別是什麼？
答案:
Alt 當圖檔不顯示是 用文字代表。
Title 為該屬性提供資訊 問題4：什麼是語義化的HTML？
答案：直覺的認識标簽 對于搜尋引擎的抓取有好處 1、 請說出三種減少頁面加載時間的方法。（加載時間指感覺的時間或者實際加載時間）
2、 描述下“reset”CSS檔案的作用和使用它的好處。 05/28
問題1: Ajax的優缺點都有什麼？
答案：
1）頁面無重新整理，使用者體驗非常好。
2）使用異步方式與伺服器通信，具有更加迅速的響應能力。
3）可以把一些伺服器負擔的工作轉到用戶端，利用用戶端閑置的能力來處理，減輕伺服器負擔，節約空間和寬帶租用成本。并且減輕伺服器的負擔，ajax的原則是“按需取資料”，可以最大程度的減少備援請求和響應對伺服器造成的負擔。
4）基于标準化并被廣泛支援的技術，不需要下載下傳插件或者小程式。
Ajax的缺點:
1）Ajax不支援浏覽器back按鈕。
2）安全問題， Ajax暴露了與伺服器互動的細節。
3）對搜尋引擎的支援比較弱。
4）破壞了程式的異常機制。
5）不容易調試。 問題2: 簡述一下Ajax的工作原理
答案: Ajax的核心是JavaScript對象XmlHttpRequest。該對象在Internet Explorer 5中首次引入，它是一種支援異步請求的技術。簡而言之，XmlHttpRequest使您可以使用JavaScript向伺服器提出請求并處理響應，而不阻塞使用者。 問題3: CSS+DIV開發Web頁面的優勢有哪些？
答案:
1）CSS+DIV，這個網頁設計模式中，DIV承擔了網頁的内容，CSS承擔了網頁的樣式。這樣就使網頁的内容和樣式的分離開來。有利于頁面的維護更新。
2）有助于提高搜尋引擎親和力（快速找到需要的資料，而不是像在TABLE中一層層的查找）
3）有助于頁面的重構(換皮膚如blog，直接套用另外一套樣式就可以實作，而不用改動網頁腳本。) 問題4：簡述DIV元素和SPAN元素的差別
答案：DIV預設情況下是分行顯示，SPAN在同行顯示。 1、前端安全方面有沒有了解？CSRF如何攻防？
2、 說說你對SVG了解? 05/29
問題1: 簡單說一下浏覽器本地存儲是怎樣的
答案：在較高版本的浏覽器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage來取代globalStorage。
html5中的Web Storage包括了兩種存儲方式：sessionStorage和localStorage。
sessionStorage用于本地存儲一個會話（session）中的資料，這些資料隻有在同一個會話中的頁面才能通路并且當會話結束後資料也随之銷毀。是以sessionStorage不是一種持久化的本地存儲，僅僅是會話級别的存儲。
而localStorage用于持久化的本地存儲，除非主動删除資料，否則資料是永遠不會過期的。 問題2: 在JavaScript腳本中，isNaN的作用是什麼？
答案: isNaN的作用是判斷值是否為數字 問題3: 編寫JavaScript腳本生成1-6之間的整數？
答案:
var NowFrame;
NowFrame=Math.random( )*6+1 //随機生成一個1-6之間的小數
NowFrame=parseInt(NowFrame) //把1-6之間的小數轉化為整數 問題4： CSS規範中，.（句點）後面跟一個名稱代表什麼含義？#（井号）後面跟一個名稱代表什麼含義？如果要對一個元素設定CSS樣式（内嵌樣式），應将CSS樣式寫在它的什麼屬性内？
答案：
1） .（句号）後面跟一個名稱表示文檔中所有class屬性值包含這個名稱的應用其樣式，
2） #（井号）後面跟個名稱表示文檔中ID為此名稱的元素應用其樣式。
3） CSS樣式寫在style屬性内。 1、請你談談Cookie的弊端 。
2、對BFC規範的了解？ 05/30
問題1: display:none和visibility:hidden的差別
答案：
display:none 隐藏對應的元素，在文檔布局中不再給它配置設定空間，它各邊的元素會合攏，就當他從來不存在。
visibility:hidden 隐藏對應的元素，但是在文檔布局中仍保留原來的空間。 問題2: position的absolute與fixed共同點與不同點
答案:
A：共同點：
1.改變行内元素的呈現方式，display被置為block；
2.讓元素脫離普通流，不占據空間；
3.預設會覆寫到非定位元素上
B不同點：
absolute的”根元素“是可以設定的，而fixed的”根元素“固定為浏覽器視窗。
當你滾動網頁，fixed元素與浏覽器視窗之間的距離是不變的。 問題3: CSS 選擇符有哪些？哪些屬性可以繼承？優先級算法如何計算？ CSS3新增僞類有那些？
答案:
CSS 選擇符：
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)
可繼承的樣式：
1.font-size
2.font-family
3.color
4.text-indent
不可繼承的樣式：
1.border
2.padding
3.margin
4.width
5.height
優先級算法：
1.優先級就近原則，同權重情況下樣式定義最近者為準;
2.載入樣式以最後載入的定位為準;
3.!important> id > class > tag
4.important 比 内聯優先級高，但内聯比 id 要高
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 單選框或複選框被選中。 問題4：你知道多少種Doctype文檔類型？
答案：
1. 該标簽可聲明三種 DTD 類型，分别表示嚴格版本、過渡版本以及基于架構的 HTML 文檔。
2. HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。
3. XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
4. Standards （标準）模式（也就是嚴格呈現模式）用于呈現遵循最新标準的網頁，而 Quirks（包容）模式（也就是松散呈現模式或者相容模式）用于呈現為傳統浏覽器而設計的網頁。 1、請說出三種減少頁面加載時間的方法
2、哪些操作會造成記憶體洩漏？ ![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)