最近面試遇到的問題

1.SPA單頁面web應用的實現原理？

   頁面中有導航部分、導航部分，導航部分的屬性data-page對應着頁面模塊的class。在主模塊裏面，每一個div的class會映射到相應的js文件，好比page-one.js, page-two.js等。當點擊導航時，經過哈希監聽事件，若是哈希發生了變化，則改變哈希值：window.location.hash,來調用相應的js文件。相應的js文件裏面能夠放數據模板，當用page請求並返回數據時，渲染模板，生成相應的DOM結構，再插入對應的page的div中。、

  優勢：SPA單頁面的優勢是不少的，好比MVC模式，利於後期維護管理，先後端分離，性能好，提高用戶體驗。

  缺點：隨着頁面增長，單頁HTML裏邊的DOM可能會愈來愈多，js處理邏輯多而複雜。可是html裏面DOM增多仍是會有優化方法的，好比刪除DOM，存進緩存，等真正顯示的時候再添加DOM.

 

2.jsonp是什麼？

  jsonp是json的一種「使用模式」，可用於解決主流瀏覽器的跨域數據訪問的問題。因爲同源策略，通常來講位於 server1.example.com 的網頁沒法與不是 server1.example.com的服務器溝通，而 HTML 的<script> 元素是一個例外。利用 <script> 元素的這個開放策略，網頁能夠獲得從其餘來源動態產生的 JSON 資料，而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料並非 JSON，而是任意的JavaScript，用 JavaScript 直譯器執行而不是用 JSON 解析器解析。

 http://blog.csdn.net/u010235716/article/details/51553746（json和jsonp的介紹）

 

 

3.用css3的某個屬性來實現走馬燈效果？

   http://www.cnblogs.com/HeCaho/p/6790610.html

 

4.js的執行流程？

   http://www.cnblogs.com/lengyuhong/archive/2012/05/20/2509120.html

 

5.變量提高，預加載？

   http://www.runoob.com/js/js-hoisting.html  

 

6.函數遞歸求1到108的和？

 

7.冒泡排序？

 

8.cookie和localStorge的區別？

• cookie在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會
• sessionStorage和localStorage的存儲空間更大；
• sessionStorage和localStorage有更多豐富易用的接口；
• sessionStorage和localStorage各自獨立的存儲空間；

 

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

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

 

10.前端如何作與後臺數據的對接？

     前端獲取後臺數據的主流方式是使用Ajax異步載入。前端頁面經過Ajax向後臺請求數據，後臺在放回給前端頁面。服務器跟客戶端通常都經過http交互也有用socket的，數據格式通常都是json或者xml

 

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

       1. 咱們在網頁中的某個操做（有的操做對應多個事件）。例如：當咱們點擊一個按鈕就會產生一個事件。是能夠被 JavaScript 偵測到的行爲。  
       2. 事件處理機制：IE是事件冒泡、火狐是 事件捕獲；
       3.  ev.stopPropagation();

 

其餘面試題，爲接下來的面試作準備。

html+css:

   1.對WEB標準以及W3C的理解與認識?

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

 

   2.xhtml和html有什麼區別?

     HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言
     最主要的不一樣：
     XHTML 元素必須被正確地嵌套。
     XHTML 元素必須被關閉。
     標籤名必須用小寫字母。
     XHTML 文檔必須擁有根元素。

 

   3.什麼是語義化的HTML?

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

 

 

 

  4.(寫)描述一段語義的html代碼吧。
    （HTML5中新增長的不少標籤（如：<article>、<nav>、<header>和<footer>等）
     就是基於語義化設計原則）  
        < div id="header"> 
        < h1>標題< /h1> 
        < h2>專一Web前端技術< /h2> 
        < /div>
      語義 HTML 具備如下特性：

      文字包裹在元素中，用以反映內容。例如：
      段落包含在 <p> 元素中。
      順序表包含在<ol>元素中。
      從其餘來源引用的大型文字塊包含在<blockquote>元素中。
      HTML 元素不能用做語義用途之外的其餘目的。例如：
      <h1>包含標題，但並不是用於放大文本。
      <blockquote>包含大段引述，但並不是用於文本縮進。
       空白段落元素 ( <p></p> ) 並不是用於跳行。
       文本並不直接包含任何樣式信息。例如：
       不使用 <font> 或 <center> 等格式標記。
       類或 ID 中不引用顏色或位置。

 

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

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

Physical Style Elements -- 天然樣式標籤
b, i, u, s, pre
Semantic Style Elements -- 語義樣式標籤
strong, em, ins, del, code
應該準確使用語義樣式標籤, 但不能濫用, 若是不能肯定時首選使用天然樣式標籤。

 

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

在用戶沒有與因特網鏈接時，能夠正常訪問站點或應用，在用戶與因特網鏈接時，更新用戶機器上的緩存文件。
原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，
經過這個文件上的解析清單離線存儲資源，這些資源就會像cookie同樣被存儲了下來。
以後當網絡在處於離線狀態下時，瀏覽器會經過被離線存儲的數據進行頁面展現。

如何使用：
一、頁面頭部像下面同樣加入一個manifest的屬性；
二、在cache.manifest文件的編寫離線存儲的資源；
    CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    / /offline.html
三、在離線狀態時，操做window.applicationCache進行需求實現。


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

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

   8.Label的做用是什麼？是怎麼用的？

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


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

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

  10.HTML5 爲何只須要寫 !DOCTYPE HTML？

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

   

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

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

   

   12.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義? 

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

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

       3.DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。

 

   13.行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
    （1）CSS規範規定，每一個元素都有display屬性，肯定該元素的類型，每一個元素都有默認的display值，好比div默認display屬性值爲「block」，成爲「塊級」元素；span默認display屬性值爲「inline」，是「行內」元素。  
    （2）行內元素有：a b span img input select strong（強調的語氣） 塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p  
    （3）知名的空元素： <br> <hr> <img> <input> <link> <meta> 
     不爲人知的是： <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

 

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

• HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。
• 繪畫 canvas
• 用於媒介回放的 video 和 audio 元素
• 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
• sessionStorage 的數據在瀏覽器關閉後自動刪除
• 語意化更好的內容元素，好比 article、footer、header、nav、section
• 表單控件，calendar、date、time、email、url、search
• 新的技術webworker, websocket, Geolocation
  移除的元素
• 純表現的元素：basefont，big，center，font, s，strike，tt，u；
• 對可用性產生負面影響的元素：frame，frameset，noframes；
  支持HTML5新標籤：
