更新版+前端面試題彙總大全

時間 2019-11-08

標籤更新版端面試題彙總大全简体版

原文原文鏈接

前端面試題彙總 1、HTML和CSSphp

一、你作的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什麼? IE: trident內核css

　　Firefox：gecko內核html

　　Safari:webkit內核前端

　　Opera:之前是presto內核，Opera現已改用Google Chrome的內核html5

　　Chrome: (基於webkit，Google與Opera Software共同開發)node

　　二、每一個HTML文件裏開頭都有個很重要的東西，Doctype，知道這是幹什麼的嗎？聲明位於文檔中的最前面的位置，處於標籤以前。此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。（重點：告訴瀏覽器按照何種規範解析頁面）react

　　三、Quirks【擴科斯】模式是什麼？它和Standards模式有什麼區別從IE6開始，引入了Standards【斯坦爾德是】模式，標準模式中，瀏覽器嘗試給符合標準的文檔在規範上的正確處理達到在指定瀏覽器中的程度。jquery

　　在IE6以前CSS還不夠成熟，因此IE5等以前的瀏覽器對CSS的支持不好， IE6將對CSS提供更好的支持，然而這時的問題就來了，由於有不少頁面是基於舊的佈局方式寫的，而若是IE6 支持CSS則將令這些頁面顯示不正常，如何在即保證不破壞現有頁面，又提供新的渲染機制呢？android

　　在寫程序時咱們也會常常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤爲是新功能不兼容舊功能時。遇到這種問題時的一個常見作法是增長參數和分支，即當某個參數爲真時，咱們就使用新功能，而若是這個參數不爲真時，dd就使用舊功能，這樣就能不破壞原有的程序，又提供新功能。IE6也是相似這樣作的，它將DTD當成了這個「參數」，由於之前的頁面你們都不會去寫DTD，因此IE6就假定若是寫了DTD，就意味着這個頁面將採用對CSS支持更好的佈局，而若是沒有，則採用兼容以前的佈局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。webpack

　　區別：

　　整體會有佈局、樣式解析和腳本執行三個方面的區別。

　　盒模型：在W3C標準中，若是設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。

　　設置行內元素的高寬：在Standards模式下，給等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。

　　設置百分比的高度：在standards模式下，一個元素的高度是由其包含的內容來決定的，若是父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的用margin:0 auto設置水平居中：使用margin:0 auto在standards模式下能夠使元素水平居中，但在quirks模式下卻會失效。

　　（還有不少，答出什麼不重要，關鍵是看他答出的這些是否是本身經驗遇到的，仍是說都是看文章看的，甚至徹底不知道。）

　　四、div+css的佈局較table佈局有什麼優勢？改版的時候更方便只要改css文件。

　　頁面加載速度更快、結構化清晰、頁面顯示簡潔。

　　表現與結構相分離。

　　易於優化（seo）搜索引擎更友好，排名更容易靠前。

　　五、 img的alt與有何異同？ strong與em的異同？ a:alt(alt text):爲不能顯示圖像、窗體或 s的用戶代理（UA），alt屬性用來指定替換文字。替換文字的語言由lang屬性指定。(在IE瀏覽器下會在沒有時把alt當成 tool tip顯示)

　　(tool tip):該屬性爲設置該屬性的元素提供建議性的信息。

　　strong:粗體強調標籤，強調，表示內容的重要性

　　em:斜體強調標籤，更強烈強調，表示內容的強調點

　　六、你能描述一下漸進加強和優雅降級之間的不一樣嗎? 漸進加強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

　　優雅降級 graceful degradation：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。

　　區別：優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給，而漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要。降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶。

　　「優雅降級」觀點

　　「優雅降級」觀點認爲應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認爲「過期」或有功能缺失的瀏覽器下的測試工做安排在開發週期的最後階段，並把測試對象限定爲主流瀏覽器（如 IE、Mozilla 等）的前一個版本。

　　在這種設計範例下，舊版的瀏覽器被認爲僅能提供「簡陋卻無妨 (poor, but passable)」的瀏覽體驗。你能夠作一些小的調整來適應某個特定的瀏覽器。但因爲它們並不是咱們所關注的焦點，所以除了修復較大的錯誤以外，其它的差別將被直接忽略。

　　「漸進加強」觀點

　　「漸進加強」觀點則認爲應關注於內容自己。

　　內容是咱們創建網站的誘因。有的網站展現它，有的則收集它，有的尋求，有的操做，還有的網站甚至會包含以上的種種，但相同點是它們全都涉及到內容。這使得「漸進加強」成爲一種更爲合理的設計範例。這也是它當即被 Yahoo! 所採納並用以構建其「分級式瀏覽器支持 (Graded Browser Support)」策略的緣由所在。

　　那麼問題來了。如今產品經理看到IE6,7,8網頁效果相對高版本現代瀏覽器少了不少圓角，陰影（CSS3），要求兼容（使用圖片背景，放棄CSS3），你會如何說服他？

　　七、爲何利用多個域名來存儲網站資源會更有效？ CDN緩存更方便

　　突破瀏覽器併發限制

　　節約cookie帶寬

　　節約主域名的鏈接數，優化頁面響應速度

　　防止沒必要要的安全問題

　　八、請談一下你對網頁標準和標準制定機構重要性的理解。網頁標準和標準制定機構都是爲了能讓web發展的更‘健康’，開發者遵循統一的標準，下降開發難度，開發成本，SEO也會更好作，也不會由於濫用代碼致使各類BUG、安全問題，最終提升網站易用性。

　　九、請描述一下cookies，sessionStorage和localStorage的區別？ sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。而localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。

　　web storage和cookie的區別

　　Web Storage的概念和cookie類似，區別是它是爲了更大容量存儲設計的。Cookie的大小是受限的，而且每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了帶寬，另外cookie還須要指定做用域，不能夠跨域調用。

　　除此以外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie須要前端開發者本身封裝setCookie，getCookie。可是Cookie也是不能夠或缺的：Cookie的做用是與服務器進行交互，做爲HTTP規範的一部分而存在，而Web Storage僅僅是爲了在本地「存儲」數據而生。

　　十、簡述一下src與href的區別。 src用於替換當前元素，href用於在當前文檔和引用資源之間確立聯繫。

　　src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和等元素。

　　< src =」js.js」>

　　當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。這也是爲何將js腳本放在底部而不是頭部。

　　href是Hypertext Reference的縮寫，指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，若是咱們在文檔中添加

　　< href=」common.css」 rel=」stylesheet」/>

　　那麼瀏覽器會識別該文檔爲css文件，就會並行下載資源而且不會中止對當前文檔的處理。這也是爲何建議使用方式來加載css，而不是使用@import方式。

　　十一、知道的網頁製做會用到的圖片格式有哪些？ png-8，png-24，jpeg，gif，svg。

　　可是上面的那些都不是面試官想要的最後答案。面試官但願聽到是Webp。（是否有關注新技術，新鮮事物）

　　科普一下Webp：WebP格式，谷歌（google）開發的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，並能節省大量的服務器帶寬資源和數據空間。Facebook Ebay等知名網站已經開始測試並使用WebP格式。

　　在質量相同的狀況下，WebP格式圖像的體積要比JPEG格式圖像小40%

　　十二、知道什麼是微格式嗎？談談理解。在前端構建中應該考慮微格式嗎？微格式（Microformats）是一種讓機器可讀的語義化XHTML詞彙的集合，是結構化數據的開放標準。是爲特殊應用而制定的特殊格式。

　　優勢：將智能數據添加到網頁上，讓網站內容在搜索引擎結果界面能夠顯示額外的提示。（應用範例：豆瓣，有興趣自行google）

　　1三、在css/js代碼上線以後開發人員常常會優化性能，從用戶刷新網頁開始，一次js請求通常狀況下有哪些地方會有緩存處理？答案：dns緩存，cdn緩存，瀏覽器緩存，服務器緩存。

　　1四、一個頁面上有大量的圖片（大型電商網站），加載很慢，你有哪些方法優化這些圖片的加載，給用戶更好的體驗。圖片懶加載，在頁面上的未可視區域能夠添加一個滾動條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，若是前者小於後者，優先加載。

　　若是爲幻燈片、相冊等，能夠使用圖片預加載技術，將當前展現圖片的前一張和後一張優先下載。

　　若是圖片爲css圖片，能夠使用CSSsprite，SVGsprite，Iconfont、 64等技術。

　　若是圖片過大，能夠使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提升用戶體驗。

　　若是圖片展現區域小於圖片的真實大小，則因在服務器端根據業務須要先行進行圖片壓縮，圖片壓縮後大小與展現一致。

　　1五、你如何理解HTML結構的語義化？　去掉或樣式丟失的時候能讓頁面呈現清晰的結構：

　　html自己是沒有表現的，咱們看到

　　屏幕閱讀器（若是訪客有視障）會徹底根據你的標記來「讀」你的網頁.

　　例如,若是你使用的含語義的標記,屏幕閱讀器就會「逐個拼出」你的單詞,而不是試着去對它完整發音.

　　PDA、手機等設備可能沒法像普通電腦的瀏覽器同樣來渲染網頁（一般是由於這些設備對CSS的支持較弱）

　　使用語義標記能夠確保這些設備以一種有意義的方式來渲染網頁.理想狀況下,觀看設備的任務是符合設備自己的條件來渲染網頁.

　　語義標記爲設備提供了所需的相關信息,就省去了你本身去考慮全部可能的顯示狀況（包括現有的或者未來新的設備）.例如,一部手機能夠選擇使一段標記了標題的文字以粗體顯示.而掌上電腦可能會以比較大的字體來顯示.不管哪一種方式一旦你對文本標記爲標題,您就能夠確信讀取設備將根據其自身的條件來合適地顯示頁面.

　　搜索引擎的爬蟲也依賴於標記來肯定上下文和各個關鍵字的權重

　　過去你可能尚未考慮搜索引擎的爬蟲也是網站的「訪客」,但如今它們他們其實是極其寶貴的用戶.沒有他們的話,搜索引擎將沒法索引你的網站,而後通常用戶將很難過來訪問.

　　你的頁面是否對爬蟲容易理解很是重要,由於爬蟲很大程度上會忽略用於表現的標記,而只注重語義標記.

　　所以,若是頁面文件的標題被標記,而不是,那麼這個頁面在搜索結果的位置可能會比較靠後.除了提高易用性外,語義標記有利於正確使用CSS和 ,由於其自己提供了許多「鉤鉤」來應用頁面的樣式與行爲.

　　SEO主要仍是靠你網站的內容和外部連接的。

　　便於團隊開發和維護

　　W3C給咱們定了一個很好的標準，在團隊中你們都遵循這個標準，能夠減小不少差別化的東西，方便開發和維護，提升開發效率，甚至實現模塊化開發。

　　1六、談談之前端角度出發作好SEO須要考慮什麼？瞭解搜索引擎如何抓取網頁和如何索引網頁

