一些前端相關的面試題（含答案）

一、         列舉幾種後端通信的方法，分別使用的場景。

跨域請求存在的緣由：因爲瀏覽器的同源策略，即屬於不一樣域的頁面之間不能相互訪問各自的頁面內容。

跨域的場景：    

1.域名不一樣 www.yangwei.com 和www.wuyu.com 即爲不一樣的域名）

2.二級域名相同，子域名不一樣（www.wuhan.yangwei.com www.shenzheng.yangwei.com 爲子域不一樣）

3.端口不一樣，協議不一樣  （ http://www.yangwei.com 和https://www.yangwei.com屬於跨域www.yangwei.con:8888和www.yangwei.con:8080)

跨域的方式：（內容較多，需掌握CORS和jsonp，其餘內容也要了解）

1.前端的方式: possMessage，window.name,document.domain,image.src(得不到數據返回)，jsonP(script.src後臺不配合得不到數據返回)，style.href（得不到數據返回)

一.imge.src,script.src,style.href 不受同源策略的影響能夠加載其餘域的資源，能夠用這個特性，向服務器發送數據。最經常使用的就是使用image.src 向服務器發送前端的錯誤信息。image.src 和style.href 是沒法獲取服務器的數據返回的，script.src 服務器端配合能夠獲得數據返回。

二possMessage,window.name,document.domain 是兩個窗口直接相互傳遞數據。

（1）possMessage 是HTML5中新增的，使用限制是 必須得到窗口的window 引用。IE8+支持，firefox，chrome,safair,opera支持

       （2）window.name ，在一個頁面中打開另外一個頁面時，window.name 是共享的，因此能夠經過window.name 來傳遞數據，window.name的限制大小是2M，這個全部瀏覽器都支持,且沒有什麼限制。

3） document.domain 將兩個頁面的document.domain 設置成相同，document.domain 只能設置成父級域名，既能夠訪問，使用限制：這頂級域名必須相同

2.純後端方式: CORS，服務器代理

CORS 是w3c標準的方式，經過在web服務器端設置：響應頭Access-Cntrol-Alow-Origin 來指定哪些域能夠訪問本域的數據，ie8&9(XDomainRequest),10+,chrom4 ，firefox3.5,safair4，opera12支持這種方式。

服務器代理，同源策略只存在瀏覽器端，經過服務器轉發請求能夠達到跨域請求的目的，劣勢：增長服務器的負擔，且訪問速度慢。

3.先後端結合:JsonP

script.src 不受同源策略的限制，因此能夠動態的建立script標籤，將要請求數據的域寫在src 中參數中附帶回調的方法，服務器端返回回調函數的字符串，並帶參數。

如 script.src="http://www.yangwei.com/?id=001&callback=getInfoCallback,服務器端返回 getInfoCallBack("name:yangwei;age:18") 這段代碼會直接執行，在前面定義好getInfoCallBack函數，既能夠得到數據並解析。 這種是最長見的方式。

4.webSocke（瞭解性拓展）

服務端推送websocket和sse場景及應用

應用場景

均可以進行服務端推送,而且都是使用長鏈接來進行.但二者的實現又有一點不一樣,sse仍使用http協議,而且使用相同的連接發送正常的http協議報文.而websocket是使用http協議進行握手,而後再使用同一個連接進行websocket協議的通訊.

websocket能夠進行雙向的通訊,即服務端能夠往客戶端發信息,客戶端也能夠向服務端發信息.而sse是單向的,只能由服務端往客戶端發.

websocket自帶鏈接的保持,即經過ping/pong協議保證鏈接能夠始終維持,sse沒有這個保證,不過能夠參考ping/pong協議,本身週期性地發送信息來一樣地進行處理.好比,5秒往客戶端發一個特別的信息(經過type/name進行區分).其次,由於是基於瀏覽器的使用,sse有一個特性,就是瀏覽器發現一個鏈接斷掉了,就會自動地進行重聯,即從新發送請求.這樣,服務端也不用擔憂鏈接被斷開,不過須要處理新的請求必須和上一次請求的內容相連續,以及新的推送註冊.

由於都是使用http協議進行起始處理,所以在籤權上均可以使用到http協議自己的一些東西,好比header/cookie籤權.在相應的握手階段,經過讀取cookie(session)來保證相應的請求必須是通過受權的,也能夠用於定位使用人.甚至能夠經過這些信息保證單個用戶只能有一個請求,避免重複請求

因爲都是基於瀏覽器使用,所以建議的數據傳輸都是文本型.雖然websocket支持二進制frame傳輸,不過一些都不建議使用.sse只能傳輸文本

無論是websocket仍是sse,在用於通訊時,都建議只用於進行數據的推送,而不是進行完整的應用處理.這裏能夠理解爲,常規的業務處理仍然交給後端的服務來處理.這樣,便可以使用以前的業務開發的優點,又能夠使用推送的優點.而不是走向另外一個級端,即全部的信息都想經過推送來傳遞.

開發方式

websocket開發首選netty,由於netty對協議的封裝已經作到了徹底的支持.經過 HttpServerCodec做爲握手協議,WebSocketServerProtocolHandler做爲協議處理,而後再加一個本身的handler,就完成了相應的業務處理.同時在性能上,netty在一個ws的請求創建起來以後,會自動地去除httpServerCodec相關的handler,這樣保證後續的處理都是按照ws的協議來進行.

sse開發首選jersey,jersey-media-sse提供了相應的sse支持,而且經過與rest相集成,開發一個sse就跟普通的業務開發相同.

ws和sse在文本支持上都只支持utf-8編碼,所以在處理上須要註冊編碼方式.同時在使用sse時,若是後端第一次進行響應時,相應的編碼不對.chrome會直接報錯,包括utf8都會報錯(這是以前後端開發的一個問題),能夠修正或者增長相應的攔截器,保證後端content-type響應中的charset=UTF-8.

ws和sse均可以經過nginx進行代理轉發.ws的處理只須要設置http版本,以及從新轉發前端的Upgrade和Connection頭便可.而sse,也能夠經過禁用buffer來處理.參考 http://stackoverflow.com/questions/27898622/server-sent-events-stopped-work-after-enabling-ssl-on-proxy

特定實現

爲保證在開發時推送類的和業務類的系統不會耦合在一塊兒,或者同一個應用內有兩種處理模式的功能存在.建議直接在系統層就開發2個不一樣的系統,一個專門用於推送,另外一個用於相應的業務處理.而後業務處理後的數據,須要再交由推送處理,則能夠在後端進行經過消息系統進行中轉,如kafka(持久保證)或redis(內存訂閱)等

由於兩者在ie上的支持都頗有限,所以不建議在ie上進行嘗試

使用sse仍是websocket,取決因而否須要前臺交互,還取決於對後端的支持技術的瞭解程序.好比,瞭解jersey多一點,仍是netty多一點.因爲最近netty進行微服務化底層通訊支持愈來愈流行,我的更傾向於使用websocket.但若是僅僅是一個簡單的推送功能,又不但願修改代碼,那也能夠使用jersey(畢竟以前的系統就是在上面進行開發的)

須要後端有的時候須要進行定向發送或者是羣發,這種需求ws和sse的實現中都有相應的處理.如ChannelGroup和SseBroadcaster,這樣在後端獲取到一個消息,須要進行路由時就能夠從這裏面拿相應的channel信息.不過,前提是對各個channel上進行了特定的消息綁定,這樣就好區分具體的路由信息.具體路由策略能夠在創建時綁定session,後續經過session來路由.

 

二、         設計一個幻燈應用，須要列舉選擇的基礎框架、項目的基礎框

架和代碼管理、幻燈數據的存儲和讀取，部分特效的實現，能夠只寫思路，後續面聊。

本題並無找到好的答案解析，本身也沒有好的思路，有比較好想法的同窗能夠分享一下。

三、         請寫出至少20個HTML5標籤

<article> <aside> <audio> <canvas> <datalist> <command>   <details> <embed>

<figcaption>  <figure>  <footer>  <header>  <hgroup>  <keygen>  <mark>  <nav> 

<section>  <time>   <video>  <summary>

四、         列舉5種IE  hastlayout的屬性及其值

haslayout 是Windows Internet Explorer渲染引擎的一個內部組成部分。在Internet Explorer中，一個元素要麼本身對自身的內容進行計算大小和組織，要麼依賴於父元素來計算尺寸和組織內容。爲了調節這兩個不一樣的概念，渲染引擎採用 了 hasLayout 的屬性，屬性值能夠爲true或false。當一個元素的 hasLayout 屬性值爲true時，咱們說這個元素有一個佈局（layout）

部分的 IE 顯示的錯誤，均可以經過激發元素的 haslayout 屬性來修正。能夠經過設置 css 尺寸屬性(width/height)等來激發元素的 haslayout，使其「擁有佈局」。以下所示，經過設置如下 css 屬性便可。

* display: inline-block
* height: (任何值除了auto)
* float: (left 或 right)
* position: absolute
* width: (任何值除了auto)
* writing-mode: tb-rl
* zoom: (除 normal 外任意值)

Internet Explorer 7 還有一些額外的屬性(不徹底列表):

* min-height: (任意值)
* max-height: (除 none 外任意值)
* min-width: (任意值)
* max-width: (除 none 外任意值)
* overflow: (除 visible 外任意值)
* overflow-x: (除 visible 外任意值)
* overflow-y: (除 visible 外任意值)
* position: fixed

 

五、         簡述jpg。Gif。png-8.png-24的區別，分別使用場景

gif、jpg、png格式的圖片在網站製做中的區別

Gif格式特色:
　　1.透明性,Gif是一種布爾透明類型，既它能夠是全透明，也能夠是全不透明，可是它並無半透明（alpha透明）。
　　2.動畫,Gif這種格式支持動畫。
　　3.無損耗性,Gif是一種無損耗的圖像格式，這也意味着你能夠對gif圖片作任何操做也不會使得圖像質量產生損耗。
　　4.水平掃描,Gif是使用了一種叫做LZW的算法進行壓縮的，當壓縮gif的過程當中，像素是由上到下水平壓縮的，這也意味着同等條件下，橫向的gif圖片比豎向的gif圖片更加小。例如500*10的圖片比10*500的圖片更加小
　　5.間隔漸進顯示,Gif支持可選擇性的間隔漸進顯示
　　由以上特色看出只有256種顏色的gif圖片不適合照片，但它適合對顏色要求不高的圖形（好比說圖標，圖表等），它並非最優的選擇，咱們會在後面中看到png是最優的選擇。
　　Jpeg格式特色:
　　1.透明性,它並不支持透明。
　　2.動畫,它也不支持動畫。
　　3.損耗性,除了一些好比說旋轉（僅僅是90、180、270度旋轉），裁切，從標準類型到先進類型，編輯圖片的原數據以外，全部其它操做對jpeg圖像的處理都會使得它的質量損失。因此咱們在編輯過程通常用png做爲過渡格式。
　　4.隔行漸進顯示,它支持隔行漸進顯示（可是ie瀏覽器並不支持這個屬性，可是ie會在整個圖像信息徹底到達的時候顯示）。
　　由上能夠看出Jpeg是最適web上面的攝影圖片和數字照相機中。
　　Png格式特色:
　　1.類型,Png這種圖片格式包括了許多子類，可是在實踐中大體能夠分爲256色的png和全色的png，你完成能夠用256色的png代替gif，用全色的png代替jpeg
　　2.透明性,Png是徹底支持alpha透明的（透明，半透明，不透明），儘管有兩個怪異的現象在ie6（下面詳細討論）
　　3.動畫,它不支持動畫
　　PNG圖片格式如今包含三種類型：
　　1.PNG8256色PNG的別名
　　2.PNG24全色PNG的別名
　　3.PNG32全色PNG的別名
　　基本上PNG32就是PNG24，可是附帶了全alpha通道。就是說每一個像素上不只存儲了24位真色彩信息還存儲了8位的alpha通道信息，就如同GIF能存儲透明和不透明信息同樣。當咱們把圖片放到不太搭配的背景上的時候，透明PNG圖片的邊緣會顯示得更加平滑。
　　固然，我也知道你的想法，「可是Photoshop也能生成帶透明通道的PNG圖片！」我也知道，它只是表面上這麼說是PNG24，讓我也產生困惑了。
　　做爲一個傷感的Fireworks倡導者，我只使用PNG32支持附帶alpha通道的真色彩圖片。無論怎樣，若是你習慣使用Photoshop，你就應該知道，Photoshop在「存儲爲WEB格式」中只提供PNG8和PNG24兩種PNG格式。
　　我敢確定你常常會勾選「支持透明」選項，以得到帶有透明度的PNG圖片，可是這樣你就獲取了一張PNG32圖片。——Photoshop只是以爲把PNG32這個名稱給隱藏掉了。奇怪吧？……
　　對png8的誤解
　　Png8的在ie中的怪異表現：
　　半透明的png8在ie6如下的瀏覽器顯示爲全透明。
　　Alpha透明的全色PNG（png32）在ie6中會出現背景顏色（一般是灰色）。
　　由上面能夠總結：
　　（a）全透明的png8能夠在任一瀏覽器正常顯示（就像gif同樣）。半透明的png8在除了ie6及其如下的瀏覽器下錯誤的顯示成全透明，其它瀏覽器都能正常顯示半透明。這個bug並不須要特殊對待，由於在不支持半透明的瀏覽器下只是顯示爲全透明，對用戶體驗影響不大，它反而是透明gif的增強版。
　　（b）第二個bug沒有什麼好的方法解決，只能經過影響性能的方法AlphaImageLoader與須要加特殊標籤（VML）。
　　所以得出結論就是：請使用PNG8。
　　Png8的軟件問題：
　　Photoshop只能導出布爾透明的PNG8。
　　Fireworks既能導出布爾透明的PNG8，也能導出alpha透明的PNG8.

 