• IE8/IE7/IE6支持經過document.createElement方法產生的標籤，能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，瀏覽器支持新標籤後，還須要添加標籤默認的樣式；
•  固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
     <!--[if lt IE 9]> 
     <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> 
     <![endif]--> 

   

     15.CSS引入的方式有哪些? link和@import的區別是?

       內聯 內嵌 外鏈 導入

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

         Link 支持使用javascript改變樣式，後者不可

 

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

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

 

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

     一個頁面是由不少個 Box 組成的,元素的類型和 display 屬性,決定了這個 Box 的類型。
    不一樣類型的 Box,會參與不一樣的 Formatting Context（決定如何渲染文檔的容器）,
    所以Box內的元素會以不一樣的方式渲染,也就是說BFC內部的元素和外部的元素不會互相影響。

    18.若是須要手動寫動畫，你認爲最小時間間隔是多久，爲何？（阿里）

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

    19.display:inline-block 何時會顯示間隙？(攜程)

 移除空格、使用margin負值、使用font-size:0、letter-spacing、word-spacing

    20.iframe有那些缺點？
    *iframe會阻塞主頁面的Onload事件；
    *iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。
    使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript
    動態給iframe添加src屬性值，這樣能夠能夠繞開以上兩個問題。 

 

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

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

 

     22.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 ;
• 優先級就近原則，同權重狀況下樣式定義最近者爲準;
• 優先級爲:
   

  1 2	!important >  id > class > tag important 比 內聯優先級高

  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> 元素。

 

      23.請問 「resetting」 和 「normalizing」 CSS 之間的區別？你會如何選擇，爲何？

Normalize 相對「平和」，注重通用的方案，重置掉該重置的樣式，保留有用的 user agent 樣式，同時進行一些 bug 的修復，這點是 reset 所缺少的。
Reset 相對「暴力」，無論你有沒有用，通通重置成同樣的效果，且影響的範圍很大，講求跨瀏覽器的一致性。【摘自知乎】
Normalize.css是一種CSS reset的替代方案。它們的區別有：
1. Normalize.css 保護了有價值的默認值，Reset經過爲幾乎全部的元素施加默認樣式，強行使得元素有相同的視覺效果。相比之下，Normalize.css保持了許多默認的瀏覽器樣式。這就意味着你不用再爲全部公共的排版元素從新設置樣式。當一個元素在不一樣的瀏覽器中有不一樣的默認值時，Normalize.css會力求讓這些樣式保持一致並儘量與現代標準相符合。
2. Normalize.css 修復了瀏覽器的bug，它修復了常見的桌面端和移動端瀏覽器的bug。這每每超出了Reset所能作到的範疇。關於這一點，Normalize.css修復的問題包含了HTML5元素的顯示設置、預格式化文字的font-size問題、在IE9中SVG的溢出、許多出如今各瀏覽器和操做系統中的與表單相關的bug。
3.Normalize.css 不會讓你的調試工具變的雜亂
4. Normalize.css 是模塊化的
5. Normalize.css 擁有詳細的文檔
選擇Normalize.css ，主要是reset.css爲幾乎全部的元素施加默認樣式，因此須要對全部公共的排版元素從新設置樣式，這是一件很麻煩的工做。

 

      24.請解釋浮動 (Floats) 及其工做原理。

答：float屬性定義了元素是否浮動及在哪一個方向浮動，在CSS中任何元素均可以浮動，且浮動元素會生成一個塊級框，而不論它自己是何種元素。而且盒子的寬度不在伸展，而是根據盒子裏面的內容的寬度來肯定。浮動屬性會使得浮動的元素脫離文檔流，因此文檔的普通流中的塊框會表現的像浮動框不存在同樣。

 

     25.描述z-index和疊加上下文是如何造成的。

首先來看在CSS中疊加上下文造成的緣由：
1.負邊距
margin爲負值時元素會依參考線向外偏移。margin-left/margin-top的參考線爲左邊的元素/上面的元素（如無兄弟元素則爲父元素的左內側/上內側）,margin-right和margin-bottom的參考線爲元素自己的border右側/border下側。通常能夠利用負邊距來就行佈局，但沒有計算好的話就可能形成元素重疊。堆疊順序由元素在文檔中的前後位置決定，後出現的會在上面。
2.position的relative/absolute/fixed定位
當爲元素設置position值爲relative/absolute/fixed後，元素髮生的偏移可能產生重疊，且z-index屬性被激活。z-index值能夠控制定位元素在垂直於顯示屏方向（Z 軸）上的堆疊順序（stack order），值大的元素髮生重疊時會在值小的元素上面。
z-index屬性
z-index只能在position屬性值爲relative或absolute或fixed的元素上有效。
基本原理：z-index值能夠控制定位元素在垂直於顯示屏方向（Z 軸）上的堆疊順序（stack order），值大的元素髮生重疊時會在值小的元素上面。
使用相對性：z-index值只決定同一父元素中的同級子元素的堆疊順序。父元素的z-index值（若是有）爲子元素定義了堆疊順序（css版堆疊「拼爹」）。向上追溯找不到含有z-index值的父元素的狀況下，則能夠視爲自由的z-index元素，它能夠與父元素的同級兄弟定位元素或其餘自由的定位元素來比較z-index的值，決定其堆疊順序。同級元素的z-index值若是相同，則堆疊順序由元素在文檔中的前後位置決定，後出現的會在上面。因此若是當你發現一個z-index值較大的元素被值較小的元素遮擋了，請先檢查它們之間的dom結點關係，多半是由於其父結點含有激活並設置了z-index值的position定位元素。

 

      26.block，inline和inline-block的概念以及區別

首先這是display中的三個屬性值，不是元素指類型，元素類型在HTML5以前分爲兩種分別是塊級元素（ block-level elements）和內連元素（ inline elements）。可是當display的屬性值被設置爲block時，元素會以塊級元素（ block-level elements）顯示，而設置爲inline時會之內連元素（ inline elements）顯示。
display:block
block元素會獨佔一行，多個block元素會各自新起一行。默認狀況下，block元素寬度自動填滿其父元素寬度。
block元素能夠設置width,height屬性。塊級元素即便設置了寬度,仍然是獨佔一行。
block元素能夠設置margin和padding屬性。
display:inline
inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行，其寬度隨元素的內容而變化。
inline元素設置width,height屬性無效。
inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。
display:inline-block
簡單來講就是將對象呈現爲inline對象，可是對象的內容做爲block對象呈現。以後的內聯對象會被排列在同一行內。好比咱們能夠給一個link（a元素）inline-block屬性值，使其既具備block的寬度高度特性又具備inline的同行特性。即對inline-block元素能夠設置寬度和高度，同時inline-block元素又能夠在同行進行排列。
備註：屬性爲inline-block元素之間的空格或者換行在瀏覽器上會是一個空白的間隙。且IE6和7是不支持這個屬性的，須要經過*display:inline;*zoom:1作hack處理。

 

      27.你最喜歡的圖片替換方法是什麼，你如何選擇使用。