　　你須要知道一些搜索引擎的基本工做原理，各個搜索引擎之間的區別，搜索機器人（SE robot 或叫 web crawler）如何進行工做，搜索引擎如何對搜索結果進行排序等等。

　　標籤優化

　　主要包括主題（ )，網站描述(De ion)，和關鍵詞（Keywords）。還有一些其它的隱藏文字好比Author（做者），Category（目錄），Language（編碼語種）等。

　　如何選取關鍵詞並在網頁中放置關鍵詞

　　搜索就得用關鍵詞。關鍵詞分析和選擇是SEO最重要的工做之一。首先要給網站肯定主關鍵詞（通常在5個上下），而後針對這些關鍵詞進行優化，包括關鍵詞密度（Density），相關度（Relavancy），突出性（Prominency）等等。

　　瞭解主要的搜索引擎

　　雖然搜索引擎有不少，可是對網站流量起決定做用的就那麼幾個。好比英文的主要有Google，Yahoo，Bing等；中文的有百度，搜狗，有道等。不一樣的搜索引擎對頁面的抓取和索引、排序的規則都不同。還要了解各搜索門戶和搜索引擎之間的關係，好比AOL網頁搜索用的是Google的搜索技術，MSN用的是Bing的技術。

　　主要的互聯網目錄

　　Open Directory自身不是搜索引擎，而是一個大型的網站目錄，他和搜索引擎的主要區別是網站內容的收集方式不一樣。目錄是人工編輯的，主要收錄網站主頁；搜索引擎是自動收集的，除了主頁外還抓取大量的內容頁面。

　　按點擊付費的搜索引擎

　　搜索引擎也須要生存，隨着互聯網商務的愈來愈成熟，收費的搜索引擎也開始大行其道。最典型的有Overture和百度，固然也包括Google的廣告項目Google Adwords。愈來愈多的人經過搜索引擎的點擊廣告來定位商業網站，這裏面也大有優化和排名的學問，你得學會用最少的廣告投入得到最多的點擊。

　　搜索引擎登陸

　　網站作完了之後，別躺在那裏等着客人從天而降。要讓別人找到你，最簡單的辦法就是將網站提交（submit）到搜索引擎。若是你的是商業網站，主要的搜索引擎和目錄都會要求你付費來得到收錄（好比Yahoo要299美圓），可是好消息是（至少到目前爲止）最大的搜索引擎Google目前仍是免費，並且它主宰着60％以上的搜索市場。

　　連接交換和連接普遍度（ Popularity）

　　網頁內容都是以超文本（Hypertext）的方式來互相連接的，網站之間也是如此。除了搜索引擎之外，人們也天天經過不一樣網站之間的連接來Surfing（「衝浪」）。其它網站到你的網站的連接越多，你也就會得到更多的訪問量。更重要的是，你的網站的外部連接數越多，會被搜索引擎認爲它的重要性越大，從而給你更高的排名。

　　合理的標籤使用

　　1七、有哪項方式能夠對一個DOM設置它的CSS樣式？　外部樣式表，引入一個外部css文件

　　內部樣式表，將css代碼放在標籤內部

　　內聯樣式，將css樣式直接定義在 HTML 元素內部

　　1八、CSS都有哪些選擇器？派生選擇器（用HTML標籤申明）

　　id選擇器（用DOM的ID申明）

　　類選擇器（用一個樣式類名申明）

　　屬性選擇器（用DOM的屬性申明，屬於CSS2，IE6不支持，不經常使用，不知道就算了）

　　除了前3種基本選擇器，還有一些擴展選擇器，包括

　　後代選擇器（利用空格間隔，好比div .a{ }）

　　羣組選擇器（利用逗號間隔，好比p,div,#a{ }）

　　那麼問題來了，CSS選擇器的優先級是怎麼樣定義的？

　　基本原則：

　　通常而言，選擇器越特殊，它的優先級越高。也就是選擇器指向的越準確，它的優先級就越高。

　　複雜的計算方法：

　　用1表示派生選擇器的優先級

　　用10表示類選擇器的優先級

　　用100標示ID選擇器的優先級

　　div.test1 .span var 優先級 1+10 +10 +1

　　span#xxx .songs li 優先級1+100 + 10 + 1

　　#xxx li 優先級 100 +1

　　那麼問題來了，看下列代碼，

標籤內的文字是什麼顏色的？

　　答案：red。與樣式定義在文件中的前後順序有關，便是後面的覆蓋前面的，與在

中的前後關係無關。

　　1九、CSS中能夠經過哪些屬性定義，使得一個DOM元素不顯示在瀏覽器可視範圍內？最基本的：

　　設置display屬性爲none，或者設置visibility屬性爲hidden

　　技巧性：

　　設置寬高爲0，設置透明度爲0，設置z-index位置在-1000

　　20、超連接訪問事後hover樣式就不出現的問題是什麼？如何解決？答案：被點擊訪問過的超連接樣式不在具備hover和active了,解決方法是改變CSS屬性的排列順序: L-V-H-A（ ,visited,hover,active）

　　2一、什麼是Css Hack？ie6,7,8的hack分別是什麼？答案：針對不一樣的瀏覽器寫不一樣的CSS code的過程，就是CSS hack。

　　示例以下：

　　#test {

　　width:300px;

　　height:300px;

　　 /*firefox*/

　　background-color:red\9; /*all ie*/

　　 /*ie8*/

　　+background-color:pink; /*ie7*/

　　_ /*ie6*/ }

　　:root #test { background-color:purple\9; } /*ie9*/

　　@media all and (min-width:0px){ #test {} } /*opera*/

　　@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome and safari*/ 2二、請用Css寫一個簡單的幻燈片效果頁面答案：知道是要用css3。使用animation動畫實現一個簡單的幻燈片效果。

　/**HTML**/

　　div.ani

　　/**css**/

　　.ani{

　　width:480px;

　　height:320px;

　　margin:50px auto;

　　overflow: hidden;

　　box-shadow:0 0 5px rgba(0,0,0,1);

　　background-size: cover;

　　background-position: center;

　　-webkit-animation-name: "loops";

　　-webkit-animation-duration: 20s;

　　-webkit-animation-iteration-count: infinite;

　　}

　　@-webkit-key s "loops" {

　　0% {

　　background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat;

　　}

　　25% {

　　background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat;

　　}

　　50% {

　　background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat;

　　}

　　75% {

　　background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat;

　　}

　　100% {

　　background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat;

　　}

　　} 2四、行內元素和塊級元素的具體區別是什麼？行內元素的padding和margin可設置嗎？塊級元素(block)特性：

　　老是獨佔一行，表現爲另起一行開始，並且其後的元素也必須另起一行顯示;

　　寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)均可控制;

　　內聯元素(inline)特性：

　　和相鄰的內聯元素在同一行;

　　寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變（也就是padding和margin的left和right是能夠設置的），就是裏面文字或圖片的大小。

　　那麼問題來了，瀏覽器還有默認的天生inline-block元素（擁有內在尺寸，可設置高寬，但不會自動換行），有哪些？

　　2五、什麼是外邊距重疊？重疊的結果是什麼？外邊距重疊就是margin-collapse。

　　在CSS當中，相鄰的兩個盒子（多是兄弟關係也多是祖先關係）的外邊距能夠結合成一個單獨的外邊距。這種合併外邊距的方式被稱爲摺疊，而且於是所結合成的外邊距稱爲摺疊外邊距。

　　摺疊結果遵循下列計算規則：

　　兩個相鄰的外邊距都是正數時，摺疊結果是它們二者之間較大的值。

　　兩個相鄰的外邊距都是負數時，摺疊結果是二者絕對值的較大值。

　　兩個外邊距一正一負時，摺疊結果是二者的相加的和。

　　2六、rgba()和opacity的透明效果有什麼不一樣？ rgba()和opacity都能實現透明效果，但最大的不一樣是opacity做用於元素，以及元素內的全部內容的透明度，

　　而rgba()只做用於元素的顏色或其背景色。（設置rgba透明的元素的子元素不會繼承透明效果！）

　　2七、css中可讓文字在垂直和水平方向上重疊的兩個屬性是什麼？垂直方向：line-height

　　水平方向：letter-spacing

　　那麼問題來了，關於letter-spacing的妙用知道有哪些麼？

　　答案:能夠用於消除inline-block元素間的換行符空格間隙問題。

　　2八、如何垂直居中一個浮動元素？ // 方法一：已知元素的高寬

　　#div1{

　　width:200px;

　　height:200px;

　　position: absolute; //父元素須要相對定位

　　top: 50%;

　　left: 50%;

　　margin-top:-100px ; //二分之一的height，width

　　margin-left: -100px;

　　}

　　//方法二:未知元素的高寬

　　#div1{

　　width: 200px;

　　height: 200px;

　　margin:auto;

　　position: absolute; //父元素須要相對定位

　　left: 0;

　　top: 0;

　　right: 0;

　　bottom: 0;

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

　#container //的容器設置以下

　　{

　　display:table-cell;

　　text-align:center;

　　vertical-align:middle;

　　} 2九、px和em的區別。 px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，而且em會繼承父級元素的字體大小。

　　瀏覽器的默認字體高都是16px。因此未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em。

　　30、描述一個」reset」的CSS文件並如何使用它。知道normalize.css嗎？你瞭解他們的不一樣之處？重置樣式很是多，凡是一個前端開發人員確定有一個經常使用的重置CSS文件並知道如何使用它們。他們是盲目的在作仍是知道爲何這麼作呢？緣由是不一樣的瀏覽器對一些元素有不一樣的默認樣式，若是你不處理，在不一樣的瀏覽器下會存在必要的風險，或者更有戲劇性的性發生。

　　你可能會用Normalize來代替你的重置樣式文件。它沒有重置全部的樣式風格，但僅提供了一套合理的默認樣式值。既能讓衆多瀏覽器達到一致和合理，但又不擾亂其餘的東西（如粗體的標題）。

　　在這一方面，沒法作每個復位重置。它也確實有些超過一個重置，它處理了你永遠都不用考慮的怪癖，像HTML的audio元素不一致或line-height不一致。

　　3一、Sass、LESS是什麼？你們爲何要使用他們？他們是CSS預處理器。他是CSS上的一種抽象層。他們是一種特殊的語法/語言編譯成CSS。

　　例如Less是一種動態樣式語言. 將CSS賦予了動態語言的特性，如變量，繼承，運算，函數. LESS 既能夠在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可一在服務端運行 (藉助 Node.js)。

　　爲何要使用它們？

　　結構清晰，便於擴展。

　　能夠方便地屏蔽瀏覽器私有語法差別。這個不用多說，封裝對瀏覽器語法差別的重複處理，減小無心義的機械勞動。

　　能夠輕鬆實現多重繼承。

