前端筆試面試題整理

HTML

1. XHTML和HTML有什麼區別

   HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言
   最主要的不同：

   • XHTML 元素必須被正確地嵌套。
   • XHTML 元素必須被關閉。
   • 標籤名必須用小寫字母。
   • XHTML 文檔必須擁有根元素。

2. 前端頁面有哪三層構成，分別是什麼?作用是什麼?

   • 結構層 Html
   • 表示層 CSS
   • 行爲層 js;

3. 介紹一下你對瀏覽器內核的理解？

   主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。

   • 渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然後會輸出至顯示器或打印機。瀏覽器的內核的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。
   • JS引擎：解析和執行javascript來實現網頁的動態效果。
     最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，內核就傾向於只指渲染引擎。

4. 什麼是語義化的HTML?

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

5. HTML5 爲什麼只需要寫 !DOCTYPE HTML？

   • HTML5 不基於 SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行）；
   • HTML4.01基於SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

6. Doctype作用？標準模式與兼容模式各有什麼區別?

   • !DOCTYPE聲明位於位於HTML文檔中的第一行，處於html 標籤之前。告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。
   • 標準模式的排版 和JS運作模式都是以該瀏覽器支持的最高標準運行。
     在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行爲以防止站點無法工作。

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

   • HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。
     
     1. 繪畫 canvas
     2. 用於媒介回放的 video 和 audio 元素
     3. 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
     4. sessionStorage 的數據在瀏覽器關閉後自動刪除
     5. 語意化更好的內容元素，比如 article、footer、header、nav、section
        表單控件，calendar、date、time、email、url、search
     6. 新的技術webworker, websockt, Geolocation
   • 移除的元素
     
     1. 純表現的元素：basefont，big，center，font, s，strike，tt，u；
     2. 對可用性產生負面影響的元素：frame，frameset，noframes；
   • 支持HTML5新標籤：
     IE8/IE7/IE6支持通過document.createElement方法產生的標籤，
     可以利用這一特性讓這些瀏覽器支持HTML5新標籤，
     瀏覽器支持新標籤後，還需要添加標籤默認的樣式.
     當然也可以直接使用成熟的框架、比如html5shim;
     
   • 如何區分HTML5：
     DOCTYPE聲明\新增的結構元素\功能元素

8. 請描述一下 cookies，sessionStorage 和 localStorage 的區別？

   • cookie在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會。cookie數據大小不能超過4k。sessionStorage和localStorage 比cookie大得多，可以達到5M或更大。
   • sessionStorage和localStorage的存儲空間更大；
     sessionStorage和localStorage有更多豐富易用的接口；
     sessionStorage和localStorage各自獨立的存儲空間；

9. 如何實現瀏覽器內多個標籤頁之間的通信?

   調用localstorge、cookies等本地存儲方式

10. HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？

    • 在用戶沒有與因特網連接時，可以正常訪問站點或應用，在用戶與因特網連接時，更新用戶機器上的緩存文件。
    • 原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之後當網絡在處於離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示。
    • 如何使用：
      
      1. 頁面頭部像下面一樣加入一個manifest的屬性；
      2. 在cache.manifest文件的編寫離線存儲的資源；
      3. 在離線狀態時，操作window.applicationCache進行需求實現。

11. 瀏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的呢？

    1. 在線的情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件。
       
       • 如果是第一次訪問app，那麼瀏覽器就會根據manifest文件的內容下載相應的資源並且進行離線存儲。
       • 如果已經訪問過app並且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面,然後瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發生改變，就不做任何操作，如果文件改變了，那麼就會重新下載文件中的資源並進行離線存儲。
    2. 離線的情況下，瀏覽器就直接使用離線存儲的資源。

12. iframe有那些缺點？

    • iframe會阻塞主頁面的Onload事件；
    • 搜索引擎的檢索程序無法解讀這種頁面，不利於SEO;
    • iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的並行加載。
    • 使用iframe之前需要考慮這兩個缺點。
      如果需要使用iframe，最好是通過javascript動態給iframe添加src屬性值，這樣可以繞開以上兩個問題。

13. 常見的瀏覽器內核有哪些？

    • Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
    • Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
    • Presto內核：Opera7及以上。 [Opera內核原爲：Presto，現爲：Blink;]
    • Webkit內核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

