前端面試題匯總

　　　前端面試題匯總 一、HTML和CSS 1、你做的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什么? IE: trident內核

　　Firefox：gecko內核

　　Safari:webkit內核

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

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

　　2、每個HTML文件里開頭都有個很重要的東西，Doctype，知道這是干什么的嗎？ 聲明位于文檔中的最前面的位置，處于標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規范。（重點：告訴瀏覽器按照何種規范解析頁面）

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

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

　　在寫程序時我們也會經常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤其是新功能不兼容舊功能時。遇到這種問題時的一個常見做法是增加參數和分支，即當某個參數為真時，我們就使用新功能，而如果這個參數 不為真時，dd就使用舊功能，這樣就能不破壞原有的程序，又提供新功能。IE6也是類似這樣做的，它將DTD當成了這個“參數”，因為以前的頁面大家都不會去寫DTD，所以IE6就假定 如果寫了DTD，就意味著這個頁面將采用對CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。

　　區別：

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

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

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

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

　�。ㄟ�有很多，答出什么不重要，關鍵是看他答出的這些是不是自己經驗遇到的，還是說都是看文章看的，甚至完全不知道。）

　　4、div+css的布局較table布局有什么優點？ 改版的時候更方便 只要改css文件。

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

　　表現與結構相分離。

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

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

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

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

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

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

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

　　區別：優雅降級是從復雜的現狀開始，并試圖減少用戶體驗的供給，而漸進增強則是從一個非�；�礎的，能夠起作用的版本開始，并不斷擴充，以適應未來環境的需要。降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶。

　　“優雅降級”觀點

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

　　在這種設計范例下，舊版的瀏覽器被認為僅能提供“簡陋卻無妨 (poor, but passable)” 的瀏覽體驗。你可以做一些小的調整來適應某個特定的瀏覽器。但由于它們并非我們所關注的焦點，因此除了修復較大的錯誤之外，其它的差異將被直接忽略。

　　“漸進增強”觀點

　　“漸進增強”觀點則認為應關注于內容本身。

　　內容是我們建立網站的誘因。有的網站展示它，有的則收集它，有的尋求，有的操作，還有的網站甚至會包含以上的種種，但相同點是它們全都涉及到內容。這使得“漸進增強”成為一種更為合理的設計范例。這也是它立即被 Yahoo! 所采納并用以構建其“分級式瀏覽器支持 (Graded Browser Support)”策略的原因所在。

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

　　7、為什么利用多個域名來存儲網站資源會更有效？ CDN緩存更方便

　　突破瀏覽器并發限制

　　節約cookie帶寬

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

　　防止不必要的安全問題

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

　　9、請描述一下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僅僅是為了在本地“存儲”數據而生。

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

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

　　<  src =”js.js”>

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

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

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

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

　　11、知道的網頁制作會用到的圖片格式有哪些？ png-8，png-24，jpeg，gif，svg。

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

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

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

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

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

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

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

　　如果為幻燈片、相冊等，可以使用圖片預加載技術，將當前展示圖片的前一張和后一張優先下載。

　　如果圖片為css圖片，可以使用CSSsprite，SVGsprite，Iconfont、 64等技術。

　　如果圖片過大，可以使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提高用戶體驗。

　　如果圖片展示區域小于圖片的真實大小，則因在服務器端根據業務需要先行進行圖片壓縮，圖片壓縮后大小與展示一致。

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

　　html本身是沒有表現的，我們看到

 

 

　　屏幕閱讀器（如果訪客有視障）會完全根據你的標記來“讀”你的網頁.

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

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

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

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

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

　　過去你可能還沒有考慮搜索引擎的爬蟲也是網站的“訪客”,但現在它們他們實際上是極其寶貴的用戶.沒有他們的話,搜索引擎將無法索引你的網站,然后一般用戶將很難過來訪問.

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

　　因此,如果頁面文件的標題被標記,而不是,那么這個頁面在搜索結果的位置可能會比較靠后.除了提升易用性外,語義標記有利于正確使用CSS和 ,因為其本身提供了許多“鉤鉤”來應用頁面的樣式與行為.

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

　　便于團隊開發和維護