　　徹底兼容 CSS 代碼，能夠方便地應用到老項目中。LESS 只是在 CSS 語法上作了擴展，因此老的 CSS 代碼也能夠與 LESS 代碼一同編譯。

　　3二、display:none與visibility:hidden的區別是什麼？ display : 隱藏對應的元素但不擠佔該元素原來的空間。

　　visibility: 隱藏對應的元素而且擠佔該元素原來的空間。

　　便是，使用CSS display:none屬性後，HTML元素（對象）的寬度、高度等各類屬性值都將「丟失」;而使用visibility:hidden屬性後，HTML元素（對象）僅僅是在視覺上看不見（徹底透明），而它所佔據的空間位置仍然存在。

　　3四、CSS中和@import的區別是：屬於html標籤，而@import是CSS中提供的

　　在頁面加載的時候，會同時被加載，而@import引用的CSS會在頁面加載完成後纔會加載引用的CSS

　　@import只有在ie5以上才能夠被識別，而是html標籤，不存在瀏覽器兼容性問題

　　引入樣式的權重大於@import的引用（@import是將引用的樣式導入到當前的頁面中）

　　3五、簡介盒子模型： CSS的盒子模型有兩種：IE盒子模型、標準的W3C盒子模型模型

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

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

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

　　3七、BFC是什麼? BFC（塊級格式化上下文），一個建立了新的BFC的盒子是獨立佈局的，盒子內元素的佈局不會影響盒子外面的元素。在同一個BFC中的兩個相鄰的盒子在垂直方向發生margin重疊的問題

　　BFC是指瀏覽器中建立了一個獨立的渲染區域，該區域內全部元素的佈局不會影響到區域外元素的佈局，這個渲染區域只對塊級元素起做用

　　3八、html語義化是什麼？當頁面樣式加載失敗的時候可以讓頁面呈現出清晰的結構

　　有利於seo優化，利於被搜索引擎收錄（更便於搜索引擎的爬蟲程序來識別）

　　便於項目的開發及維護，使html代碼更具備可讀性，便於其餘設備解析。

　　3九、Doctype的做用？嚴格模式與混雜模式的區別？用於告知瀏覽器該以何種模式來渲染文檔

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

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

　　40、IE的雙邊距BUG：塊級元素float後設置橫向margin，ie6顯示的margin比設置的較大。解決：加入_display：inline 4一、HTML與XHTML——兩者有什麼區別？ 1. 全部的標記都必需要有一個相應的結束標記

　　2. 全部標籤的元素和屬性的名字都必須使用小寫

　　3. 全部的標記都必須合理嵌套

　　4. 全部的屬性必須用引號 "" 括起來

　　5. 把全部 < 和 & 特殊符號用編碼表示

　　6. 給全部屬性賦一個值

　　7. 不要在註釋內容中使用 "--"

　　8. 圖片必須有說明文字

　　4二、html常見兼容性問題？ 1.雙邊距BUG float引發的使用display

　　2.3像素問題使用float引發的使用dislpay:inline -3px

　　3.超連接hover 點擊後失效使用正確的書寫順序 visited hover active

　　4.Ie z-index問題給父級添加position:relative

　　5.Png 透明使用js代碼改

　　6.Min-height 最小高度！Important 解決’

　　7.select 在ie6下遮蓋使用嵌套

　　8.爲何沒有辦法定義1px左右的寬度容器（IE6默認的行高形成的，使用over:hidden,zoom:0.08 line-height:1px）

　　9.IE5-8不支持opacity，解決辦法：

　　.opacity {

　　opacity: 0.4

　　filter: alpha(opacity=60); /* for IE5-7 */

　　-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/

　　}

　　10. IE6不支持PNG透明背景，解決辦法: IE6下使用gif圖片

　　4三、對WEB標準以及W3C的理解與認識答：標籤閉合、標籤小寫、不亂嵌套、提升搜索機器人搜索概率、使用外鏈css和js腳本、結構行爲表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更普遍的設備所訪問、更少的代碼和組件，容易維護、改版方便，不須要變更頁面內容、提供打印版本而不須要複製內容、提升網站易用性。

　　4四、行內元素有哪些?塊級元素有哪些?CSS的盒模型? 答：塊級元素：div p h1 h2 h3 h4 form ul

　　行內元素: a b br i span input select

　　Css盒模型:內容，border ,margin，padding

　　4五、前端頁面有哪三層構成，分別是什麼?做用是什麼? 答：結構層 Html 表示層 CSS 行爲層 js。

　　4六、Doctype做用? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義? （1）、聲明位於文檔中的最前面，處於標籤以前。告知瀏覽器的解析器，用什麼文檔類型規範來解析這個文檔。

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

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

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

　　4七、行內元素有哪些？塊級元素有哪些？空(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）知名的空元素：

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

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

　　4九、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

　　important 比內聯優先級高

　　CSS3新增僞類舉例：

　　p:first-of-type 選擇屬於其父元素的首個

元素的每一個

元素。

　　p:last-of-type 選擇屬於其父元素的最後

元素的每一個

元素。

　　p:only-of-type 選擇屬於其父元素惟一的

元素的每一個

元素。

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

元素。

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

元素。

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

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

　　50、如何居中div,如何居中一個浮動元素? 給div設置一個寬度，而後添加margin:0 auto屬性

　　div{

　　width:200px;

　　margin:0 auto;

　　}

　　居中一個浮動元素

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

　　設置層的外邊距

　　.div {

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

　　Margin: -150px 0 0 -250px;

　　position:relative;相對定位

　　//方便看效果

　　left:50%;

　　top:50%;

　　}

　　5一、瀏覽器的內核分別是什麼?常常遇到的瀏覽器的兼容性有哪些？緣由，解決方法是什麼，經常使用hack的技巧？ * IE瀏覽器的內核Trident、 Mozilla的Gecko、google的WebKit、Opera內核Presto；

　　* 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和IE七、IE6分離開來，這樣IE8已經獨立識別。

　　css

　　.bb{

　　/*全部識別*/

　　.background-color:#00deff\9; /*IE六、七、8識別*/

　　+/*IE六、7識別*/

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

　　}

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

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

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

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

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

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

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

　　* Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示, 可經過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.

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

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

　　5二、列出display的值，說明他們的做用。position的值， relative和absolute定位原點是？ 1. block 象塊類型元素同樣顯示。

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

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

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

　　2. position的值

　　*absolute

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

　　*fixed （老IE不支持）

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

　　* relative

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

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

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

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

　　5三、absolute的containing block計算方式跟正常流有什麼不一樣？ 5四、position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？ 5五、對WEB標準以及W3C的理解與認識標籤閉合、標籤小寫、不亂嵌套、提升搜索機器人搜索概率、使用外鏈css和js腳本、結構行爲表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更普遍的設備所訪問、更少的代碼和組件，容易維護、改版方便，不須要變更頁面內容、提供打印版本而不須要複製內容、提升網站易用性；

　　5六、css的基本語句構成是? 選擇器{屬性1:值1;屬性2:值2;……}

　　5七、瀏覽器標準模式和怪異模式之間的區別是什麼? 盒子模型渲染模式的不一樣

　　使用 window.top.document.compatMode 可顯示爲何模式

　　5八、CSS中能夠經過哪些屬性定義，使得一個DOM元素不顯示在瀏覽器可視範圍內？

　　最基本的：

　　設置display屬性爲none，或者設置visibility屬性爲hidden

　　技巧性：

　　設置寬高爲0，設置透明度爲0，設置z-index位置在-1000

　　5九、超連接訪問事後hover樣式就不出現的問題是什麼？如何解決？

　　答案：被點擊訪問過的超連接樣式不在具備hover和active了,解決方法是改變CSS屬性的排列順序: L-V-H-A（ ,visited,hover,active）

　　60、什麼是Css Hack？ie6,7,8的hack分別是什麼？

　　答案：針對不一樣的瀏覽器寫不一樣的CSS code的過程，就是CSS hack。

　　示例以下：

　　#test {

　　width:300px;

　　height:300px;

　　 /*firefox*/

　　background-color:red\9; /*all ie*/

　　 /*ie8*/

　　+background-color:pink; /*ie7*/

　　_ /*ie6*/ }

　　:root #test { background-color:purple\9; } /*ie9*/

　　@media all and (min-width:0px){ #test {} } /*opera*/

　　@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome and safari*/

　　6二、請用Css寫一個簡單的幻燈片效果頁面

　　答案：知道是要用css3。使用animation動畫實現一個簡單的幻燈片效果。

　　/**HTML**/

　　div.ani

　　/**css**/

　　.ani{

　　width:480px;

　　height:320px;

　　margin:50px auto;

　　overflow: hidden;

　　box-shadow:0 0 5px rgba(0,0,0,1);

　　background-size: cover;

　　background-position: center;

　　-webkit-animation-name: "loops";

　　-webkit-animation-duration: 20s;

　　-webkit-animation-iteration-count: infinite;

　　}

　　@-webkit-key s "loops" {

　　0% { background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat;

　　}

　　25% {

　　background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat;

　　}

　　50% {

　　background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat;

　　}

　　75% {

　　background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat;

　　}

　　100% {

　　background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat;

　　}

　　6三、行內元素和塊級元素的具體區別是什麼？行內元素的padding和margin可設置嗎？

　　塊級元素(block)特性：

　　· 老是獨佔一行，表現爲另起一行開始，並且其後的元素也必須另起一行顯示;

　　· 寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)均可控制;

　　內聯元素(inline)特性：

　　· 和相鄰的內聯元素在同一行;

　　· 寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變（也就是padding和margin的left和right是能夠設置的），就是裏面文字或圖片的大小。

　　那麼問題來了，瀏覽器還有默認的天生inline-block元素（擁有內在尺寸，可設置高寬，但不會自動換行），有哪些？

　　6四、什麼是外邊距重疊？重疊的結果是什麼？

　　答案：

　　外邊距重疊就是margin-collapse。

　　摺疊結果遵循下列計算規則：

　　1. 兩個相鄰的外邊距都是正數時，摺疊結果是它們二者之間較大的值。

　　2. 兩個相鄰的外邊距都是負數時，摺疊結果是二者絕對值的較大值。

　　3. 兩個外邊距一正一負時，摺疊結果是二者的相加的和。

　　6五、rgba()和opacity的透明效果有什麼不一樣？

　　rgba()和opacity都能實現透明效果，但最大的不一樣是opacity做用於元素，以及元素內的全部內容的透明度，

　　而rgba()只做用於元素的顏色或其背景色。（設置rgba透明的元素的子元素不會繼承透明效果！）

　　6六、css中可讓文字在垂直和水平方向上重疊的兩個屬性是什麼？

　　垂直方向：line-height

　　水平方向：letter-spacing

　　那麼問題來了，關於letter-spacing的妙用知道有哪些麼？

　　答案:能夠用於消除inline-block元素間的換行符空格間隙問題。

　　6七、如何垂直居中一個浮動元素？ // 方法一：已知元素的高寬

　　#div1{

　　width:200px;

　　height:200px;

　　position: absolute; //父元素須要相對定位

　　top: 50%;

　　left: 50%;

　　margin-top:-100px ; //二分之一的height，width

　　margin-left: -100px;

　　}