六、 算法題：

有一個長度爲n-1的數組，包含1-n中不重複的亂序的數，求尋找範圍內不在數組中的數，考慮空間佔用，性能優化，溢出等狀況，至少寫兩個算法

 當n不太大時，能夠考慮求和。先算出1~n的全部數的和，而後減去數組中出現的全部天然數的和。時間複雜度爲O(n)，空間複雜度O(1)。這種方法的缺點是n不能太大，n比較大時，求和容易溢出。

用位圖。從頭至尾的掃描整個數組，把出現的數相應的位設置爲1.而後再掃描位圖，找出不爲1的那一位，即爲要找的數。這種方法的時間複雜度爲O(n),空間複雜度爲O(n)。

異或有個很巧妙的地方：同一變量和該變量與另外一變量的異或值的異或等於這個變量自身。因此咱們能夠把1~n的全部數異或，再把數組中出現的全部數異或，而後再把這兩個異或的結果異或，最後獲得的值即爲咱們要找的值。這樣時間複雜度爲O(n),空間複雜度爲O（1）。在空間上比第二種方法要好，並且不會出現第一種方法中所說的溢出問題。

 

七、         實現如下方法（與標準一致）

Element.prototype .getElemantsByclassname

element.prototype.getElementsByClassName = function (searchClass, node,tag) {

  if(document.getElementsByClassName){

 var nodes =  (node || document).getElementsByClassName(searchClass),result = [];

for(var i=0 ;node = nodes[i++];){

        if(tag !== "*" && node.tagName === tag.toUpperCase()){

          result.push(node)

        }

      }

      return result

    }else{

      node = node || document;

      tag = tag || "*";

      var classes = searchClass.split(" "),

      elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag),

      patterns = [],

      current,

      match;

      var i = classes.length;

      while(--i >= 0){

        patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)"));

      }

      var j = elements.length;

      while(--j >= 0){

        current = elements[j];

        match = false;

        for(var k=0, kl=patterns.length; k<kl; k++){

          match = patterns[k].test(current.className);

          if (!match)  break;

        }

        if (match)  result.push(current);

      }

      return result;

    }

  }

 

Function.Prototype.bind

Function.prototype.bind = function (oThis) {

        if (typeof this !== "function") {

          throw new TypeError("bind function error");

        }

        var aArgs = Array.prototype.slice.call(arguments,1),

            fToBind = this,

            fBound = function () {

              return fToBind.apply(oThis || window,aArgs.concat(Array.prototype.slice.call(arguments)));

            };

        return fBound;

      };

 

八、         可以設置文本加粗的樣式屬性是什麼

字體加粗（font-weight） 　　

功能：用於設置字體筆劃的粗細。 　　

屬性值：正常度 - normal 　　

相對度 - bold, bolder, light, lighter 　　

漸變度 - 100, 200, 300, 400(至關於normal), 500, 600, 700(至關於 bold、 lighter、 bolder、以及數值100－900。 　　

語法爲：h1 {font-weight: 屬性值}

 

九、         編寫一個方法去掉一個數組的重複元素

1.遍歷數組法

最簡單的去重方法， 實現思路：新建一新數組，遍歷傳入數組，值不在新數組就加入該新數組中；注意點：判斷值是否在數組的方法「indexOf」是ECMAScript5 方法，IE8如下不支持，需多寫一些兼容低版本瀏覽器代碼，源碼以下：

// 最簡單數組去重法

function unique1(array){

  var n = []; //一個新的臨時數組

  //遍歷當前數組

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

    //若是當前數組的第i已經保存進了臨時數組，那麼跳過，

    //不然把當前項push到臨時數組裏面

    if (n.indexOf(array[i]) == -1) n.push(array[i]);

  }

  return n;

}

// 判斷瀏覽器是否支持indexOf ，indexOf 爲ecmaScript5新方法 IE8如下（包括IE8， IE8只支持部分ecma5）不支持

if (!Array.prototype.indexOf){

  // 新增indexOf方法

  Array.prototype.indexOf = function(item){

    var result = -1, a_item = null;

    if (this.length == 0){

      return result;

    }

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

      a_item = this[i];

      if (a_item === item){

        result = i;

        break;

      } 

    }

    return result;

  }

}

2.對象鍵值對法

該方法執行的速度比其餘任何方法都快， 就是佔用的內存大一些；實現思路：新建一js對象以及新數組，遍歷傳入數組時，判斷值是否爲js對象的鍵，不是的話給對象新增該鍵並放入新數組。注意點： 判斷是否爲js對象鍵時，會自動對傳入的鍵執行「toString()」，不一樣的鍵可能會被誤認爲同樣；例如： a[1]、a["1"] 。解決上述問題仍是得調用「indexOf」。

// 速度最快， 佔空間最多（空間換時間）

function unique2(array){

  var n = {}, r = [], len = array.length, val, type;

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

        val = array[i];

        type = typeof val;

        if (!n[val]) {

            n[val] = [type];

            r.push(val);

        } else if (n[val].indexOf(type) < 0) {

            n[val].push(type);

            r.push(val);

        }

    }

    return r;

}

3.數組下標判斷法

仍是得調用「indexOf」性能跟方法1差很少，實現思路：若是當前數組的第i項在當前數組中第一次出現的位置不是i，那麼表示第i項是重複的，忽略掉。不然存入結果數組。

function unique3(array){

  var n = [array[0]]; //結果數組

  //從第二項開始遍歷

  for(var i = 1; i < array.length; i++) {

    //若是當前數組的第i項在當前數組中第一次出現的位置不是i，

    //那麼表示第i項是重複的，忽略掉。不然存入結果數組

    if (array.indexOf(array[i]) == i) n.push(array[i]);

  }

  return n;

}

4.排序後相鄰去除法

雖然原生數組的」sort」方法排序結果不怎麼靠譜，但在不注重順序的去重裏該缺點毫無影響。實現思路：給傳入數組排序，排序後相同值相鄰，而後遍歷時新數組只加入不與前一值重複的值。

// 將相同的值相鄰，而後遍歷去除重複值

function unique4(array){

  array.sort();

  var re=[array[0]];

  for(var i = 1; i < array.length; i++){

    if( array[i] !== re[re.length-1])

    {

      re.push(array[i]);

    }

  }

  return re;

}

5.優化遍歷數組法

實現思路：獲取沒重複的最右一值放入新數組。（檢測到有重複值時終止當前循環同時進入頂層循環的下一輪判斷）

// 思路：獲取沒重複的最右一值放入新數組

function unique5(array){

  var r = [];

  for(var i = 0, l = array.length; i < l; i++) {

    for(var j = i + 1; j < l; j++)

      if (array[i] === array[j]) j = ++i;

    r.push(array[i]);

  }

  return r;

}

 

十、   編寫一個佈局，頁面寬度自適應，最小寬度300px，左邊定寬35%，右邊定寬65%

<div class="container">

              <div class="left"></div>

              <div class="right"></div>

       </div>

       <style>

              .container{

                     height: 600px;

                     _width: 300px;

                     min-width: 300px;

              }

              .left{

                     width: 35%;

                     height: 100%;

                     background: #ff0;

                     float: left;

              }

              .right{

                     overflow:hidden;

                     width: 65%;

                     height: 100%;

                     background: #0f0;

              }

       </style>

十一、     談談對html5的瞭解

1.良好的移動性，以移動設備爲主。

       2.響應式設計，以適應自動變化的屏幕尺寸

       3.支持離線緩存技術，webStorage本地緩存

       4.新增canvas，video，audio等新標籤元素。新特殊內容元素：article，footer，header，nav，section等，新的表單控件：calendar，date，time，email，url，search。

5.地理定位...

6.新增webSocket/webWork技術

十二、     Js面向對象的幾種方式

1.對象的字面量 var obj = {}

2.建立實例對象 var obj = new Object();

3.構造函數模式 function fn(){} , new fn();

4.工廠模式：用一個函數，經過傳遞參數返回對象。function fn(params){var obj =new Object();obj.params = params; return obj;},fn(params);

5.原型模式：function clock(hour){} fn.prototype.hour = 0; new clock();

首先，每一個函數都有一個prototype(原型)屬性，這個指針指向的就是clock.prototype對象。而這個原型對象在默認的時候有一個屬性constructor，指向clock，這個屬性可讀可寫。而當咱們在實例化一個對象的時候，實例newClock除了具備構造函數定義的屬性和方法外（注意，只是構造函數中的）,還有一個指向構造函數的原型的指針，ECMAScript管他叫[[prototype]]，這樣實例化對象的時候，原型對象的方法並無在某個具體的實例中，由於原型沒有被實例。

1三、     在css中哪一個屬性會影響dom讀取文檔流的順序

1.direction, writing-mode

 

1四、     前端頁面有哪三層構成，分別是什麼，做用是什麼

Css: 層疊樣式表 ,表現,  由css負責建立。css對「如何顯示有關內容」的問題作出了回答。

 

Html:超文本標記語言 ,結構, 由 HTML 或 xhtml之類的標記語言負責建立。標籤，也就是那些出如今尖括號裏的單詞，對網頁內容的語義含義作出了描述，但這些標籤不包含任何關於如何顯示有關內容的信息。例如，P標籤表達了這樣一種語義：「這是一個文本段。」

Js: 客戶端腳本語言 ,行爲, 內容應該如何對事件作出反應

 

1五、     Css的基本語句構成是？

語法:
（自定義的樣式名稱）｛
    樣式內容
｝

1六、     如何對網站的文件和資源進行優化

1．文件合併（目的是減小http請求）

2．文件壓縮 （目的是直接減小文件下載的體積）

3.使用cdn託管資源

4.使用緩存

5.gizp壓縮你的js和css文件

6.meta標籤優化（title,description,keywords）,heading標籤的優化,alt優化

7.反向連接，網站外連接優化

1七、     Javascipt的本地對象，內地對象和宿主對象

本地對象：Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError, 簡單來講，本地對象就是 ECMA-262 定義的類.

 

內置對象：ECMA-262 把內置對象（built-in object）定義爲「由 ECMAScript 實現提供的、獨立於宿主環境的全部對象，在 ECMAScript 程序開始執行時出現」。這意味着開發者沒必要明確實例化內置對象，它已被實例化了。