14. Label的作用是什麼？是怎麼用的？

    • label標籤來定義表單控制間的關係,當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控件上。

    • <label for="Name">Number:</label>
      <input type="text" name="Name" id="Name"/>
      <label>Date:<input type="text" name="B"/></label>

15. HTML5的form如何關閉自動完成功能？

    給不想要提示的 form 或某個 input 設置爲 autocomplete=off。

16. 如何實現瀏覽器內多個標籤頁之間的通信? (阿里)

    WebSocket、SharedWorker；
    也可以調用localstorge、cookies等本地存儲方式；
    localstorge另一個瀏覽上下文裏被添加、修改或刪除時，它都會觸發一個事件，
    我們通過監聽事件，控制它的值來進行頁面信息通信；
    注意quirks:Safari 在無痕模式下設置localstorge值時會拋出 QuotaExceededError 的異常；

17. webSocket如何兼容低瀏覽器？(阿里)

    Adobe Flash Socket、ActiveX HTMLFile (IE)、基於multipart 編碼發送XHR、基於長輪詢的XHR

18. 頁面可見性（Page Visibility API） 可以有哪些用途？

    通過 visibilityState 的值檢測頁面當前是否可見，以及打開網頁的時間等;
    在頁面被切換到其他後臺進程的時候，自動暫停音樂或視頻的播放；

19. 如何在頁面上實現一個圓形的可點擊區域？

    1、map+area或者svg
    2、border-radius
    3、純js實現 需要求一個點在不在圓上簡單算法、獲取鼠標座標等等

20. 實現不使用 border 畫出1px高的線，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果。

    • <div style="height:1px;overflow:hidden;background:red"></div>

21. title與h1的區別、b與strong的區別、i與em的區別？

    • title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取也有很大的影響；
    • strong是標明重點內容，有語氣加強的含義，使用閱讀設備閱讀網絡時：strong會重讀，而B是展示強調內容。
    • i內容展示爲斜體，em表示強調的文本；

CSS面試題

1. 簡要說一下CSS的元素分類

   • 塊級元素：div,p,h1,form,ul,li;
   • 行內元素 : span,a,label,input,img,strong,em;
   • 常見的空元素：br 、hr、img、input、link、meta
   • 鮮爲人知的是：area、base、col、command、embed、keygen、 param、source、track、wbr

2. CSS隱藏元素的幾種方法（至少說出三種）

   • Opacity:元素本身依然佔據它自己的位置並對網頁的佈局起作用。它也將響應用戶交互;
   • Visibility:與 opacity 唯一不同的是它不會響應任何用戶交互。此外，元素在讀屏軟件中也會被隱藏;
   • Display:display 設爲 none 任何對該元素直接打用戶交互操作都不可能生效。此外，讀屏軟件也不會讀到元素的內容。這種方式產生的效果就像元素完全不存在;
   • Position:不會影響佈局，能讓元素保持可以操作;
   • Clip-path:clip-path 屬性還沒有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，瀏覽器支持度還要低;

3. CSS清除浮動的幾種方法（至少兩種）

   • 使用帶clear屬性的空元素;使用CSS的overflow屬性
   • 使用CSS的:after僞元素；使用鄰接元素處理；

4. CSS居中（包括水平居中和垂直居中）

   內聯元素居中方案

   • 水平居中設置：
     
     1. 行內元素
        設置 text-align:center；
     2. Flex佈局
        設置display:flex;justify-content:center;(靈活運用,支持Chroime，Firefox，IE9+)
   • 垂直居中設置：
     
     1. 父元素高度確定的單行文本（內聯元素）
        設置 height = line-height；
     2. 父元素高度確定的多行文本（內聯元素）
        a:插入 table （插入方法和水平居中一樣），然後設置 vertical-align:middle；
        b:先設置 display:table-cell 再設置 vertical-align:middle；

   塊級元素居中方案

   • 水平居中設置：
     
     1. 定寬塊狀元素
        設置 左右 margin 值爲 auto；
     2. 不定寬塊狀元素
        a:在元素外加入 table 標籤（完整的，包括 table、tbody、tr、td），該元素寫在 td 內，
        然後設置 margin 的值爲 auto；
        b:給該元素設置 displa:inine 方法；
        c:父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left:50%；
   • 垂直居中設置：
     
     • 使用position:absolute（fixed）,設置left、top、margin-left、 - margin-top的屬性;
     • 利用position:fixed（absolute）屬性，margin:auto這個必須不要忘記了;
     • 利用display:table-cell屬性使內容垂直居中;
     • 使用css3的新屬性transform:translate(x,y)屬性;
     • 使用:before元素;