　　//方法二:未知元素的高寬

　　#div1{

　　width: 200px;

　　height: 200px;

　　margin:auto;

　　position: absolute; //父元素須要相對定位

　　left: 0;

　　top: 0;

　　right: 0;

　　bottom: 0;

　　}

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

　　#container //的容器設置以下

　　{

　　display:table-cell;

　　text-align:center;

　　vertical-align:middle;

　　}

　　6八、描述一個"reset"的CSS文件並如何使用它。知道normalize.css嗎？你瞭解他們的不一樣之處？　

　　重置樣式很是多，凡是一個前端開發人員確定有一個經常使用的重置CSS文件並知道如何使用它們。他們是盲目的在作仍是知道爲何這麼作呢？緣由是不一樣的瀏覽器對一些元素有不一樣的默認樣式，若是你不處理，在不一樣的瀏覽器下會存在必要的風險，或者更有戲劇性的性發生。

　　在這一方面，沒法作每個復位重置。它也確實有些超過一個重置，它處理了你永遠都不用考慮的怪癖，像HTML的audio元素不一致或line-height不一致。

　　6九、說display屬性有哪些？能夠作什麼？ display:block行內元素轉換爲塊級元素

　　display:inline塊級元素轉換爲行內元素

　　display:inline-block轉爲內聯元素

　　70、哪些css屬性能夠繼承？可繼承： font-size font-family color, ul li dl dd dt;

　　不可繼承：border padding margin width height ;

　　7一、css優先級算法如何計算？ !important > id > class > 標籤

　　!important 比內聯優先級高

　　*優先級就近原則，樣式定義最近者爲準;

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

　　7二、b標籤和strong標籤,i標籤和em標籤的區別？後者有語義，前者則無。

　　7三、有那些行內元素、有哪些塊級元素、盒模型？ 1.內聯元素(inline element)

　　a – 錨點

　　abbr – 縮寫

　　acronym – 首字

　　b – 粗體(不推薦)

　　big – 大字體

　　br – 換行

　　em – 強調

　　font – 字體設定(不推薦)

　　i – 斜體

　　img – 圖片

　　input – 輸入框

　　label – 表格標籤

　　s – 中劃線(不推薦)

　　select – 項目選擇

　　small – 小字體文本

　　span – 經常使用內聯容器，定義文本內區塊

　　strike – 中劃線

　　strong – 粗體強調

　　sub – 下標

　　sup – 上標

　　textarea – 多行文本輸入框

　　tt – 電傳文本

　　u – 下劃線

　　var – 定義變量

　　二、塊級元素

　　address – 地址

　　blockquote – 塊引用

　　center – 舉中對齊塊

　　dir – 目錄列表

　　div – 經常使用塊級容易，也是css layout的主要標籤

　　dl – 定義列表

　　fieldset – form控制組

　　form – 交互表單

　　h1 – 大標題

　　h2 – 副標題

　　h3 – 3級標題

　　h4 – 4級標題

　　h5 – 5級標題

　　h6 – 6級標題

　　hr – 水平分隔線

　　isindex – input prompt

　　menu – 菜單列表

　　no s – s可選內容，（對於不支持的瀏覽器顯示此區塊內容）

　　no – ）可選腳本內容（對於不支持的瀏覽器顯示此內容）

　　ol – 排序表單

　　p – 段落

　　pre – 格式化文本

　　table – 表格

　　ul – 非排序列表

　　3.CSS盒子模型包含四個部分組成：

　　內容、填充（padding）、邊框（border）、外邊界（margin）。

　　7四、有哪些選擇符，優先級的計算公式是什麼？行內樣式和！important哪一個優先級高？ #ID > .class > 標籤選擇符 !important優先級高

　　75.我想讓行內元素跟上面的元素距離10px，加margin-top和padding-top能夠嗎？ margin-top,padding-top無效

　　76.CSS的盒模型由什麼組成？內容，border ,margin，padding

　　7七、.說說display屬性有哪些？能夠作什麼？ display:block行內元素轉換爲塊級元素

　　display:inline塊級元素轉換爲行內元素

　　display:inline-block轉爲內聯元素

　　7八、哪些css屬性能夠繼承？可繼承： font-size font-family color, ul li dl dd dt;

　　不可繼承：border padding margin width height ;

　　7九、css優先級算法如何計算？ !important > id > class > 標籤

　　!important 比內聯優先級高

　　* 優先級就近原則，樣式定義最近者爲準;

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

　　80、text-align:center和line-height有什麼區別？ text-align是水平對齊，line-height是行間。

　　8一、前端頁面由哪三層構成，分別是什麼？做用是什麼？結構層 Html 表示層 CSS 行爲層 js

　　8二、寫一個表格以及對應的CSS,使表格奇數行爲白色背景，偶數行爲灰色，鼠標一上去爲黃色背景。 2、JS基礎一、的typeof返回哪些數據類型 number function boolean underfind

　　二、例舉3種強制類型轉換和2種隱式類型轉換? 強制（parseInt【頗似艾特】,parseFloat,number）

　　隱式（== – ===）

　　三、split【斯普雷特】() join() 的區別前者是切割成數組的形式，後者是將數組轉換成字符串

　　四、數組方法pop() push() unshift() shift() Push()尾部添加 pop()尾部刪除

　　Unshift()頭部添加 shift()頭部刪除

　　五、事件綁定和普通事件有什麼區別事件綁定是指把事件註冊到具體的元素之上，普通事件指的是能夠用來註冊的事件

　　六、IE和DOM事件流的區別 1.執行順序不同、

　　2.參數不同

　　3.事件加不加on

　　4.this指向問題

　　七、IE和標準下有哪些兼容性的寫法 Var ev = ev || window.event

　　document.documentElement.clientWidth || document.body.clientWidth

　　Var target = ev.srcElement||ev.target

　　八、call和apply的區別 .call(this,obj1,obj2,obj3)

　　.apply(this,arguments)

　　九、b繼承a的方法十、 this指針、閉包、做用域十一、事件委託是什麼讓利用事件冒泡的原理，讓本身的所觸發的事件，讓他的父元素代替執行！

　　十二、閉包是什麼，有什麼特性，對頁面有什麼影響閉包就是可以讀取其餘函數內部變量的函數。

　　1三、如何阻止事件冒泡和默認事件 canceBubble return false

　　1四、添加刪除替換插入到某個接點的方法 obj.appendChidl()

　　obj.innersetBefore

　　obj.replaceChild

　　obj.removeChild

　　7、JS高級一、 JQuery一個對象能夠同時綁定多個事件，這是如何實現的？ jQuery能夠給一個對象同時綁定多個事件，低層實現方式是使用addEventListner或attachEvent兼容不一樣的瀏覽器實現事件的綁定，這樣能夠給同一個對象註冊多個事件。

　　二、知道什麼是webkit麼? 知道怎麼用瀏覽器的各類工具來調試和debug代碼麼? Webkit是瀏覽器引擎，包括html渲染和js解析功能，手機瀏覽器的主流內核，與之相對應的引擎有Gecko（Mozilla Firefox 等使用）和Trident（也稱MSHTML，IE 使用）。

　　對於瀏覽器的調試工具要熟練使用，主要是頁面結構分析，後臺請求信息查看，js調試工具使用，熟練使用這些工具能夠快速提升解決問題的效率

　　三、如何測試前端代碼? 知道BDD, TDD, Unit Test麼? 知道怎麼測試你的前端工程麼(mocha, sinon, jasmin, qUnit..)? 瞭解BDD行爲驅動開發與TDD測試驅動開發已經單元測試相關概念，

　　四、前端templating(Mustache, underscore, handlebars)是幹嗎的, 怎麼用?

　　Web 模板引擎是爲了使用戶界面與業務數據（內容）分離而產生的，

　　Mustache 是一個 logic-less （輕邏輯）模板解析引擎，它的優點在於能夠應用在、PHP、Python、Perl 等多種編程語言中。

　　Underscore封裝了經常使用的對象操做方法，用於提升開發效率。

　　Handlebars 是一個語義模板庫，經過對view和data的分離來快速構建Web模板。

　　五、簡述一下 Handlebars 的基本用法？沒有用過的話說出它是幹什麼的便可

　　六、簡述一下 Handlerbars 的對模板的基本處理流程，如何編譯的？如何緩存的？學習技術不只要會用，還有熟悉它的實現機制，這樣在開發中遇到問題時才能更好的解決

　　七、用js實現千位分隔符? 原生js的熟練度，實踐經驗，實現思路

　　八、檢測瀏覽器版本版本有哪些方式？ IE與標準瀏覽器判斷，IE不一樣版本的判斷，userAgent var ie = /*@cc_on !@*/false;

　　九、咱們給一個dom同時綁定兩個點擊事件，一個用捕獲，一個用冒泡，你來講下會執行幾回事件，而後會先執行冒泡仍是捕獲對兩種事件模型的理解

　　十、實現一個函數clone，能夠對中的5種主要的數據類型（包括Number、String、、Array、Boolean）進行值複製 · 考察點1：對於基本數據類型和引用數據類型在內存中存放的是值仍是指針這一區別是否清楚

　　· 考察點2：是否知道如何判斷一個變量是什麼類型的

　　· 考察點3：遞歸算法的設計

　　// 方法一：

　　.prototype.clone = function(){

　　var o = this.constructor === Array ? [] : {};

　　for(var e in this){

　　o[e] = typeof this[e] === " " ? this[e].clone() : this[e];

　　}

　　return o;

　　}

　　//方法二：