設計師可以用一張背景圖像替代某元素中的原始文字，以期顯示出更美觀的字體。
實現方法
一：添加span標籤
該技巧的實現很是簡單：用span將元素中的文本包圍起來，而後經過應用CSS樣式隱藏這個span中的文本，最後將背景圖像應用到該元素之上便可。例如，對於下面的這一段HTMl標記。
2、負text-indent屬性值
設計師Mike Rundle提出了一種使用負text-indent屬性值的方法，將文本推到屏幕的左邊緣以外。雖然該方案的適用性並不普遍——IE 5.0會將背景圖片隨文本一塊兒推出瀏覽者的視線範圍——但卻至關簡潔優雅。
缺點：並無解決瀏覽器禁用圖像後空白頁面的可訪問性問題；有時在IE 5.0中沒法使用。意義：而圖像替換技術則保留了被替換元素中的原有文本，所以不管對何種客戶而言，理解頁面內容都不成問題。主要是考慮SEO，而非視覺上的效果。

 

   28.使用 CSS 預處理器的優缺點有哪些？請描述你曾經使用過的 CSS 預處理器的優缺點。

廣泛的三款 CSS 預處理器框架，分別是 Sass、Less CSS、Stylus。
CSS 預處理器是一種語言用來爲 CSS 增長一些編程的的特性，無需考慮瀏覽器的兼容性問題，例如你能夠在 CSS 中使用變量、簡單的程序邏輯、函數等等在編程語言中的一些基本技巧，可讓你的 CSS 更見簡潔，適應性更強，代碼更直觀等諸多好處。
總結來說就是用編程的方法來寫CSS樣式，而不是手工一行行碼，至關於從手工業時代進化到工業時代。

 

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

- 預處理器例如：LESS、Sass、Stylus，用來預編譯Sass或less，加強了css代碼的複用性，
  還有層級、mixin、變量、循環、函數等，具備很方便的UI組件模塊化開發能力，極大的提升工做效率。

- 後處理器例如：PostCSS，一般被視爲在完成的樣式表中根據CSS規範處理CSS，讓其更有效；目前最常作的
  是給CSS屬性添加瀏覽器私有前綴，實現跨瀏覽器兼容性的問題。

 

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

     1.雙邊距BUG float引發的 使用display：inline

     2.  3像素問題 使用多個float和註釋引發的 使用dislpay:inline -3px

     3.超連接hover 點擊後失效 使用正確的書寫順序 link visited hover active
     4.Ie z-index問題 給父級添加position:relative
     5.Png IE下不透明問題  使用js代碼 改
     6.Min-height 最小高度問題   ！Important 解決’
     7.select 在ie6下遮蓋 使用iframe嵌套
     8.爲何沒有辦法定義1px左右的寬度容器（IE6默認的行高形成的，使用over:hidden,zoom:0.08 ,line-height:1px）

 

     31.瀏覽器的內核分別是什麼?常常遇到的瀏覽器的兼容性有哪些？緣由，解決方法是什麼，經常使用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已經獨立識別。

    *  IE下,能夠使用獲取常規屬性的方法來獲取自定義屬性,
       也能夠使用getAttribute()獲取自定義屬性;
       Firefox下,只能使用getAttribute()獲取自定義屬性. 
       解決方法:統一經過getAttribute()獲取自定義屬性.

    *  IE下,event對象有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:link {} a:visited {} a:hover {} a:active {}

 

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

 

   33. li與li之間有看不見的空白間隔是什麼緣由引發的？有什麼解決辦法？

行框的排列會受到中間空白（回車\空格）等的影響，由於空格也屬於字符,這些空白也會被應用樣式，
佔據空間，因此會有間隔，把字符大小設爲0，就沒有空格了。

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

不管屬於哪一種，都要先找到其祖先元素中最近的 position 值不爲 static 的元素，而後再判斷：
一、若此元素爲 inline 元素，則 containing block 爲可以包含這個元素生成的第一個和
最後一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形；
二、不然,則由這個祖先元素的 padding box 構成。
若是都找不到，則爲 initial containing block。

補充：
1. static(默認的)/relative：簡單說就是它的父元素的內容框（即去掉padding的部分）
2. absolute: 向上找最近的定位爲absolute/relative的元素
3. fixed: 它的containing block一概爲根元素(html/body)，根元素也是initial containing block

35.CSS裏的visibility屬性有個collapse屬性值是幹嗎用的？在不一樣瀏覽器下之後什麼區別？

   36.請解釋一下CSS3的Flexbox（彈性盒佈局模型）,以及適用場景？

 

   37.css動畫和js動畫的優缺點

　　CSS3的動畫

• 優勢：
  • 1.在性能上會稍微好一些，瀏覽器會對CSS3的動畫作一些優化（好比專門新建一個圖層用來跑動畫）
  • 2.代碼相對簡單
• 缺點：
  • 1.在動畫控制上不夠靈活
  • 2.兼容性很差
  • 3.部分動畫功能沒法實現（如滾動動畫，視差滾動等）

　　JavaScript的動畫

• 優勢：
  • 1.控制能力很強，能夠單幀的控制、變換
  • 2.兼容性好，寫得好徹底能夠兼容IE6，且功能強大。
• 缺點：
  • 計算沒有css快，另外常常須要依賴其餘的庫。

　結論

• 因此，不復雜的動畫徹底能夠用css實現，複雜一些的，或者須要交互的時候，用js會靠譜一些~

   

    38.你如何對網站的文件和資源進行優化?期待的解決方案包括：
     文件合併
     文件最小化/文件壓縮
     使用CDN託管
     緩存的使用

 

    39.頁面重構怎麼操做？
     編寫 CSS、讓頁面結構更合理化，提高用戶體驗，實現良好的頁面效果和提高性能。

 

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

    * 使用率較高的框架有jQuery、YUI、Prototype（http://wenda.so.com/q/1461241889727281?src=140）、Dojo、Ext.js、Mootools等。尤爲是jQuery，超過91%。

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

    * Sublime Text 、Eclipse、Notepad、Firebug、HttpWatch、Yslow。

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

   41.說幾條寫JavaScript的基本規範？

1.不要在同一行聲明多個變量。
2.請使用 ===/!==來比較true/false或者數值
3.使用對象字面量替代new Array這種形式
4.不要使用全局函數。
5.Switch語句必須帶有default分支
6.函數不該該有時候有返回值，有時候沒有返回值。
7.For循環必須使用大括號
8.If語句必須使用大括號
9.for-in循環中的變量 應該使用var關鍵字明確限定做用域，從而避免做用域污染。

   42.WEB應用從服務器主動推送Data到客戶端有那些方式？
    html5 websoket
    WebSocket經過Flash
    XHR長時間鏈接
    XHR Multipart Streaming
    不可見的Iframe
    <script>標籤的長時間鏈接(可跨域)

    

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

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

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

WebSocket、SharedWorker；
也能夠調用localstorge、cookies等本地存儲方式；