5. 介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不同的？

   1. 有兩種: IE 盒子模型、W3C 盒子模型；
   2. 盒模型: 內容(content)、填充(padding)、邊界(margin)、 邊框(border)；
   3. 區 別: IE的content部分把 border 和 padding計算了進去;

6. CSS選擇符有哪些？哪些屬性可以繼承？

   1. id選擇器（ # myid）
   2. 類選擇器（.myclassname）
   3. 標籤選擇器（div, h1, p）
   4. 相鄰選擇器（h1 + p）
   5. 子選擇器（ul > li）
   6. 後代選擇器（li a）
   7. 通配符選擇器（ * ）
   8. 屬性選擇器（a[rel = “external”]）
   9. 僞類選擇器（a:hover, li:nth-child）
      
      • 可繼承的樣式： font-size ,font-family color, UL LI DL DD DT;
      • 不可繼承的樣式：border ,padding, margin, width ,height ;

7. CSS優先級算法如何計算？

   • 優先級就近原則，同權重情況下樣式定義最近者爲準;
   • 載入樣式以最後載入的定位爲準;
   • 優先級爲:
     !important > id > class > tag important 比 內聯優先級高

8. CSS3新增僞類有那些？

   • 舉例：
     p:first-of-type 選擇屬於其父元素的首個 p元素的每個 p元素。
     p:last-of-type 選擇屬於其父元素的最後 p 元素的每個 p 元素。
     p:only-of-type 選擇屬於其父元素唯一的 p 元素的每個 p 元素。
     p:only-child 選擇屬於其父元素的唯一子元素的每個 p 元素。
     p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個 p 元素。
     :after 在元素之前添加內容,也可以用來做清除浮動。
     :before 在元素之後添加內容
     :enabled
     :disabled 控制表單控件的禁用狀態。
     :checked 單選框或複選框被選中。

   • display有哪些值？說明他們的作用。
     block 塊類型。默認寬度爲父元素寬度，可設置寬高，換行顯示。
     none 缺省值。象行內元素類型一樣顯示。
     inline 行內元素類型。默認寬度爲內容寬度，不可設置寬高，同行顯示。
     inline-block 默認寬度爲內容寬度，可以設置寬高，同行顯示。
     list-item 象塊類型元素一樣顯示，並添加樣式列表標記。
     table 此元素會作爲塊級表格來顯示。
     inherit 規定應該從父元素繼承 display 屬性的值。
     position的值relative和absolute定位原點是？
     absolute
     生成絕對定位的元素，相對於值不爲 static的第一個父元素進行定位。
     fixed （老IE不支持）
     生成絕對定位的元素，相對於瀏覽器窗口進行定位。
     relative
     生成相對定位的元素，相對於其正常位置進行定位。
     static
     默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right z-index 聲明）。
     inherit
     規定從父元素繼承 position 屬性的值。

9. 寫出幾種IE6 BUG的解決方法

   • 雙邊距BUG float引起的 使用display
   • 3像素問題 使用float引起的 使用dislpay:inline -3px
   • 超鏈接hover 點擊後失效 使用正確的書寫順序 link visited hover active
   • Ie z-index問題 給父級添加position:relative
   • Png 透明 使用js代碼 改
   • Min-height 最小高度 ！Important 解決’
   • select 在ie6下遮蓋 使用iframe嵌套
   • 爲什麼沒有辦法定義1px左右的寬度容器（IE6默認的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

10. 對於SASS或是Less的瞭解程度？喜歡那個？

    • Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增加了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。Less 可以運行在 Node 或瀏覽器端。
    • LESS和Sass的主要不同就是他們的實現方式，LESSS是基於JavaScript，是在客戶端處理的。Sass是基於Ruby的，然後是在服務器端處理的。

11. Bootstrap瞭解程度

    來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。特點，排版，插件的使用。

12. 頁面導入樣式時，使用link和@import有什麼區別？

    • link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用於加載CSS;
      頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
    • import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題;

13. 介紹一下CSS的盒子模型？

    有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 pading;
    盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border).

14. CSS 選擇符有哪些？哪些屬性可以繼承？優先級算法如何計算？ CSS3新增僞類有那些？

    id選擇器（ # myid）類選擇器（.myclassname）標籤選擇器（div, h1, p）相鄰選擇器（h1 + p）
    子選擇器（ul > li）後代選擇器（li a）通配符選擇器（ * ）屬性選擇器（a[rel = “external”]）
    僞類選擇器（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 比 內聯優先級高