　　W3C給我們定了一個很好的標準，在團隊中大家都遵循這個標準，可以減少很多差異化的東西，方便開發和維護，提高開發效率，甚至實現模塊化開發。

　　16、談談以前端角度出發做好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（“沖浪”）。其它網站到你的網站的鏈接越多，你也就會獲得更多的訪問量。更重要的是，你的網站的外部鏈接數越多，會被搜索引擎認為它的重要性越大，從而給你更高的排名。

　　合理的標簽使用

　　17、有哪項方式可以對一個DOM設置它的CSS樣式？　 外部樣式表，引入一個外部css文件

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

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

　　18、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。與樣式定義在文件中的先后順序有關，即是后面的覆蓋前面的，與在

中的先后關系無關。

　　19、CSS中可以通過哪些屬性定義，使得一個DOM元素不顯示在瀏覽器可視范圍內？ 最基本的：

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

　　技巧性：

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

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

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

　　示例如下：

　　#test       {

　　width:300px;

　　height:300px;

　　background-color:blue;      /*firefox*/

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

　　background-color:yellow;    /*ie8*/

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

　　_background-color:orange;       /*ie6*/    }

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

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

　　@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }       /*chrome and safari*/ 22、請用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;

　　}

　　} 24、行內元素和塊級元素的具體區別是什么？行內元素的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元素（擁有內在尺寸，可設置高寬，但不會自動換行），有哪些？

　

　　25、什么是外邊距重疊？重疊的結果是什么？ 外邊距重疊就是margin-collapse。

　　在CSS當中，相鄰的兩個盒子（可能是兄弟關系也可能是祖先關系）的外邊距可以結合成一個單獨的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結合成的外邊距稱為折疊外邊距。

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

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

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

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

　　26、rgba()和opacity的透明效果有什么不同？ rgba()和opacity都能實現透明效果，但最大的不同是opacity作用于元素，以及元素內的所有內容的透明度，

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

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

　　水平方向：letter-spacing

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

　　答案:可以用于消除inline-block元素間的換行符空格間隙問題。

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

　　#div1{

　　background-color:#6699FF;

　　width:200px;

　　height:200px;

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

　　top: 50%;

　　left: 50%;

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

　　margin-left: -100px;

　　}

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

　　#div1{

　　width: 200px;

　　height: 200px;

　　background-color: #6699FF;

　　margin:auto;

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

　　left: 0;

　　top: 0;

　　right: 0;

　　bottom: 0;

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

　#container     //的容器設置如下

　　{

　　display:table-cell;

　　text-align:center;

　　vertical-align:middle;

　　} 29、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不一致。

　　31、Sass、LESS是什么？大家為什么要使用他們？ 他們是CSS預處理器。他是CSS上的一種抽象層。他們是一種特殊的語法/語言編譯成CSS。

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

　　為什么要使用它們？

　　結構清晰，便于擴展。

　　可以方便地屏蔽瀏覽器私有語法差異。這個不用多說，封裝對瀏覽器語法差異的重復處理，減少無意義的機械勞動。

　　可以輕松實現多重繼承。

　　完全兼容 CSS 代碼，可以方便地應用到老項目中。LESS 只是在 CSS 語法上做了擴展，所以老的 CSS 代碼也可以與 LESS 代碼一同編譯。

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

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

　　即是，使用CSS display:none屬性后，HTML元素（對象）的寬度、高度等各種屬性值都將“丟失”;而使用visibility:hidden屬性后，HTML元素（對象）僅僅是在視覺上看不見（完全透明），而它所占據的空間位置仍然存在。

　　34、CSS中 和@import的區別是： 屬于html標簽，而@import是CSS中提供的

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

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

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

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

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

　　36、為什么要初始化樣式？ 由于瀏覽器兼容的問題，不同的瀏覽器對標簽的默認樣式值不同，若不初始化會造成不同瀏覽器之間的顯示差異

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

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

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

　　38、html語義化是什么？ 當頁面樣式加載失敗的時候能夠讓頁面呈現出清晰的結構

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

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

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

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

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

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

　　2. 所有標簽的元素和屬性的名字都必須使用小寫

　　3. 所有的 標記都必須合理嵌套

　　4. 所有的屬性必須用引號 "" 括起來

　　5. 把所有 < 和 & 特殊符號用編碼表示