一樣是「獨立於宿主環境」。根據定義咱們彷佛很難分清「內置對象」與「本地對象」的區別。而ECMA-262 只定義了兩個內置對象，即 Global 和 Math （它們也是本地對象，根據定義，每一個內置對象都是本地對象）。

如此就能夠理解了。內置對象是本地對象的一種。而其包含的兩種對象中，Math對象咱們常常用到，可這個Global對象是啥東西呢？

Global對象是ECMAScript中最特別的對象，由於實際上它根本不存在，有點玩人的意思。你們要清楚，在ECMAScript中，不存在獨立的函數，全部函數都必須是某個對象的方法。

相似於isNaN()、parseInt()和parseFloat()方法等，看起來都是函數，而實際上，它們都是Global對象的方法。並且Global對象的方法還不止這些.

宿主對象: ECMAScript中的「宿主」就是咱們網頁的運行環境，即「操做系統」和「瀏覽器」。全部非本地對象都是宿主對象（host object），即由 ECMAScript 實現的宿主環境提供的對象。全部的BOM和DOM對象都是宿主對象。由於其對於不一樣的「宿主」環境所展現的內容不一樣。其實說白了就是，ECMAScript官方未定義的對象都屬於宿主對象，由於其未定義的對象大多數是本身經過ECMAScript程序建立的對象。自定義的對象也是宿主對象。

 

1八、     JQuery中有幾種類型的選擇器

1.層疊選擇器$(「form input」)

2.基本過濾選擇器:first:last:not()

3.內容過濾選擇器:odd:eq():animated

4.可視化過濾選擇器:hidden:visible

5.屬性過濾選擇器：div[id]

6.子元素過濾選擇器:first-child:last-child:only:child

7.表單元素過濾選擇器:enabled:disabled:checked:selected

8.id,類，類型,元素...

1九、     jQuery中的Delegate{}函數有什麼做用

delegate() 方法爲指定的元素（屬於被選元素的子元素）添加一個或多個事件處理程序，並規定當這些事件發生時運行的函數。

使用 delegate() 方法的事件處理程序適用於當前或將來的元素（好比由腳本建立的新元素）。$("div").delegate("button","click",function(){

  $("p").slideToggle();

});

 

20、     用性能最高的一個方式寫一個函數去掉數組重複元素，返回一

個新數組

function unique(array){

  var n = []; //一個新的臨時數組

  //遍歷當前數組

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

    //若是當前數組的第i已經保存進了臨時數組，那麼跳過，

    //不然把當前項push到臨時數組裏面

if (n.indexOf(array[i]) == -1) {

n.push(array[i]);

}

  }

  return n;

}

// 判斷瀏覽器是否支持indexOf ，indexOf 爲ecmaScript5新方法 IE8如下（包括IE8， IE8只支持部分ecma5）不支持

if (!Array.prototype.indexOf){

  // 新增indexOf方法

  Array.prototype.indexOf = function(item){

    var result = -1, a_item = null;

    if (this.length == 0){

      return result;

    }

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

      a_item = this[i];

      if (a_item === item){

        result = i;

        break;

      } 

    }

    return result;

  }

}

 

2一、     行內元素有那些。塊級元素有那些。空元素有哪些

首先：CSS規範規定，每一個元素都有display屬性，肯定該元素的類型，每一個元素都有默認的display值，如div的display默認值爲「block」，則爲「塊級」元素；span默認display屬性值爲「inline」，是「行內」元素。

 

（1）行內元素有：a b span img input select strong（強調的語氣）

（2）塊級元素有：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>

 

2二、     說幾條javasprit的基本規範

1.不要在同一行聲明多個變量。

2.請使用 ===/!==來比較true/false或者數值

3.使用對象字面量替代new Array這種形式

4.不要使用全局函數。

5.Switch語句必須帶有default分支

6.函數不該該有時候有返回值，有時候沒有返回值。

7.For循環必須使用大括號

8.If語句必須使用大括號

9.for-in循環中的變量 應該使用var關鍵字明確限定做用域，從而避免做用域污染。

 

2三、     介紹一下標準的css盒子模型，低版本ie盒子的模型有什麼不一樣

（1）有兩種， IE 盒子模型、W3C 盒子模型；

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

（3）區  別： IE的width部分把 border 和 padding計算了進去;

 

2四、     說出三種減小頁面加載的方法（加載時間指感知的時間或實際

加載的時間）

CSS Sprites；

JS、CSS源碼壓縮、圖片大小控制合適；

網頁Gzip；

CDN託管；

data緩存 ；

圖片服務器；

 

2五、     用js代碼簡單的介紹下本身

<script>
    function person(name,jingli,jineng) {
      this.name=name;
      this.jingli=jingli;
      this.jineng=jineng;
    }
    person.prototype.show=function(){
      console.log("我是"+this.name+"我有以下經歷:"+this.jingli+"我會以下技能"+this.jineng);
    }
    var myself=new person("田野","小田工做室創辦人，鳳翔網絡推廣顧問","熟悉前端基本技能，熟悉網絡營銷思想有實戰經驗，掌握項目經理技能，能夠編寫文檔，也能夠使用axure進行原型設計，掌握自動化測試和性能測試技能")
    myself.show();
  </script>

 

2六、     Html5中datalist是什麼

<datalist> 標籤訂義選項列表，與 input 元素配合使用該元素，來定義 input 可能的值。

datalist 及其選項不會被顯示出來，它僅僅是合法的輸入值列表。

<input id="myCar" list="cars" />

<datalist id="cars">

  <option value="BMW">

  <option value="Ford">

  <option value="Volvo">

</datalist>

 

2七、     Ajax同步和異步的區別，如何解決跨域問題

同步的概念應該是來自於OS中關於同步的概念:不一樣進程爲協同完成某項工做而在前後次序上調整(經過阻塞,喚醒等方式).同步強調的是順序性.誰先誰後.異步則不存在這種順序性.

同步：瀏覽器訪問服務器請求，用戶看獲得頁面刷新，從新發請求,等請求完，頁面刷新，新內容出現，用戶看到新內容,進行下一步操做。

異步：瀏覽器訪問服務器請求，用戶正常操做，瀏覽器後端進行請求。等請求完，頁面不刷新，新內容也會出現，用戶看到新內容。

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

 

2八、     Html5中本地存儲概念是什麼，有什麼優勢

cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）。

cookie數據始終在同源的http請求中攜帶（即便不須要），記會在瀏覽器和服務器間來回傳遞。

sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

 

存儲大小：

    cookie數據大小不能超過4k。

    sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

 

有期時間：

    localStorage    存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；

    sessionStorage  數據在當前瀏覽器窗口關閉後自動刪除。

    cookie          設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉

 

2九、     什麼是ajax和json，它們的優缺點

ajax的全稱：Asynchronous Javascript And XML。

異步傳輸+js+xml。

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

 

(1)建立XMLHttpRequest對象,也就是建立一個異步調用對象

(2)建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息

(3)設置響應HTTP請求狀態變化的函數

(4)發送HTTP請求

(5)獲取異步調用返回的數據

(6)使用JavaScript和DOM實現局部刷新

 

30、     請使用javascript寫出快速排序代碼

<script>

function quiktSort(arr){

              var  left =[],right=[];

              if(arr.length<1){

                     return  arr;

              }

              var  index = Math.floor(arr.length/2);

              var  point = arr.splice(index,1);

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

                     if(arr[i]<point){

              left.push(arr[i]);

}else{

       right.push(arr[i]);

}

              }

              return quickSort(left).concat(point,quickSort(right));

       }

</script>

3一、     Html5有那些新增的表單元素

表單控件，calendar、date、time、email、url、search

3二、     http狀態碼有那些，分別表明什麼意思

簡單版:

        100  Continue   繼續，通常在發送post請求時，已發送了http header以後服務端將返回此信息，表示確認，以後發送具體參數信息

        200  OK         正常返回信息

        201  Created    請求成功而且服務器建立了新的資源

        202  Accepted   服務器已接受請求，但還沒有處理

        301  Moved Permanently  請求的網頁已永久移動到新位置。

        302 Found       臨時性重定向。

        303 See Other   臨時性重定向，且老是使用 GET 請求新的 URI。

        304  Not Modified 自從上次請求後，請求的網頁未修改過。

 

        400 Bad Request  服務器沒法理解請求的格式，客戶端不該當嘗試再次使用相同的內容發起請求。

        401 Unauthorized 請求未受權。

        403 Forbidden   禁止訪問。

        404 Not Found   找不到如何與 URI 相匹配的資源。

 

        500 Internal Server Error  最多見的服務器端錯誤。

        503 Service Unavailable 服務器端暫時沒法處理請求（多是過載或維護）。

 

  完整版

  1**(信息類)：表示接收到請求而且繼續處理

    100——客戶必須繼續發出請求

    101——客戶要求服務器根據請求轉換HTTP協議版本

 

  2**(響應成功)：表示動做被成功接收、理解和接受

    200——代表該請求被成功地完成，所請求的資源發送回客戶端

    201——提示知道新文件的URL

    202——接受和處理、但處理未完成

    203——返回信息不肯定或不完整

    204——請求收到，但返回信息爲空

    205——服務器完成了請求，用戶代理必須復位當前已經瀏覽過的文件

    206——服務器已經完成了部分用戶的GET請求

 

  3**(重定向類)：爲了完成指定的動做，必須接受進一步處理

    300——請求的資源可在多處獲得

    301——本網頁被永久性轉移到另外一個URL

    302——請求的網頁被轉移到一個新的地址，但客戶訪問仍繼續經過原始URL地址，重定向，新的URL會在response中的Location中返回，瀏覽器將會使用新的URL發出新的Request。

    303——建議客戶訪問其餘URL或訪問方式

    304——自從上次請求後，請求的網頁未修改過，服務器返回此響應時，不會返回網頁內容，表明上次的文檔已經被緩存了，還能夠繼續使用

    305——請求的資源必須從服務器指定的地址獲得

    306——前一版本HTTP中使用的代碼，現行版本中再也不使用

    307——申明請求的資源臨時性刪除

 

  4**(客戶端錯誤類)：請求包含錯誤語法或不能正確執行

    400——客戶端請求有語法錯誤，不能被服務器所理解

    401——請求未經受權，這個狀態代碼必須和WWW-Authenticate報頭域一塊兒使用

    HTTP 401.1 - 未受權：登陸失敗

    　　HTTP 401.2 - 未受權：服務器配置問題致使登陸失敗

    　　HTTP 401.3 - ACL 禁止訪問資源

    　　HTTP 401.4 - 未受權：受權被篩選器拒絕

    HTTP 401.5 - 未受權：ISAPI 或 CGI 受權失敗

    402——保留有效ChargeTo頭響應

    403——禁止訪問，服務器收到請求，可是拒絕提供服務

    HTTP 403.1 禁止訪問：禁止可執行訪問

    　　HTTP 403.2 - 禁止訪問：禁止讀訪問

    　　HTTP 403.3 - 禁止訪問：禁止寫訪問

    　　HTTP 403.4 - 禁止訪問：要求 SSL

    　　HTTP 403.5 - 禁止訪問：要求 SSL 128

    　　HTTP 403.6 - 禁止訪問：IP 地址被拒絕

    　　HTTP 403.7 - 禁止訪問：要求客戶證書

    　　HTTP 403.8 - 禁止訪問：禁止站點訪問

    　　HTTP 403.9 - 禁止訪問：鏈接的用戶過多

    　　HTTP 403.10 - 禁止訪問：配置無效

    　　HTTP 403.11 - 禁止訪問：密碼更改

    　　HTTP 403.12 - 禁止訪問：映射器拒絕訪問

    　　HTTP 403.13 - 禁止訪問：客戶證書已被吊銷

    　　HTTP 403.15 - 禁止訪問：客戶訪問許可過多

    　　HTTP 403.16 - 禁止訪問：客戶證書不可信或者無效

    HTTP 403.17 - 禁止訪問：客戶證書已經到期或者還沒有生效

    404——一個404錯誤代表可鏈接服務器，但服務器沒法取得所請求的網頁，請求資源不存在。eg：輸入了錯誤的URL

    405——用戶在Request-Line字段定義的方法不容許

    406——根據用戶發送的Accept拖，請求資源不可訪問

    407——相似401，用戶必須首先在代理服務器上獲得受權

    408——客戶端沒有在用戶指定的餓時間內完成請求

    409——對當前資源狀態，請求不能完成

    410——服務器上再也不有此資源且無進一步的參考地址

    411——服務器拒絕用戶定義的Content-Length屬性請求

    412——一個或多個請求頭字段在當前請求中錯誤

    413——請求的資源大於服務器容許的大小

    414——請求的資源URL長於服務器容許的長度

    415——請求資源不支持請求項目格式

    416——請求中包含Range請求頭字段，在當前請求資源範圍內沒有range指示值，請求也不包含If-Range請求頭字段

    417——服務器不知足請求Expect頭字段指定的指望值，若是是代理服務器，多是下一級服務器不能知足請求長。

 

  5**(服務端錯誤類)：服務器不能正確執行一個正確的請求

    HTTP 500 - 服務器遇到錯誤，沒法完成請求

    　　HTTP 500.100 - 內部服務器錯誤 - ASP 錯誤

    　　HTTP 500-11 服務器關閉

    　　HTTP 500-12 應用程序從新啓動

    　　HTTP 500-13 - 服務器太忙

    　　HTTP 500-14 - 應用程序無效

    　　HTTP 500-15 - 不容許請求 global.asa

    　　Error 501 - 未實現

  HTTP 502 - 網關錯誤

  HTTP 503：因爲超載或停機維護，服務器目前沒法使用，一段時間後可能恢復正常