15. CSS3有哪些新特性？

    新增各種CSS選擇器（: not(.input)：所有class 不是“input”的節點），CSS3實現圓角（border-radius:8px），陰影（box-shadow:10px），多列布局（multi-column layout）
    對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
    transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜，動畫，多背景 rgba

16. absolute的containing block(容器塊)計算方式跟正常流有什麼不同？

    • 無論屬於哪種，都要先找到其祖先元素中最近的 position 值不爲 static 的元素，然後再判斷：
      
      1. 若此元素爲 inline 元素，則 containing block 爲能夠包含這個元素生成的第一個和最後一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形；
      2. 否則,則由這個祖先元素的 padding box 構成。
         如果都找不到，則爲 initial containing block。
    • 補充：
      
      1. static(默認的)/relative：簡單說就是它的父元素的內容框（即去掉padding的部分）
      2. absolute: 向上找最近的定位爲absolute/relative的元素
      3. fixed: 它的containing block一律爲根元素(html/body)，根元素也是initial containing block

17. CSS裏的visibility屬性有個collapse屬性值是幹嘛用的？在不同瀏覽器下以後什麼區別？

    當在表格元素中使用時，此值可刪除一行或一列，但是它不會影響表格的佈局。被行或列佔據的空間會留給其他內容使用。如果此值被用在其他的元素上，會呈現爲 “hidden”。

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

19. 對BFC規範(塊級格式化上下文：block formatting context)的理解？

    （W3C CSS 2.1 規範中的一個概念,它是一個獨立容器，決定了元素如何對其內容進行定位,以及與其他元素的關係和相互作用。）
    一個頁面是由很多個 Box 組成的,元素的類型和 display 屬性,決定了這個 Box 的類型。
    不同類型的 Box,會參與不同的 Formatting Context（決定如何渲染文檔的容器）,因此Box內的元素會以不同的方式渲染,也就是說BFC內部的元素和外部的元素不會互相影響。

20. 請解釋一下爲什麼會出現浮動和什麼時候需要清除浮動？清除浮動的方式

    • 浮動：浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。浮動框不屬於文檔中的普通流，當一個元素浮動之後，不會影響到 塊級框的佈局而只會影響內聯框（通常是文本）的排列，文檔中的普通流就會表現得和浮動框不存在一樣，當浮動框高度超出包含框的時候，也就會出現包含框不會 自動伸高來閉合浮動元素（“高度塌陷”現象）。顧名思義，就是漂浮於普通流之上，像浮雲一樣，但是隻能左右浮動。
      正是因爲浮動的這種特性，導致本屬於普通流中的元素浮動之後，包含框內部由於不存在其他普通流元素了，也就表現出高度爲0（高度塌陷）。在實際佈局中，往往這並不是我們所希望的，所以需要閉合浮動元素，使其包含框表現出正常的高度。
    • 其一，通過在浮動元素的末尾添加一個空元素，設置 clear：both屬性，after僞元素其實也是通過 content 在元素的後面生成了內容爲一個點的塊級元素；
    • 其二，通過設置父元素 overflow 或者display：table 屬性來閉合浮動。

21. 瀏覽器是怎樣解析CSS選擇器的。

    從右到左。

22. 在網頁中的應該使用奇數還是偶數的字體？爲什麼呢？

    偶數,ie6-13px-14px,google12px

23. 你對line-height是如何理解的？

    行高

24. 設置元素浮動後，該元素的display值是多少？

    自動變成display:block

25. 讓頁面裏的字體變清晰，變細用CSS怎麼做？

    -webkit-font-smoothing: antialiased.

26. font-style屬性可以讓它賦值爲“oblique” oblique是什麼意思？

    傾斜的字體樣式

27. 如果需要手動寫動畫，你認爲最小時間間隔是多久，爲什麼？（阿里）

    多數顯示器默認頻率是60Hz，即1秒刷新60次，所以理論上最小間隔爲1/60＊1000ms ＝ 16.7ms

28. 有一個高度自適應的div，裏面有兩個div，一個高度100px，希望另一個填滿剩下的高度。

    外層box-sizing: border-box; 同時設置padding: 100px 0 0；
    內層100像素高的元素向上移動100像素，或使用absolute定位防止佔據空間；
    另一個元素直接height: 100%