localstorge另外一個瀏覽上下文裏被添加、修改或刪除時，它都會觸發一個事件，
咱們經過監聽事件，控制它的值來進行頁面信息通訊；
注意quirks：Safari 在無痕模式下設置localstorge值時會拋出 QuotaExceededError 的異常；


45.頁面可見性（Page Visibility API） 能夠有哪些用途？

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


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

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

網頁驗證碼是幹嗎的，是爲了解決什麼安全問題。

區分用戶是計算機仍是人的公共全自動程序。能夠防止惡意破解密碼、刷票、論壇灌水；
有效防止黑客對某一個特定註冊用戶用特定程序暴力破解方式進行不斷的登錄嘗試。

JS:

    1.例舉3種強制類型轉換和2種隱式類型轉換?
     強制（parseInt,parseFloat,number）
     隱式（== – ===）

 

     2.split() join() 的區別
     前者是切割成數組的形式，後者是將數組轉換成字符串

     3.數組方法pop() push() unshift() shift()
     Push()尾部添加     pop()尾部刪除
     Unshift()頭部添加   shift()頭部刪除

 

     4.JavaScript的數據對象有那些屬性值？
　　writable：這個屬性的值是否能夠改。
　　configurable：這個屬性的配置是否能夠刪除，修改。
　　enumerable：這個屬性是否能在for…in循環中遍歷出來或在Object.keys中列舉出來。
　　value：屬性值。

 

    5. 介紹js有哪些內置對象？

Object 是 JavaScript 中全部對象的父對象 數據封裝類對象：Object、Array、Boolean、Number 和 String 其餘對象：Function、Arguments、Math、Date、RegExp、Error

    6.JavaScript原型，原型鏈 ? 有什麼特色？
     *  原型對象也是普通的對象，是對象一個自帶隱式的 __proto__ 屬性，原型也有可能有本身的原型，若是一個原型對象的原型不爲null的話，咱們就稱之爲原型鏈。
     *  原型鏈是由一些用來繼承和共享屬性的對象組成的（有限的）對象鏈。

 

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

每一個對象都會在其內部初始化一個屬性，就是prototype(原型)，當咱們訪問一個對象的屬性時，
若是這個對象內部不存在這個屬性，那麼他就會去prototype裏找這個屬性，這個prototype又會有本身的prototype，
因而就這樣一直找下去，也就是咱們平時所說的原型鏈的概念。
關係：instance.constructor.prototype = instance.__proto__

特色：
JavaScript對象是經過引用來傳遞的，咱們建立的每一個新對象實體中並無一份屬於本身的原型副本。
當咱們修改原型時，與之相關的對象也會繼承這一改變。


 當咱們須要一個屬性的時，Javascript引擎會先看當前對象中是否有這個屬性， 若是沒有的話，
 就會查找他的Prototype對象是否有這個屬性，如此遞推下去，一直檢索到 Object 內建對象。

    function Func(){}
    Func.prototype.name = "Sean";
    Func.prototype.getInfo = function() {
      return this.name;
    }
    var person = new Func();//如今能夠參考var person = Object.create(oldObject);
    console.log(person.getInfo());//它擁有了Func的屬性和方法
    //"Sean"
    console.log(Func.prototype);
    // Func { name="Sean", getInfo=function()}

     8.Javascript如何實現繼承？

 一、構造繼承 二、原型繼承 三、實例繼承 四、拷貝繼承 原型prototype機制或apply和call方法去實現較簡單，建議使用構造函數與原型混合方式。

 function Parent(){
        this.name = 'wang';
    }

    function Child(){
        this.age = 28;
    }
    Child.prototype = new Parent();//繼承了Parent，經過原型

    var demo = new Child();
    alert(demo.age);
    alert(demo.name);//獲得被繼承的屬性
  }

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

hasOwnProperty

javaScript中hasOwnProperty函數方法是返回一個布爾值，指出一個對象是否具備指定名稱的屬性。
此方法沒法檢查該對象的原型鏈中是否具備該屬性；該屬性必須是對象自己的一個成員。
使用方法：
object.hasOwnProperty(proName)
其中參數object是必選項。一個對象的實例。
proName是必選項。一個屬性名稱的字符串值。

若是 object 具備指定名稱的屬性，那麼JavaScript中hasOwnProperty函數方法返回 true，反之則返回 false。

10.Javascript做用鏈域?

全局函數沒法查看局部函數的內部細節，但局部函數能夠查看其上層的函數細節，直至全局細節。
當須要從局部函數查找某一屬性或方法時，若是當前做用域沒有找到，就會上溯到上層做用域查找，
直至全局函數，這種組織形式就是做用域鏈。

做用域鏈的做用是保證執行環境裏有權訪問的變量和函數是有序的，做用域鏈的變量只能向上訪問，變量訪問到對象即被終止，做用域鏈向下訪問變量是不被容許的。


window

11.javascript建立對象的幾種方式？

javascript建立對象簡單的說,無非就是使用內置對象或各類自定義對象，固然還能夠用JSON；但寫法有不少種，也能混合使用。

一、對象字面量的方式   

 person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};

二、用function來模擬無參的構造函數

 function Person(){}
    var person=new Person();//定義一個function，若是使用new"實例化",該function能夠看做是一個Class
    person.name="Mark";
    person.age="25";
    person.work=function(){
    alert(person.name+" hello...");
    }
    person.work();

三、用function來模擬參構造函數來實現（用this關鍵字定義構造的上下文屬性）

  function Pet(name,age,hobby){
       this.name=name;//this做用域：當前對象
       this.age=age;
       this.hobby=hobby;
       this.eat=function(){
          alert("我叫"+this.name+",我喜歡"+this.hobby+",是個程序員");
       }
    }
    var maidou =new Pet("麥兜",25,"coding");//實例化、建立對象
    maidou.eat();//調用eat方法

四、用工廠方式來建立（內置對象）

 var wcDog =new Object();
     wcDog.name="旺財";
     wcDog.age=3;
     wcDog.work=function(){
       alert("我是"+wcDog.name+",汪汪汪......");
     }
     wcDog.work();

五、用原型方式來建立

  function Dog(){

     }
     Dog.prototype.name="旺財";
     Dog.prototype.eat=function(){
     alert(this.name+"是個吃貨");
     }
     var wangcai =new Dog();
     wangcai.eat();

六、用混合方式來建立

  function Car(name,price){
      this.name=name;
      this.price=price; 
    }
     Car.prototype.sell=function(){
       alert("我是"+this.name+"，我如今賣"+this.price+"萬元");
      }
    var camry =new Car("凱美瑞",27);
    camry.sell();

 

12.JavaScript有幾種類型的值？，你能畫一下他們的內存圖嗎？

棧：原始數據類型（Undefined，Null，Boolean，Number、String） 
堆：引用數據類型（對象、數組和函數）