　　6. 給所有屬性賦一個值

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

　　8. 圖片必須有說明文字

　　42、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圖片

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

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

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

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

　　45、前端頁面有哪三層構成，分別是什么?作用是什么? 答：結構層 Html 表示層 CSS 行為層 js。

　　46、Doctype作用? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?     （1）、 聲明位于文檔中的最前面，處于標簽之前。告知瀏覽器的解析器，用什么文檔類型 規范來解析這個文檔。

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

　�。�3）、在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。

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

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

 

 
 
 

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

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

　　49、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;相對定位

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

　　left:50%;

　　top:50%;

　　}

　　51、瀏覽器的內核分別是什么?經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用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和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屬性.

　　* （條件注釋）缺點是在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 {}

　　52、列出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 屬性的值。

　　53、absolute的containing block計算方式跟正常流有什么不同？ 54、position跟display、margin collapse、overflow、float這些特性相互疊加后會怎么樣？ 55、對WEB標準以及W3C的理解與認識 標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外 鏈css和js腳本、結構行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件，容易維 護、改版方便，不需要變動頁面內容、提供打印版本而不需要復制內容、提高網站易用性；

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

　　57、瀏覽器標準模式和怪異模式之間的區別是什么? 盒子模型 渲染模式的不同

　　使用 window.top.document.compatMode 可顯示為什么模式

　　58、CSS中可以通過哪些屬性定義，使得一個DOM元素不顯示在瀏覽器可視范圍內？

　　

　　最基本的：

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

　　技巧性：

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

　　59、超鏈接訪問過后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;

　　background-color:blue;      /*firefox*/

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

　　background-color:yellow\0;    /*ie8*/

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

　　_background-color:orange;       /*ie6*/    }

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

　　@media all and (min-width:0px){ #test {background-color:black\0;} }  /*opera*/

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

　　62、請用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;

　　}

　　}

　　63、行內元素和塊級元素的具體區別是什么？行內元素的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元素（擁有內在尺寸，可設置高寬，但不會自動換行），有哪些？

　

　　64、什么是外邊距重疊？重疊的結果是什么？

　　答案：

　　外邊距重疊就是margin-collapse。

　　在CSS當中，相鄰的兩個盒子（可能是兄弟關系也可能是祖先關系）的外邊距可以結合成一個單獨的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結合成的外邊距稱為折疊外邊距。

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

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

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

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

　　65、rgba()和opacity的透明效果有什么不同？

　　rgba()和opacity都能實現透明效果，但最大的不同是opacity作用于元素，以及元素內的所有內容的透明度，

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

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

　　垂直方向：line-height

　　水平方向：letter-spacing

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

　　答案:可以用于消除inline-block元素間的換行符空格間隙問題。

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

　　#div1{

　　background-color:#6699FF;

　　width:200px;

　　height:200px;

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

　　top: 50%;

　　left: 50%;

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

　　margin-left: -100px;

　　}

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

　　#div1{

　　width: 200px;

　　height: 200px;

　　background-color: #6699FF;

　　margin:auto;

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

　　left: 0;

　　top: 0;

　　right: 0;

　　bottom: 0;

　　}

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

　　#container     //的容器設置如下

　　{

　　display:table-cell;

　　text-align:center;

　　vertical-align:middle;

　　}

　　68、描述一個"reset"的CSS文件并如何使用它。知道normalize.css嗎？你了解他們的不同之處？　

　　重置樣式非常多，凡是一個前端開發人員肯定有一個常用的重置CSS文件并知道如何使用它們。他們是盲目的在做還是知道為什么這么做呢？原因是不同的瀏覽器對一些元素有不同的默認樣式，如果你不處理，在不同的瀏覽器下會存在必要的風險，或者更有戲劇性的性發生。

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

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

　　69、說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 ;

　　71、css優先級算法如何計算？ !important >  id > class > 標簽

　　!important 比 內聯優先級高

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

　　*以最后載入的樣式為準;

　　72、b標簽和strong標簽,i標簽和em標簽的區別？ 后者有語義，前者則無。

　　73、有那些行內元素、有哪些塊級元素、盒模型？ 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 – 定義變量

　　2、塊級元素

　　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）。

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

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

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