29. 什麼是Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎麼做）

    如果靜態文件都放在主域名下，那靜態文件請求的時候都帶有的cookie的數據提交給server的，非常浪費流量，所以不如隔離開。因爲cookie有域的限制，因此不能跨域提交請求，故使用非主要域名的時候，請求頭中就不會帶有cookie數據，這樣可以降低請求頭的大小，降低請求時間，從而達到降低整體請求延時的目的。同時這種方式不會將cookie傳入Web Server，也減少了Web Server對cookie的處理分析環節，提高了webserver的http請求的解析速度。

30. 什麼是CSS 預處理器 / 後處理器？

    • 預處理器例如：LESS、Sass、Stylus，用來預編譯Sass或less，增強了css代碼的複用性，
      還有層級、mixin、變量、循環、函數等，具有很方便的UI組件模塊化開發能力，極大的提高工作效率。
    • 後處理器例如：PostCSS，通常被視爲在完成的樣式表中根據CSS規範處理CSS，讓其更有效；目前最常做的
      是給CSS屬性添加瀏覽器私有前綴，實現跨瀏覽器兼容性的問題。

JavaScript面試題

1. javascript的typeof返回哪些數據類型.

   object number function boolean underfind;

2. 例舉3種強制類型轉換和2種隱式類型轉換?

   強制（parseInt,parseFloat,number）隱式（== – ===）；

3. 數組方法pop() push() unshift() shift()

   Push()尾部添加 pop()尾部刪除
   Unshift()頭部添加 shift()頭部刪除

4. ajax請求的時候get 和post方式的區別?

   一個在url後面 一個放在虛擬載體裏面;有大小限制;安全問題;應用不同 一個是論壇等只需要請求的，一個是類似修改密碼的;

5. call和apply的區別

   Object.call(this,obj1,obj2,obj3)
   Object.apply(this,arguments)

6. ajax請求時，如何解釋json數據

   使用eval parse,鑑於安全性考慮 使用parse更靠譜;

7. 事件委託是什麼

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

8. 閉包是什麼，有什麼特性，對頁面有什麼影響?

   閉包就是能夠讀取其他函數內部變量的函數。

9. 添加 刪除 替換 插入到某個接點的方法

   obj.appendChidl()
   obj.innersetBefore
   obj.replaceChild
   obj.removeChild

10. 說一下什麼是javascript的同源策略？

    一段腳本只能讀取來自於同一來源的窗口和文檔的屬性，這裏的同一來源指的是主機名、協議和端口號的組合

11. 編寫一個b繼承a的方法;

    function A(name){
    this.name = name;
    this.sayHello = function(){
    alert(this.name+” say Hello!”);
    };
    }
    function B(name,id){
    this.temp = A;
    this.temp(name); //相當於new A();
    delete this.temp;
    this.id = id;
    this.checkId = function(ID){
    alert(this.id==ID)
    };
    }

12. 如何阻止事件冒泡和默認事件

    function stopBubble(e)
    {
    if (e && e.stopPropagation)
    e.stopPropagation()
    else
    window.event.cancelBubble=true
    }
    return false

13. 下面程序執行後彈出什麼樣的結果?

    function fn() {
    this.a = 0;
    this.b = function() {
    alert(this.a)
    }
    }
    fn.prototype = {
    b: function() {
    this.a = 20;
    alert(this.a);
    },
    c: function() {
    this.a = 30;
    alert(this.a);
    }
    }
    var myfn = new fn();
    myfn.b();
    myfn.c();

14. 談談This對象的理解。

    this是js的一個關鍵字，隨着函數使用場合不同，this的值會發生變化。
    但是有一個總原則，那就是this指的是調用函數的那個對象。
    this一般情況下：是全局對象Global。 作爲方法調用，那麼this就是指這個對象

15. 下面程序的結果

    function fun(n,o) {
    console.log(o)
    return {
    fun:function(m){
    return fun(m,n);
    }
    };
    }
    var a = fun(0); a.fun(1); a.fun(2); a.fun(3);
    var b = fun(0).fun(1).fun(2).fun(3);
    var c = fun(0).fun(1); c.fun(2); c.fun(3);
    //答案：
    //a: undefined,0,0,0
    //b: undefined,0,1,2
    //c: undefined,0,1,1