　　/**

　　* 克隆一個對象

　　* @param Obj

　　* @returns

　　function clone(Obj) {

　　var buf;

　　if (Obj instanceof Array) {

　　buf = [];//建立一個空的數組

　　var i = Obj.length;

　　while (i--) {

　　buf[i] = clone(Obj[i]);

　　}

　　return buf;

　　}else if (Obj instanceof ){

　　buf = {};//建立一個空對象

　　for (var k in Obj) { //爲這個對象添加新的屬性

　　buf[k] = clone(Obj[k]);

　　}

　　return buf;

　　}else{ //普通變量直接賦值

　　return Obj;

　　}

　　} 十一、如何消除一個數組裏面重復的元素？

　　var arr=[1,2,3,3,4,4,5,5,6,1,9,3,25,4];

　　function deRepeat(){

　　var newArr=[];

　　var obj={};

　　var index=0;

　　var l=arr.length;

　　for(var i=0;i<l;i++){

　　if(obj[arr[i]]==undefined)

　　{

　　obj[arr[i]]=1;

　　newArr[index++]=arr[i];

　　}

　　else if(obj[arr[i]]==1)

　　continue;

　　}

　　return newArr;

　　}

　　var newArr2=deRepeat(arr);

　　alert(newArr2); //輸出1,2,3,4,5,6,9,25 十二、小賢是一條可愛的小狗(Dog)，它的叫聲很好聽(wow)，每次看到主人的時候就會乖乖叫一聲(yelp)。從這段描述能夠獲得如下對象：

　　function Dog() {

　　this.wow = function() {

　　alert(’Wow’);

　　}

　　this.yelp = function() {

　　this.wow();

　　}

　　} 小芒和小賢同樣，原來也是一條可愛的小狗，但是忽然有一天瘋了(MadDog)，一看到人就會每隔半秒叫一聲(wow)地不停叫喚(yelp)。請根據描述，按示例的形式用代碼來實。（繼承，原型，setInterval）

　　function MadDog() {

　　this.yelp = function() {

　　var self = this;

　　setInterval(function() {

　　self.wow();

　　}, 500);

　　}

　　MadDog.prototype = new Dog();

　　//for test

　　var dog = new Dog();

　　dog.yelp();

　　var madDog = new MadDog();

　　madDog.yelp();

1三、下面這個ul，如何點擊每一列的時候alert其index?（閉包）

這是第一條
這是第二條

這是第三條

　　// 方法一：

　　var lis=document.getElementById('2223').getElementsByTagName('li');

　　for(var i=0;i<3;i++)

　　{

　　lis[i].index=i;

　　lis[i]. =function(){

　　alert(this.index);

　　};

　　}

　　//方法二：

　　var lis=document.getElementById('2223').getElementsByTagName('li');

　　for(var i=0;i<3;i++){

　　lis[i].index=i;

　　lis[i]. =(function(a){

　　return function() {

　　alert(a);

　　}

　　})(i);

　　} 1四、編寫一個函數，輸入指定類型的選擇器(僅需支持id，class，tagName三種簡單CSS選擇器，無需兼容組合選擇器)能夠返回匹配的DOM節點，需考慮瀏覽器兼容性和性能。 /*** @param selector {String} 傳入的CSS選擇器。* @return {Array}*/