兩種類型的區別是：存儲位置不一樣；
原始數據類型直接存儲在棧(stack)中的簡單數據段，佔據空間小、大小固定，屬於被頻繁使用數據，因此放入棧中存儲；
引用數據類型存儲在堆(heap)中的對象,佔據空間大、大小不固定,若是存儲在棧中，
將會影響程序運行的性能；引用數據類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。當解釋器尋找引用值時，會首先檢索其
在棧中的地址，取得地址後從堆中得到實體

 

     13.IE和標準DOM事件流的區別
      1.執行順序不同、
      2.參數不同
      3.事件加不加on
      4.this指向問題

     14.IE和標準下有哪些兼容性的寫法
     Var ev = ev || window.event
     document.documentElement.clientWidth || document.body.clientWidth
     Var target = ev.srcElement||ev.target

 

     15. new操做符具體幹了什麼呢?
      一、建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型。
      二、屬性和方法被加入到 this 引用的對象中。
      三、新建立的對象由 this 所引用，而且最後隱式的返回 this 。

 var obj  = {};
    obj.__proto__ = Base.prototype;
    Base.call(obj); 

16.null，undefined 的區別？

null  表示一個對象被定義了，值爲「空值」； undefined   表示不存在這個值。

typeof undefined     //"undefined"    
 undefined :是一個表示"無"的原始值或者說表示"缺乏值"，就是此處應該有一個值，可是尚未定義。當嘗試讀取時會返回 undefined；     
 例如變量被聲明瞭，但沒有賦值時，就等於undefined 

typeof null     //"object"    
 null : 是一個對象(空對象, 沒有任何屬性和方法)；  
   
例如做爲函數的參數，表示該函數的參數不是對象； 
注意：     在驗證null時，必定要使用　=== ，由於 == 沒法分別 null 和　undefined 再來一個例子：     null  
   Q：有張三這我的麼？  
   A：有！    
 Q：張三有房子麼？     
A：沒有！    
 undefined     Q：有張三這我的麼？     A：沒有！

 

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

    由JSON字符串轉換爲JSON對象的時候能夠用eval，var obj =eval('('+ str +')');

 

    18.call和apply的區別
      Object.call(this,obj1,obj2,obj3)
      Object.apply(this,arguments)

 

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

function clone(proto) {

　　function Dummy() { }

　　Dummy.prototype = proto;

　　Dummy.prototype.constructor = Dummy;

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

} 

        function object(old) {
         function F() {};
         F.prototype = old;
         return new F();
        }
    var newObj = object(oldObject);

 

    20.寫一個獲取非行間樣式的函數

  function getStyle(obj,attr,value)
   {
    if(!value)
    {
   if(obj.currentStyle)
    {
   return obj.currentStyle(attr)
     }
   else
    {
    obj.getComputedStyle(attr,false)
    }
    }
    else
    {
    obj.style[attr]=value
     }
     }

 

  

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

 [1, NaN, NaN] 由於 parseInt 須要兩個參數 (val, radix)，
 其中 radix 表示解析時用的基數。
 map 傳了 3 個 (element, index, array)，對應的 radix 不合法致使解析失敗。

  

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

 

   23.閉包是什麼？有什麼特性？對頁面有什麼影響？(很重要)   

閉包是指有權訪問另外一個函數做用域中變量的函數，建立閉包的最多見的方式就是在一個函數內建立另外一個函數，經過另外一個函數訪問這個函數的局部變量,利用閉包能夠突破做用鏈域，將函數內部的變量和方法傳遞到外部。

閉包的特性：
1.函數內再嵌套函數
2.內部函數能夠引用外層的參數和變量
3.參數和變量不會被垃圾回收機制回收

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

function say667() {
    // Local variable that ends up within closure
    var num = 666;
    var sayAlert = function() { alert(num); }
    num++;
    return sayAlert;
}


var sayAlert = say667();
sayAlert()//執行結果應該彈出的667  

   

24.如何判斷一個對象是否屬於某個類？

      使用instanceof 

  if(a instanceof Person){
           alert('yes');
       }

 

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

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

 

   

26.寫一個通用的事件偵聽器函數

// event(事件)工具集，來源：https://github.com/markyun
markyun.Event = {
    // 頁面加載完成後
    readyEvent : function(fn) {
        if (fn==null) {
            fn=document;
        }
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = fn;
        } else {
            window.onload = function() {
                oldonload();
                fn();
            };
        }
    },
    // 視能力分別使用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;
    }
}; 
   

27.異步加載的方式 (1) defer，只支持IE (2) async： (3) 建立script，插入到DOM中，加載完畢後callBack
 28.documen.write和 innerHTML的區別 document.write只能重繪整個頁面 innerHTML能夠重繪頁面的一部分
 29.jquery 中如何將數組轉化爲json字符串，而後再轉化回來？
  jQuery中沒有提供這個功能，因此你須要先編寫兩個jQuery的擴展：

 $.fn.stringifyArray = function(array) {
        return JSON.stringify(array)
    }

    $.fn.parseArray = function(array) {
        return JSON.parse(array)
    } 

而後調用：
    $("").stringifyArray(array)

 

 

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

 

  31.XML和JSON的區別？

(1).數據體積方面。

JSON相對於XML來說，數據的體積小，傳遞的速度更快些。

(2).數據交互方面。

JSON與JavaScript的交互更加方便，更容易解析處理，更好的數據交互。

(3).數據描述方面。

JSON對數據的描述性比XML較差。

(4).傳輸速度方面。

JSON的速度要遠遠快於XML。

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

• JSON字符串轉換爲JSON對象:

  var obj =eval('('+ str +')');
  var obj = str.parseJSON();
  var obj = JSON.parse(str);

   JSON對象轉換爲JSON字符串：

  var last=obj.toJSONString();
  var last=JSON.stringify(obj);

   

   33.解釋jsonp的原理，以及爲何不是真正的ajax？
       動態建立script標籤，回調函數
       Ajax是頁面無刷新請求數據操做

         jsonp:

    function createJs(sUrl){

        var oScript = document.createElement('script');
        oScript.type = 'text/javascript';
        oScript.src = sUrl;
        document.getElementsByTagName('head')[0].appendChild(oScript);
    }

    createJs('jsonp.js');

    box({
       'name': 'test'
    });

    function box(json){
        alert(json.name);
    }

 

34.ajax 是什麼?ajax 的交互模型?同步和異步的區別?如何解決跨域問題?

     1. 經過異步模式，提高了用戶體驗
     2. 優化了瀏覽器和服務器之間的傳輸，減小沒必要要的數據往返，減小了帶寬佔用
     3. Ajax在客戶端運行，承擔了一部分原本由服務器承擔的工做，減小了大用戶量下的服務器負載。

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

 

35.Ajax 是什麼? 如何建立一個Ajax？

ajax的全稱：Asynchronous Javascript And XML。
異步傳輸+js+xml。
所謂異步，在這裏簡單地解釋就是：向服務器發送請求的時候，咱們沒必要等待結果，
而是能夠同時作其餘的事情，等到有告終果它本身會根據設定進行後續操做，與此同時，頁面是不會發生整頁刷新的，提升了用戶體驗。