3三、     什麼是閉包（closure）爲何要用它

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

 

閉包的特性：

 

1.函數內再嵌套函數

2.內部函數能夠引用外層的參數和變量

3.參數和變量不會被垃圾回收機制回收

 

//li節點的onclick事件都能正確的彈出當前被點擊的li索引

 <ul id="testUL">

    <li> index = 0</li>

    <li> index = 1</li>

    <li> index = 2</li>

    <li> index = 3</li>

</ul>

<script type="text/javascript">

    var nodes = document.getElementsByTagName("li");

    for(i = 0;i<nodes.length;i+= 1){

        nodes[i].onclick = (function(i){

                  return function() {

                     console.log(i);

                  } //不用閉包的話，值每次都是4

                })(i);

    }

</script>

 

執行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

3四、     你知道那些針對jQuery的優化方法

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

3五、     用原型鏈繼承的方式寫一個類和子類

function Person(name,age){

        this.name=name;

        this.age=age;

}

Person.prototype.study=function(){

        return "學習"

}

/*var p1 =new Person("張三",20);*/

/*p1.study();*/

function Student(class_,name,age){

        this.class_=class_;

        this.name=name;

        this.age=age;

}

Student.prototype=new Person();

var s1 =new Student("二班","李大人",16);

 

   console.log(s1.name,s1.age,s1.class_,s1.study());

3六、     編寫一個方法求一個字符串的字節長度，假設：一個英文字符

佔用一個字節，一箇中文字符佔用兩個字節

function num(str) {

    var num1 = str.length;

    var num2 = 0;

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

        if (str.charCodeAt(i) >= 10000) {

            num2++;

        }

    }

    console.log(num1 + num2)

}

3七、     簡單歸納瀏覽器事件模型，如何得到資源dom節點

瀏覽器事件模型分爲三個階段

一、捕獲階段

二、目標階段

        三、冒泡階段

3八、     寫一段ajax提交的js代碼

var xhr =xhr();

function xhr(){

        if(window.XMLHttpRequest){

               return  window. XMLHttpRequest();

        }else if(window.ActiveXObject){

               try {

                      return  new ActiveXObject("Microsoft.XMLHTTP");

               }catch (e) {

                      try {

                             return  new ActiveXObject("Msxml2.XMLHTTP");

                      }catch (ex) { }

               }

        }

              }

xhr.open("get","url","true");

xhr.onreadystatechange=function()

{

   if (xhr.readyState==4 && (xhr.status==200||xhr.status==304))

{

            document.getElementById("myDiv").innerHTML=xhr.responseText;

        }

}

        xhr.send();

3九、     判斷字符串是不是這樣組成的，第一個必須是字母，後面能夠

是字母和數字、下劃線總長度爲5-20（請使用正則表達式）

function if_fit(str){

        var reg=/^[A-Za-z]{1}\w{5,20}/g;

               var result=str.search(reg);

        return result;

}

40、     截取字符串abcdefg的efg

var str="abcdefg";

console.log(str.slice(4));

4一、     在css引入的方式有那些，link和@import的區別是什麼

內聯方式、嵌入方式、連接方式、導入方式

　　區別1：link是XHTML標籤，除了加載CSS外，還能夠定義RSS等其餘事務；@import屬於CSS範疇，只能加載CSS。

　　區別2：link引用CSS時，在頁面載入時同時加載；@import須要頁面網頁徹底載入之後加載。

　　區別3：link是XHTML標籤，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。

　　區別4：link支持使用Javascript控制DOM去改變樣式；而@import不支持。

4二、     將字符串helloChina反轉輸出

var str = "helloChina";

方法1：console.log( str.split("").reverse().join("") )；');

方法2：for (var x = str.length-1; x >=0; x--)

{

document.write(str.charAt(x));

}

方法3：var a=str.split("");

var rs = new Array;

while(a.length)

{

      rs.push(a.pop());

}

alert(rs.join(""));

4三、     爲何沒法定義1px左右高度的容器

IE6下這個問題是由於默認的行高形成的，解決的方法也有不少，例如：overflow:hidden | zoom:0.08 | line-height:1px

4四、     FireFox中標籤的居中問題的解決辦法

*{margin：0px auto；}

4五、     請寫出XHTML和css如何註釋

XHTML:<!-- 註釋內容-->

css:/* 註釋內容*/

4六、     如今想調節一下父元素的透明度，可是又不影響子元素的透明

度，怎麼破

方法1：用RGBA

方法2：再加一層與父元素同級的div裝載子元素 定位到子元素原位置

4七、     簡述cookies sessionStorage 和localStorage的區別

區別：cookie數據始終在同源的http請求中攜帶（即便不須要），即cookie在瀏覽器和服務器間來回傳遞。而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。cookie數據還有路徑（path）的概念，能夠限制cookie只屬於某個路徑下。存儲大小限制也不一樣，cookie數據不能超過4k，同時由於每次http請求都會攜帶cookie，因此cookie只適合保存很小的數據，如會話標識。sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。數據有效期不一樣，sessionStorage：僅在當前瀏覽器窗口關閉前有效，天然也就不可能持久保持；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，所以用做持久數據；cookie只在設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉。做用域不一樣，sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；localStorage 在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。Web Storage 支持事件通知機制，能夠將數據更新的通知發送給監聽者。Web Storage 的 api 接口使用更方便。

4八、     簡述ECMASCRIPT6的新特性

1.增長塊做用域

2.增長let const

3.解構賦值

4.函數參數擴展 （函數參數能夠使用默認值、不定參數以及拓展參數）

5.增長class類的支持

6.增長箭頭函數

7.增長模塊和模塊加載（ES6中開始支持原生模塊化啦）

8.math, number, string, array, object增長新的API

4九、     Apply和call方法的異同

相同點:兩個方法產生的做用是徹底同樣的，第一個參數都是對象；

不一樣點:

call()方法參數將依次傳遞給借用的方法做參數，即fn.call(thisobj, arg1,arg2,arg3...argn)，有n個參數

apply()方法第一個參數是對象，第二個參數是數組fn.apply(thisobj,arg)，此處的arg是一個數組,只有兩個參數

50、     在javascript中什麼是僞數組，如何將僞數組轉化爲標準數組

這裏把符合如下條件的對象稱爲僞數組：

1，具備length屬性

2，按索引方式存儲數據

3，不具備數組的push,pop等方法

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

5一、     Js和nitive交互的方法與問題

實現JS和Native有兩種方式:

js與java互相調用