16. 下面程序的輸出結果

    var name = ‘World!’;
    (function () {
    if (typeof name === ‘undefined’) {
    var name = ‘Jack’;
    console.log(‘Goodbye ’ + name);
    } else {
    console.log(‘Hello ’ + name);
    }
    })();

17. 瞭解Node麼？Node的使用場景都有哪些？

    高併發、聊天、實時消息推送

18. 介紹下你最常用的一款框架

    jquery,rn,angular等;

19. 對於前端自動化構建工具有了解嗎？簡單介紹一下

    Gulp,Grunt等；

20. 介紹一下你瞭解的後端語言以及掌握程度

其它

1. 對Node的優點和缺點提出了自己的看法？

   • 優點:
     因爲Node是基於事件驅動和無阻塞的，所以非常適合處理併發請求，
     因此構建在Node上的代理服務器相比其他技術實現（如Ruby）的服務器表現要好得多。
     此外，與Node代理服務器交互的客戶端代碼是由javascript語言編寫的，
     因此客戶端和服務器端都用同一種語言編寫，這是非常美妙的事情。
   • 缺點
     Node是一個相對新的開源項目，所以不太穩定，它總是一直在變，
     而且缺少足夠多的第三方庫支持。看起來，就像是Ruby/Rails當年的樣子。

2. 你有哪些性能優化的方法？

   1. 減少http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN託管，data緩存 ，圖片服務器。
   2. 前端模板 JS+數據，減少由於HTML標籤導致的帶寬浪費，前端用變量保存AJAX請求結果，每次操作本地變量，不用請求，減少請求次數
   3. 用innerHTML代替DOM操作，減少DOM操作次數，優化javascript性能。
   4. 當需要設置的樣式很多時設置className而不是直接操作style。
   5. 少用全局變量、緩存DOM節點查找的結果。減少IO讀取操作。
   6. 避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。
   7. 圖片預加載，將樣式表放在頂部，將腳本放在底部 加上時間戳。
   8. 避免在頁面的主體佈局中使用table，table要等其中的內容完全下載之後纔會顯示出來，顯示div+css佈局慢。對普通的網站有一個統一的思路，就是儘量向前端優化、減少數據庫操作、減少磁盤IO。向前端優化指的是，在不影響功能和體驗的情況下，能在瀏覽器執行的不要在服務端執行，能在緩存服務器上直接返回的不要到應用服務器，程序能直接取得的結果不要到外部取得，本機內能取得的數據不要到遠程取，內存能取到的不要到磁盤取，緩存中有的不要去數據庫查詢。減少數據庫操作指減少更新次數、緩存結果減少查詢次數、將數據庫執行的操作儘可能的讓你的程序完成（例如join查詢），減少磁盤IO指儘量不使用文件系統作爲緩存、減少讀寫文件次數等。程序優化永遠要優化慢的部分，換語言是無法“優化”的。

3. http狀態碼有那些？分別代表是什麼意思？

   100-199 用於指定客戶端應相應的某些動作。
   200-299 用於表示請求成功。
   300-399 用於已經移動的文件並且常被包含在定位頭信息中指定新的地址信息。
   400-499 用於指出客戶端的錯誤。400 1、語義有誤，當前請求無法被服務器理解。401 當前請求需要用戶驗證 403 服務器已經理解請求，但是拒絕執行它。
   500-599 用於支持服務器錯誤。 503 – 服務不可用

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

   查找瀏覽器緩存
   DNS解析、查找該域名對應的IP地址、重定向（301）、發出第二個GET請求
   進行HTTP協議會話
   客戶端發送報頭(請求報頭)
   文檔開始下載
   文檔樹建立，根據標記請求所需指定MIME類型的文件
   文件顯示
   瀏覽器這邊做的工作大致分爲以下幾步：
   加載：根據請求的URL進行域名解析，向服務器發起請求，接收文件（HTML、JS、CSS、圖象等）。
   解析：對加載到的資源（HTML、JS、CSS等）進行語法解析，建議相應的內部數據結構（比如HTML的DOM樹，JS的（對象）屬性表，CSS的樣式規則等等）

5. 你常用的開發工具是什麼，爲什麼？

   Sublime,Atom,Nodepad++;

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

   Node.js、MVVM、React-native,Angular,Weex等
   CSDN,Segmentfault,博客園,掘金,Stackoverflow,伯樂在線等