(1)建立XMLHttpRequest對象,也就是建立一個異步調用對象
(2)建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息
(3)設置響應HTTP請求狀態變化的函數
(4)發送HTTP請求
(5)獲取異步調用返回的數據
(6)使用JavaScript和DOM實現局部刷新

 

36 . Ajax的最大的特色是什麼？

       Ajax能夠實現動態不刷新（局部刷新）
      readyState屬性 狀態 有5個可取值： 0=未初始化 ，1=正在加載 2=已加載，3=交互中，4=完成
     ajax的缺點
  一、ajax不支持瀏覽器back按鈕。
  二、安全問題 AJAX暴露了與服務器交互的細節。
  三、對搜索引擎的支持比較弱。
  四、破壞了程序的異常機制。
  五、不容易調試。

 

37.ajax請求的時候get 和post方式的區別？
     一個在url後面 一個放在虛擬載體裏面
     有大小限制
     安全問題
     應用不一樣 一個是論壇等只須要請求的，一個是相似修改密碼的

 

38.CORS

服務器端對於CORS的支持，主要就是經過設置Access-Control-Allow-Origin來進行的。若是瀏覽器檢測到相應的設置，就能夠容許Ajax進行跨域的訪問。

經過修改document.domain來跨子域

將子域和主域的document.domain設爲同一個主域.前提條件：這兩個域名必須屬於同一個基礎域名!並且所用的協議，端口都要一致，不然沒法利用document.domain進行跨域

主域相同的使用document.domain

使用window.name來進行跨域

window對象有個name屬性，該屬性有個特徵：即在一個窗口(window)的生命週期內,窗口載入的全部的頁面都是共享一個window.name的，每一個頁面對window.name都有讀寫的權限，window.name是持久存在一個窗口載入過的全部頁面中的

使用HTML5中新引進的window.postMessage方法來跨域傳送數據

還有flash、在服務器上設置代理頁面等跨域方式。我的認爲window.name的方法既不復雜，也能兼容到幾乎全部瀏覽器，這真是極好的一種跨域方法。

 

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

  var module1 = (function(){
　　　　var _count = 0;
　　　　var m1 = function(){
　　　　　　//...
　　　　};
　　　　var m2 = function(){
　　　　　　//...
　　　　};
　　　　return {
　　　　　　m1 : m1,
　　　　　　m2 : m2
　　　　};
　　})(); 

 

 

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

AMD 規範在這裏：https://github.com/amdjs/amdjs-api/wiki/AMDCMD 規範在這裏：https://github.com/seajs/seajs/issues/242

Asynchronous Module Definition，異步模塊定義，全部的模塊將被異步加載，
模塊加載不影響後面語句運行。全部依賴某些模塊的語句均放置在回調函數中。

 區別：

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

// CMD

define(function(require, exports, module) {
    var a = require('./a')
    a.doSomething()
    // 此處略去 100 行
    var b = require('./b') // 依賴能夠就近書寫
    b.doSomething()
    // ...
})

// AMD 默認推薦

define(['./a', './b'], function(a, b) { // 依賴必須一開始就寫好
    a.doSomething()
    // 此處略去 100 行
    b.doSomething()
    // ...
})

 

41.談談你對webpack的見解

WebPack 是一個模塊打包工具，你能夠使用WebPack管理你的模塊依賴，並編繹輸出模塊們所需的靜態文件。它可以很好地管理、打包Web開發中所用到的HTML、Javascript、CSS以及各類靜態文件（圖片、字體等），讓開發過程更加高效。對於不一樣類型的資源，webpack有對應的模塊加載器。webpack模塊打包器會分析模塊間的依賴關係，最後 生成了優化且合併後的靜態資源。

webpack的兩大特點：

1.code splitting（能夠自動完成） 2.loader 能夠處理各類類型的靜態文件，而且支持串聯操做 

webpack 是以commonJS的形式來書寫腳本滴，但對 AMD/CMD 的支持也很全面，方便舊項目進行代碼遷移。

webpack具備requireJs和browserify的功能，但仍有不少本身的新特性：

1. 對 CommonJS 、 AMD 、ES6的語法作了兼容 2. 對js、css、圖片等資源文件都支持打包 3. 串聯式模塊加載器以及插件機制，讓其具備更好的靈活性和擴展性，例如提供對CoffeeScript、ES6的支持 4. 有獨立的配置文件webpack.config.js 5. 能夠將代碼切割成不一樣的chunk，實現按需加載，下降了初始化時間 6. 支持 SourceUrls 和 SourceMaps，易於調試 7. 具備強大的Plugin接口，大可能是內部插件，使用起來比較靈活 8.webpack 使用異步 IO 並具備多級緩存。這使得 webpack 很快且在增量編譯上更加快

 42.TCP和UDP的區別

   TCP（Transmission Control Protocol，傳輸控制協議）是基於鏈接的協議，也就是說，在正式收發數據前，必須和對方創建可靠的鏈接。一個TCP鏈接必需要通過三次「對話」才能創建起來

   UDP（User Data Protocol，用戶數據報協議）是與TCP相對應的協議。它是面向非鏈接的協議，它不與對方創建鏈接，而是直接就把數據包發送過去！ UDP適用於一次只傳送少許數據、對可靠性要求不高的應用環境。

 

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

    *（優勢）由於Node是基於事件驅動和無阻塞的，因此很是適合處理併發請求，
      所以構建在Node上的代理服務器相比其餘技術實現（如Ruby）的服務器表現要好得多。
      此外，與Node代理服務器交互的客戶端代碼是由javascript語言編寫的，
      所以客戶端和服務器端都用同一種語言編寫，這是很是美妙的事情。

    *（缺點）Node是一個相對新的開源項目，因此不太穩定，它老是一直在變，
      並且缺乏足夠多的第三方庫支持。看起來，就像是Ruby/Rails當年的樣子。

 

44.如何判斷當前腳本運行在瀏覽器仍是node環境中？（阿里）

經過判斷Global對象是否爲window，若是不爲window，當前腳本沒有運行在瀏覽器中

   

45.javascript的本地對象，內置對象和宿主對象？
       本地對象爲array obj regexp等能夠new實例化
       內置對象爲gload Math 等不能夠實例化的
       宿主爲瀏覽器自帶的document,window 等

 

46.document load 和document ready的區別？
       Document.onload 是在結構和樣式加載完才執行js
       Document.ready原生中沒有這個方法，jquery中有 $().ready(function)

 

 47.」==」和「===」的不一樣？
       前者會自動轉換類型
       後者不會

