前端面試題總結

====各個瀏覽器中css表現的差別性(瀏覽器兼容問題)：
    (http://www.douban.com/group/topic/4629864/)
    (http://blog.csdn.net/chuyuqing/article/details/37561313)
    (http://www.iefans.net/ie-9-css-bug/)
    1,各瀏覽器下，margin與padding顯示差別
      ==解決辦法:CSS reset
    2,block+float+水平margin,IE6裏的間距比超過設置的間距(橫向佈局)
      ==解決辦法:diaplay:inline
      (不用擔憂內聯元素無寬高，由於float會讓inline元素haslayout,讓inline元素表現的和inline-block元素同樣有寬高和垂直內外邊距)
      [咱們最經常使用的就是div+CSS佈局了，而div就是一個典型的塊屬性標籤，橫向佈局的時候咱們一般都是用div float實現的，橫向的間距設置若是用margin實現，這就是一個必然會碰到的兼容性問題]
    3,inline+(display:block)+float+水平margin,IE6裏的間距比超過設置的間距
      說明:該狀況與上面的差很少,只是此處的元素一開始是內聯元素,加了display:block的CSS屬性.由於它自己就是行內屬性標籤，因此咱們再加上display:inline的話，它的高寬就不可設了。這時候咱們還須要在display:inline後面加入display:talbe
      ==解決辦法:display:inline;display:table;
    4,IE6對margin:0 auto;不會正確的進行解析
      解決辦法：
         在父元素中使用text-align:center,在元件中使用text-align:left
    5,沒法設置微高(通常小於10px)：
      說明:當設置元素高度小於10px時，IE6和IE7不受控制，超出設置的高度
      產生緣由:IE不容許原件的高度小於字體的高度
      解決辦法1:設置字體大小:font-size:0;
      解決辦法2:給超出高度的標籤設置overflow:hidden
      解決辦法3:設置行高line-height小於你設置的高度
    6,子元件撐破父元件
      緣由:父元件設置了overflow:auto屬性,子元件會從父元件中撐破出來
      解決辦法:父元件中設置position:relative;
    7,IE沒法解析min-height和min-width
      解決辦法1:
      selector{
        min-height:150px;
        height:auto !important;
        height:150px;
      }
      解決辦法2：
      selector{
        min-height:150px;
        height:150px;
      }
      heml>body selector{
        height:auto;
      }
    8,使用ul li時,li與li之間會空行
      解決辦法1:設置li selector{height:**px;}
      解決辦法2:li selector{float:left;clear:left;}
      解決辦法3:li{display:inline}

====CSS hack:
    +:IE6,IE7
    _:IE6
    \9:IE6,IE7,IE8
    \0:IE8,IE9
    \9\0:IE9
    !important:All(IE6是有條件的支持)

====經常使用的CSS reset:
    (http://blog.bingo929.com/css-reset-collection.html)
    margin:0;
    padding:0;
    border:0;
    ...        

====盒子模型
    padding,border,margin,content;
    標準盒模型與IE盒模型：
       前者：width設置針對content
       後者:width針對border+padding+content
    對於盒子的選擇：
       須要依靠最上面的Doctype來看,若是沒有聲明Doctype,則按照瀏覽器會根據本身的行爲去理解網頁;聲明後各瀏覽器會按照W3C標準去解釋你的盒子,網頁就能在各個瀏覽器中顯示一致了

====性能優化的幾個原則:
      1,儘可能減小http請求:
        改善響應時間的最簡單途徑就是減小組件的數量，並由此減小HTTP請求的數量:
        (1)將多個圖片合併到一張單獨的圖片
        (2)JS、CSS文件合併
      2,使用內容發佈網絡(CDN的使用)：
        是一組分佈在多個不一樣地理位置的Web服務器，用於更加有效地向用戶發佈內容;
        主要用於發佈頁面靜態資源：圖片、css文件、js文件等。如此，能輕易地提升響應速度.
      3,添加Expires頭
      4,將CSS樣式表放在頂部
      5,將javascript腳本放在底部
      6,避免使用CSS表達式
      7,使用外部javascript和CSS
      8,減小DNS查詢
      9,精簡javascript
      10,避免重定向
      11,刪除重複腳本
      12,配置ETag
      13,使Ajax可緩存
      14,避免使用CSS表達式

====JS的數據類型(http://blog.sina.com.cn/s/blog_6fd4b3c10101d0va.html)
         基本數據類型(5)：string，number，null，undefined，boolean
         引用類型：object，array，function；
         數據類型              typeof
           string             string
           number              number
           boolean            boolean
         undefined           undefined
           null                object
           object              object
           array               object
          function             function
          (NaN)                (number)
          (Error)              (Function)
    區分基本數據類型：typeof;
    區分引用數據類型：instanceof（instanceof還能夠檢測到具體的是什麼實例，能夠檢測是不是正則表達式）
                   eg:[1,2,3,4] instanceof Array;     //true
                            \d{3} instanceof RegExp;     //true
   區分各數據類型：
            Object.prototype.toString.call(val).slice(8,-1)；
                eg:Object.prototype.toString.call([1,2,3]).slice(8,-1); //Array
              obj instanceof typeName;
                eg:[1,2,3] instanceof Array;     //true
              obj.constructor.toString().indexof(typeName);
                eg:[1,2,3].constructor.toString().indexof("Array");    
              //9(只要值不爲-1,即爲typeName類型)

====會不會SEO(搜索引擎優化)
    1,站內優化
    使得網站在搜索引擎上的友好度和站內用戶的良好體驗度上升
    讓網站在搜索引擎的排名靠前而且獲得很好的客戶轉換率
    2,站外優化
    經過SEO手段幫助網站和網站所屬企業進行品牌推廣

====語義化的理解？
    html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；
    在沒有樣式CSS狀況下也以一種文檔格式顯示，而且是容易閱讀的；
    搜索引擎的爬蟲依賴於標記來肯定上下文和各個關鍵字的權重，利於 SEO；
    使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

====html5新特性：
    1，webStorage(sessionStorage,localStorage);
    2，onmessage,postmessage解決跨域問題;
    3，新的文檔類型  (New Doctype)：
      以前的聲明文檔類型：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">在H5中失效，H5只須要用
      <!DOCTYPE html>便可完成文檔聲明
    4，新增一系列語義化標籤：header,footer,figure+figcaption,article,nav等
    5，新增屬性 ：
      ==佔位符 (placeholder：
        在HTML4或XHTML中，你須要用JavaScript來給文本框添加佔位符。
        好比，你能夠提早設置好一些信息，當用戶開始輸入時，文本框中的文字就消失。而在HTML5中,新的「placeholder」就簡化了這個問題；
      ==input新增屬性：required(必填項);pattern(正則限定輸入)；
    6,audio(音頻)與video(視頻);
    7,<script async="async">
           
====事件模型
        冒泡型事件(事件委託的原理)
        捕獲型事件 
        
====事件綁定
    (http://www.cnblogs.com/iloveyoucc/archive/2012/08/15/2639874.html)
    1,綁定元素屬性:事件屬性名稱由事件類型外加一個on前綴構成
      eg:<input type="button" name="myButton" onClick="myFunc()">
      能夠支持開發者把參數傳遞給事件處理器函數
    2,綁定對象屬性:
      eg:document.forms[0].myButton.onclick = myFunc
      沒有辦法向事件函數傳遞參數
    3,綁定IE4+支持<script for="id" event="eventName">標識
      for屬性的值必須是元素的id;必須把事件的名稱(onmouseover，onclick等等)分配給 event屬性
      eg:<input type="button" name="myButton" id="button1">   
        <script for="button1" event="onclick">
          // script statements here 
        </script>  
      標識中的語句能夠調用頁面上其它地方定義的任何函數(或者從.js文件中導入的函數)
      這種綁定方式意味着您必須爲每個元素和每個事件建立一個<script for event>標識
    4,IE5+支持:elemObject.attachEvent("eventName", functionReference);
      eg:document.getElementById("").attachEvent("onclick",function(){...});
      注意:不能在元素被載入瀏覽器以前執行這個語句;
           該對象的引用在相應的 HTML 按鍵元素被瀏覽器建立以前，都是無效的;
           要讓這樣的綁定語句或者在頁面的底部運行，或者在body元素的onLoad
           事件處理器調用的函數中運行
    5,W3C DOM的addEventListener()方法
      eg:docuemnt.getElementById("").addEventListener("click",function(){...},false);
      第三個參數表示是否在捕獲階段進行處理
    【注意方法4和方法5中，事件的名字:IE中要加前綴"on",W3C不用加前綴】

====jsonp&&跨域問題

====如何給函數整個觸發器
    setTimeout()
    setInterval()

====什麼狀況下外邊距會合並
    外邊距合併指的是，當兩個垂直外邊距相遇時，它們將造成一個外邊距。
    合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

====正則式（http://deerchao.net/tutorials/regex/regex.htm）

====如何理解bfc（http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html）
  ==BFC佈局規則：
          1，內部的Box會在垂直方向，一個接一個地放置（塊級元素獨佔一行）
          2，Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊，對於垂直box外邊距合併（見上面一條），是由於這兩個box屬於同一個BFC。所以只要改變其中一個box的BFC便可以達到外邊距不重疊的效果
   (經常使用的作法是:在其中一個box上套一層容器，並觸發該容器生成一個BFC)
          3，每一個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。對於一列固定另外一欄浮動的兩欄自適應佈局，固定的一欄會覆蓋到浮動的那一欄，即兩欄的左邊會相接觸。根據第四點，能夠經過觸發固定列的BFC達到自適應的目的。
          4，BFC的區域不會與float box重疊。
          5，BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此由於BFC內部的元素和外部的元素絕對不會互相影響，所以， 當BFC外部存在浮動時，它不該該影響BFC內部Box的佈局，BFC會經過變窄，而不與浮動有重疊。一樣的，當BFC內部有浮動時，爲了避免影響外部元素的佈局，BFC計算高度時會包括浮動的高度。避免margin重疊也是這樣的一個道理。 
          6，計算BFC的高度時，浮動元素也參與計算。對於父元素沒有隨着子元素高度的增長而增長能夠觸發父元素的BFC來達到自適應的目的
  ==哪些元素會生成BFC?
          根元素
          float屬性不爲none
          position爲absolute或fixed
          display爲inline-block, table-cell, table-caption, flex, inline-flex
          overflow不爲visible(全部關於margin，雙邊距等bug能夠用overflow:auto修復)

====ajax

====Http原理

====狀態碼

====http數據包

====寫寫本身經常使用的CSS3特性:
    ===選擇器：
        ==屬性選擇器（只有IE6不支持）
        [att^="value"]
        匹配包含以特定的值開頭的屬性的元素
        eg:div[class^="item"]{background:yellow;}
        [class以item開頭的元素的background屬性爲yellow]
        [att$="value"]
        匹配包含以特定的值結尾的屬性的元素
        [att*="value"]
        匹配包含含有特定的值的屬性的元素
        ==連字符（全部瀏覽器都支持）
        CSS3中惟一新引入的連字符是通用的兄弟選擇器（同級）。它針對一個元素的有同一個父級節點的全部兄弟級別元素。
        好比，給某個特定的div的同級的圖片添加一個灰色的邊框(div和圖片應該有同一個父級節點)，在樣式表中定義下面的樣式就足夠了：
        div~img {   
            border: 1px solid #ccc;   
          }
        ==僞類
        :nth-child(n)
        讓你基於元素在父節點的子元素的列表位置來指定元素。你能夠是用數字、數字表達式或odd 和even 關鍵詞(對斑馬樣式的列表很完美)。因此若是你想匹配在第四個元素以後的一個3個元素的分組，你能夠簡單的這樣使用：
        :nth-child(3n+4) { }/*匹配第4,7,10,13,16,19...個元素*/
        :nth-last-child(n)
        與上個選擇器的思想一樣，可是從後面匹配元素（倒序），好比，爲了指定一個div裏面的最後兩個段落，咱們可使用下面的選擇器：
        div p:nth-last-child(-n+2)
        :last-child
        匹配一個父節點下的最後一個子元素，等同於:nth-last-child(1)
        :checked
        匹配選擇的元素，好比複選框
        :empty
        匹配空元素（沒有子元素）。
        :not(s)
        匹配全部不符合指定聲明(s)的元素。好比，若是你想讓全部的沒有使用」lead」類的段落的顯示爲黑色，能夠這樣寫： 
        p:not([class*="lead"]) { color: black; }
   ===RGBA和透明度
   ====多欄佈局（火狐瀏覽器、谷歌瀏覽器，IE10+等支持）
      使用多欄佈局時只能爲全部欄指定一個統一的高度，欄與欄之間的寬度不多是不同的，另外也不可能具體指定什麼欄中顯示什麼內容，所以比較適合使用在顯示文章內容的時候，不適合用於安排整個網頁中由各元素組成的網頁結構時。
      ===多欄佈局第一個屬性：column-count
         column-count屬性爲一個數字表示列數，不帶單位，含義是將一個元素中的內容分爲多欄進行顯示
         .box {
          width: 600px;
          backgrond-color: #ddd;
          column-count: 2;
      }
      ===多欄佈局的第二個屬性：column-gap
       使用column-gap屬性來設定多欄之間的間隔距離。
       .box {
          width: 600px;
          backgrond-color: #ddd;
          column-count: 2;
          column-gap: 60px;
      }
    ===多欄佈局第3個屬性：column-rule
      column-rule屬性在欄與欄之間增長一條間隔線，而且設定該間隔線的寬度、樣式、顏色，該屬性的指定方法與css中的border屬性指定方法相同
        .box {
          width: 600px;
          backgrond-color: #ddd;
          column-count: 2;
          column-gap: 60px;
          column-rule: 5px dashed #000;
      }
    ===多欄佈局最後一個屬性：column-width
      column-width能夠設置每一欄的寬度，可是在實際測試中發現並不像描述的那麼簡單，遂列舉出如下幾個問題：
      在設定column-width的同時必須設置盒子的width，不然盒子寬度默認爲100%，每欄寬度按照欄數平均分。
      盒子每欄寬度必須大於等於column-width設定的值，不然就會減小欄數來增長每欄寬度，例如盒子寬度400px，一共2欄，那麼每欄寬度就是200px，若是設置column-width: 210px的話盒子就會變成1欄以保證每欄寬度大於等於column-width:210px;，可是若是每欄寬度大於column-width的值時每欄寬度也不會強制等於column-width，這麼看column-width的個性有點像min-width。
    【CSS3規範裏描述的是，各列的高度是均衡的，瀏覽器會自動調整每列裏填充多少文本、均分文本，來使各列的高度保持均衡一致】
  ===多背景圖
  ===Word Wrap:normal|break-word
     (http://www.w3chtml.com/css3/properties/text/word-wrap.html)
     對於文字過長會致使文字撐破容器出來;
     使用CSS3屬性:
        word-wrap:break-word;內容將在邊界內換行,若是須要,單詞內部容許斷行.
        word-wrap:normal;內容將會撐破容器盒子
  ===文字陰影
  ===@font-face屬性
  ===圓角(邊框半徑)
  ===邊框圖片
  ===盒陰影
  ===盒子大小
  ===媒體查詢
  ===語音

====彈性盒子模型：box-flex
    CSS3中新的盒子模型——彈性盒子模型(Flexible Box Model)：
    ==box-flex屬性(很適用於流體佈局),用來按比例分配父標籤的寬度或高度空間
      eg: #one{box-flex:2;}
          #two{box-flex:1;}
          #three{box-flex:1;}
      表示id分別爲one，two，three的元素把父標籤按照2:1:1的比例分割;
    ==父標籤須要聲明爲
         father{display:box;}
         father{display:inline-box;}
         【注意:目前而言,僅Firefox/Chrome/Safari瀏覽器支持彈性盒子模型(IE9不詳,Opera還沒有),且使用的時候，須要附帶私有前綴。就是諸如-moz-, -webkit-前綴】
    ==當子元素中有寬度值的時候，此元素就定寬處理，剩下的空間再按比例分配
      eg：#one{box-flex:2;}
          #two{box-flex:1;}
          #three{width:200px;}
      three寬度爲200像素，one和two把剩下的空間按2:1分
    ==彈性盒子模型下的爸爸(父標籤)實際上是頗有貨的。爸爸肚子中的貨有：box-orient, box-direction, box-align, box-pack, box-lines. 如今依次講講這裏box打頭的屬性都是幹嗎用的。
        ===box-orient用來肯定子元素的方向。是橫着排仍是豎着走：
          inline-axis是默認值。且horizontal與inline-axis的表現彷佛一致的，讓子元素橫排；而vertical與block-axis的表現也是一致的，讓元素縱列
    =====子元素除了box-flex屬性，還有兩個屬性，box-flex-group和box-ordinal-group，其中box-flex-group的做用不詳，貌似目前瀏覽器也不支持；box-ordinal-group的做用是拉幫結派。數值越小，位置就越靠前，這不難理解，第一組在最前嘛，隨後第二組，第三組… 
    例如：box-ordinal-group:1的組就會在box-ordinal-group:2的組前面顯示。因而，咱們能夠利用這個屬性改變子元素的順序。
    常見瀏覽器CSS前綴：
    =====Webkit核心瀏覽器的(好比, Safari)， 它們以-webkit-開始，以及Gecko核心的瀏覽器(好比, Firefox)，以-moz-開始，還有Konqueror (-khtml-)、Opera (-o-) 以及Internet Explorer (-ms-)都有它們本身的屬性擴展（目前只有IE8支持-ms-前綴）

====設計圓角
    border-radius:

====客戶端存儲：
    localStorage();
    sessionStorage()

====css選擇器權重:
  style:1000;
  ID:100;
  class:10;
  tagName:1;
  子選擇器(>)所有選擇(*):0;
  [後面的這些權值只是定的一個相對參考，並非具體的值]

====link和@import的區別：
    頁面中使用CSS的方式主要有3種：
         1，行內添加定義style屬性值
         2，頁面頭部內嵌調用
         3，外面連接調用其中外面引用有兩種：link和@import
    區別：
        1：link是XHTML標籤，除了加載CSS外，還能夠定義RSS等其餘事務；
           @import屬於CSS範疇，只能加載CSS。
        2：link引用CSS時，在頁面載入時同時加載；
           @import須要頁面網頁徹底載入之後加載。
        3：link是XHTML標籤，無兼容問題；
           @import是在CSS2.1提出的，低版本的瀏覽器不支持。
        4：ink支持使用Javascript控制DOM去改變樣式；
           而@import不支持。

====繼承的幾種方式：
     1，構造函數
     2，原型鏈

====數據傳遞的幾種方式：
    get,post,本地存儲(localStorage)
    [面試官問我，除了get和post方法還有什麼別的方法？我想了半天，面試官說，本地存儲啊~~(就是localStorage),其實我想說PUT,HEAD來着@_@]

====webSocket:
    [http://www.cnblogs.com/wei2yi/archive/2011/03/23/1992830.html]
    是下一代客戶端-服務器的異步通訊方法，該通訊取代了單個的TCP套接字，使用ws或wss協議，可用於任意的客戶端和服務器程序;並且有一個優秀的第三方API，名爲Socket.IO
    服務器和客戶端能夠在給定的時間範圍內的任意時刻，相互推送信息;
    與ajax的區別:
    WebSocket並不限於以Ajax(或XHR)方式通訊，由於Ajax技術須要客戶端發起請求，而WebSocket服務器和客戶端能夠彼此相互推送信息；XHR受到域的限制，而WebSocket容許跨域通訊
    // 建立一個Socket實例
    var socket = new WebSocket('ws://localhost:8080'); //ws表示socket協議
    // 打開Socket 
    socket.onopen = function(event) { 
      // 發送一個初始化消息
        socket.send('I am the client and I\'m listening!'); 
      // 監聽消息
        socket.onmessage = function(event) { 
          console.log('Client received a message',event); 
        }; 
      // 監聽Socket的關閉
        socket.onclose = function(event) { 
          console.log('Client notified socket has closed',event); 
        }; 
      // 關閉Socket.... 
      socket.close() 
  };

====不用angularJS，如何實現雙向數據綁定
    ajax：異步數據傳輸？

====響應式佈局：彈性盒子/媒體查詢

====如何獲取瀏覽器信息：
    Navigator 對象包含有關瀏覽器的信息。

Navigator 對象屬性：

屬性                       描述                IE    F    O
appCodeName            返回瀏覽器的代碼名。     4    1    9
appMinorVersion       返回瀏覽器的次級版本。    4    No   No
appName               返回瀏覽器的名稱。        4    1    9
appVersion         返回瀏覽器的平臺和版本信息。 4    1    9
browserLanguage       返回當前瀏覽器的語言。    4    No   9
cookieEnabled      返回指明瀏覽器中是否啓用
                     cookie 的布爾值。          4    1   9
cpuClass           返回瀏覽器系統的 CPU 等級。  4    No  No
onLine           返回指明系統是否處於脫機模式的布爾值。 
                                                4    No  No
platform          返回運行瀏覽器的操做系統平臺。4     1   9
systemLanguage        返回 OS 使用的默認語言。  4     No  No
userAgent           返回由客戶機發送服務器的 
                    user-agent 頭部的值。       4     1    9
userLanguage          返回 OS 的天然語言設置。  4     No  9

====數組操做：
  ===toString(param):
    ==null和undefined沒有toString()方法
     把null或undefined變成字符串的方法：null+''或者String(null);
     直接用(null).toString()會報錯。
    ==param
    是可選的，當須要把數值型數據轉換成相應的進制數時，param能夠進行設置；eg:把十進制8轉換成二進制：(8).toString(2);//"1000";
    此處注意：必須是是number類型，如果("8").toString(2);//"8";
    ==對於浮點數
      若是小數點後面都是0，調用toString方法會把後面的0去掉
      (10.00).toString();//"10";(10.01).toString();//"10.01";
    ==對於object的toString()
      返回"[object ObjectName]"，其中ObjectName是對象類型的名稱。
    ==對於Date對象：
      var date = new Date();
        date.toString();//當前時間信息："Mon Oct 19 2015 19:55:55 GMT+0800 (中國標準時間)"
    【思考點：如何將小數點後面都爲0的浮點數轉化爲字符串？
      10.00+"";//"10"(如何獲得"10.00");
      10.00+10.00;//20(爲何不是20.00)；
      10.01+10.00;//20.009999999999998(爲何不是20.01)
      】
    ==String()與toString()的區別：
      (1)null和undefined有String()轉換成字符串，而toString()不能；
      (2)toString()能設定數值數據轉換的進制數，而String()不能；
      (3)其餘狀況下：toString(val) === String(val)
  ===join(seperator)：數組以分隔符seperator轉換成字符串

====原生JS對DOM操做：
    ===selector：
      ==Document對象方法：
        document.getElementsByName("");
        document.getElementsByTagName("");
        document.getElementById("");
      ==querySelector()|querySelectorAll()
       網址:http://www.nowamagic.net/librarys/veda/detail/388
        (原生寫法，比jquery速度快，缺點是IE六、7不支持。)：
        //接收的參數和CSS選擇器接收的參數同樣
        baseElement.querySelector(selector);
        baseElement.querySelectorAll(selector);
        baseElement能夠是document，也能夠是DOM
        eg:document.querySelectorAll("input[type='checkbox']");
           document.querySelector === document.querySelectorAll[0];
        =注意：querySelector與querySelectorAll的區別：
          (1)querySelector 用來獲取一個元素；
             querySelectorAll 能夠獲取多個元素。
          (2)querySelector將返回匹配到的第一個元素，若是沒有
             匹配的元素則返回 NullquerySelectorAll 返回一個包
             含匹配到的元素的數組，若是沒有匹配的元素則返回的數組爲空
      ==document對象與querySelector的區別：
          (1)getElement方法只能用於document,不能用於DOM,而querySelector能夠
          (2)getElment只能根據name,id,tagName獲取DOM，而querySelector不受限制
      ==關於querySelector的一些bug:
        <div class= "test" id= "testId" >
          <p><span>Test</span></p>
        </div>
        <script type= "text/javascript" >    
          var   testElement= document.getElementById( 'testId' ); 
          var   element = testElement.querySelector( '.test span' ); 
          var   elementList = document.querySelectorAll( '.test span' ); 
          console.log(element);  // <span>Test</span>
          console.log(elementList);  // 1   
        </script>
      按照W3C的來理解，這個例子應該返回：element：null；elementList：[];由於做爲baseElement的 testElement裏面根本沒有符合selectors的匹配子節點；但瀏覽器卻好像無視了baseElement，只在意selectors，也就是說此時baseElement近乎document；這和咱們的預期結果不合.
      解決辦法：看網址裏面的內容吧，有點看不懂的感受

====document.ready與window.onload：
    (http://blog.sina.com.cn/s/blog_49fa034d01011lpc.html)
    Jquery中$(document).ready()的做用相似於傳統JavaScript中的window.onload方法，不過與window.onload方法仍是有區別的。
    1.執行時間
      window.onload必須等到頁面內包括圖片的全部元素加載完畢後才能執行。
      $(document).ready()是DOM結構繪製完畢後就執行，沒必要等到加載完畢。
    2.編寫個數不一樣
      window.onload不能同時編寫多個，若是有多個window.onload方法，只會執行一個
      $(document).ready()能夠同時編寫多個，而且均可以獲得執行
    3.簡化寫法
      window.onload沒有簡化寫法
      $(document).ready(function(){})能夠簡寫成$(function(){});
    即：document.ready在window.onload前面執行

====document對象：
    ==每一個載入瀏覽器的HTML文檔都會成爲Document對象。
      Document 對象使咱們能夠從腳本中對 HTML 頁面中的全部元素進行訪問。
      提示：Document 對象是 Window 對象的一部分，可經過 window.document 屬性對其進行訪問[window.document能夠獲得文檔的內容(源碼)]
    ==document對象的屬性：
      document.URL:當前頁面的url；
      document.referrer:返回載入當前文檔的文檔的 URL；
        (若是當前文檔不是經過超級連接訪問的，則爲null，該屬性容許客戶端JS
        訪問HTTP引用頭部。)
      document.title:當前頁面的title；
      document.cookie:當前頁面全部的cookie；
      document.lastModified:當前頁面最後的修改時間；
      document.domain:當前頁面的域名；

====iframe、frame的缺點：

====html文件的渲染過程(性能優化的依據)：
    (http://blog.csdn.net/luckygll/article/details/7432713)
    (http://my.oschina.net/u/1414906/blog/357860)
    客戶端發出請求---服務器響應將html文件返回給請求的客戶端瀏覽器中;
    頁面開始加載;
    加載從html標籤開始;
    加載到head標籤時，若是標籤內有個外部樣式文件(.css)要加載;
    客戶端向服務器發出一個請求加載CSS文件，服務器響應;
    CSS加載完成後，客戶端瀏覽器繼續加載html文件裏的body標籤(在CSS文件加載完畢後同時渲染頁面);
    客戶端在body標籤發現img標籤而且引用了一張圖片,客戶端瀏覽器向服務器發出一次請求,瀏覽器不會等到圖片下載完，而是繼續渲染後面的代碼;
    img標籤中的圖片加載完了，要顯示出來，而圖片又要佔用必定的面積，又會影響到後面的佈局，瀏覽器不得不回來從新渲染這一部分;
    body標籤裏的標籤加載及渲染完成後，瀏覽器發現script標籤中的代碼,瀏覽器須要想服務器發出請求加載js文件，服務器響應;
    瀏覽器解析執行js文件時發現裏面有一些對body文檔結構變化的操做(隱藏某段內容等),此時瀏覽器又須要從新去渲染這些內容;
    知道瀏覽器發現 </html>標籤;
    等等，還沒完。用戶點擊了一下界面中的換膚按鈕,js讓瀏覽器換了一下<link>的css標籤;
    瀏覽器召集了在座的各位＜div＞＜span＞＜ul＞＜li＞們，「大夥兒收拾收拾行李，咱得從新來過……」，瀏覽器向服務器請求了新的CSS文件，從新渲染頁面。
    ===reflow與repaint：
      ==reflow(迴流):涉及到部分頁面的佈局
       (http://www.planabc.net/2009/04/13/reflow/)
       頁面中向服務器請求的次數多會影響到打開速度,
       從新渲染局部的次數也會影響頁面打開速度,對於這種來回渲染,叫作reflow,
       一個元素的迴流致使了其全部子元素以及DOM中緊隨其後的祖先元素的隨後的迴流,reflow幾乎是沒法避免的,咱們不能由於懼怕reflow就丟掉一些頁面效果,可是reflow是能夠優化的,
       (好比圖片在.css樣式文件中就定義好圖片的高度,這會減小頁面從新渲染的次數);
       (1)致使reflow的一些因素:
          調整窗口大小;
          改變字體;
          增長或者移除樣式表;
          內容變化，好比用戶在input框中輸入文字;
          激活CSS僞類，好比 :hover (IE 中爲兄弟結點僞類的激活);
          操做class屬性;
          腳本操做DOM;
          計算offsetWidth和offsetHeight屬性;
          設置style屬性的值;
       (2)合理的優化:
          若是想設定元素的樣式，經過改變元素的class名(儘量在DOM樹的最裏層);
            [能夠限制了迴流的範圍，使其影響儘量少的節點]
          避免設置多項內聯樣式;

          應用元素的動畫，使用position屬性的fixed值或absolute值
            [它們不影響其餘元素的佈局(BFC?),所它他們只會致使從新繪製,而不是一個完整迴流]
          權衡平滑和速度;
          避免使用table佈局;
          避免使用CSS的JavaScript表達式(僅IE瀏覽器);
      ==repaint(重繪):瀏覽器必須驗證DOM樹上其餘節點元素的可見性
        重繪：對某個區域、對象的從新渲染表現
        迴流：對某個區域、對象進行重繪，根據條件影響到它的祖先對象進入重繪（並可能無限遞歸直到頂級祖先對象）
        重繪如何出現：改變對象的形狀、座標、表現以及內容都會引起該對象被從新渲染，這種現象即爲重繪。
        迴流如何出現：當該對象即將重繪時，瀏覽器會根據條件判斷該對象的重繪結果是否會依賴該對象的祖先元素。若是有則將該對象祖先元素也加入本次重繪。並一直向上尋找，直到條件不匹配。此現象即爲迴流。
        最後總結：
          一、重繪可能引起迴流
          二、迴流一定引起重繪

    ===js的阻塞特性：(解決:使用異步加載的方式:在script標籤中添加async屬性)
      其中js是阻塞式的加載，瀏覽器在加載js時，當瀏覽器在執行js代碼時，不會作其餘的事情，即<script>的每次出現都會讓頁面等待腳本的解析和執行，js代碼執行後，纔會繼續渲染頁面。新一代瀏覽器雖然支持並行下載。可是js下載仍會阻塞其餘資源的下載（好比圖片）。因此應該把js放到頁面的底部。
    ===js的優化：
      1.要使用高效的選擇器。
      2.將選擇器保存爲局部變量
      3.先操做再顯示
  
====跨域:
    協議,域名,端口號有一個不一樣就被稱爲跨域

====http與https:

====prototype與__proto__
    (http://www.cnblogs.com/snandy/archive/2012/09/01/2664134.html)
    prototype:每個函數對象都有一個顯示的prototype屬性,它表明了對象的原型
    __proto__:內部原型(IE6/7/8/9不支持),每一個對象都有一個名爲__proto__的內部隱藏屬性，指向於它所對應的原型對象,
    IE9中可使用Object.getPrototypeOf(obj)獲取對象的內部原型;
    [原型鏈是基於__proto__才得以造成]
    全部對象__proto__都指向其構造器的prototype,包括自定義的構造器
    [注意:構造器能夠直接用構造器的名字,也能夠用實例對象的constructor屬性得到]
      var obj = {name: 'jack'}
      var arr = [1,2,3]
      var reg = /hello/g
      var date = new Date
      var err = new Error('exception')
      //自定義一個構造器
      function Person(name) {
        this.name = name
      }
      var p = new Person('jack');

      obj.__proto__ === Object.prototype // true
      obj.__proto__ === obj.constructor.prototype // true
      arr.__proto__ === Array.prototype  // true
      reg.__proto__ === RegExp.prototype // true
      date.__proto__ === Date.prototype  // true
      err.__proto__ === Error.prototype  // true
      p.__proto__ === Person.prototype  // true
      p.__proto__ === p.constructor.prototype  // true

      能夠看到p.__proto__與Person.prototype，p.constructor.prototype都是恆等的，即都指向同一個對象。

====做用域與做用域鏈

====模塊化

===跳出循環體
   break:跳出最內層循環或者退出一個switch語句
   continue:跳出當前循環繼續下一個循環
   return:跳出循環,即便函數主體中還有其餘語句,函數執行也會中止。

轉自http://www.w3cfuns.com/home.php?mod=space&uid=5468781&do=blog&id=5409858&page=2#comment_ul