　　77、.說說display屬性有哪些？可以做什么？   display:block行內元素轉換為塊級元素

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

　　display:inline-block轉為內聯元素

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

　　不可繼承 ：border padding margin width height ;

　　79、css優先級算法如何計算？   !important >  id > class > 標簽

　　!important 比 內聯優先級高

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

　　* 以最后載入的樣式為準;

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

　　81、前端頁面由哪三層構成，分別是什么？作用是什么？    結構層 Html 表示層 CSS 行為層 js

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

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

　　隱式（== – ===）

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

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

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

　　5、事件綁定和普通事件有什么區別 事件綁定是指把事件注冊到具體的元素之上，普通事件指的是可以用來注冊的事件

　　6、IE和DOM事件流的區別 1.執行順序不一樣、

　　2.參數不一樣

　　3.事件加不加on

　　4.this指向問題

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

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

　　Var target = ev.srcElement||ev.target

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

　　.apply(this,arguments)

　　9、b繼承a的方法 10、 this指針、閉包、作用域 11、事件委托是什么 讓利用事件冒泡的原理，讓自己的所觸發的事件，讓他的父元素代替執行！

　　12、閉包是什么，有什么特性，對頁面有什么影響 閉包就是能夠讀取其他函數內部變量的函數。

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

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

　　obj.innersetBefore

　　obj.replaceChild

　　obj.removeChild

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

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

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

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

　　4、 前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?

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

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

　　Underscore封裝了常用的 對象操作方法，用于提高開發效率。

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

　　5、 簡述一下 Handlebars 的基本用法？ 沒有用過的話說出它是干什么的即可

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

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

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

　　9、 我們給一個dom同時綁定兩個點擊事件，一個用捕獲，一個用冒泡，你來說下會執行幾次事件，然后會先執行冒泡還是捕獲 對兩種事件模型的理解

　　10、實現一個函數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;

　　}

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

　　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 12、小賢是一條可愛的小狗(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();

13、下面這個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);

　　} 14、編寫一個 函數，輸入指定類型的選擇器(僅需支持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;

　　} 15、請評價以下代碼并給出改進意見。   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;

　　}

　　} 16、給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中，解析器在向執行環境中加載數據時，對函數聲明和函數表達式并非是一視同仁的，解析器會率先讀取函數聲明，并使其在執行任何代碼之前可用（可以訪問），至于函數表達式，則必須等到解析器執行到它所在的代碼行，才會真正被解析執行。

　　17、定義一個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]) 。

　　18、在 中什么是偽數組？如何將偽數組轉化為標準數組？ 偽數組（類數組）：無法直接調用數組方法或期望length屬性有什么特殊的行為，但仍可以對真正數組遍歷方法來遍歷它們。典型的是函數的argument參數，還有像調用getElementsByTagName,document.childNodes之類的,它們都返回NodeList對象都屬于偽數組�？梢允褂肁rray.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);

　　}; 19、對作用域上下文和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();//函數執行

　　}

　　});

　　}

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

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

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

　　3. mousemove時，需要通過event.clientX和clientY獲取拖拽位置，并實時更新位置

　　4. mouseup時，拖拽結束

　　5. 需要注意瀏覽器邊界的情況

　　22、請實現如下功能

　　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();

　　})();

23、說出以下函數的作用是？空白區域應該填寫什么？ //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

　　24、 作用鏈域? 理解變量和函數的訪問范圍和生命周期，全局作用域與局部作用域的區別， 中沒有塊作用域，函數的嵌套形成不同層次的作用域，嵌套的層次形成鏈式形式，通過作用域鏈查找屬性的規則需要深入理解。

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

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

　　27、 關于事件，IE與火狐的事件機制有什么區別？ 如何阻止冒泡？ [1].在IE中,事件對象是作為一個全局變量來保存和維護的.所有的瀏覽器事件,不管是用戶觸發的，還是其他事件,都會更新window.event對象.所以在代碼中，只要調用window.event就可以獲取事件對象， 再event.srcElement就可以取得觸發事件的元素進行進一步處理.

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

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

　　28、 什么是閉包（closure），為什么要用它？ 簡單的理解是函數的嵌套形成閉包，閉包包括函數本身已經它的外部作用域