7. 頁面重構怎麼操作？

   • 網站重構：在不改變外部行爲的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行爲。
     也就是說是在不改變UI的情況下，對網站進行優化，在擴展的同時保持一致的UI。
   • 對於傳統的網站來說重構通常是：
     表格(table)佈局改爲DIV+CSS
     使網站前端兼容於現代瀏覽器(針對於不合規範的CSS、如對IE6有效的)
     對於移動平臺的優化
     針對於SEO進行優化
     深層次的網站重構應該考慮的方面
     減少代碼間的耦合
     讓代碼保持彈性
     嚴格按規範編寫代碼
     設計可擴展的API
     代替舊有的框架、語言(如VB)
     增強用戶體驗
     通常來說對於速度的優化也包含在重構中
     壓縮JS、CSS、image等前端資源(通常是由服務器來解決)
     程序的性能優化(如數據讀寫)
     採用CDN來加速資源加載
     對於JS DOM的優化
     HTTP服務器的文件緩存

8. 列舉IE與其他瀏覽器不一樣的特性？

   事件不同之處：

   • 觸發事件的元素被認爲是目標（target）。而在 IE 中，目標包含在 event 對象的 srcElement 屬性；
   • 獲取字符代碼、如果按鍵代表一個字符（shift、ctrl、alt除外），IE 的 keyCode 會返回字符代碼（Unicode），DOM 中按鍵的代碼和字符是分離的，要獲取字符代碼，需要使用 charCode 屬性；
   • 阻止某個事件的默認行爲，IE 中阻止某個事件的默認行爲，必須將 returnValue 屬性設置爲 false，Mozilla 中，需要調用 preventDefault() 方法；
   • 停止事件冒泡，IE 中阻止事件進一步冒泡，需要設置 cancelBubble 爲 true，Mozzilla 中，需要調用 stopPropagation()；

9. 什麼叫優雅降級和漸進增強？

   • 優雅降級：Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會針對舊版本的IE進行降級處理了,使之在舊式瀏覽器上以某種形式降級體驗卻不至於完全不能用。
     如：border-shadow
   • 漸進增強：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新版本瀏覽器才支持的功能,向頁面增加不影響基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時，它們會自動地呈現出來並發揮作用。
     如：默認使用flash上傳，但如果瀏覽器支持 HTML5 的文件上傳功能，則使用HTML5實現更好的體驗；

10. 是否瞭解公鑰加密和私鑰加密。

    一般情況下是指私鑰用於對數據進行簽名，公鑰用於對簽名進行驗證;
    HTTP網站在瀏覽器端用公鑰加密敏感數據，然後在服務器端再用私鑰解密。

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

    html5提供的Websocket
    不可見的iframe
    WebSocket通過Flash
    XHR長時間連接
    XHR Multipart Streaming
    script標籤的長時間連接(可跨域)

12. 你有用過哪些前端性能優化的方法？

    1. 減少http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN託管，data緩存 ，圖片服務器。
    2. 前端模板 JS+數據，減少由於HTML標籤導致的帶寬浪費，前端用變量保存AJAX請求結果，每次操作本地變量，不用請求，減少請求次數
    3. 用innerHTML代替DOM操作，減少DOM操作次數，優化javascript性能。
    4. 當需要設置的樣式很多時設置className而不是直接操作style。
    5. 少用全局變量、緩存DOM節點查找的結果。減少IO讀取操作。
    6. 避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。
    7. 圖片預加載，將樣式表放在頂部，將腳本放在底部 加上時間戳。
    8. 避免在頁面的主體佈局中使用table，table要等其中的內容完全下載之後纔會顯示出來，顯示比div+css佈局慢。
    9. 對普通的網站有一個統一的思路，就是儘量向前端優化、減少數據庫操作、減少磁盤IO。
       向前端優化指的是，在不影響功能和體驗的情況下，能在瀏覽器執行的不要在服務端執行，能在緩存服務器上直接返回的不要到應用服務器，程序能直接取得的結果不要到外部取得，本機內能取得的數據不要到遠程取，內存能取到的不要到磁盤取，緩存中有的不要去數據庫查詢。減少數據庫操作指減少更新次數、緩存結果減少查詢次數、將數據庫執行的操作儘可能的讓你的程序完成（例如join查詢），減少磁盤IO指儘量不使用文件系統作爲緩存、減少讀寫文件次數等。程序優化永遠要優化慢的部分，換語言是無法“優化”的。