• 兩等號判等，會在比較時進行類型轉換；
  三等號判等(判斷嚴格)，比較時不進行隱式類型轉換,（類型不一樣則會返回false）； 
  
  Object.is 在三等號判等的基礎上特別處理了 NaN 、-0 和 +0 ，保證 -0 和 +0 再也不相同，
  但 Object.is(NaN, NaN) 會返回 true.
  
  Object.is 應被認爲有其特殊的用途，而不能用它認爲它比其它的相等對比更寬鬆或嚴格。

   

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

 

 49.編寫一個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)};
}

 

50.下面程序的結果

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

 

 51.實現一個函數clone，能夠對JavaScript中的5種主要的數據類型（包括Number、String、Object、Array、Boolean）進行值複製。

  /**
 * 對象克隆
 * 支持基本數據類型及對象
 * 遞歸方法
 */
function clone(obj) {
    var o;
    switch (typeof obj) {
        case "undefined":
            break;
        case "string":
            o = obj + "";
            break;
        case "number":
            o = obj - 0;
            break;
        case "boolean":
            o = obj;
            break;
        case "object": // object 分爲兩種狀況 對象（Object）或數組（Array）
            if (obj === null) {
                o = null;
            } else {
                if (Object.prototype.toString.call(obj).slice(8, -1) === "Array") {
                    o = [];
                    for (var i = 0; i < obj.length; i++) {
                        o.push(clone(obj[i]));
                    }
                } else {
                    o = {};
                    for (var k in obj) {
                        o[k] = clone(obj[k]);
                    }
                }
            }
            break;
        default:
            o = obj;
            break;
    }
    return o;
}

 

52.如何消除一個數組裏面重復的元素？

var arr1 =[1,2,2,2,3,3,3,4,5,6], arr2 = []; for(var i = 0,len = arr1.length; i< len; i++){ if(arr2.indexOf(arr1[i]) < 0){ arr2.push(arr1[i]); } } document.write(arr2); // 1,2,3,4,5,6

 

53.javascript 代碼中的"use strict";是什麼意思 ? 使用它區別是什麼？

use strict是一種ECMAscript 5 添加的（嚴格）運行模式,這種模式使得 Javascript 在更嚴格的條件下運行,

使JS編碼更加規範化的模式,消除Javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲。
默認支持的糟糕特性都會被禁用，好比不能用with，也不能在乎外的狀況下給全局變量賦值;
全局變量的顯示聲明,函數必須聲明在頂層，不容許在非函數代碼塊內聲明函數,arguments.callee也不容許使用；
消除代碼運行的一些不安全之處，保證代碼運行的安全,限制函數中的arguments修改，嚴格模式下的eval函數的行爲和非嚴格模式的也不相同;

提升編譯器效率，增長運行速度；
爲將來新版本的Javascript標準化作鋪墊。

54.在Javascript中什麼是僞數組？如何將僞數組轉化爲標準數組？

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

function log(){
      var args = Array.prototype.slice.call(arguments);  
//爲了使用unshift數組方法，將argument轉化爲真正的數組
      args.unshift('(app)');
 
      console.log.apply(console, args);
};

 

 

55.Javascript中callee和caller的做用？

caller是返回一個對函數的引用，該函數調用了當前函數；callee是返回正在被執行的function函數，也就是所指定的function對象的正文。

 

56.統計字符串中字母個數或統計最多字母數。

var str = "aaaabbbccccddfgh";
var obj  = {};
for(var i=0;i<str.length;i++){
    var v = str.charAt(i);
    if(obj[v] && obj[v].value == v){
        obj[v].count = ++ obj[v].count;
    }else{
        obj[v] = {};
        obj[v].count = 1;
        obj[v].value = v;
    }
}
for(key in obj){
    document.write(obj[key].value +'='+obj[key].count+'&nbsp;'); // a=4  b=3  c=4  d=2  f=1  g=1  h=1 
}   

 

 

57.手寫數組快速排序

關於快排算法的詳細說明，能夠參考阮一峯老師的文章快速排序
"快速排序"的思想很簡單，整個排序過程只須要三步：
（1）在數據集之中，選擇一個元素做爲"基準"（pivot）。
（2）全部小於"基準"的元素，都移到"基準"的左邊；全部大於"基準"的元素，都移到"基準"的右邊。
（3）對"基準"左邊和右邊的兩個子集，不斷重複第一步和第二步，直到全部子集只剩下一個元素爲止。
參考代碼：

 var quickSort = function(arr) {
　　if (arr.length <= 1) { return arr; }
　　var pivotIndex = Math.floor(arr.length / 2);
　　var pivot = arr.splice(pivotIndex, 1)[0];
　　var left = [];
　　var right = [];
　　for (var i = 0; i < arr.length; i++){
　　　　if (arr[i] < pivot) {
　　　　　　left.push(arr[i]);
　　　　} else {
　　　　　　right.push(arr[i]);
　　　　}
　　}
　　return quickSort(left).concat([pivot], quickSort(right));
};

 

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

一、事件不一樣之處：

    觸發事件的元素被認爲是目標（target）。而在 IE 中，目標包含在 event 對象的 srcElement 屬性；

    獲取字符代碼、若是按鍵表明一個字符（shift、ctrl、alt除外），
    IE 的 keyCode 會返回字符代碼（Unicode），DOM 中按鍵的代碼和字符是分離的，
    要獲取字符代碼，須要使用 charCode 屬性；

    阻止某個事件的默認行爲，IE 中阻止某個事件的默認行爲，
    必須將 returnValue 屬性設置爲 false，Mozilla 中，須要調用 preventDefault() 方法；

    中止事件冒泡，IE 中阻止事件進一步冒泡，須要設置 cancelBubble 爲 true，Mozzilla 中，須要調用 stopPropagation()；

59.JavaScript實現二分法查找

二分法查找，也稱折半查找，是一種在有序數組中查找特定元素的搜索算法。查找過程能夠分爲如下步驟：
（1）首先，從有序數組的中間的元素開始搜索，若是該元素正好是目標元素（即要查找的元素），則搜索過程結束，不然進行下一步。
（2）若是目標元素大於或者小於中間元素，則在數組大於或小於中間元素的那一半區域查找，而後重複第一步的操做。
（3）若是某一步數組爲空，則表示找不到目標元素。
參考代碼:

  // 非遞歸算法
        function binary_search(arr, key) {
            var low = 0,
                high = arr.length - 1;
            while(low <= high){
                var mid = parseInt((high + low) / 2);
                if(key == arr[mid]){
                    return  mid;
                }else if(key > arr[mid]){
                    low = mid + 1;
                }else if(key < arr[mid]){
                    high = mid -1;
                }else{
                    return -1;
                }
            }
        };
        var arr = [1,2,3,4,5,6,7,8,9,10,11,23,44,86];
        var result = binary_search(arr,10);
        alert(result); // 9 返回目標元素的索引值       

    // 遞歸算法
        function binary_search(arr,low, high, key) {
            if (low > high){
                return -1;
            }
            var mid = parseInt((high + low) / 2);
            if(arr[mid] == key){
                return mid;
            }else if (arr[mid] > key){
                high = mid - 1;
                return binary_search(arr, low, high, key);
            }else if (arr[mid] < key){
                low = mid + 1;
                return binary_search(arr, low, high, key);
            }
        };
        var arr = [1,2,3,4,5,6,7,8,9,10,11,23,44,86];
        var result = binary_search(arr, 0, 13, 10);
        alert(result); // 9 返回目標元素的索引值  

 

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

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