第一種：shouldOverrideUrlLoading(WebView view, String url）

經過給WebView加一個事件監聽對象（WebViewClient)並重寫shouldOverrideUrlLoading(WebView view, String url）方法。當按下某個鏈接時WebViewClient會調用這個方法，並傳遞參數view和url

第二種：JS和Java互調

WebView開啓JavaScript腳本執行

WebView設置供JavaScript調用的交互接口

客戶端和網頁端編寫調用對方的代碼

JS調用JAVA

JS : window.jsInterfaceName.methodName(parameterValues)

native: webView.addJavascriptInterface(new JsInteration(), 「androidNative」);

下面給出一個實例,方便理解

webView.addJavascriptInterface(new JsInteration(), 「androidNative」);

@JavascriptInterfacepublic void helloJS(){…}

window.androidNative.helloJS();

Java調用JS

webView調用js的基本格式爲webView.loadUrl(「javascript:methodName(parameterValues)」)

調用js無參無返回值函數： String call =「javascript:sayHello()」；webView.loadUrl(call);

調用js有參無返回值函數：String call = 「javascript:alertMessage(\」」 + 「content」 + 「\」)」; webView.loadUrl(call);

調用js有參數有返回值的函數

Android在4.4以前並無提供直接調用js函數並獲取值的方法，因此在此以前，經常使用的思路是 java調用js方法，js方法執行完畢，再次調用java代碼將值返回。

Android 4.4以後使用evaluateJavascript便可。

private void testEvaluateJavascript(WebView webView) {

  webView.evaluateJavascript("getGreetings()", new ValueCallback<String>() {

  @Override

  public void onReceiveValue(String value) {

      Log.i(LOGTAG, "onReceiveValue value=" + value);

  }});

}

注:

參數類型若是是簡單的int或String，能夠直接傳，對於複雜的數據類型，建議以字符串形式的json返回。

evaluateJavascript方法必須在UI線程（主線程）調用，所以onReceiveValue也執行在主線程。

當native與js交互時存cookie看到不少人遇到過這樣一個問題,cookie存不進去,網上有不少解釋方案,可是不少沒說到重點上,這裏直接貼一下代碼:

public static void synCookies(Context context, String url, String version) {

        CookieSyncManager.createInstance(context);

        CookieManager cookieManager = CookieManager.getInstance();

        cookieManager.setAcceptCookie(true);

        cookieManager.removeAllCookie();

        cookieManager.setCookie(url, "sessionKey=" + UserInfoShareprefrence.getInstance(context).getLocalSessionKey());

        cookieManager.setCookie(url, "productVersion=android-epocket-v" + version);

        CookieSyncManager.getInstance().sync();

 

    }

存不進去的很大一部分緣由是你的url不對,他官方給出的解釋是這樣的

/**

     * Sets a cookie for the given URL. Any existing cookie with the same host,

     * path and name will be replaced with the new cookie. The cookie being set

     * will be ignored if it is expired.

     *

     * @param url the URL for which the cookie is to be set

     * @param value the cookie as a string, using the format of the 'Set-Cookie'

     *              HTTP response header

     */

    public void setCookie(String url, String value) {

        throw new MustOverrideException();

    }

其實沒說明白url究竟是什麼,這裏的url就是顯示的url的域名,這裏順便貼出取域名的方法,給出的是經過正則提取域名

 /**

     * 得到域名

     *

     * @param url

     * @return

     */public static String getDomain(String url) {

        Pattern p = Pattern.compile("[^//]*?\\.(com|cn|net|org|biz|info|cc|tv)", Pattern.CASE_INSENSITIVE);

        Matcher matcher = p.matcher(url);

        matcher.find();

        return matcher.group();

    }

還有一點就是,若是你想傳遞多個值給cookie的話,能夠屢次使用setCookie,不要擅自的本身拼值,由於你拼的字符串中可能存在分號,內部多分號作了特殊處理,截取分號以前的,以後的直接放棄!

 

5二、     用sass的minix定義一些代碼片斷，且可傳參數

/**

 * @module 功能

 * @description 生成全屏方法

 * @method fullscreen

 * @version 1.7.0

 * @param {Integer} $z-index 指定層疊級別 <1.7.0>

 * @param {Keywords} $position 指定定位方式，取除`static | relative`以外的值，默認值：absolute <1.8.5>

 */

@mixin fullscreen($z-index: null, $position: absolute) {

    position: $position;

    z-index: $z-index;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

}

 

5三、     移動端常常出現的兼容問題，談談移動端應用或者wap站得

一些優化技巧和心得

http://www.jb51.net/article/84973.htm

 

5四、     H5中新增的一些單位rem是什麼意思，和em的關係，以及rem在自適應佈局中的應用方法

答：Em爲單位：

這種技術須要一個參考點，通常都是以<body>的「font-size」爲基準。好比說咱們使用「1em」等於「10px」來改變默認值「1em=16px」，這樣一來，咱們設置字體大小至關於「14px」時，只須要將其值設置爲「1.4em」。

Rem爲單位：

rem是相對於根元素<html>的「font-size」爲基準。好比說咱們給html設置font-size爲100px，

那麼咱們要給html中的p標籤設置16px的字體，font-size設置.16rem就能夠，在這裏16px=.16rem。

這個單位與em有什麼區別呢？

區別在於使用rem爲元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優勢於一身，經過它既能夠作到只修改根元素就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反應。目前，除了IE8及更早版本外，全部瀏覽器均已支持rem。對於不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。

 

5五、     如何實現瀏覽器內多個標籤頁之間的通訊？

經過WebSocket或SharedWorker把客戶端和服務器端創建socket鏈接，從而實現通訊；也能夠調用localstorge、cookies等本地存儲方法。

5六、   假設如今頁面裏有一個id是con的div，如今須要編寫js代碼，在頁面加載完成後 將div的高度設置成100px，寬度設置成60px，並設置成灰色的ipx的邊框，北京設置成淺黃色。

window.onload=function(){

  var oDiv=document.getElementById("con");

  oDiv.style.height="100px";

  oDiv.style.width="60px";

  oDiv.style.width="1px solid gray";

  oDiv.style.color="yellow";

}

 

5七、     對新技術有那些瞭解，常去的網站有那些

掘金、簡書、github、csdn等

5八、     列舉幾種後端通信的方法，分別使用的場景

答：1.後端程序能夠經過session來進行通信，session有過時時間，主要用於驗證碼的驗證，登陸過時等的應用。

2.數據庫，數據庫支持多種語言的操做，那麼經過數據庫就能夠通信。

 

5九、     用程序找出數組中出現次數超過一半的數字

思路：

    一、 一個數字在數組中出現次數超過了一半，則排序後，位於數組中間的數字必定就是該出現次數超過了長度一半的數字（能夠用反證法證實），也便是說，這個數字就是統計學上的中位數。最容易想到的辦法是用快速排序對數組排序號後，直接取出中間的那個數字，這樣的時間複雜度爲O(nlogn)，空間複雜度爲O(1)。

 

    2 、事實上能夠不用對數組進行排序，或者說僅部分排序，受快速排序的partition函數的啓發，咱們能夠利用反覆調用partition函數來求的該數字。咱們如今數組中隨機選取一個數字，然後經過Partition函數返回該數字在數組中的索引index，若是index恰好等於n/2，則這個數字即是數組的中位數，也便是要求的數，若是index大於n/2，則中位數確定在index的左邊，在左邊繼續尋找便可，反之在右邊尋找。這樣能夠只在index的一邊尋找，而不用兩邊都排序，減小了一半排序時間。這種狀況的平均時間複雜度大體爲：T(n) = n+n/2+n/4+n/8+....+1，很明顯當n很大時，T(n)趨近於2n，也就是說平均狀況下時間複雜度爲O(n),可是這種狀況下，最壞的時間複雜度依然爲O(n*n)，最壞狀況下，index老是位於數組的最左或最右邊，這樣時間複雜度爲T(n) = n+n-1+n-2+n-3+....+1 = n(n-1)/2，顯然，時間複雜度爲O(n*n)，空間複雜度爲O(1)。

 

60、   請設計一套方案，用於確保頁面中js加載徹底，對於優化某網頁的加載速度，有什麼獨到看法

答：js方法：

<script type="text/javascript">

 

window.onload=function(){

 

var userName="xiaoming";

 

alert(userName);

}

 

</script>

jquery方法：

<script type="text/javascript">

 

$(document).ready(function(){

 

var userName="xiaoming";

 

alert(userName);

});

 

</script>

或者簡寫：

$(function(){

var userName="xiaoming";

alert(userName);

});

如何肯定一個js是否加載徹底或者頁面中的全部js加載徹底，具體辦法以下：

 

function loadScript（ url, callback） {

    var script = document.createElement("script");

    script.type = "text/javascript";

    if (script.readyState) {

        script.onreadystatechange = function() {

            if (script.readyState == "loaded" || script.readyState == "complete") {

                script.onreadystatechange = null;

                callback();

            }

        }

    } else {

        script.onload = function() {

            callback();

        }

    }

    script.src = url;

    document.getElementsByName("head")[0].appendChild(script);

}

如何讓腳本的執行順序按照你設定的順序執行，使用嵌套的方式：

loadScript("file1.js", function() {

    loadScript("file2.js", function() {

        loadScript("file3.js", function() {

            alert("All files are loaded");

        });

    });

});

網頁加載速度優化：

1、減小請求

最大的性能漏洞就是一個頁面須要發起幾十個網絡請求來獲取諸如樣式表、腳本或者圖片這樣的資源，這個在相對低帶寬和高延遲的移動設備鏈接上來講影響更嚴重。

CDNs（內容分發網絡）把資源放在離用戶地理位置更近的地方對解決這個問題能起到很大做用，可是比起獲取請求，大量的請求對頁面加載時間的影響更爲嚴重，並且最近的發現代表，CDNs對移動端用戶的性能影響愈來愈低。

2、整合資源

對開發者來講，將Javascript代碼和CSS樣式放到公共的文件中供多個頁面共享是一種標準的優化方法，這個方法能很簡單的維護代碼，而且提升客戶端緩存的使用效率。

在Javascript文件中，要確保在一個頁面中相同的腳本不會被加載屢次，當大團隊或者多個團隊合做開發的時候，這種冗餘的腳本就很容易出現，你可能會對它的發生頻率並不低感到很是吃驚。

Sprites是css中處理圖片的一項技術，Sprites就是將多張圖片整合到一個線性的網狀的大圖片中，頁面就能夠將這個大圖片一次性獲取回來而且作爲css的背景圖，而後使用css的背景定位屬性展現頁面須要的圖片部分，這種技術將多個請求整合成一個，能顯著地改善性能。

平穩地改進可是須要對資源有控制權限，根據開發者的網站不一樣權限，一些資源並不須要被整合起來（例如，一些由CMS生成的資源），還有，對於一些外部域引用的資源，強行整合可能會致使問題，馬海祥提醒你們須要注意的是，整合資源對手機瀏覽器來講是一把雙刃劍，整合資源確實會在首次訪問減小請求，可是大的資源文件可能會致使緩存失效，因此，須要當心地使用各類技術整合資源，以達到優化本地存儲的目的。

3、使用瀏覽器緩存和本地緩存

如今全部的瀏覽器都會使用本地資源去緩存住那些被Cache-Control或者Expires頭標記的資源，這些頭能標記資源須要緩存的時間，另外，ETag（實體標籤）和Last-Modified頭來標識當資源過時後是否須要從新請求，瀏覽器爲了減小沒必要要的服務器請求，儘量地從本地緩存中獲取資源，而且將那些已通過期的、或者當緩存空間減少的時候將那些好久不用的資源進行清理，瀏覽器緩存一般包括圖片，CSS，Javascript代碼，這些緩存能合理地提升網站的性能（好比爲了支持後退和前進的按鈕，使用一個單獨的緩存來保存整個渲染的頁面）。

移動瀏覽器緩存，一般是比桌面PC小的多，這就致使了緩存的數據會很常常被清理，HTML5的緩存基於瀏覽器緩存提供了一個很好的替換方案，Javascript的localStorage已經在全部主流的桌面和移動端瀏覽器上都實現了，使用腳本代碼能簡便地支持HTML5的localStorage操做，能夠讀寫鍵值數據，每一個域名大概有5MB的容量，雖然不一樣的移動瀏覽器上讀寫速度相差很大，可是localStorage大容量的緩存使得它很適合做爲客戶端的緩存，從localStorage獲取資源明顯快於從服務器上獲取資源，並且在大多數移動設備上也比依靠緩存頭或者瀏覽器的本地緩存更靈活可靠，這是移動瀏覽器比桌面PC更有優點的一個地方，在桌面PC上，本地緩存仍然優先使用標準的瀏覽器緩存，致使桌面PC本地緩存的性能落後於移動瀏覽器。

在此，馬海祥要提醒各位一下：雖然localStorage的機制易於實現，可是它的一些控制機制倒是很是複雜的，你須要考慮到緩存帶給你的全部問題，好比緩存失效（何時須要刪除緩存？），緩存丟失（當你但願數據在緩存中的時候它並不在怎麼辦？），還有當緩存滿的時候你怎麼辦？

4、首次使用的時候在HTML中嵌入資源

HTML的標準是使用連接來加載外部資源，這使得更容易在服務器上（或者在CDN上）操做更新這些資源，而不是在每一個頁面上修改更新這些資源，根據上文討論的，這種模式也使得瀏覽器能從本地緩存而不是服務器上獲取資源。

可是對尚未緩存到瀏覽器localStorage的資源來講，這種模式對網站的性能有負面的影響，通常來講，一個頁面須要幾十個單獨的請求來獲取資源從而渲染頁面。

因此說，從性能的角度來講，若是一個資源沒有很高的被緩存的概率的話，最好把它嵌入到頁面的HTML中（叫inlining），而不是使用連接外部，腳本和樣式是支持內嵌到HTML中的，可是圖片和其餘的二進制資源其實也是能夠經過內嵌包含base64編碼的文原本嵌入到HTML中的。

內嵌的缺點是頁面的大小會變得很是大，因此對於Web應用來講，關鍵的是可以跟蹤分析這個資源何時須要從服務端獲取，何時已經緩存到客戶端了。

另外，在第一次請求資源後必須可以使用代碼在客戶端緩存資源，所以，在移動設備上，使用HTML5 localStorage能很好地作到內嵌。

因爲不知道用戶是否已經訪問過這個頁面了，因此須要網站有機制能生成不一樣版本的頁面。

5、使用HTML5服務端發送事件

Web應用已經使用了各類從服務器上輪詢資源的方法來持續地更新頁面，HTML5的EventSource對象和Server-Sent事件能經過瀏覽器端的JavaScript代碼打開一個服務端鏈接客戶端的單向通道，服務端能夠使用這個寫通道來發送數據，這樣能節省了HTTP建立多個輪詢請求的消耗。

這種方式比HTML的WebSocket更高效，WebSocket的使用場景是，當有許多客戶端和服務端的交互的時候（好比消息或者遊戲），在全雙工鏈接上創建一個雙向通道。

這個技術是基於具體的技術實現的，若是你的網站當前是使用其餘的Ajax或者Comet技術來輪詢的，轉變成Server-Sent事件須要重構網站的Javascript代碼。

6、消除重定向

當用戶在一個移動設備上訪問桌面PC網站的時候，Web網站應用一般讀取HTTP的user-agent頭來判斷這個用戶是不是來自移動設備的，而後應用會發送帶有空HTTP body和重定向HTTP地址頭的HTTP 301（或者302）請求，把用戶重定向到網站的移動版本上去，可是這個額外的客戶端和服務端的交互一般在移動網絡上會消耗幾百毫秒，所以，在原先的請求上傳遞移動的web頁會比傳遞一個重定向的信息並讓客戶端再請求移動頁面更快。

對於那些想要在移動設備上看桌面PC網站的用戶來講，你能夠在移動web頁面上提供一個連接入口，這樣也能同時表示你的網站是並不提倡這種行爲的。

雖然這個技術在理論上是簡單的，可是實際上並不易於實施，因爲有些m.sites是宿主在其餘地方的，因此許多網站會選擇重定向到一個不一樣的服務器上，有的網站則是會在重定向請求的時候種植上Cookie告訴Web應用這個用戶是在使用移動設備，這種方法可能對web應用來講更容易控制。

7、減小資源負載

關於移動端頁面的大小問題，渲染小頁面更快，獲取小資源也更快，減少每一個請求的大小一般不如減小頁面請求個數那麼顯著地提升性能。

可是有些技術在性能方面，特別是在須要對帶寬和處理器性能精打細算的移動設備環境下，仍然是能帶來很大利益的。

8、壓縮文本和圖像

諸如gzip這樣的壓縮技術，依靠增長服務端壓縮和瀏覽器解壓的步驟，來減小資源的負載，可是，通常來講，這些操做都是被高度優化過了，並且測試代表，壓縮對網站仍是起到優化性能的做用的，那些基於文本的響應，包括HTML，XML，JSON（Javascript Object Notation），Javascript，和CSS能夠減小大約70%的大小。

瀏覽器在Accept-Encoding請求頭中申明它的解壓縮技術，而且當它們接收到服務端返回的Content-Encoding響應頭標示的時候，就會按照這個響應頭自動作解壓操做。

馬海祥以爲這種方法的優勢就是易於實現，若是設置正確的話，如今全部的Web服務器都支持壓縮響應，可是，也有一些桌面PC的安全工具會將請求頭中的Accept-Encoding頭去掉，這樣即便瀏覽器支持解壓縮，用戶也沒法獲取到壓縮後的響應。

9、代碼簡化

簡化一般是使用在腳本和樣式文件中，刪除一些沒必要要的字符，好比空格，換行符，或者註釋等，不須要暴露給外部的命名就能夠被縮短爲一個或者兩個字符，好比變量名，合適的簡化資源一般在客戶端不須要作任何其餘的處理，而且平均減小20%的資源大小，內嵌在HTML中的腳本和樣式文件也是能夠精簡的，有不少很好的庫來作精簡化的操做，這些庫通常也同時會提供合併多個文件這樣減小請求數的服務（具體可查看馬海祥博客《手機網站製做的經常使用方法及優化技巧》的相關介紹）。

簡化帶來的好處並不侷限於減小帶寬和延遲，對於那些移動設備上緩存沒法保存的過大資源來講，也是頗有改善的，Gzip在這個方面並無任何幫助，由於資源是在被解壓後才被緩存起來的。

Google的Closure Compiler已經難以置信地完成了理解和簡化Javascript的工做，可是CSS的簡化則沒有那麼容易，由於對不一樣瀏覽器來講有不一樣的CSS技術能迷惑CSS簡化工具，而後讓CSS簡化後沒法正常工做，馬海祥提醒你們必需要注意的是，已經有這樣的案例了，即便只是刪除了沒必要要的字符，簡化工做也有可能破壞頁面，因此當你應用簡化技術以後，請作一下完整的功能測試工做。

10、調整圖片大小

圖片一般是佔用了Web頁面加載的大部分網絡資源，也佔用了頁面緩存的主要空間，小屏幕的移動設備提供了經過調整圖片大小來加速傳輸和渲染圖片資源的機會，若是用戶只是在小的移動瀏覽器窗口中看圖片的話，高分辨率的圖片就會浪費帶寬、處理時間和緩存空間。

爲了加速頁面渲染速度和減小帶寬及內存消耗，能夠動態地調整圖片大小或者將圖片替換爲移動設備專用的更小的版本，不要依靠瀏覽器來將高分辨率的圖片轉換成小尺寸的圖片，這樣會浪費帶寬。

另一個方法是先儘快加載一個低分辨率的圖片來渲染頁面，在onload或者用戶已經開始和頁面交互之後將這些低分辨率的圖片替換成爲高分辨率的圖片。

特別應用在高度動態化的網站是有優點的。

11、使用HTML5和CSS 3.0來簡化頁面

HTML5包括了一些新的結構元素，例如header，nav，article和footer，使用這些語義化的元素比傳統的使用div和span標籤能使得頁面更簡單和更容易解析，一個簡單的頁面更小加載更快，而且簡單的DOM（Document Object Model）表明着更快的JavaScript執行效率，新的標籤能很快地應用在包括移動端的新瀏覽器版本上，而且HTML5設計讓那些不支持它的瀏覽器能平穩過渡使用新標籤。

HTML5的一些表單元素提供了許多新屬性來完成本來須要javascript來完成的功能，例如，新的placeholder屬性用於顯示在用戶輸入進入輸入框以前顯示的介紹性文字，autofocus屬性用於標示哪一個輸入框應當被自動定位。

也有一些新的輸入框元素能不用依靠Javascript就能夠完成一些通用的需求，這些新的輸入框類型包括像e-mail，URL，數字，範圍，日期和時間這樣須要複雜的用戶交互和輸入驗證的元素，在移動瀏覽器上，當須要輸入文本的時候，彈出的鍵盤一般是由特定的輸入框類型來作選擇的，不支持指定的輸入類型的瀏覽器就會只顯示一個文本框。

另外，只要瀏覽器支持內建的層次，圓角，陰影，動畫，過渡和其餘的圖片效果，CSS 3.0就能幫助你建立輕便簡易的頁面了，而這些圖片效果原先是須要加載圖片才能完成的，這樣，這些新特性就能加速頁面渲染了。

人工地作這些改動是很是複雜和耗時的，若是你使用CMS，它能夠幫你生成許多你不須要控制的HTML和CSS（具體可查看馬海祥博客《製做移動端手機網站過程當中的SEO優化方法技巧》的相關介紹）。

12、延遲渲染」BELOW-THE-FOLD」內容

能夠肯定的是若是咱們將不可見區域的內容延遲加載，那麼頁面就會更快地展示在用戶面前，這個區域叫作「below the fold」，爲了減小頁面加載後須要從新訪問的內容，能夠將圖片替換爲正確的高寬所標記的<img>標籤。

一些好的Javascript庫能夠用來處理這些below-the-fold 延遲加載的圖像。

13、延遲讀取和執行的腳本

在一些移動設備上，解析Javascript代碼的速度能達到100毫秒每千字節，許多腳本的庫直到頁面被渲染之後都是不須要的加載的，下載和解析這些腳本能夠很安全地被推遲到onload事件以後來作。

例如，一些須要用戶交互的行爲，好比託和拽，都不大可能在用戶看到頁面以前被調用，相同的邏輯也能夠應用在腳本執行上面，儘可能將腳本的執行延遲到onload事件以後，而不是在初始化頁面中重要的可被用戶看到的內容的時候執行。

這些延遲的腳本多是你本身寫的，更重要的是，也有多是第三方的，對廣告、社交媒體部件、或者分析的差勁的腳本優化會致使阻塞頁面的渲染，會增長珍貴的加載時間，固然，你須要當心地評估諸如jquery這樣爲移動網站設計的大型腳本框架，特別當你僅僅只是使用這些框架中的一些對象的時候更要當心評估。

許多第三方的框架如今提供延遲加載的異步版本的API，開發者只須要將原先的邏輯轉化到這個異步版本，一些JavaScript要作延遲加載會有些複雜，由於在onload以後執行這些腳本須要注意不少注意事項（例如，你有個腳本須要綁定到onload事件上，你須要作什麼？若是你將腳本延遲到onload事件以後，就必定就會失去不少執行的時機）。

14、使用Ajax來加強進程

Ajax（Asynchronous JavaScript and XML）是一項使用XHR（XMLHttpRequest）對象來從Web服務器上獲取數據的技術，它並不須要更新正在運行的頁面，Ajax能更新頁面上的某個部分而不須要從新構建整個頁面，它一般用來提交用戶的交互相應，可是也能夠用來先加載頁面的框架部分，而後當用戶準備好瀏覽網頁的時候再填充詳細的內容。

儘管是這個名字，可是XMLHttpRequest並不強制要求你只能使用XML，你能夠經過調用overrideMineType方法來制定「application/json」類型來使用json替換XML，使用JSON.parse會比使用原生的eval()函數快了幾乎兩倍，而且更爲安全。

同時，切記Ajax的返回響應也會得益於那些應用在普通的返回響應的優化技術上面，確保對你的Ajax返回響應使用了緩存頭，簡化，gzip壓縮，資源合併等技術。

因爲這個技術是根據具體應用不一樣而不一樣的，因此很難量化，或許因爲跨域問題，你須要使用XHR2，這個技術能使用外部域的資源，從而能進行跨域的XHR請求。

15、根據網絡情況進行適配處理

因爲使用更多帶寬會使用更多移動網絡的費用，因此只有能檢測網絡的類型才能使用針對特定網絡的優化技術。

例如，預加載將來使用到的請求是很是聰明的作法，可是若是用戶的帶寬很稀有，而且加載的有些資源是永遠不會用到的話，這個技術就是不合理的了。

在Android 2.2+，navigator.connection.type屬性的返回值能讓你區分Wifi和2G/3G/4G網絡，在Blackberry上，blackberry.network也能提供類似的信息，另外，服務端經過檢測請求中的User-Agent頭或者其餘的嵌入到請求中的信息能讓你的應用檢測到網絡情況。

檢測網絡信息的API最近已經有所變化了，接口如今不是直接定義Wi-Fi，3G等網絡情況，而是給出了帶寬信息和諸如「很是慢，慢，快和很是快」這樣的建議，有個屬性能給出估計的MB/s值和一個「meterd」的Boolean值來表示它的可信度，可是對瀏覽器來講，很難根據這個來判斷環境，判斷當前網絡環境而後適配仍然是一種最好的方法（具體可查看馬海祥博客《百度移動搜索開放適配服務的3種方法》的相關介紹），可是這種方法正在被考慮被替換。

16、對多線程來講儘可能使用HTML5的WEB WORKER特性

HTML5中的Web Worker是使用多個線程併發執行Javascript程序，另外，這種特別的多線程實現能減小困惑開發者多年的，在其餘平臺上遇到的問題，例如，當一個線程須要改變一個正在被其餘線程使用的資源該如何處理，在Web Worker中，子線程不能修改主用戶界面（UI）線程使用的資源。

對提升移動站點的性能來講，Web Worker中的代碼很適合用來預處理用戶完成進一步操做所須要的資源的，特別是在用戶的帶寬資源不緊缺的狀況下，在低處理器性能的移動設備上，過多的預加載可能會干擾當前頁面的UI響應，使用多線程代碼，讓Web Worker對象（而且儘量使用localStorage來緩存數據）在另一個線程中操做預加載資源，這樣就能不影響當前的UI表現了。

要特別說明的是，Web Worker只在Android 2.0以上的版本實現，並且iphone上的ios5以前的版本也不支持，在桌面PC上，老是落後的IE只在IE 10才支持Web Worker。

雖然這項技術並非很是難實現，可是對Web Workers來講，有一些限制須要強制遵照，Web Workers不能進入到頁面的DOM，也不能改變頁面上的任何東西，Web Worker很適合那種須要後臺計算和處理的工做。

17、將CLICK事件替換成TOUCH事件

在觸摸屏設備上，當一個用戶觸碰屏幕的時候，onclick事件並無當即觸發，設備會使用大約半秒（大多數設備差很少都是300毫秒）來讓用戶肯定是手勢操做仍是點擊操做，這個延遲會很明顯地影響用戶指望的響應性能，要使用touchend事件來替換才能解決，當用戶觸碰屏幕的時候，這個事件會當即觸發。

爲了要確保不會產生用戶不指望的行爲，你應該也要使用touchstart和touchmove事件，例如，除非同時有個touchstart事件在button上，不然不要判斷touchend事件在button上就意味着點擊行爲，由於用戶有可能從其餘地方觸碰開始，而後拖拽到button上觸碰結束的，你也能夠在touchstart事件以後使用touchmove事件來避免將touchend事件誤判爲點擊，固然前提是須要假設拖拽的手勢並非預期產生點擊行爲。

另外，你也須要去處理onclick事件來讓瀏覽器改變button的外觀從而標識爲已點擊的狀態，同時你也須要處理那些不支持touch事件的瀏覽器，爲了不代碼在touchend和onclick代碼中重複執行，你須要在確保用戶觸碰事件已經在touchend執行了以後，在click事件中調用preventDefault和stopPropagation方法。

這種技術須要更多工做才能在一個頁面中增長和維護連接，touch事件的代碼必須考慮其餘手勢，由於替換click的還有多是縮放或者敲擊動做。

18、支持SPDY協議

應用層HTTP和HTTPS協議致使的一些性能瓶頸，使得不管是桌面仍是移動端的網站都很是難受，在2009年，谷歌開始研發一種叫作SPDY（諧意是「speedy」）的協議來替換已有的協議，這種協議宣稱能突破這些限制，這個協議的目標是讓多種瀏覽器和多種Web服務都能支持，因此這個協議是開源的，可是初步地，只有Google的Chrome瀏覽器（在版本10及以後的）和google的站點支持，一旦一個Web服務支持SPDY，那麼它上面的全部站點均可以和支持這個協議的瀏覽器使用SPDY進行交互，將SPDY應用在25個top100的Internet網站上，Google收集到的數據是網站的速度會改善27%到60%不等。

SPDY自動使用gzip壓縮全部內容，和HTTP不一樣的是，它連header的數據也使用gzip壓縮，SPDY使用多線程技術讓多個請求流或者響應流能共用一個TCP鏈接，另外SPDY容許請求設置優先級，好比，頁面中心的視頻會比邊框的廣告擁有更高的優先級。

或許SPDY中最變革性的發明就是流是雙向的，而且能夠由客戶端或者服務端發起，這樣能使得信息能推送到客戶端，而不用由客戶端發起第一次請求，例如，當一個用戶第一次瀏覽一個站點，尚未任何站點的緩存，這個時候服務端就能夠在響應中推送全部的請求資源，而不用等候每一個資源被再次獨立請求了，做爲替換協議，服務端能夠發送暗示給客戶端，提示頁面須要哪些資源，同時也容許由客戶端來初始化請求。即便是使用後一種這樣的方式也比讓客戶端解析頁面而後本身發現有哪些資源須要被請求來得快。

雖然SPDY並無對移動端有什麼特別的設置，可是移動端有限的帶寬就使得若是支持SPDY的話，SPDY在減小移動網站的延遲是很是有用的。

依據網站和服務的環境來進行平穩操做或進一步考慮，Google有一個SPDY模塊支持Apache2.2 – mod_spdy – 這個模塊是免費的；可是mod_spy有線程上的問題，而且和mod_php協做並非很好，因此要求你使用這個技術的時候要確保你的網站的正常運行。

 

6一、     請事先鼠標點擊中的任意標籤，alert該標籤的名稱（注意兼容性）

function elementName(evt){

           evt = evt|| window.event;

           var selected = evt.target || evt.srcElement;

           alert(selected.tagName);

   }

 

6二、     對string對象進行擴展，使其具備刪除先後空格的方法

String.prototype.trim = function() {

return this.replace(/(^\s*)|(\s*$)/g, "");

}

 

6三、     常使用的庫有哪些？經常使用的前端開發工具？開發過什麼應用

或組件？

1)bootstrap, easy UI,  jqueryUI , jquery、angular.js,  vue.js等。