　　使用閉包可以形成獨立的空間，延長變量的生命周期，報存中間狀態值

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

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

　　31、new操作符具體干了什么呢? 1、創建一個空對象，并且 this 變量引用該對象，同時還繼承了該函數的原型。

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

　　3、新創建的對象由 this 所引用，并且最后隱式的返回 this 。

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

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

　　34、對JSON的了解？ 輕量級數據交互格式，可以形成復雜的嵌套格式，解析非常方便

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

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

　　方案三：動態創建< >標簽

　　方案四：AJAX eval（使用AJAX得到腳本內容，然后通過eval_r( http.responseText)來運行腳本）

　　方案五： 方式

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

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

　　38、requireJS的核心原理是什么？（如何動態加載的？如何避免多次加載的？如何 緩存的？） 核心是js的加載模塊，通過正則匹配模塊以及模塊的依賴關系，保證文件加載的先后順序，根據文件的路徑對加載過的文件做了緩存

　　39、讓你自己設計實現一個requireJS，你會怎么做？ 核心是實現js的加載模塊，維護js的依賴關系，控制好文件加載的先后順序

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

　　41、ECMA 6 怎么寫class么，為什么會出現class這種東西? class Point {

　　constructor(x, y) {

　　this.x = x;

　　this.y = y;

　　}

　　toString() {

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

　　}

　　}

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

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

　　方案三：動態創建< >標簽

　　方案四：AJAX eval（使用AJAX得到腳本內容，然后通過eval_r( http.responseText)來運行腳本）

　　方案五： 方式

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

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

　　44、DOM操作——怎樣添加、移除、移動、復制、創建和查找節點? （1）創建新節點

　　createDocumentFragment()    //創建一個DOM片段

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

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

　�。�2）添加、移除、替換、插入

　　appendChild()

　　removeChild()

　　replaceChild()

　　insertBefore()

　�。�3）查找

　　getElementsByTagName()    //通過標簽名稱

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

　　getElementById()    //通過元素Id，唯一性

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

　　46、數組和對象有哪些原生方法，列舉一下？ 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( ) 指定對象的原始值

　　47、JS 怎么實現一個類。怎么實例化這個類 嚴格來講js中并沒有類的概念，不過js中的函數可以作為構造函數來使用，通過new來實例化，其實函數本身也是一個對象。

　　48、 中的作用域與變量聲明提升？ 理解 的預解析機制，js的運行主要分兩個階段：js的預解析和運行，預解析階段所有的變量聲明和函數定義都會提前，但是變量的賦值不會提前

　　49、如何編寫高性能的 ？ 使用 DocumentFragment 優化多次 append

　　通過模板元素 clone ，替代 createElement

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

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

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

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

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

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

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

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

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

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

　　51、 對象的幾種創建方式？ 1. 工廠模式

　　2. 構造函數模式

　　3. 原型模式

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

　　5. 動態原型模式

　　6. 寄生構造函數模式

　　7. 穩妥構造函數模式

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

　　2. 借用構造函數繼承

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

　　4. 原型式繼承

　　5. 寄生式繼承

　　6. 寄生組合式繼承

　　53、eval是做什么的？ 1. 它的功能是把對應的字符串解析成JS代碼并運行

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

　　54、 原型，原型鏈 ? 有什么特點？ 1. 原型對象也是普通的對象，是對象一個自帶隱式的 __proto__ 屬性，原型也有可能有自己的原型，如果一個原型對象的原型不為 null 的話，我們就稱之為原型鏈

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

　　55、事件、IE與火狐的事件機制有什么區別？ 如何阻止冒泡？ 1. 我們在網頁中的某個操作（有的操作對應多個事件）。例如：當我們點擊一個按鈕就會產生一個事件。是可以被 偵測到的行為

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

　　3. ev.stopPropagation();

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

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

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

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

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

　　57、關于 中apply()和call()方法的區別？ 相同點:兩個方法產生的作用是完全一樣的

　　不同點:方法傳遞的參數不同

　　.call(this,obj1,obj2,obj3)

　　.apply(this,arguments)

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

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

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

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

　　59、說說你對this的理解？ 在 中，this通常指向的是我們正在執行的函數本身，或者是，指向該函數所屬的對象。