　　var query = function(selector) {

　　var reg = /^(#)?(\.)?(\w+)$/img;

　　var regResult = reg.exec(selector);

　　var result = [];

　　//若是是id選擇器

　　if(regResult[1]) {

　　if(regResult[3]) {

　　if(typeof document.querySelector === "function") {

　　result.push(document.querySelector(regResult[3]));

　　}else {

　　result.push(document.getElementById(regResult[3]));

　　}

　　//若是是class選擇器

　　else if(regResult[2]) {

　　if(regResult[3]) {

　　if(typeof document.getElementsByClassName === 'function') {

　　var doms = document.getElementsByClassName(regResult[3]);

　　if(doms) {

　　result = converToArray(doms);

　　}

　　//若是不支持getElementsByClassName函數

　　else {

　　var allDoms = document.getElementsByTagName("*") ;

　　for(var i = 0, len = allDoms.length; i < len; i++) {

　　if(allDoms[i].className.search(new RegExp(regResult[2])) > -1) {

　　result.push(allDoms[i]);

　　}

　　//若是是標籤選擇器

　　else if(regResult[3]) {

　　var doms = document.getElementsByTagName(regResult[3].toLowerCase());

　　if(doms) {

　　result = converToArray(doms);

　　}

　　return result;

　　}

　　function converToArray(nodes){

　　var array = null;

　　try{

　　array = Array.prototype.slice.call(nodes,0);//針對非IE瀏覽器

　　}catch(ex){

　　array = new Array();

　　for( var i = 0 ,len = nodes.length; i < len ; i++ ) {

　　array.push(nodes[i])

　　}

　　return array;

　　} 1五、請評價如下代碼並給出改進意見。 if(window.addEventListener){

　　var addListener = function(el,type,listener,useCapture){

　　el.addEventListener(type,listener,useCapture);

　　};

　　}

　　else if(document.all){

　　addListener = function(el,type,listener){

　　el.attachEvent("on"+type,function(){

　　listener.apply(el);

　　});

　　}

　　} · 　不該該在if和else語句中聲明addListener函數，應該先聲明；

　　· 　不須要使用window.addEventListener或document.all來進行檢測瀏覽器，應該使用能力檢測；

　　· 　因爲attachEvent在IE中有this指向問題，因此調用它時須要處理一下

　　改進以下：

　　function addEvent(elem, type, handler){

　　if(elem.addEventListener){

　　elem.addEventListener(type, handler, false);

　　}else if(elem.attachEvent){

　　elem['temp' + type + handler] = handler;

　　elem[type + handler] = function(){

　　elem['temp' + type + handler].apply(elem);

　　};

　　elem.attachEvent('on' + type, elem[type + handler]);

　　}else{

　　elem['on' + type] = handler;

　　}

　　} 1六、給String對象添加一個方法，傳入一個string類型的參數，而後將string的每一個字符間價格空格返回，例如： addSpace(「hello world」) // -> ‘h e l l o w o r l d’

　　String.prototype.spacify = function(){

　　return this.split('').join(' ');

　　}; 接着上述問題答案提問，1）直接在對象的原型上添加方法是否安全？尤爲是在對象上。(這個我沒能答出？但願知道的說一下。)　2）函數聲明與函數表達式的區別？

　　答案：在js中，解析器在向執行環境中加載數據時，對函數聲明和函數表達式並不是是一視同仁的，解析器會率先讀取函數聲明，並使其在執行任何代碼以前可用（能夠訪問），至於函數表達式，則必須等到解析器執行到它所在的代碼行，纔會真正被解析執行。

　　1七、定義一個log方法，讓它能夠代理console.log的方法。可行的方法一：

　　function log(msg)　{

　　console.log(msg);

　　}

　　log("hello world!") // hello world! 若是要傳入多個參數呢？顯然上面的方法不能知足要求，因此更好的方法是：

　　function log(){

　　console.log.apply(console, arguments);

　　}; 到此，追問apply和call方法的異同。

　　對於apply和call二者在做用上是相同的，便是調用一個對象的一個方法，以另外一個對象替換當前對象。將一個函數的對象上下文從初始的上下文改變爲由 thisObj 指定的新對象。

　　但二者在參數上有區別的。對於第一個參數意義都同樣，但對第二個參數： apply傳入的是一個參數數組，也就是將多個參數組合成爲一個數組傳入，而call則做爲call的參數傳入（從第二個參數開始）。如 func.call(func1,var1,var2,var3)對應的apply寫法爲：func.apply(func1,[var1,var2,var3]) 。

　　1八、在中什麼是僞數組？如何將僞數組轉化爲標準數組？僞數組（類數組）：沒法直接調用數組方法或指望length屬性有什麼特殊的行爲，但仍能夠對真正數組遍歷方法來遍歷它們。典型的是函數的argument參數，還有像調用getElementsByTagName,document.childNodes之類的,它們都返回NodeList對象都屬於僞數組。能夠使用Array.prototype.slice.call(fakeArray)將數組轉化爲真正的Array對象。

　　假設接第八題題幹，咱們要給每一個log方法添加一個」(app)」前綴，好比’hello world!’ ->’(app)hello world!’。方法以下：

　　function log(){

　　var args = Array.prototype.slice.call(arguments); //爲了使用unshift數組方法，將argument轉化爲真正的數組

　　args.unshift('(app)');

　　console.log.apply(console, args);

　　}; 1九、對做用域上下文和this的理解，看下列代碼： var User = {

　　count: 1,

　　getCount: function() {

　　return this.count;

　　}

　　};

　　console.log(User.getCount()); // what?

　　var func = User.getCount;

　　console.log(func()); // what? 問兩處console輸出什麼？爲何？

　　答案是1和undefined。

　　func是在winodw的上下文中被執行的，因此會訪問不到count屬性。

　　繼續追問，那麼如何確保Uesr老是能訪問到func的上下文，即正確返回1。正確的方法是使用Function.prototype.bind。兼容各個瀏覽器完整代碼以下：

　　Function.prototype.bind = Function.prototype.bind || function(context){

　　var self = this;

　　return function(){

　　return self.apply(context, arguments);

　　};

　　}

　　var func = User.getCount.bind(User);

　　console.log(func()); 20、原生JS的window. 與Jquery的$(document).ready(function(){})有什麼不一樣？如何用原生JS實現Jq的ready方法？ window. ()方法是必須等到頁面內包括圖片的全部元素加載完畢後才能執行。

　　$(document).ready()是DOM結構繪製完畢後就執行，沒必要等到加載完畢。

　　* 傳遞函數給whenReady()

　　* 當文檔解析完畢且爲操做準備就緒時，函數做爲document的方法調用

　　var whenReady = (function() { //這個函數返回whenReady()函數

　　var funcs = []; //當得到事件時，要運行的函數

　　var ready = false; //當觸發事件處理程序時,切換爲true

　　//當文檔就緒時,調用事件處理程序

　　function handler(e) {

　　if(ready) return; //確保事件處理程序只完整運行一次

　　//若是發生事件，但其狀態不是complete的話,那麼文檔還沒有準備好

　　if(e.type === ' ' && document.readyState !== 'complete') {

　　return;

　　}

　　//運行全部註冊函數

　　//注意每次都要計算funcs.length

　　//以防這些函數的調用可能會致使註冊更多的函數

　　for(var i=0; i<funcs.length; i++) {

　　funcs[i].call(document);

　　}

　　//事件處理函數完整執行,切換ready狀態, 並移除全部函數

　　ready = true;

　　funcs = null;

　　}

　　//爲接收到的任何事件註冊處理程序

　　if(document.addEventListener) {

　　document.addEventListener('DOMContentLoaded', handler, false);

　　document.addEventListener('readystatechange', handler, false); //IE9+

　　window.addEventListener('load', handler, false);

　　}else if(document.attachEvent) {

　　document.attachEvent(' ', handler);

　　window.attachEvent(' ', handler);

　　}

　　//返回whenReady()函數

　　return function whenReady(fn) {

　　if(ready) { fn.call(document); }

　　else { funcs.push(fn); }

　　}

　　})(); 若是上述代碼十分難懂，下面這個簡化版：

　　function ready(fn){

　　if(document.addEventListener) {//標準瀏覽器

　　document.addEventListener('DOMContentLoaded', function() {

　　//註銷事件, 避免反覆觸發

　　document.removeEventListener('DOMContentLoaded',arguments.callee, false);

　　fn();//執行函數

　　}, false);

　　}else if(document.attachEvent) {//IE

　　document.attachEvent(' ', function() {

　　if(document.readyState == 'complete') {

　　document.detachEvent(' ', arguments.callee);

　　fn();//函數執行

　　}

　　});

　　}

　　}; 2一、（設計題）想實現一個對頁面某個節點的拖曳？如何作？（使用原生JS）回答出概念便可，下面是幾個要點

　　1. 給須要拖拽的節點綁定mousedown, mousemove, mouseup事件

　　2. mousedown事件觸發後，開始拖拽

　　3. mousemove時，須要經過event.clientX和clientY獲取拖拽位置，並實時更新位置

　　4. mouseup時，拖拽結束

　　5. 須要注意瀏覽器邊界的狀況

　　2二、請實現以下功能

　　function setcookie(name,value,days){ //給cookie增長一個時間變量

　　var exp = new Date();

　　exp.setTime(exp.getTime() + days*24*60*60*1000); //設置過時時間爲days天

　　document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();

　　}

　　function getCookie(name){

　　var result = "";

　　var myCookie = ""+document.cookie+";";

　　var searchName = "+name+"=";

　　var startOfCookie = myCookie.indexOf(searchName);

　　var endOfCookie;

　　if(satrtOfCookie != -1){

　　startOfcookie += searchName.length;

　　endOfCookie = myCookie.indexOf(";",startOfCookie);

　　result = (myCookie.substring(startOfCookie,endOfCookie));

　　}

　　return result;

　　}

　　(function(){

　　var oTips = document.getElementById('tips');//假設tips的id爲tips

　　var page = {

　　check: function(){//檢查tips的cookie是否存在而且容許顯示

　　var tips = getCookie('tips');

　　if(!tips || tips == 'show') return true;//tips的cookie不存在

　　if(tips == "never_show_again") return false;

　　hideTip: function(bNever){

　　if(bNever) setcookie('tips', 'never_show_again', 365);

　　oTips.style.display = "none";//隱藏

　　showTip: function(){

　　oTips.style.display = "inline";//顯示，假設tips爲行級元素

　　init: function(){

　　var _this = this;

　　if(this.check()){

　　_this.showTip();

　　setcookie('tips', 'show', 1);

　　}

　　oTips. = function(){

　　_this.hideTip(true);

　　};

　　}

　　};

　　page.init();

　　})();

2三、說出如下函數的做用是？空白區域應該填寫什麼？ //define

　　(function(window){

　　function fn(str){

　　this.str=str;

　　}

　　fn.prototype.format = function(){

　　var arg = ______;

　　return this.str.replace(_____,function(a,b){

　　return arg[b]||"";

　　});

　　}

　　window.fn = fn;

　　})(window);

　　//use

　　(function(){

　　var t = new fn('

{1}{2}

');

　　console.log(t.format('http://www.alibaba.com','Alibaba','Welcome'));

　　})(); 答案：訪函數的做用是使用format函數將函數的參數替換掉{0}這樣的內容，返回一個格式化後的結果：

　　第一個空是：arguments

　　第二個空是：/\{(\d+)\}/ig

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

　　2五、談談This對象的理解。理解不一樣形式的函數調用方式下的this指向，理解事件函數、定時函數中的this指向，函數的調用形式決定了this的指向。

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

　　2七、關於事件，IE與火狐的事件機制有什麼區別？如何阻止冒泡？ [1].在IE中,事件對象是做爲一個全局變量來保存和維護的.全部的瀏覽器事件,無論是用戶觸發的，仍是其餘事件,都會更新window.event對象.因此在代碼中，只要調用window.event就能夠獲取事件對象，再event.srcElement就能夠取得觸發事件的元素進行進一步處理.

　　[2].在FireFox中，事件對象卻不是全局對象，通常狀況下，是現場發生，現場使用，FireFox把事件對象自動傳給事件處理程序.

　　關於事件的兼容性處理要熟練掌握，事件對象具體哪些屬性存在兼容性問題，IE與標準事件模型事件冒泡與事件捕獲的支持要理解

　　2八、什麼是閉包（closure），爲何要用它？簡單的理解是函數的嵌套造成閉包，閉包包括函數自己已經它的外部做用域

　　使用閉包能夠造成獨立的空間，延長變量的生命週期，報存中間狀態值

　　2九、代碼中的"use strict";是什麼意思 ? 使用它區別是什麼？意思是使用嚴格模式，使用嚴格模式，一些不規範的語法將再也不支持

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

　　3一、new操做符具體幹了什麼呢? 一、建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型。

　　二、屬性和方法被加入到 this 引用的對象中。

　　三、新建立的對象由 this 所引用，而且最後隱式的返回 this 。

　　3二、用原生的實現過什麼功能嗎？主要考察原生js的實踐經驗

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

　　3四、對JSON的瞭解？輕量級數據交互格式，能夠造成複雜的嵌套格式，解析很是方便

　　3五、js延遲加載的方式有哪些？方案一：< >標籤的async="async"屬性（詳細參見：標籤的async屬性）

　　方案二：< >標籤的defer="defer"屬性

　　方案三：動態建立< >標籤

　　方案四：AJAX eval（使用AJAX獲得腳本內容，而後經過eval_r( http.responseText)來運行腳本）

　　方案五：方式

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

　　3七、AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）規範區別？理解這兩種規範的差別，主要經過requirejs與seajs的對比，理解模塊的定義與引用方式的差別以及這兩種規範的設計原則

　　3八、requireJS的核心原理是什麼？（如何動態加載的？如何避免屢次加載的？如何緩存的？）核心是js的加載模塊，經過正則匹配模塊以及模塊的依賴關係，保證文件加載的前後順序，根據文件的路徑對加載過的文件作了緩存

　　3九、讓你本身設計實現一個requireJS，你會怎麼作？核心是實現js的加載模塊，維護js的依賴關係，控制好文件加載的前後順序

　　40、談一談你對ECMA 6的瞭解？ ES6新的語法糖，類，模塊化等新特性

　　4一、ECMA 6 怎麼寫class麼，爲何會出現class這種東西? class Point {

　　constructor(x, y) {

　　this.x = x;

　　this.y = y;

　　}

　　toString() {

　　return '('+this.x+', '+this.y+')';

　　}

　　4二、異步加載的方式有哪些？方案一：< >標籤的async="async"屬性（詳細參見：標籤的async屬性）

　　方案二：< >標籤的defer="defer"屬性

　　方案三：動態建立< >標籤

　　方案四：AJAX eval（使用AJAX獲得腳本內容，而後經過eval_r( http.responseText)來運行腳本）

　　方案五：方式

　　4三、documen.write和 innerHTML的區別? document.write是重寫整個document, 寫入內容是字符串的html

　　innerHTML是HTMLElement的屬性，是一個元素的內部html內容

　　4四、DOM操做——怎樣添加、移除、移動、複製、建立和查找節點? （1）建立新節點

　　createDocumentFragment() //建立一個DOM片斷

　　createElement_x() //建立一個具體的元素

　　createTextNode() //建立一個文本節點

　　（2）添加、移除、替換、插入

　　appendChild()

　　removeChild()

　　replaceChild()

　　insertBefore()

　　（3）查找

　　getElementsByTagName() //經過標籤名稱

　　getElementsByName() //經過元素的Name屬性的值

　　getElementById() //經過元素Id，惟一性

　　4五、call() 和 .apply() 的含義和區別？ apply的參數是數組形式，call的參數是單個的值，除此以外在使用上沒有差異，重點理解這兩個函數調用的this改變

　　4六、數組和對象有哪些原生方法，列舉一下？ Array.concat( ) 鏈接數組

　　Array.join( ) 將數組元素鏈接起來以構建一個字符串

　　Array.length 數組的大小

　　Array.pop( ) 刪除並返回數組的最後一個元素

　　Array.push( ) 給數組添加元素

　　Array.reverse( ) 顛倒數組中元素的順序

　　Array.shift( ) 將元素移出數組

　　Array.slice( ) 返回數組的一部分

　　Array.sort( ) 對數組元素進行排序

　　Array.splice( ) 插入、刪除或替換數組的元素

　　Array.toLocaleString( ) 把數組轉換成局部字符串

　　Array.toString( ) 將數組轉換成一個字符串

　　Array.unshift( ) 在數組頭部插入一個元素

　　.hasOwnProperty( ) 檢查屬性是否被繼承

　　.isPrototypeOf( ) 一個對象是不是另外一個對象的原型

　　.propertyIsEnumerable( ) 是否能夠經過for/in循環看到屬性

　　.toLocaleString( ) 返回對象的本地字符串表示

　　.toString( ) 定義一個對象的字符串表示

　　.valueOf( ) 指定對象的原始值

　　4七、JS 怎麼實現一個類。怎麼實例化這個類嚴格來說js中並無類的概念，不過js中的函數能夠做爲構造函數來使用，經過new來實例化，其實函數自己也是一個對象。

　　4八、中的做用域與變量聲明提高？理解的預解析機制，js的運行主要分兩個階段：js的預解析和運行，預解析階段全部的變量聲明和函數定義都會提早，可是變量的賦值不會提早

　　4九、如何編寫高性能的？使用 DocumentFragment 優化屢次 append

　　經過模板元素 clone ，替代 createElement

　　使用一次 innerHTML 賦值代替構建 dom 元素

　　使用 firstChild 和 nextSibling 代替 childNodes 遍歷 dom 元素

　　使用 Array 作爲 StringBuffer ，代替字符串拼接的操做

　　將循環控制量保存到局部變量

　　順序無關的遍歷時，用 while 替代 for

　　將條件分支，按可能性順序從高到低排列

　　在同一條件子的多（ >2 ）條件分支時，使用 switch 優於 if

　　使用三目運算符替代條件分支

　　須要不斷執行的時候，優先考慮使用 setInterval

　　50、那些操做會形成內存泄漏？閉包，循環

　　5一、對象的幾種建立方式？ 1. 工廠模式

　　2. 構造函數模式

　　3. 原型模式

　　4. 混合構造函數和原型模式

　　5. 動態原型模式

　　6. 寄生構造函數模式

　　7. 穩妥構造函數模式

　　5二、繼承的 6 種方法？ 1. 原型鏈繼承

　　2. 借用構造函數繼承

　　3. 組合繼承(原型+借用構造)

　　4. 原型式繼承

　　5. 寄生式繼承

　　6. 寄生組合式繼承

　　5三、eval是作什麼的？ 1. 它的功能是把對應的字符串解析成JS代碼並運行

　　2. 應該避免使用eval，不安全，很是耗性能（2次，一次解析成js語句，一次執行）

　　5四、原型，原型鏈 ? 有什麼特色？ 1. 原型對象也是普通的對象，是對象一個自帶隱式的 __proto__ 屬性，原型也有可能有本身的原型，若是一個原型對象的原型不爲 null 的話，咱們就稱之爲原型鏈

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

　　5五、事件、IE與火狐的事件機制有什麼區別？如何阻止冒泡？ 1. 咱們在網頁中的某個操做（有的操做對應多個事件）。例如：當咱們點擊一個按鈕就會產生一個事件。是能夠被偵測到的行爲

　　2. 事件處理機制：IE是事件冒泡、firefox同時支持兩種事件模型，也就是：捕獲型事件和冒泡型事件

　　3. ev.stopPropagation();

　　注意舊ie的方法：ev.cancelBubble = true;

　　5六、簡述一下Sass、Less，且說明區別？他們是動態的樣式語言，是CSS預處理器,CSS上的一種抽象層。他們是一種特殊的語法/語言而編譯成CSS。

　　變量符不同，less是@，而Sass是$;

　　Sass支持條件語句，能夠使用if{}else{},for{}循環等等。而Less不支持;

　　Sass是基於Ruby的，是在服務端處理的，而Less是須要引入less.js來處理Less代碼輸出Css到瀏覽器

　　5七、關於中apply()和call()方法的區別？相同點:兩個方法產生的做用是徹底同樣的

　　不一樣點:方法傳遞的參數不一樣

　　.call(this,obj1,obj2,obj3)

　　.apply(this,arguments)

　　apply()接收兩個參數，一個是函數運行的做用域(this)，另外一個是參數數組。

　　call()方法第一個參數與apply()方法相同，但傳遞給函數的參數必須列舉出來。

　　5八、簡述一下JS中的閉包？閉包用的多的兩個做用：讀取函數內部的變量值；讓這些變量值始終保存着(在內存中)。

　　同時須要注意的是：閉包慎用，不濫用，不亂用，因爲函數內部的變量都被保存在內存中，會致使內存消耗大。

　　5九、說說你對this的理解？在中，this一般指向的是咱們正在執行的函數自己，或者是，指向該函數所屬的對象。

　　全局的this → 指向的是Window

　　函數中的this → 指向的是函數所在的對象

　　對象中的this → 指向其自己

　　60、分別闡述split(),slice(),splice(),join()？ join()用於把數組中的全部元素拼接起來放入一個字符串。所帶的參數爲分割字符串的分隔符，默認是以逗號分開。歸屬於Array

　　split()即把字符串分離開，以數組方式存儲。歸屬於Stringstring

　　slice() 方法可從已有的數組中返回選定的元素。該方法並不會修改數組，而是返回一個子數組。若是想刪除數組中的一段元素，應該使用方法 Array.splice()

　　splice() 方法向/從數組中添加/刪除項目，而後返回被刪除的項目。返回的是含有被刪除的元素的數組。

　　6一、事件委託是什麼？讓利用事件冒泡的原理，讓本身的所觸發的事件，讓他的父元素代替執行！

　　6二、如何阻止事件冒泡和默認事件？阻止瀏覽器的默認行爲

　　window.event?window.event.returnValue=false:e.preventDefault();

　　中止事件冒泡

　　window.event?window.event.cancelBubble=true:e.stopPropagation();

　　原生中，return false;只阻止默認行爲，不阻止冒泡，jQuery中的return false;既阻止默認行爲，又阻止冒泡

　　6三、添加刪除替換插入到某個接點的方法？ obj.appendChidl()

　　obj.removeChild()

　　obj.replaceChild()

　　obj.innersetBefore()

　　6四、你用過require.js嗎？它有什麼特性？（1）實現js文件的異步加載，避免網頁失去響應；

　　（2）管理模塊之間的依賴性，便於代碼的編寫和維護。

　　6五、談一下JS中的遞歸函數，而且用遞歸簡單實現階乘？遞歸便是程序在執行過程當中不斷調用自身的編程技巧，固然也必需要有一個明確的結束條件，否則就會陷入死循環。

　　6六、請用正則表達式寫一個簡單的郵箱驗證。 /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;

　　6七、簡述一下你對web性能優化的方案？一、儘可能減小 HTTP 請求

　　二、使用瀏覽器緩存

　　三、使用壓縮組件

　　四、圖片、JS的預載入

　　五、將腳本放在底部

　　六、將樣式文件放在頁面頂部

　　七、使用外部的JS和CSS

　　八、精簡代碼

　　6八、在JS中有哪些會被隱式轉換爲false Undefined、null、關鍵字false、NaN、零、空字符串

　　6九、定時器setInterval有一個有名函數fn1，setInterval（fn1,500）與setInterval（fn1(),500）有什麼區別？第一個是重複執行每500毫秒執行一次，後面一個只執行一次。

　　70、外部JS文件出現中文字符，會出現什麼問題，怎麼解決？會出現亂碼，加charset=」GB2312」;

　　7一、談談瀏覽器的內核，而且說一下什麼是內核？ Trident (['traɪd(ə)nt])--IE，Gecko (['gekəʊ])--Firefox, Presto (['prestəʊ])--opera,webkit—谷歌和Safari

　　瀏覽器內核又能夠分紅兩部分：渲染引擎和 JS 引擎。它負責取得網頁的內容（HTML、、圖像等等）、整理訊息（例如加入 CSS 等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。JS 引擎則是解析語言，執行語言來實現網頁的動態效果。

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

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

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

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

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

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

　　value：屬性值。

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

　　function clone(proto) {

　　function Dummy() { }

　　Dummy.prototype = proto;

　　Dummy.prototype.constructor = Dummy;

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

　　}

　　function (old) {

　　function F() {};

　　F.prototype = old;

　　return new F();

　　}

　　var newObj = (old );

　　7三、寫一個通用的事件偵聽器函數 `// event(事件)工具集，來源：https://github.com/markyun

　　markyun.Event = {

　　// 頁面加載完成後

　　readyEvent : function(fn) {

　　if (fn==null) {

　　fn=document;

　　}

　　var old = window. ;

　　if (typeof window. != 'function') {

　　window. = fn;

　　} else {

　　window. = function() {

　　old ();

　　fn();

　　};

　　}

　　// 視能力分別使用dom0||dom2||IE方式來綁定事件

　　// 參數：操做的元素,事件名稱 ,事件處理程序

　　addEvent : function(element, type, handler) {

　　if (element.addEventListener) {

　　//事件類型、須要執行的函數、是否捕捉

　　element.addEventListener(type, handler, false);

　　} else if (element.attachEvent) {

　　element.attachEvent('on' + type, function() {

　　handler.call(element);

　　});

　　} else {

　　element['on' + type] = handler;

　　}

　　// 移除事件

　　removeEvent : function(element, type, handler) {

　　if (element.removeEnentListener) {

　　element.removeEnentListener(type, handler, false);

　　} else if (element.datachEvent) {

　　element.detachEvent('on' + type, handler);

　　} else {

　　element['on' + type] = null;

　　}

　　// 阻止事件 (主要是事件冒泡，由於IE不支持事件捕獲)

　　stopPropagation : function(ev) {

　　if (ev.stopPropagation) {

　　ev.stopPropagation();

　　} else {

　　ev.cancelBubble = true;

　　}

　　// 取消事件的默認行爲

　　preventDefault : function(event) {

　　if (event.preventDefault) {

　　event.preventDefault();

　　} else {

　　event.returnValue = false;

　　}

　　// 獲取事件目標

　　getTarget : function(event) {

　　return event.target || event.srcElement;

　　// 獲取event對象的引用，取到事件的全部信息，確保隨時能使用event；

　　getEvent : function(e) {

　　var ev = e || window.event;

　　if (!ev) {

　　var c = this.getEvent.caller;

　　while (c) {

　　ev = c.arguments[0];

　　if (ev && Event == ev.constructor) {

　　break;

　　}

　　c = c.caller;

　　}

　　return ev;

　　}

　　};

　　7四、事件、IE與火狐的事件機制有什麼區別？如何阻止冒泡？ 1. 咱們在網頁中的某個操做（有的操做對應多個事件）。例如：當咱們點擊一個按鈕就會產生一個事件。是能夠被偵測到的行爲。

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

　　3. ev.stopPropagation();

　　7五、什麼是閉包（closure），爲何要用？執行say667()後,say667()閉包內部變量會存在,而閉包內部函數的內部變量不會存在.使得的垃圾回收機制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

　　7六、如何判斷一個對象是否屬於某個類？使用instanceof （待完善）

　　if(a instanceof Person){

　　alert('yes');

　　}

　　7七、new操做符具體幹了什麼呢? 一、建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型。

　　二、屬性和方法被加入到 this 引用的對象中。

　　三、新建立的對象由 this 所引用，而且最後隱式的返回 this 。

　　var obj = {};

　　obj.__proto__ = .prototype;

　　.call(obj);

　　7八、JSON 的瞭解 JSON( Notation) 是一種輕量級的數據交換格式。它是基於的一個子集。數據格式簡單, 易於讀寫, 佔用帶寬小

　　{'age':'12', 'name':'back'}

　　7九、js延遲加載的方式有哪些 defer和async、動態建立DOM方式（用得最多）、按需異步載入js

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

　　var module1 = (function(){

　　var _count = 0;

　　var m1 = function(){

　　//...

　　};

　　var m2 = function(){

　　//...

　　};

　　return {

　　m1 : m1,

　　m2 : m2

　　};

　　})();

　　8一、異步加載的方式 (1) defer，只支持IE

　　(2) async：

　　(3) 建立，插入到DOM中，加載完畢後callBack

　　documen.write和 innerHTML的區別

　　document.write只能重繪整個頁面

　　innerHTML能夠重繪頁面的一部分

　　8二、告訴我答案是多少？ (function(x){

　　delete x;

　　alert(x);

　　})(1+5);

　　函數參數沒法delete刪除，delete只能刪除經過for in訪問的屬性。

　　固然，刪除失敗也不會報錯，因此代碼運行會彈出「1」。

　　8三、JS中的call()和apply()方法的區別？例子中用 add 來替換 sub，add.call(sub,3,1) == add(3,1) ，因此運行結果爲：alert(4);

　　注意：js 中的函數實際上是對象，函數名是對 Function 對象的引用。

　　function add(a,b){

　　alert(a+b);

　　}

　　function sub(a,b){

　　alert(a-b);

　　}

　　add.call(sub,3,1);

　　8四、Jquery與jQuery UI 有啥區別？ *jQuery是一個js庫，主要提供的功能是選擇器，屬性修改和事件綁定等等。

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

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

　　8五、jquery 中如何將數組轉化爲json字符串，而後再轉化回來？ jQuery中沒有提供這個功能，因此你須要先編寫兩個jQuery的擴展：

　　$.fn.stringifyArray = function(array) {

　　return JSON.stringify(array)

　　}

　　$.fn.parseArray = function(array) {

　　return JSON.parse(array)

　　}

　　而後調用：

　　$("").stringifyArray(array)

　　8六、中的做用域與變量聲明提高？其餘部分

　　（HTTP、正則、優化、重構、響應式、移動端、團隊協做、SEO、UED、職業生涯）

　　*基於Class的選擇性的性能相對於Id選擇器開銷很大，由於需遍歷全部DOM元素。

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

　　好比：var str=$("a").attr("href");

　　*for (var i = size; i < arr.length; i++) {}

　　for 循環每一次循環都查找了數組 (arr) 的.length 屬性，在開始循環的時候設置一個變量來存儲這個數字，可讓循環跑得更快：

　　for (var i = size, length = arr.length; i < length; i++) {}

　　8七、前端開發的優化問題（看雅虎14條性能優化原則）。（1）減小http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN託管，data緩存，圖片服務器。

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

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

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

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

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

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

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

　　8八、http狀態碼有那些？分別表明是什麼意思？ 100-199 用於指定客戶端應相應的某些動做。

　　200-299 用於表示請求成功。

　　300-399 用於已經移動的文件而且常被包含在定位頭信息中指定新的地址信息。

　　400-499 用於指出客戶端的錯誤。

　　400 語義有誤，當前請求沒法被服務器理解。

　　401 當前請求須要用戶驗證

　　403 服務器已經理解請求，可是拒絕執行它。

　　500-599 用於支持服務器錯誤。

　　503 – 服務不可用

　　8九、一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？（流程說的越詳細越好）要熟悉先後端的通訊流程，最好把動態網站的背後細節也介紹一遍

　　8、流行框架一、JQuery的源碼看過嗎？能不能簡單概況一下它的實現原理？考察學習知識的態度，是否僅僅是停留在使用層面，要知其然知其因此然

　　二、jQuery.fn的init方法返回的this指的是什麼對象？爲何要返回this？ this執行init構造函數自身，其實就是jQuery實例對象，返回this是爲了實現jQuery的鏈式操做

　　三、 jquery中如何將數組轉化爲json字符串，而後再轉化回來？ $.parseJSON('{"name":"John"}');

　　四、 jQuery 的屬性拷貝(extend)的實現原理是什麼，如何實現深拷貝？遞歸賦值

　　五、 jquery.extend 與 jquery.fn.extend的區別？ Jquery.extend用來擴展jQuery對象自己；jquery.fn.extend用來擴展jQuery實例

　　六、談一下Jquery中的bind(),live(),delegate(),on()的區別？七、JQuery一個對象能夠同時綁定多個事件，這是如何實現的？能夠同時綁定多個事件，低層實現原理是使用addEventListner與attachEvent兼容處理作事件註冊

　　十、 Jquery與jQuery UI有啥區別？ jQuery是操做dom的框架，jQueryUI是基於jQuery作的一個UI組件庫

　　十一、 jQuery和Zepto的區別？各自的使用場景？ jQuery主要用於pc端，固然有對應的jQuerymobile用於移動端，zepto比jQuery更加小巧，主要用於移動端

　　十二、針對 jQuery 的優化方法？優先使用ID選擇器

　　在class前使用tag(標籤名)

　　給選擇器一個上下文

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

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

　　1三、 Zepto的點透問題如何解決？點透主要是因爲兩個div重合，例如：一個div調用show()，一個div調用hide()；這個時候當點擊上面的div的時候就會影響到下面的那個div；

　　解決辦法主要有2種：

　　1.github上有一個叫作fastclick的庫，它也能規避移動設備上click事件的延遲響應，https://github.com/ftlabs/fastclick

　　將它用標籤引入頁面（該庫支持AMD，因而你也能夠按照AMD規範，用諸如require.js的模塊加載器引入），而且在dom ready時初始化在body上，

　　2.根據分析，若是不引入其它類庫，也不想本身按照上述fastclcik的思路再開發一套東西，須要1.一個優先於下面的「divClickUnder」捕獲的事件；2.而且經過這個事件阻止掉默認行爲（下面的「divClickUnder」對click事件的捕獲，在ios的safari，click的捕獲被認爲和滾屏、點擊輸入框彈起鍵盤等同樣，是一種瀏覽器默認行爲，便可以被event.preventDefault()阻止的行爲）。

　　十二、知道各類JS框架(Angular, Backbone, Ember, React, Meteor, Knockout...)麼? 能講出他們各自的優勢和缺點麼? 知識面的寬度，流行框架要多多熟悉

　　1三、Underscore 對哪些 JS 原生對象進行了擴展以及提供了哪些好用的函數方法？ Underscore的熟悉程度

　　1四、使用過angular嗎？angular中的過濾器是幹什麼用的在表達式中轉換數據

姓名爲 {{ lastName | uppercase }}

　　currency，是什麼過濾器——格式化數字爲貨幣格式，單位是$符。

　　9、移動APP開發一、移動端最小觸控區域是多大？移動端的點擊事件的有延遲，時間是多久，爲何會有？怎麼解決這個延時？（click 有 300ms 延遲,爲了實現safari的雙擊事件的設計，瀏覽器要知道你是否是要雙擊操做。）

　　10、NodeJs 一、對Node的優勢和缺點提出了本身的見解： *（優勢）由於Node是基於事件驅動和無阻塞的，因此很是適合處理併發請求，

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

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

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

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

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

　　二、需求：實現一個頁面操做不會整頁刷新的網站，而且能在瀏覽器前進、後退時正確響應。給出你的技術實現方案？至少給出本身的思路（url-hash,能夠使用已有的一些框架history.js等）

　　六、 Node.js的適用場景？ 1)、實時應用：如在線聊天，實時通知推送等等（如socket.io）

　　2)、分佈式應用：經過高效的並行I/O使用已有的數據

　　3)、工具類應用：海量的工具，小到前端壓縮部署（如grunt），大到桌面圖形界面應用程序

　　4)、遊戲類應用：遊戲領域對實時和併發有很高的要求（如網易的pomelo框架）

　　5)、利用穩定接口提高Web渲染能力

　　6)、先後端編程語言環境統一：前端開發人員能夠很是快速地切入到服務器端的開發（如著名的純全棧式MEAN架構）

　　四、(若是會用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering麼? Nodejs相關概念的理解程度

　　七、解釋一下 Backbone 的 MVC 實現方式？流行的MVC架構模式

　　八、什麼是「前端路由」?何時適合使用「前端路由」? 「前端路由」有哪些優勢和缺點? 熟悉先後端通訊相關知識

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

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

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

　　缺點：

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

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

　　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引擎更好）

　　九、對BFC規範的理解？ Formatting Context：指頁面中的一個渲染區域，而且擁有一套渲染規則，他決定了其子元素如何定位，以及與其餘元素的相互關係和做用。

　　三、99%的網站都須要被重構是那本書上寫的？網站重構：應用web標準進行設計（第2版）

　　四、WEB應用從服務器主動推送Data到客戶端有那些方式？ html5 websoket

　　WebSocket經過Flash

　　XHR長時間鏈接

　　XHR Multipart Streaming

　　不可見的

　　< >標籤的長時間鏈接(可跨域)

　　五、加班的見解加班就像借錢，原則應當是------救急不救窮

　　六、平時如何管理你的項目，如何設計突發大規模併發架構？先期團隊必須肯定好全局樣式（globe.css），編碼模式(utf-8) 等

　　編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）；

　　標註樣式編寫人，各模塊都及時標註（標註關鍵樣式調用的地方）；

　　頁面進行標註（例如頁面模塊開始和結束）；

　　CSS跟HTML 分文件夾並行存放，命名都得統一（例如style.css）

　　JS 分文件夾存放命民以該JS 功能爲準英文翻譯；

　　圖片採用整合的 images.png png8 格式文件使用儘可能整合在一塊兒使用方便未來的管理

　　七、那些操做會形成內存泄漏？內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在。

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

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

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

　　八、你說你熱愛前端，那麼應該WEB行業的發展很關注吧？說說最近最流行的一些東西吧？ Node.js、Mongodb、npm、MVVM、MEAN、react、angularjs

　　九、你有了解咱們公司嗎？說說你的認識？由於我想去阿里，因此我針對阿里的說

　　最羨慕就是在雙十一購物節，350.19億元，每分鐘支付79萬筆。海量數據，竟然無一漏單、無一故障。太厲害了。

　　十、移動端（好比：Android IOS）怎麼作好用戶體驗? 融入本身的設計理念，注重用戶體驗，選擇合適的技術

　　十一、你所知道的頁面性能優化方法有那些？壓縮、合併，減小請求，代碼層析優化。。。

　　十二、除了前端之外還了解什麼其它技術麼？你最最厲害的技能是什麼？知識面寬度，最好熟悉一些後臺語言，好比php，展示出本身的技術兩點

　　1三、AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）規範區別？ 1四、談談你認爲怎樣作能使項目作的更好？考慮問題的深刻，不只僅停留在完成任務上，要精益求精

　　1五、你對前端界面工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？表現出對前端的認同與興趣，關注相關技術前沿

　　1六、php中下面哪一個函數能夠打開一個文件，以對文件進行讀和寫操做？ A.fget(); B.file_open(); C.fopen(); D.open_file();

　　1七、php中rmdir能夠直接刪除文件夾嗎？該目錄必須是空的，並且要有相應的權限--來自api A.任何文件夾均可以刪除 B.空文件夾能夠刪除

　　C.有權限的任何文件夾均可以刪除 D.有權限的空文件夾能夠刪除

　　1八、phpinset和empty的區別，舉例說明一、empty函數

　　用途：檢測變量是否爲空

　　判斷：若是 var 是非空或非零的值，則 empty() 返回 FALSE。換句話說，""、0、"0"、NULL、FALSE、array()、var $var; 以及沒有任何屬性的對象都將被認爲是空的，若是 var 爲空，則返回 TRUE。注意：empty() 只檢測變量，檢測任何非變量的東西都將致使解析錯誤。換句話說，後邊的語句將不會起做用;

　　二、isset函數

　　用途：檢測變量是否設置

　　判斷：檢測變量是否設置，而且不是 NULL。若是已經使用 unset() 釋放了一個變量以後，它將再也不是 isset()。若使用 isset() 測試一個被設置成 NULL 的變量，將返回 FALSE。同時要注意的是一個NULL 字節（"\0"）並不等同於 PHP 的 NULL 常數。

　　1九、php中$_SERVER變量中如何獲得當前執行腳本路勁

　　20、寫一個php函數，要求兩個日期字符串的天數差，如2012-02-05~2012-03-06的日期差數 2一、一個衣櫃中放了許多雜亂的襯衫，若是讓你去整理一下，使得更容易找到你想要的衣服；你會怎麼作？請寫出你的作法和思路？ 2二、如何優化網頁加載速度？ 1.減小css，js文件數量及大小(減小重複性代碼，代碼重複利用)，壓縮CSS和Js代碼

　　2.圖片的大小

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

　　4.減小http請求數

　　5.使用外部 Js 和 CSS

　　2三、工做流程，你怎麼來實現頁面設計圖，你認爲前端應該如何高質量完成工做? 熟悉相關設計規範，本身總結的一些經驗

　　2四、介紹項目經驗、合做開發、獨立開發。團隊協做，我的能力。實踐經驗

　　2五、開發過程當中遇到困難，如何解決。考察解決問題的能力

　　2六、對前端界面工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？前端是最貼近用戶的程序員，比後端、數據庫、產品經理、運營、安全都近。

　　一、實現界面交互

　　二、提高用戶體驗

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

　　前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好，