2)前端開發工具：gulp webpack

 

6四、     用一句話概述您的有點，用一句話概述您的缺點

自由發揮

6五、     描述下你對js閉包。面向對象、繼承的理解

1）閉包理解：

使用閉包主要是爲了設計私有的方法和變量。閉包的優勢是能夠避免全局變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易形成內存泄露。在js中，函數即閉包，只有函數纔會產生做用域的概念

閉包有三個特性：

1.函數嵌套函數

2.函數內部能夠引用外部的參數和變量

3.參數和變量不會被垃圾回收機制回收

2） 面向對象：

        http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html

 

3）繼承：http://www.javashuo.com/article/p-ueosnihj-ew.html

http://blog.csdn.net/james521314/article/details/8645815

 

6六、     你作的頁面在哪些瀏覽器測試過？這些瀏覽器的內核分別是

什麼？

IE內核瀏覽器：360，傲遊，搜狗，世界之窗，騰訊TT。

非IE內核瀏覽器：firefox opera safari chrome 。

IE瀏覽器的內核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera內核原爲Presto，現爲Blink；

 

6七、     寫出幾種IE6 bug的解決方法

1）png24位的圖片在iE6瀏覽器上出現背景，解決方案是作成PNG8.也能夠引用一段腳本處理.

  2）IE6雙倍邊距bug：在該元素中加入display:inline 或 display:block
  3）像素問題 使用多個float和註釋引發的 使用dislpay:inline -3px  
  4）超連接hover 點擊後失效  使用正確的書寫順序 link visited hover active
  5）z-index問題 給父級添加position:relative
  6）Min-height 最小高度 ！Important 解決’ 7.select 在ie6下遮蓋 使用iframe嵌套
  7）爲何沒有辦法定義1px左右的寬度容器（IE6默認的行高形成的，使用over:hidden,zoom:0.08 line-height:1px）

 