61.你所瞭解到的Web攻擊技術

（1）XSS（Cross-Site Scripting，跨站腳本攻擊）：指經過存在安全漏洞的Web網站註冊用戶的瀏覽器內運行非法的HTML標籤或者JavaScript進行的一種攻擊。
（2）SQL注入攻擊
（3）CSRF（Cross-Site Request Forgeries，跨站點請求僞造）：指攻擊者經過設置好的陷阱，強制對已完成的認證用戶進行非預期的我的信息或設定信息等某些狀態更新。  

 

62.寫一個function，清除字符串先後的空格。（兼容全部瀏覽器）

function trim(str) {
    if (str && typeof str === "string") {
        return str.replace(/(^\s*)|(\s*)$/g,""); //去除先後空白符
    }
}

 

 

 

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

 

63.使用正則表達式驗證郵箱格式

 var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;
    var email = "example@qq.com";
    console.log(reg.test(email));  // true 

 

64.一次完整的HTTP事務是怎樣的一個過程？

基本流程：a. 域名解析

                 b. 發起TCP的3次握手

                 c. 創建TCP鏈接後發起http請求

                 d. 服務器端響應http請求，瀏覽器獲得html代碼

                 e. 瀏覽器解析html代碼，並請求html代碼中的資源

                 f. 瀏覽器對頁面進行渲染呈現給用戶

 

 

 

 

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

（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指儘可能不使用文件系統做爲緩存、減小讀寫文件次數等。程序優化永遠要優化慢的部分，換語言是沒法「優化」的。

     *基於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++) {}

 

 

66.http狀態碼有那些？分別表明是什麼意思？
100-199 用於指定客戶端應相應的某些動做。
200-299 用於表示請求成功。
300-399 用於已經移動的文件而且常被包含在定位頭信息中指定新的地址信息。
400-499 用於指出客戶端的錯誤。400 一、語義有誤，當前請求沒法被服務器理解。401 當前請求須要用戶驗證 403 服務器已經理解請求，可是拒絕執行它。
500-599 用於支持服務器錯誤。 503 – 服務不可用

 

 

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

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

 

 

 

   69.  平時如何管理你的項目，如何設計突發大規模併發架構？
      先期團隊必須肯定好全局樣式（globe.css），編碼模式(utf-8) 等
      編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）；
      標註樣式編寫人，各模塊都及時標註（標註關鍵樣式調用的地方）；
      頁面進行標註（例如 頁面 模塊 開始和結束）；
      CSS跟HTML 分文件夾並行存放，命名都得統一（例如style.css）
      JS 分文件夾存放 命民以該JS 功能爲準英文翻譯；
      圖片採用整合的 images.png png8 格式文件使用 儘可能整合在一塊兒使用方便未來的管理

 

 

    70. 那些操做會形成內存泄漏？
      內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在。
      垃圾回收器按期掃描對象，並計算引用了每一個對象的其餘對象的數量。若是一個對象的引用數量爲 0（沒有其餘對象引用過該對象），或對該對象的唯一引用是循環的，那麼該對象的內存便可回收。
      setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏。
      閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

 

 

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

 

 

 

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

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

 

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

若是靜態文件都放在主域名下，那靜態文件請求的時候都帶有的cookie的數據提交給server的，很是浪費流量，
因此不如隔離開。

由於cookie有域的限制，所以不能跨域提交請求，故使用非主要域名的時候，請求頭中就不會帶有cookie數據，
這樣能夠下降請求頭的大小，下降請求時間，從而達到下降總體請求延時的目的。

同時這種方式不會將cookie傳入Web Server，也減小了Web Server對cookie的處理分析環節，
提升了webserver的http請求的解析速度。

74.頁面重構怎麼操做？

網站重構：在不改變外部行爲的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行爲。
也就是說是在不改變UI的狀況下，對網站進行優化，在擴展的同時保持一致的UI。

對於傳統的網站來講重構一般是：

表格(table)佈局改成DIV+CSS
使網站前端兼容於現代瀏覽器(針對於不合規範的CSS、如對IE6有效的)
對於移動平臺的優化
針對於SEO進行優化
深層次的網站重構應該考慮的方面

減小代碼間的耦合
讓代碼保持彈性
嚴格按規範編寫代碼
設計可擴展的API
代替舊有的框架、語言(如VB)
加強用戶體驗
一般來講對於速度的優化也包含在重構中

壓縮JS、CSS、image等前端資源(一般是由服務器來解決)
程序的性能優化(如數據讀寫)
採用CDN來加速資源加載
對於JS DOM的優化
HTTP服務器的文件緩存

75.What is a Polyfill?

polyfill 是「在舊版瀏覽器上覆制標準 API 的 JavaScript 補充」,
能夠動態地加載 JavaScript 代碼或庫，在不支持這些標準 API 的瀏覽器中模擬它們。
例如，geolocation（地理位置）polyfill 能夠在 navigator 對象上添加全局的 geolocation 對象，
還能添加 getCurrentPosition 函數以及「座標」回調對象，
全部這些都是 W3C 地理位置 API 定義的對象和函數。由於 polyfill 模擬標準 API，
因此可以以一種面向全部瀏覽器將來的方式針對這些 API 進行開發，
一旦對這些 API 的支持變成絕對大多數，則能夠方便地去掉 polyfill，無需作任何額外工做。

• 作的項目中，有沒有用過或本身實現一些 polyfill 方案（兼容性處理方案）？

  好比： html5shiv、Geolocation、Placeholder

76.檢測瀏覽器版本版本有哪些方式？

功能檢測、userAgent特徵檢測

好比：navigator.userAgent
//"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36
  (KHTML, like Gecko) Chrome/41.0.2272.101 Safari/537.36"

 77.用js實現千位分隔符?(提示：正則+replace)

function commafy(num) {
     num = num + '';
     var reg = /(-?d+)(d{3})/;

    if(reg.test(num)){
     num = num.replace(reg, '$1,$2');
    }
    return num;
}

 

 78.前端自動化

 

 

79.前端模塊化開發

 

 

 

 

參考文章：http://www.cnblogs.com/bigboyLin/p/5272902.html

http://www.jobui.com/mianshiti/it/web/5066/

http://web.jobbole.com/88041/

http://www.qdfuns.com/notes/32387/4ce08765aacba7ad969315c59d267903.html

http://www.2cto.com/kf/201604/498751.html