　　全局的this → 指向的是Window

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

　　對象中的this → 指向其本身

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

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

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

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

　　61、事件委托是什么？ 讓利用事件冒泡的原理，讓自己的所觸發的事件，讓他的父元素代替執行！

　　62、如何阻止事件冒泡和默認事件？ 阻止瀏覽器的默認行為

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

　　停止事件冒泡

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

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

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

　　obj.removeChild()

　　obj.replaceChild()

　　obj.innersetBefore()

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

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

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

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

　　67、簡述一下你對web性能優化的方案？     1、盡量減少 HTTP 請求

　　2、使用瀏覽器緩存

　　3、使用壓縮組件

　　4、圖片、JS的預載入

　　5、將腳本放在底部

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

　　7、使用外部的JS和CSS

　　8、精簡代碼

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

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

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

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

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

　　72、 原型，原型鏈 ? 有什么特點？ *  原型對象也是普通的對象，是對象一個自帶隱式的 __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 );

　　73、寫一個通用的事件偵聽器函數 `// 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;

　　}

　　};

　　74、事件、IE與火狐的事件機制有什么區別？ 如何阻止冒泡？  1. 我們在網頁中的某個操作（有的操作對應多個事件）。例如：當我們點擊一個按鈕就會產生一個事件。是可以被 偵測到的行為。

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

　　3.  ev.stopPropagation();

　　75、什么是閉包（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

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

　　if(a instanceof Person){

　　alert('yes');

　　}

　　77、new操作符具體干了什么呢?   1、創建一個空對象，并且 this 變量引用該對象，同時還繼承了該函數的原型。

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

　　3、新創建的對象由 this 所引用，并且最后隱式的返回 this 。

　　var obj  = {};

　　obj.__proto__ = .prototype;

　　.call(obj);

　　78、JSON 的了解 JSON( Notation) 是一種輕量級的數據交換格式。它是基于 的一個子集。數據格式簡單, 易于讀寫, 占用帶寬小

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

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

　　80、模塊化怎么做？ 立即執行函數,不暴露私有成員

　　var module1 = (function(){

　　var _count = 0;

　　var m1 = function(){

　　//...

　　};

　　var m2 = function(){

　　//...

　　};

　　return {

　　m1 : m1,

　　m2 : m2

　　};

　　})();

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

　　(2) async：

　　(3) 創建 ，插入到DOM中，加載完畢后callBack

　　documen.write和 innerHTML的區別

　　document.write只能重繪整個頁面

　　innerHTML可以重繪頁面的一部分

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

　　delete x;

　　alert(x);

　　})(1+5);

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

　　當然，刪除失敗也不會報錯，所以代碼運行會彈出“1”。

　　83、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);

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

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

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

　　85、jquery 中如何將數組轉化為json字符串，然后再轉化回來？ jQuery中沒有提供這個功能，所以你需要先編寫兩個jQuery的擴展：

　　$.fn.stringifyArray = function(array) {

　　return JSON.stringify(array)

　　}

　　$.fn.parseArray = function(array) {

　　return JSON.parse(array)

　　}

　　然后調用：

　　$("").stringifyArray(array)

　　86、 中的作用域與變量聲明提升？ 其他部分

　�。℉TTP、正則、優化、重構、響應式、移動端、團隊協作、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++) {}

　　87、前端開發的優化問題（看雅虎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布局慢。

　　88、http狀態碼有那些？分別代表是什么意思？     100-199 用于指定客戶端應相應的某些動作。

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

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

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

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

　　401  當前請求需要用戶驗證

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

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

　　503 – 服務不可用

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

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

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

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

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

　　5、 jquery.extend 與 jquery.fn.extend的區別？ Jquery.extend用來擴展jQuery對象本身；jquery.fn.extend用來擴展jQuery實例

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

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

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

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

　　在class前使用tag(標簽名)

　　給選擇器一個上下文

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

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

　　13、    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()阻止的行為）。

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

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

　　14、使用過angular嗎？angular中的過濾器是干什么用的 在表達式中轉換數據

姓名為 {{ lastName | uppercase }}

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

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

　　十、NodeJs 1、對Node的優點和缺點提出了自己的看法： *（優點）因為Node是基于事件驅動和無阻塞的，所以非常適合處理并發請求，

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

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

　　因此客戶端和服務器端都用同一種語言編寫，這是非常美妙的事情。

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

　　而且缺少足夠多的第三方庫支持�？雌饋�，就像是Ruby/Rails當年的樣子。

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

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

　　2)、分布式應用：通過高效的并行I/O使用已有的數據

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

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

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

　　6)、前后端編程語言環境統一：前端開發人員可以非�？焖俚厍腥氲椒�務器端的開發（如著名的純 全棧式MEAN架構）

　　4、(如果會用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么? Nodejs相關概念的理解程度

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

　　8、 什么是“前端路由”?什么時候適合使用“前端路由”? “前端路由”有哪些優點和缺點? 熟悉前后端通信相關知識

　　7、對Node的優點和缺點提出了自己的看法？ 優點：

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

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

　　缺點：

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

　　2. 缺少足夠多的第三方庫支持�？雌饋�，就像是Ruby/Rails當年的樣子（第三方庫現在已經很豐富了，所以這個缺點可以說不存在了）。

　　十一、前端概括性問題 1、常使用的庫有哪些？常用的前端開發工具？開發過什么應用或組件？ 使用率較高的框架有jQuery、YUI、Prototype、Dojo、Ext.js、Mootools等。尤其是jQuery，超過91%。

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

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

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

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

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

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

　　WebSocket通過Flash

　　XHR長時間連接

　　XHR Multipart Streaming

　　不可見的

　　< >標簽的長時間連接(可跨域)

　　5、加班的看法 加班就像借錢，原則應當是------救急不救窮

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

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

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

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

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

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

　　圖片采用整合的 images.png png8 格式文件使用 盡量整合在一起使用方便將來的管理

　　7、那些操作會造成內存泄漏？ 內存泄漏指任何對象在您不再擁有或需要它之后仍然存在。

　　垃圾回收器定期掃描對象，并計算引用了每個對象的其他對象的數量。如果一個對象的引用數量為 0（沒有其他對象引用過該對象），或對該對象的惟一引用是循環的，那么該對象的內存即可回收。

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

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

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

　　9、你有了解我們公司嗎？說說你的認識？ 因為我想去阿里，所以我針對阿里的說

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

　　10、    移動端（比如：Android IOS）怎么做好用戶體驗? 融入自己的設計理念，注重用戶體驗，選擇合適的技術

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

　　12、    除了前端以外還了解什么其它技術么？你最最厲害的技能是什么？ 知識面寬度，最好熟悉一些后臺語言，比如php，展現出自己的技術兩點

　　13、AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）規范區別？ 14、談談你認為怎樣做能使項目做的更好？ 考慮問題的深入，不僅僅停留在完成任務上，要精益求精

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

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

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

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

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

　　用途：檢測變量是否為空

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

　　2、isset函數

　　用途：檢測變量是否設置

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

　　19、php中$_SERVER變量中如何得到當前執行腳本路勁

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

　　2.圖片的大小

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

　　4.減少http請求數

　　5.使用外部 Js 和 CSS

　　23、工作流程，你怎么來實現頁面設計圖，你認為前端應該如何高質量完成工作? 熟悉相關設計規范，自己總結的一些經驗

　　24、介紹項目經驗、合作開發、獨立開發。 團隊協作，個人能力。實踐經驗

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

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

　　1、實現界面交互

　　2、提升用戶體驗

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

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

　　參與項目，快速高質量完成實現效果圖，精確到1px；

　　與團隊成員，UI設計，產品經理的溝通；

　　做好的頁面結構，頁面重構和用戶體驗；

　　處理hack，兼容、寫出優美的代碼格式；

　　針對服務器的優化、擁抱最新前端技術。

　　其它相關的加分項：

　　1. 都使用和了解過哪些編輯器?都使用和了解過哪些日常工具?

　　2. 都知道有哪些瀏覽器內核?開發過的項目都兼容哪些瀏覽器?

　　3. 瀑布流布局或者流式布局是否有了解

　　4. HTML5都有哪些新的API?

　　5. 都用過什么代碼調試工具?

　　6. 是否有接觸過或者了解過重構。

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