6八、     清楚浮動的幾種放回，各自的優缺點

1、父級div定義僞類:after和zoom

<style type="text/css">

 　  .div1{background:#000080;border:1px solid red;}

 　  .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}

 　  .left{float:left;width:20%;height:200px;background:#DDD}

 　  .right{float:right;width:30%;height:80px;background:#DDD}

　   /*清除浮動代碼*/

 　  .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}

 　  .clearfloat{zoom:1}

</style>

 

<div class="div1 clearfloat">

　　<div class="left">Left</div>

　　<div class="right">Right</div>

</div>

<div class="div2">

     div2

</div>

 

原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點相似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題。

優勢：瀏覽器支持好，不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）。

缺點：代碼多，很多初學者不理解原理，要兩句代碼結合使用，才能讓主流瀏覽器都支持。

建議：推薦使用，建議定義公共類，以減小CSS代碼。

 

2、父級div定義overflow:hidden

<style type="text/css">

 　  .div1{background:#000080;border:1px solid red;

                  /*解決代碼*/width:98%;overflow:hidden}

 　  .div2{background:#800080;border:1px solid red;height:100px;margin-                                          top:10px;width:98%}

 　  .left{float:left;width:20%;height:200px;background:#DDD}

 　  .right{float:right;width:30%;height:80px;background:#DDD}

</style>

 

<div class="div1">

　　<div class="left">Left</div>

　　<div class="right">Right</div>

</div>

<div class="div2">

　　div2

</div>

 

原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度。

優勢：簡單，代碼少，瀏覽器支持好。

缺點：不能和position配合使用，由於超出的尺寸的會被隱藏。

建議：只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用。

 

3、結尾處加空div標籤clear:both

<style type="text/css">

　   .div1{background:#000080;border:1px solid red}

　   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}

 　  .left{float:left;width:20%;height:200px;background:#DDD}

　   .right{float:right;width:30%;height:80px;background:#DDD}

　   /*清除浮動代碼*/

　   .clearfloat{clear:both}

</style>

<div class="div1">

　　<div class="left">Left</div>

　　<div class="right">Right</div>

　　<div class="clearfloat"></div>

</div>

<div class="div2">

　　div2

</div>

 

原理：添加一個空div，利用css提升的clear:both清除浮動，讓父級div能自動獲取到高度。

優勢：簡單，代碼少，瀏覽器支持好，不容易出現怪問題。

缺點：很多初學者不理解原理；若是頁面浮動佈局多，就要增長不少空div，讓人感受很不爽。

建議：不推薦使用，但此方法是之前主要使用的一種清除浮動方法。

 

4、父級div定義height

<style type="text/css">

　　   .div1{background:#000080;border:1px solid red;/*解決代碼*/height:200px;}

　　   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}

 　　  .left{float:left;width:20%;height:200px;background:#DDD}

　　   .right{float:right;width:30%;height:80px;background:#DDD}

</style>

<div class="div1">

　　<div class="left">Left</div>

　　<div class="right">Right</div>

</div>

<div class="div2">

　　div2

</div>

 

原理：父級div手動定義height，就解決了父級div沒法自動獲取到高度的問題。

優勢：簡單，代碼少，容易掌握。

缺點：只適合高度固定的佈局，要給出精確的高度，若是高度和父級div不同時，會產生問題。

建議：不推薦使用，只建議高度固定的佈局時使用。

 

5、父級div定義overflow:auto

<style type="text/css">

 　　  .div1{background:#000080;border:1px solid red;

         /*解決代碼*/width:98%;overflow:auto}

 　.div2{background:#800080; border:1px solid red; height:100px; margin-top:10px;width:98%}

 　　  .left{float:left;width:20%;height:200px;background:#DDD}

　　   .right{float:right;width:30%;height:80px;background:#DDD}

</style>

<div class="div1">

　　<div class="left">Left</div>

　　<div class="right">Right</div>

</div>

<div class="div2">

　　div2

</div>

 

原理：必須定義width或zoom:1，同時不能定義height，使用overflow:auto時，瀏覽器會自動檢查浮動區域的高度。

優勢：簡單，代碼少，瀏覽器支持好。

缺點：內部寬高超過父級div時，會出現滾動條。

建議：不推薦使用，若是你須要出現滾動條或者確保你的代碼不會出現滾動條就使用吧。

 

69.Javascript的typeof返回哪些數據類型；列舉3種強制類型轉換和2中隱式類型轉換

1）返回數據類型

undefined

string

boolean

number

symbol(ES6)

Object

Function

2）強制類型轉換

Number(參數)  把任何類型轉換成數值類型。

parseInt(參數1，參數2)  將字符串轉換成整數

parseFloat()將字符串轉換成浮點數字

string(參數)：能夠將任何類型轉換成字符串

Boolean()  能夠將任何類型的值轉換成布爾值。

3）隱式類型轉換

1.四則運算

加法運算符+是雙目運算符，只要其中一個是String類型，表達式的值即是一個String。

對於其餘的四則運算，只有其中一個是Number類型，表達式的值即是一個Number。

對於非法字符的狀況一般會返回NaN：

'1' * 'a'     // => NaN，這是由於parseInt(a)值爲NaN，1 * NaN 仍是 NaN

2.判斷語句

判斷語句中的判斷條件須要是Boolean類型，因此條件表達式會被隱式轉換爲Boolean。   其轉換規則同Boolean的構造函數。好比：

var obj = {};if(obj){

    while(obj);}

3.Native代碼調用

JavaScript宿主環境都會提供大量的對象，它們每每很多經過JavaScript來實現的。  JavaScript給這些函數傳入的參數也會進行隱式轉換。例如BOM提供的alert方法接受String類型的參數：

alert({a: 1});    // => [object Object]

 

6九、     寫出3個使用this的典型應用

function Thing() { }

 Thing.prototype.foo = "bar";

 Thing.prototype.logFoo = function () {

      console.log(this.foo);

 }

 Thing.prototype.setFoo = function (newFoo) {

      this.foo = newFoo;

  }

 

  var thing1 = new Thing();

  var thing2 = new Thing();

 

 thing1.logFoo(); //logs "bar"

 thing2.logFoo(); //logs "bar"

 thing1.setFoo("foo");

 thing1.logFoo(); //logs "foo";

 thing2.logFoo(); //logs "bar";

 thing2.foo = "foobar";

 thing1.logFoo(); //logs "foo";

 thing2.logFoo(); //logs "foobar";

 

2.

  function Thing1() { }

  Thing1.prototype.foo = "bar";

  function Thing2() {

     this.foo = "foo";

 }

  Thing2.prototype = new Thing1();

  function Thing3() {}

  Thing3.prototype = new Thing2();

  var thing = new Thing3();

  console.log(thing.foo); //logs "foo"

 

3.

  function Thing() {}

  Thing.prototype.foo = "bar";

  Thing.prototype.logFoo = function () {

      function doIt() {

          onsole.log(this.foo);

       }

      doIt.apply(this);

  }

 function doItIndirectly(method) {

method();

 }

var thing = new Thing();

doItIndirectly(thing.logFoo.bind(thing)); //logs bar

 

對前端界面工程師這個職位是怎麼樣理解的？它的前景會怎

樣？

前端工程師屬於一個比較新興的技術，各類技術層出不窮，隨着客戶體驗的重要性前端須要掌握的技能也愈來愈多了，對前端的要求也愈來愈多了，並且咱們離客戶很近，除了掌握必要的技能還要掌握用戶的心理，屬於溝通。 前景：前景無疑是值得確定的，也須要咱們時刻關注最新的技術，這會是一個時刻都在學習的道路

 

70、     JQuery delegate函數的做用？請舉例說明

delegate() 方法爲指定的元素（屬於被選元素的子元素）添加一個或多個事件處理程序，並規定當這些事件發生時運行的函數

例如點擊div中的p標籤 讓 彈個窗口

$(‘div’).delegate(‘p’, ‘click’, function(){  alert();}

 

7一、     Eval函數的做用

 

eval能夠將字符串生成語句執行，通常執行動態的js語句。
eval的使用場合：有時候咱們預先不知道要執行什麼語句，只有當條件和參數給時才知道執行什麼語句，這時候eval就派上用場了。

 

7二、     標籤上title與alt屬性的區別是什麼

title 是鼠標放上去的額外信息 alt 是不能正常顯示的信息

 

7三、     對WEB標準以及w3c的理解與認識？

Web標準就是將頁面的解構、表現和行爲各自獨立實現，w3c對標註提出了規範化的要求1.對結構的要求：（標籤規範能夠提升搜索引擎對頁面的抓取效率，對SEO頗有幫助）

1）標籤字母要小寫；

2）標籤要閉合；

3）標籤不容許隨意嵌套。

2.對css和js的要求：

1）儘可能使用外聯css樣式表和js腳本，使結構、表現和行爲分紅三塊，符合規範，同時提升頁面渲染速度，提升用戶體驗；

2）樣式儘可能少用行間樣式表，使結構與表現分離，標籤的id和class命名要作到見文知義，標籤越少，加載越快，用戶體驗更高，代碼維護更簡單，便於改版；

3）不須要變更頁面內容，即可提供打印版本而不須要複製內容，提升網站易用性

 

7四、     Css選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計

算？

ID 和 CLASS ；Class 可繼承 ；僞類A標籤能夠繼承；列表 UL LI DL DD DT 可繼承

；優先級就近原則，樣式定義最近者爲準；載入樣式以最後載入的定位爲準

優先級爲

!important > [ id > class > tag ]  

Important 比 內聯優先級高

 

7五、     請戳出ie6/7下特有的cssbug

一：li邊距「無端」 增長

設置ul的顯示形式爲*display:inline-block;便可，前面加*是隻 針對IE6/IE7有效

 

二：IE6 不支持min-height屬性，但它卻認爲height就是最小高度

使用ie6不支持但其他瀏覽器支持的屬性!important。

 

三:Overflow:

在IE6/7中，overflow沒法正確的隱藏有相對定位position:relative;的子元素。解決方法就是給外包容器.wrap加上position:relative;。

四：border：none 在IE6不起做用： 寫成border：0 就能夠了，

 

五:100%高度

在IE6下，若是要給元素定義100%高度，必需要明肯定義它的父級元素的高度，若是你須要給元素定義滿屏的高度，就得先給html和body定義 height:100%;。

 

六:雙邊距 Bug

當元素浮動時，IE6會錯誤的的把浮動方式的margin值雙倍計算，給float的元素添加一個display：inline

 

七：躲貓貓bug

些定義了:hover的連接，當鼠標移到那些連接上時，在IE6下就會觸發躲貓貓。
1.在（那個未浮動的）內容以後添加一個<span style=」clear: both;」> </span>
2.觸發包含了這些連接的容器的hasLayout，一個簡單的方法就是給其定義height:1%;

 

八:IE6 絕對定位的元素1px 間距bug

當絕對定位的父元素或寬度爲奇數時，bottom和right會多出現1px，

解決方案，針對IE6進行hack處理

 

7六、     如何將一個元素600毫秒的速度緩慢向上滑動顯示？

若是須要在父元素底部向上，能夠利用margin-top 把子元素，擠下去，同事父元素設置隱藏，而後改變margintop的值也能夠利用定來作，把子元素定位最下邊

(function(){

              var oDiv = document.createElement('div');

              oDiv.style.width = '100px';

              oDiv.style.height = '100px';

              oDiv.style.backgroundColor = 'red';

              oDiv.style.position = 'absolute';

              oDiv.style.marginTop = 100 + 'px';

              document.body.appendChild(oDiv);

              var timer = setInterval(function(){

                     var m = parseInt(oDiv.style.marginTop);

                     if (m == 0 ) {

                            clearInterval(timer);

                            return;

                     }

                     oDiv.style.marginTop = parseInt(oDiv.style.marginTop) - 1 + 'px';

              },600);

       })();

 

 

7七、     寫一個獲取非行間樣式的函數

Function getStyle(obj, attr){

       If(obj.currentStyle){

              return obj.currentStyle[attr];

}else{

              return getComputedStyle(obj,false)[attr];

}

}

 

7八、     請用正則表達式驗證數字

^[0-9]*$ 

 

7九、     爲何利用多個域名來提供網站資源會更有效？

1、       突破瀏覽器的併發限制（瀏覽器同一域名最大的併發請求數量爲6個，ie6爲2個）

2、       節約cookie帶寬

3、       CDN緩存更方便

4、       防止沒必要要的安全問題（尤爲是cookie的隔離尤其重要）

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

80、     你如何從瀏覽器的URL中獲取參數信息

瀏覽器宿主環境中，有一個location對象，同時這個對象也是window對象和document對象的屬性。

       location對象中提供了與當前窗口加載的文檔有關的的信息，即URL信息。

如 https://www.baidu.com/api/sousu?search=baidu&id=123#2

        location.href: 完整URL

        location.protocol: 返回協議（https:）

        location.host: 返回服務器名稱和端口號（www.baidu.com）

location.hostname: 返回服務器名稱（www.baidu.com）

location.port:返回服務器端口號（http默認80，https默認443）

location.pathname:返回URL中的目錄和文件名（api/sousu）

location.search:返回查詢字符串（?search=baidu&id=123#2）

location.hash:返回hash值（#2）

8一、     手機端文字大小用什麼單位

對於只須要適配少部分手機設備，且分辨率對頁面影響不大的，使用px便可

對於須要適配各類移動設備，使用rem，例如只須要適配iPhone和iPad等分辨率差異比較挺大的設備

8二、     是否作過有上百圖層的psd切圖？ps隱藏其餘圖層，只顯示其中一個圖層的快捷鍵

Alt + 當前圖層前眼睛

8三、     瀏覽器標準模式和懷疑模式之間的區別是什麼？

這是個歷史遺留問題，W3C標準推出前，舊的頁面都是根據舊的渲染方式對頁面進行渲染的，所以在W3C標準推出後爲了保證舊頁面的正常顯示，保持瀏覽器的兼容性，這樣瀏覽器上就產生了可以兼容W3C標準渲染的嚴格模式和保證舊頁面顯示的怪異模式的標準兼容模式。

       具體表現：

1.在嚴格模式中 ：width是內容寬度 ，元素真正的寬度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width +  margin-right;

在怪異模式中 ：width則是元素的實際寬度 ，內容寬度 = width - ( padding-left + padding-right + border-left-width + border-right-width)

2）能夠設置行內元素的高寬

    在標準模式下，給span等行內元素設置wdith和height都不會生效，而在怪異模式下，則會生效。

3）可設置百分比的高度

    在標準模式下，一個元素的高度是由其包含的內容來決定的，若是父元素沒有設置高度，子元素設置一個百分比的高度是無效的。

4）用margin:0 auto設置水平居中在IE下會失效

    使用margin:0 auto在標準模式下能夠使元素水平居中，但在怪異模式下卻會失效, 怪異模式下的解決辦法，用text-align屬性:

   body{text-align:center};#content{text-align:left}

5）怪異模式下設置圖片的padding會失效

6）怪異模式下Table中的字體屬性不能繼承上層的設置

7）怪異模式下white-space:pre會失效

 

8四、     Javascript的同源策略

同源策略是Javascript重要的安全度量標準。它最先出自Netscape Navigator2.0，其目的是防止某個文檔或腳本從多個不一樣源裝載。所謂的同源就是同協議，同主機名，同端口號。

它的精髓很簡單：它認爲自任何站點裝載的信賴內容是不安全的。當被瀏覽器半信半疑的腳本運行在沙箱時，它們應該只被容許訪問來自同一站點的資源，而不是那些來自其它站點可能懷有惡意的資源。

8五、     你所作的WEB移動端項目中，有遇到哪些兼容?

給你們推薦個網址：

http://www.jb51.net/article/84973.htm

8六、     有了解響應式佈局嗎？請大致說一說

響應式佈局概念：Responsive design，意在實現不一樣屏幕分辨率的終端上瀏覽網頁的不一樣展現方式。經過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。

設計步驟：

1. 設置meta標籤
2. 根據媒體查詢設置樣式
3. 設置多種視圖寬度

注意點：

1. 寬度使用百分比
2. 處理圖片縮放問題

8七、     身爲覺得web前端工程師，你確定知道如今最流行的前端技

術吧，有那些？

Vuejs2.0/Angular2.0/React Native /es6//Nodejs

http2

gulp/webpack

8八、     請簡述爲何要使用數據庫的事務

數據庫事務(Database Transaction) ，是指做爲單個邏輯工做單元執行的一系列操做，要麼徹底地執行，要麼徹底地不執行。

 

原子性（Atomic）（Atomicity)
　　事務必須是原子工做單元；對於其數據修改，要麼全都執行，要麼全都不執行。一般，與某個事務關聯的操做具備共同的目標，而且是相互依賴的。若是系統只執行這些操做的一個子集，則可能會破壞事務的整體目標。原子性消除了系統處理操做子集的可能性。
　　一致性（Consistent）(Consistency)
　　事務在完成時，必須使全部的數據都保持一致狀態。在相關數據庫中，全部規則都必須應用於事務的修改，以保持全部數據的完整性。事務結束時，全部的內部數據結構（如 B 樹索引或雙向鏈表）都必須是正確的。某些維護一致性的責任由應用程序開發人員承擔，他們必須確保應用程序已強制全部已知的完整性約束。例如，當開發用於轉賬的應用程序時，應避免在轉賬過程當中任意移動小數點。
　　隔離性（Insulation）(Isolation)
　　由併發事務所做的修改必須與任何其它併發事務所做的修改隔離。事務查看數據時數據所處的狀態，要麼是另外一併發事務修改它以前的狀態，要麼是另外一事務修改它以後的狀態，事務不會查看中間狀態的數據。這稱爲隔離性，由於它可以從新裝載起始數據，而且重播一系列事務，以使數據結束時的狀態與原始事務執行的狀態相同。當事務可序列化時將得到最高的隔離級別。在此級別上，從一組可並行執行的事務得到的結果與經過連續運行每一個事務所得到的結果相同。因爲高度隔離會限制可並行執行的事務數，因此一些應用程序下降隔離級別以換取更大的吞吐量。
　　持久性（Duration）(Durability） 　　事務完成以後，它對於系統的影響是永久性的。該修改即便出現致命的系統故障也將一直保持。