史上前端面試最全問答（附答案）

史上前端面試最全知識點（附答案）

          一.html & js & css

 

1.AMD和CMD是什麼？它們的區別有哪些？

 

    AMD和CMD是二種模塊定義規範。如今都使用模塊化編程，AMD，異步模塊定義；CMD，通用模塊定義。AMD依賴前置，CMD依賴就近。CMD的API職責單一，沒有全局require，AMD的一個API能夠多用。

 

2.web開發常見的漏洞。

 

   XSS（跨站腳本攻擊）：其原理是攻擊者向有XSS漏洞的網站中輸入(傳入)惡意的HTML代碼，當其它用戶瀏覽該網站時，這段HTML代碼會自動執行，從而達到攻擊的目的。如，盜取用戶Cookie、破壞頁面結構、重定向到其它網站等。

 

  SQL注入：用戶能夠提交一段數據庫查詢代碼，根據程序返回的結果，得到某些他想得知的數據，這就是所謂的SQL Injection，即SQL注入。

 

3.cookie和session

 

    當你在瀏覽網站的時候，WEB 服務器會先送一小小資料放在你的計算機上，Cookie 會幫你在網站上所打的文字或是一些選擇，

都紀錄下來。當下次你再光臨同一個網站，WEB 服務器會先看看有沒有它上次留下的 Cookie 資料，有的話，就會依據 Cookie

裏的內容來判斷使用者，送出特定的網頁內容給你。

 當程序須要爲某個客戶端的請求建立一個session時，服務器首先檢查這個客戶端的請求裏是否已包含了一個session標識

（稱爲session id），若是已包含則說明之前已經爲此客戶端建立過session，服務器就按照session id把這個session檢索出來

使用（檢索不到，會新建一個），若是客戶端請求不包含session id，則爲此客戶端建立一個session而且生成一個與此session相

關聯的session id

 

4.MVC BFC

 

   mvc是模型(model)－視圖(view)－控制器(controller)的縮寫，一種軟件設計典範使用MVC的目的是將M和V的實現代碼分離，從而使同一個程序可使用不一樣的表現形式。MVC對應Html，CSS，js。

 

    BFC全稱」Block Formatting Context」, 中文爲「塊級格式化上下文」。流體特性：塊狀水平元素，如div元素（下同），在默認狀況下（非浮動、絕對定位等），水平方向會自動填滿外部的容器；BFC元素特性表現原則就是，內部子元素不會影響外部的元素。

• float的值不爲none。
• overflow的值爲auto,scroll或hidden。
• display的值爲table-cell, table-caption, inline-block中的任何一個。
• position的值不爲relative和static。

 5.HTTP狀態碼：

  

     1.消息  2.成功 3.重定向 4.請求錯誤 5.服務器錯誤

 

     304：響應禁止包含消息體，若是客戶端發送了一個帶條件的 GET 請求且該請求已被容許，而文檔的內容（自上次訪問以來或者根據請求的條件）並無改變，則服務器應當返回這個狀態碼。

     305：被請求的資源必須經過指定的代理才能被訪問。

     400：語義有誤，當前請求沒法被服務器理解。除非進行修改，不然客戶端不該該重複提交這個請求，或者請求參數有誤。

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

     404：請求失敗，請求所但願獲得的資源未被在服務器上發現。

     500：服務器遇到了一個不曾預料的情況，致使了它沒法完成對請求的處理。通常來講，這個問題都會在服務器端的源代碼出現錯誤時出現。

 

6.HTML 5 增長了一項新功能是 自定義數據屬性 ，也就是  data- 自定義屬性。在HTML5中咱們可使用以 data- 爲前綴來設置咱們須要的自定義屬性，來進行一些數據的存放。

<div id = "user" data-uid = "12345" data-uname = "愚人碼頭" > </div>

 

// 使用getAttribute獲取 data- 屬性

var user = document . getElementById ( 'user' ) ;

var userName =user . getAttribute ( 'data-uname' ) ; // userName = '愚人碼頭'

var userId = user . getAttribute ( 'data-uid' ) ; // userId = '12345'

 

使用setAttribute設置 data- 屬性

user . setAttribute ( 'data-site' , 'http://www.css88.com' ) ;

 

7.使div水平垂直都居中

  知道DIV的自身長度和寬度，其實解決的思路是這樣的：首們須要position:absolute;絕對定位。而層的定位點，使用外補丁margin負值的方法。負值的大小爲層自身寬度高度除以二。[style="position: absolute;top:50%;left: 50%"]只能實現DIV離左邊框和上邊框的距離爲屏幕的物理尺寸的一半，忽略了DIV自己的長度和寬度，因此不會實現DIV的水平垂直居中。

  不知道DIV的自己長度和寬度時:

        $(window).load(function(){

            $(".mydiv").css({

                position: "absolute",

                left: ($(window).width() - $(".mydiv").width())/2,

                top: ($(window).height() - $(".mydiv").height())/2

            });

        });

8.Call（）和apply（）

   構造函數：

 function showname(){

    this.name="zygg"；

        }

        var qq=new showname();

        console.log(qq.name);

 

 咱們發現apply()和call()的真正用武之地是可以擴充函數賴以運行的做用域，能夠改變函數體內部 this 的指向：

        window.firstName = "diz";

        window.lastName = "song";

        var myname = { firstName: "my", lastName: "Object" };

        function show() {

        console.log("Hello " + this.firstName + " " +this.lastName, " glad to meet you!");

        }

        show();

        show.call(myname);//若是不這樣寫，對象myname是無法調用函數 show()的。

 兩者做用相似，區別就是參數不一樣：

 call(thisObj，Object)

 apply(thisObj，[argArray])

9.動態節點綁定事件

  Live（） delegate（）       bind（）【處理文檔中的靜態部分，不用於。。。】

   delegate()和live（）做用相似，附加的事件處理程序適用於匹配選擇器的當前及將來的元素（好比由腳本建立的新元素）。但兩者參數不同。

   $(selector).delegate(childSelector,event,function)

    $(selector).live(event,function)

 

 

 $("div").delegate("p","click",function(){

    $(this).slideToggle();

  });//只有DIV內的p元素會被綁定事件。

 $("p").live("click",function(){

    $(this).slideToggle();

  });//文檔內全部p元素都會被綁定事件

bind（）能夠向元素添加的一個或多個事件處理程序，以及當事件發生時運行的函數。

$(selector).bind(event,function)

$("button").bind("click",function(){

    $("p").slideToggle();

  });//bind【捆綁】

10.Position的四個屬性詳解

Position的四個屬性：static，fixed，absolute，relative

首先，static，是position屬性的默認值，也就是無特殊定位，遵循html定位規則。

而後，fixed，是相對於瀏覽器窗口進行定位，不隨頁面的上下翻動而移動，好比固定在頁面末端的二維碼等。

下來，就是absolute，它是相對於它的第一個父元素進行定位，若是你想讓這個div#demo裏的一個子div#sub相對於#demo定位在右上角的某個地方，應該給#demo相對定位，#sub絕對定位。 此時，它的第一個父元素就是id=demo的div；不然它的父元素就是body，這樣它的位置在頁面中保持不變，可是隨着頁面移動會發生變化（區別fixed）。

最後，relative，relative是相對於本身來定位的，相對於其正常位置進行定位。例如：#demo{position:relative;top:-50px;},這時#demo會在相對於它原來的位置上移50px。 

P.S:採用左列left浮動，右列不浮動，採用margin-left定位的方式。

 

11.理解CSS盒子模型

什麼是CSS的盒子模式呢？爲何叫它是盒子？先說說咱們在網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具有這些屬性。

CSS盒子模式

這些屬性咱們能夠把它轉移到咱們平常生活中的盒子（箱子）上來理解，平常生活中所見的盒子也具備這些屬性，因此叫它盒子模式。那麼內容就是盒子裏裝的東西；而填充就是怕盒子裏裝的東西（貴重的）損壞而添加的泡沫或者其它抗震的輔料；邊框就是盒子自己了；至於邊界則說明盒子擺放的時候的不能所有堆在一塊兒，要留必定空隙保持通風，同時也爲了方便取出嘛。在網頁設計上，內容常指文字、圖片等元素，可是也能夠是小盒子（DIV嵌套），與現實生活中盒子不一樣的是，現實生活中的東西通常不能大於盒子，不然盒子會被撐壞的，而CSS盒子具備彈性，裏面的東西大過盒子自己最多把它撐大，但它不會損壞的。並且填充只有寬度屬性。

12.區別onmouseover和mouseover

onmouseover是Event 對象的一個屬性，Mouseover是jQuery中的一個事件 。

推薦使用jQuery，直接執行方法$("#id").mouseover(function(){});

徹底使用js則是以下寫法：document.getElementById("id").onmouseover=function(){};

document.getElementsByTagName("body")[0].style.backgroundColor="pink」; //注意不要忘了style，深入理解DOM的本質。

 

 

13.一個簡單的AJAX 的請求

<script type="text/javascript">

function loadXMLDoc(){

var xmlhttp;

if (window.XMLHttpRequest)

  {// code for IE7+, Firefox, Chrome, Opera, Safari

  xmlhttp=new XMLHttpRequest();

  }

else

  {// code for IE6, IE5

  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

xmlhttp.onreadystatechange=function()

  {

  if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {

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

    }

  }

xmlhttp.open("GET","/ajax/demo_get.asp",true);

xmlhttp.send();

}

</script>

</head>

<body>

<h2>AJAX</h2>

<button type="button" onclick="loadXMLDoc()">請求數據</button>

<div id="myDiv"></div>

</body>

 

14.Javascript 的addEventListener()及attachEvent()區別分析

addEventListener()和attachEvent()是一個偵聽事件並處理相應的函數，

能夠動態的爲網頁內的元素添加一個或多個事件。能夠將事件和元素分離，這樣可編輯性就高了。

addEventListener的使用方式： 
target.addEventListener(type, listener, useCapture); 
target： 文檔節點、document、window 或 XMLHttpRequest。 
type： 字符串，事件名稱，不含「on」，好比「click」、「mouseover」、「keydown」等。 
listener ：實現了 EventListener 接口或者是 JavaScript 中的函數。 
useCapture ：是否使用捕捉，通常用 false 。例如：document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false); 
而attachEvent()則是，target.attachEvent(type, listener); 

 

注意：attachEvent（）中的type： 字符串，事件名稱，含「on」，好比「onclick」、「onmouseover」、「onkeydown」等。

 

15.關於事件監聽

 

     好比，<button onclick='A();' /> 就表示"你正在監聽 click 事件", 而事件監聽器就是咱們爲了要響應這個事件而寫的函數。至於事件監聽機制了，就是冒泡和捕獲。

 

16.事件監聽機制（冒泡和捕獲）

 事件捕獲：事件從最上一級標籤開始往下查找，直到捕獲到事件目標(target)。
 事件冒泡：事件從事件目標(target)開始，往上冒泡直到頁面的最上一級標籤。

假設一個元素div，它有一個下級元素p。

<div>

　　<p>元素</p>
</div>
這兩個元素都綁定了click事件，若是用戶點擊了p，它在div和p上都觸發了click事件，那這兩個事件處理程序哪一個先執行呢？ 
如div先觸發，這就叫作事件捕獲。

如p先觸發，這就叫作事件冒泡。

IE只支持事件冒泡，其餘主流瀏覽器兩種都支持。

程序員能夠本身選擇綁定事件時採用事件捕獲仍是事件冒泡，方法就是綁定事件時經過addEventListener函數，它有三個參數，第三個參數如果true，則表示採用事件捕獲，如果false，則表示採用事件冒泡。

事件的傳播是能夠阻止的：
• 在W3c中，使用stopPropagation（）方法
在捕獲的過程當中stopPropagation（）；後，後面的冒泡過程也不會發生了~

propagation

【傳播，蔓延】

3.阻止事件的默認行爲，例如click <a>後的跳轉~
• 在W3c中，使用preventDefault（）方法；
• 在IE下設置window.event.returnValue = false;

 

                                        來自於：http://www.jb51.net/article/42492.htm

 

17.DNS的工做原理（遞歸和迭代）（應用層）

 

 DNS的工做原理及過程分下面幾個步驟：
        第一步：客戶機提出域名解析請求，並將該請求發送給本地的域名服務器。
        第二步：當本地的域名服務器收到請求後，就先查詢本地的緩存，若是有該紀錄項，則本地的域名服務器就直接把查詢的結果返回。 
        第三步：若是本地的緩存中沒有該紀錄，則本地域名服務器就直接把請求發給根域名服務器，而後根域名服務器再返回給本地域名服務器一個所查詢域(根的子域) 的主域名服務器的地址。
        第四步：本地服務器再向上一步返回的域名服務器發送請求，而後接受請求的服務器查詢本身的緩存，若是沒有該紀錄，則返回相關的下級的域名服務器的地址。
        第五步：重複第四步，直到找到正確的紀錄。
        第六步：本地域名服務器把返回的結果保存到緩存，以備下一次使用，同時還將結果返回給客戶機。

 

18.什麼是DOM事件處理程序？
     首先要理解什麼是DOM？Dom是針對HTML文檔的一個API。什麼是事件流？事件流分爲：事件冒泡（IE的事件流）和事件捕獲。事件冒泡就是由最具體的元素開始接收，而後逐級向上；事件捕獲就是由不太具體的元素開始接收，逐級向下，最具體的元素最後才接收到事件。
DOM事件處理程序分爲DOM0級、DOM2級。DOM0級具備簡單，跨瀏覽器的優點，它是把函數賦值給一個事件的處理程序屬性。例如：btn.onlick=function（）{。。。}；DOM2級事件定義了兩個方法，用於處理指定和刪除事件處理程序的操做。addEventListener()和removeEventListener()。它們都接收三個參數，要處理的事件名、做爲事件處理程序的函數和布爾值。布爾值爲true表示在捕獲階段調用事件處理程序，布爾值爲false是在冒泡處調用。注意：事件名要去掉「on」。經過addEventListener（）添加的事件，只能由removeEventListener()刪除。IE存在兼容問題，能夠用attachEvent()添加事件和detachEvent（）刪除事件。接收兩個參數，事件處理程序的名稱和函數。注意：事件名此時要加」on」。

19.若是給一個元素同時綁定兩個事件，會怎麼樣？
    Dom 0級和Dom 2級均可以給一個元素添加多個事件，Dom 0級的每一個事件只支持一個事件處理程序，若是綁定同一個事件，那麼後邊的那個事件，函數會覆蓋掉前邊的那個事件函數。Dom2級能夠添加多個事件處理程序，他們會按照添加的順序觸發。

 

20.深刻理解閉包

 

  要理解閉包，首先必須理解Javascript特殊的變量做用域。個人理解是，閉包就是可以讀取其餘函數內部變量的函數。

示意圖：

 

    既然函數b能夠讀取函數a中的局部變量，那麼只要把b做爲返回值，咱們不就能夠在a外部讀取它的內部變量了嗎！

 

   閉包能夠用在許多地方。它的最大用處有兩個，一個是前面提到的能夠讀取函數內部的變量，另外一個就是讓這些變量的值始終保持在內存中。

 

 

                                 來自於：http://www.jb51.net/article/24101.htm

21.jQuery源碼分析：

 

  選擇器 Sizzle引擎   回調對象 - Callbacks   事件綁定 - 綁定設計

  DOM操做方法與核心   Ajax - 總體結構

  選擇器 Sizzle引擎：我的認爲，sizzle選擇器是加強版的querySelectorAll 函數：返回指定元素節點的子樹中匹配selector的節點集合，採用的是深度優先預查找；若是沒有匹配的，這個方法返回空集合） 

 

22.設計模式：

 

一共有23種設計模式

1.觀察者模式

2.監聽模式

3. Factory Method（工廠方法）：定義一個用於建立對象的接口，讓子類決定實例化哪個類。就行構造函數

4. Abstract Factory（抽象工廠）：。。。

5. Prototype（原型）：當要實例化的類是在運行時刻指定時，例如，經過動態裝載。

    ......

 

23.CSS框架：

 

  YUI、JQuery、Prototype，bootstrap。

 

24.幾個前端框架的區別：

 

jQuery 
   核心js只有50K，小而精，佔用帶寬小，側重於對js dom編程。有靈活便捷的Ajax請求和回調操做。

ExtJS 
  一整套帶有UI的js庫，封裝得不少，核心js就600多K，這麼大的東西門戶網站固然就別想了，裏面的效果固然也不會運用到門戶網站，因此它是專門爲管理系統而生的。
三、YUI 
  或者是相似於網盤應用這種東東。 

4.Dojo 
  Dojo是功能最爲強大的javascript框架，刻意提醒一下：功能最強大。因此它幾乎包含了全部你可能想要用到的東西。）。 Dojo更適合企業應用和產品開發的須要，

五、Prototype 
  最成熟的。但我的認爲能夠被Jquery取代。二者類似度也比較高。

 

25.說說float和position

 

  float:none|left|right|inherit

  Inherit:規定應該從父元素繼承 float 屬性的值。

 

   float是相對定位的，會隨着瀏覽器的大小和分辨率的變化而改變，而position就不行了，因此通常狀況下仍是float佈局！在局部可能會用到position進行定位！既然是佈局，就用float好，這個我比較經常使用。這個浮動是能夠清除的，通常不會影響總體佈局。 而position，定位，是不受約束的，這個貌似都談不上佈局了，通常要是作什麼特殊的定位或者浮動層的時候，能夠考慮使用！float會影響後面的元素，而position不會影響後面的元素。

 

26.清除浮動：

 

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

    結尾處加空div標籤 clear:both

父級div定義 overflow:hidden /auto

 

27.前端性能優化

 

  ①對於頁面來講：儘可能減小DOM元素的數量

                  減小iframe的數量

                  減小http的請求次數

                  提早加載

  ②對於CSS來講：將樣式表置頂

                  使用link代替@important

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

　　區別2：link是XHTML標籤，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。link支持定義RSS(簡易信息聚合).

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

 

  ③對於JS來講： 將腳本置底

                  使用外部JS和CSS文件

                  精簡JS和CSS文件，去除重複腳本

 

     目前，前端性能測試的執行工具也有不少，好比YSlow，Page Speed，dynaTrace AJAX Edition，webload等等。

 

28.HTML語義化

 

   就是當你寫html時，要按照人們的思考邏輯寫。不但要本身能看懂，也要讓別人也能看懂，不要讓別人以爲你的代碼很亂。語義化的主要目的就是讓你們直觀的認識標籤(markup)和屬性(attribute)的用途和做用。

    語義化的網頁的好處，最主要的就是對搜索引擎友好，有了良好的結構和語義你的網頁內容天然容易被搜索引擎抓取，你網站的推廣即可以省下很多的功夫。

語義 Web 技術有助於利用基於開放標準的技術，從數據、文檔內容或應用代碼中分離出意義。

 

 

29.能夠談談本身對SEO和title和keywords堆砌問題。

 

30.說說jsonp，getJSON(),getScript():

 

Jsonp（解決跨域）

    一種非正式傳輸協議，人們把它稱做JSONP，該協議的一個要點就是容許用戶傳遞一個callback參數給服務端，而後服務端返回數據時會將這個callback參數做爲函數名來包裹住JSON數據，這樣客戶端就能夠隨意定製本身的函數來自動處理返回數據了。

由於，<script> 元素的這個開放策略。

 

getJSON():

 

因此getJSON和ajax的方式(實際就是jsonp)想比較，也就是callback函數一個是自動生成的函數名，一個是手工指定的函數名。

getScript():

 

客戶端：<script type="text/javascript">

      jQuery.getScript("http://alloyteamzygg.sinaapp.com/js/test.js",function(){

          console.log(zy.name)

      })

 

</script>

 

服務端：

   Var zy={「name」:」zygg」,

「age」:」22」

};

 

31.prototype屬性

 

   每個構造函數都有一個屬性叫作原型(prototype)。這個屬性很是有用：爲一個特定類聲明通用的變量或者函數。prototype是一個對象，所以，你可以給它添加屬性。你添加給prototype的屬性將會成爲使用這個構造函數建立的對象的通用屬性。

 

32.js實現類:

 

構造函數方式：

   因爲js類的定義方法和函數的定義方法同樣，因此定義構造函數的同時就定義了類。構造函數內的方法和屬性也就是類中的方法和屬性。

原型方式 
  該方式利用了對象的prototype屬性。首先定義了一個空函數，而後經過prototype屬性來定義對象的屬性。調用該函數時，原型的全部屬性都會當即賦予要建立的對象

33.js面向對象

  面向對象的語言有一個標誌，即擁有類的概念

34.構造函數

js建立對象的方式包括兩種：對象字面量和使用new表達式。對應代碼：

Var zy={

  「name」:」zygg」,

  「age」:22

}

 

 function zy(name,age){

 

        this.name=name;

        this.age=age;

    }

    zy.prototype.sex="male";

 

    var zygg=new zy("bailu",18)

    console.log(zygg.name)  //bailu

35.js繼承

繼承是指一個對象直接使用另外一對象的屬性和方法

實現方法：

對象冒充，及call（）Apply（）參見上述call和apply的用法。

原型鏈方式：

   js中每一個對象均有一個隱藏的__proto__屬性，一個實例化對象的__proto__屬性指向其類的prototype方法，而這個prototype方法又能夠被賦值成另外一個實例化對象，這個對象的__proto__又須要指向其類，由此造成一條鏈。

 

   那麼__proto__是什麼？咱們在這裏簡單地說下。每一個對象都會在其內部初始化一個屬性，就是__proto__，當咱們訪問一個對象的屬性 時，若是這個對象內部不存在這個屬性，那麼他就會去__proto__裏找這個屬性，這個__proto__又會有本身的__proto__，因而就這樣 一直找下去，也就是咱們平時所說的原型鏈的概念。

 

36.js事件委託

 

  「事件處理程序過多」問題的解決方案就是事件委託。

事件委託利用的是事件冒泡機制，只制定一事件處理程序，就能夠管理某一類型的全部事件（使用事件委託，只需在DOM樹中儘可能最高的層次上添加一個事件處理程序）。

  這裏要用到事件源：event 對象，須要用到target屬性，其 事件屬性可返回事件的目標節點（觸發該事件的節點）

 

oUl.onmouseover = function(ev){

            var target = ev.target

            if(target.nodeName.toLowerCase() == "li"){

                target.style.background = "red";

            }

        }

 

37.js自定義事件：

 js自定義事件用處較多，最主要的就是實現觀察者模式.

 觀察者模式( 又叫發佈者-訂閱者模式 )應該是最經常使用的設計模式之一。

 平時接觸的dom事件. 也是js和dom之間實現的一種觀察者模式.

 觀察者模式舉例：

div.onclick  =  function click (){

 

   alert ( ''click' )

 

}

   只要訂閱了div的click事件. 當點擊div的時候, function click就會被觸發.Div爲發佈者，click事件爲訂閱者

 自定義事件例子：

 

<script src="Scripts/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('body').on('someclick', function () {
                console.log('被點擊了~~');
            });
            $('body').trigger('someclick');
        });      
   </script> 

on（）是jQuery中的相似於bind（），live（），delegate（）等綁定事件的方法。

trigger() 方法觸發被選元素的指定事件類型。先給固定元素綁定一個自定義事件」someclick」，而後必須經過trigger（）來使自定義事件可使用。

Trigger【引起，觸發;】

38.回調函數：

 函數a有一個參數，這個參數是個函數b，當函數a執行完之後執行函數b。那麼這個過程就叫回調。函數b是你以參數形式傳給函數a的，那麼函數b就叫回調函數。回調函數能夠繼續擴展一個函數的功能，能夠是程序很是靈活。

 function zy(callback){

          alert("開始");

          callback();

      }

        function zygg(){

            alert("我是回調函數");

        }

       function test(){

           zy(zygg)

       }

 

39.說一說css中box和flex

 

恩恩，首先'box'吶是比較早的語法，使用它時須要帶上前綴，好比  display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */，而"flex"是2012年的語法，是css3新規定的，也將是之後標準的語法。將父元素的display屬性設置爲-webkit-box（box），而後子元素經過屬性-webkit-box-flex來指定一個框的子元素是不是靈活的或固定的大小，如上，定義兩個靈活的p元素。若是父級box的總寬度爲300px，＃P1將有一個100px的寬度，＃P2將有一個200px的寬度，也就是呈固定比例劃分。固然了，也能夠這樣寫：

<div style="width: 500px;height:500px;display:flex">

    <p style="

flex:1.0;border:1px solid red;">111111111111</p>

    <p style="

flex:2.0;border:1px solid blue;">22222222222</p>

</div

 

固然了css3規定了，一系列的有關box的屬性，好比 box-shadow。。。。。

 

40.JavaScript內置對象有如下幾種。 
   

     String對象：處理全部的字符串操做 
     Math對象：處理全部的數學運算 
     Date對象：處理日期和時間的存儲、轉化和表達 
     Array對象：提供一個數組的模型、存儲大量有序的數據 
     Event對象：提供JavaScript事件的各類處理信息 

41.JavaScript內置函數

①：escape( )escape() 函數可對字符串進行編碼，這樣就能夠在全部的計算機上讀取該字符串。 eg:?=%3

②：eval( ) eval() 函數可計算某個字符串，並執行其中的的 JavaScript 代碼。

eg:eval("x=10;y=20;document.write(x*y)")

③：isFinite( )isFinite() 函數用於檢查其參數是不是無窮大。返回true或者false。

④：isNaN( ) isNaN( ) 函數可用於判斷其參數是不是 NaN

⑤：parseFloat( )parseFloat() 函數可解析一個字符串，並返回一個浮點數。

⑥;parseInt( ) parseInt() 函數可解析一個字符串，並返回一個整數。

⑦：unescape( ) unescape() 函數可對經過 escape() 編碼的字符串進行解碼。

 

 

42.自適應問題

 

  自適應指的就是指其長（寬）度能夠根據瀏器窗口的大小自動改變其長（寬）度（隨瀏覽器長（寬）的改變而改變）,而不會被瀏覽器遮住。

  實現方法（以左側固定，右側自適應爲例）：

①採用左列 left 浮動，右列不浮動，採用 margin-left 定位的方式。

②左列使用絕對定位，右列使用 margin-left 定位。

 

43.咱們給一個dom同時綁定兩個點擊事件，一個用捕獲，一個用冒泡，你來講下會執行幾回事件，而後會先執行冒泡仍是捕獲！！！

 

44.jQuery的三種綁定事件方式：bind（），live（），delegate（）

 

 

45.從輸入 URL 到頁面加載完的過程當中都發生了什麼事情？

 

  ①首先若是咱們若是輸入的不是ip地址，而是域名的話，就須要IP解析，DNS域名解析（具體見DNS工做機制）。

  ②解析出來對應的IP後，如不包含端口號，http協議默認端口號是80；https（http+ssl（傳輸層））是430！而後向IP發起網絡鏈接，根據http協議要求，組織一個請求的數據包，裏面包含大量請求信息。

  ③服務器響應請求，將數據返回給瀏覽器。數據多是根據HTML協議組織的網頁，裏面包含頁面的佈局、文字。數據也多是圖片、腳本程序等。

  ④開始根據資源的類型，將資源組織成屏幕上顯示的圖像，這個過程叫渲染，網頁渲染是瀏覽器最複雜、最核心的功能。

  ⑤將渲染好的頁面圖像顯示出來，並開始響應用戶的操做。

 

46.jQuery 選擇器

選擇器	實例	選取
*	$("*")	全部元素
#id	$("#lastname")	id="lastname" 的元素
.class	$(".intro")	全部 class="intro" 的元素
element	$("p")	全部 <p> 元素
:first	$("p:first")	第一個 <p> 元素
:last	$("p:last")	最後一個 <p> 元素
:lt(no)	$("ul li:lt(3)")	列出 index 小於 3 的元素
:not(selector)	$("input:not(:empty)")	全部不爲空的 input 元素
:empty	$(":empty")	無子（元素）節點的全部元素
:hidden	$("p:hidden")	全部隱藏的 <p> 元素
:visible	$("table:visible")	全部可見的表格

 

47.Unicode和ASCII的區別是什麼回答

   計算機發明後，爲了在計算機中表示字符，人們制定了一種編碼，叫ASCII碼。
中國人利用連續2個擴展ASCII碼的擴展區域（0xA0之後）來表示一個漢字，該方法的標準叫GB-2312。由於各個國家地區定義的字符集有交集，所以使用GB-2312的軟件，就不能在BIG-5的環境下運行（顯示亂碼），反之亦然。
    爲了把全世界人民全部的全部的文字符號都統一進行編碼，因而制定了UNICODE標準字符集。UNICODE 使用2個字節表示一個字符(unsigned shor int、WCHAR、_wchar_t、OLECHAR)。

48.JS的數據類型：字符串、數字、布爾、數組、對象、Null、Undefined

   Null和undefined的區別：

undefined表示變量聲明但未初始化時的值，javascript解釋器不知道這是什麼東西,會拋出"未定義"的錯誤

null表示準備用來保存對象，尚未真正保存對象的值。從邏輯角度看，null值表示一個空對象指針，意思是你定義了它,但它沒有分配內存空間。

 

                        二.CSS(3)

css3總的說來大概就是邊框的一些特殊樣式，好比圓角，還有就是漸變，動畫。

在CSS3中border-radius屬性被用於建立圓角（前提是有邊框屬性）：border-radius:10px;

 

     若是你在 border-radius 屬性中只指定一個值，那麼將生成 4 個 圓角。

  

     其也能夠這樣寫：border-radius:1px 2px 3px 4px [能夠給四個角同時設置]

 

     也能夠border-top/bottom-left/right-radius，給某個角給值。

 

      其值也能夠這樣：  border-radius: 15px/50px;

 

                        border-radius: 50% ;【橢圓效果】

CSS3中的box-shadow屬性被用來添加陰影:box-shadow : 3px 3px 3px yellow;[上右下左]

 

有了CSS3的border-image屬性，你可使用圖像建立一個邊框：

 

     -webkit-border-image : url(border.png) 30 30 round;

 

 round : 圖像平鋪（重複）來填充該區域。

 

 Stretch 這裏，圖像被拉伸以填充該區域。

 

background-size指定背景圖像的大小。CSS3之前，背景圖像大小由圖像的實際大小決定。

  

     background-size:80px 60px;

background-Origin屬性指定了背景圖像的位置區域。

content-box, padding-box,和 border-box區域內能夠放置背景圖像。

 

   Eg:background-origin:border-box;

 

 

CSS3 容許你在元素,那個添加多個背景圖像。

   background-image:url(img_flwr.gif),url(img_tree.gif);

CSS3 background-clip 屬性，類比background-origin[背景圖片]

做用：指定繪圖區的背景，也就是規定背景的真正做用區域。

語法：

background-clip: border-box|padding-box|content-box;

 

CSS3 定義了兩種類型的漸變（gradients）：

線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向

徑向漸變（Radial Gradients）- 由它們的中心定義

語法：background: -webkit-linear-gradient(red, pink);   從上到下

      background: -webkit-linear-gradient(left, red , blue);  從左向右

-moz表明firefox瀏覽器私有屬性
-ms表明IE瀏覽器私有屬性
-webkit表明chrome、safari（蘋果瀏覽器）私有屬性

-o表明opera（歐朋瀏覽器）的私有屬性

 

 background: -webkit-linear-gradient(left top, red , blue); 漸變呈對角線變化，從左上角開始。

 漸變的方向上也能夠作更多的控制，您能夠定義一個角度，而不用預約義方向：

 background: -webkit-linear-gradient(180deg, red, blue);

  也能夠同時使用多個顏色節點：

 background: -webkit-linear-gradient(red, green, blue);

CSS3 漸變也支持透明度（transparency），可用於建立減弱變淡的效果：

  background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1));

咱們使用 rgba() 函數來定義顏色結點。rgba() 函數中的最後一個參數能夠是從 0 到 1 的值，它定義了顏色的透明度：0 表示徹底透明，1 表示徹底不透明。r表明紅色，g表明綠色，b表明藍色，a表明透明度。

重複的漸變：

background: -webkit-repeating-linear-gradient(...);

爲了建立一個徑向漸變，您也必須至少定義兩種顏色結點。

background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);

比例越大，」半徑越大」，它的默認形狀是橢圓。也能夠自定義形狀;

background: -webkit-radial-gradient(circle, red, yellow, green);

CSS3的文本陰影:

text-shadow: 5px 5px 5px #FF0000;分別對應水平陰影，垂直陰影，模糊的距離，以及陰影的顏色.

CSS3文本的強制換行：

p {word-wrap:break-word;}

 

CSS3 @font-face 規則，自定義字體。

<style>

@font-face

{

font-family: myFirstFont;

src: url('Sansation_Light.ttf')

    }

 

div

{

font-family:myFirstFont;

}

</style>

 

CSS3 2D 轉換：

您將瞭解2D變換方法：

translate()

rotate()

scale()

skew()

matrix()

rotate()方法，在一個給定度數順時針旋轉的元素。負值是容許的，這樣是元素逆時針旋轉。

    -webkit-transform:rotate(30deg); /* Safari and Chrome */ 注意是-webkit-transform :是冒號

 

translate()方法，根據左(X軸)和頂部(Y軸)位置給定的參數，從當前元素位置移動:

     -webkit-transform:translate(50px,100px)

scale()方法，該元素增長或減小的大小，取決於寬度（X軸）和高度（Y軸）的參數

     -webkit-transform:scale(1,2); 也就是寬度和高度呈對應的倍數增長。

skew()方法，該元素會根據橫向（X軸）和垂直（Y軸）線參數給定角度：

     skew(30deg,20deg)是繞X軸和Y軸周圍20度30度的元素。

matrix 方法有六個參數，包含旋轉，縮放，移動（平移）和傾斜功能。

rty		描述	CSS
transform		適用於2D或3D轉換的元素	3
transform-origin		容許您更改轉化元素位置	3
函數	描述
matrix(n,n,n,n,n,n)	定義 2D 轉換，使用六個值的矩陣。
translate(x,y)	定義 2D 轉換，沿着 X 和 Y 軸移動元素。
translateX(n)	定義 2D 轉換，沿着 X 軸移動元素。
translateY(n)	定義 2D 轉換，沿着 Y 軸移動元素。
scale(x,y)	定義 2D 縮放轉換，改變元素的寬度和高度。
scaleX(n)	定義 2D 縮放轉換，改變元素的寬度。
scaleY(n)	定義 2D 縮放轉換，改變元素的高度。
rotate(angle)	定義 2D 旋轉，在參數中規定角度。
skew(x-angle,y-angle)	定義 2D 傾斜轉換，沿着 X 和 Y 軸。
skewX(angle)	定義 2D 傾斜轉換，沿着 X 軸。
skewY(angle)	定義 2D 傾斜轉換，沿着 Y 軸。

 

 CSS3 3D 轉換:

rotateX()

rotateY()

-webkit-transform:rotateX/Y(120deg); /* Safari and Chrome */

 

 

 CSS3 過渡 : transition 屬性.

CSS3 過渡是元素從一種樣式逐漸改變爲另外一種的效果。

要實現這一點，必須規定兩項內容：

指定要添加效果的CSS屬性

指定效果的持續時間

Eg : -webkit-transition: -webkit-transform 3s;

-webkit-transition-delay

規定過渡效果什麼時候開始。默認是 0。

CSS3 動畫

當在@keyframe建立動畫，把它綁定到一個選擇器，不然動畫不會有任何效果。

指定至少這兩個CSS3的動畫屬性綁定向一個選擇器：

規定動畫的名稱

規定動畫的時長

<style>

 div{

width:100px;

height:100px;

background:red;

-webkit-animation:myfirst 5s; /* Safari and Chrome */

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

from {background:red;}

to {background:yellow;}

}

</style>

也能夠這樣寫：

@-webkit-keyframes myfirst /* Safari and Chrome */

{

0%   {background:red;}

25%  {background:yellow;}

50%  {background:blue;}

100% {background:green;}

}

其中不只僅跟background屬性，能夠跟一系列屬性。

 

 

屬性	描述	CSS
@keyframes	規定動畫。	3
animation	全部動畫屬性的簡寫屬性，除了 animation-play-state 屬性。	3
animation-name	規定 @keyframes 動畫的名稱。	3
animation-duration	規定動畫完成一個週期所花費的秒或毫秒。默認是 0。	3
animation-timing-function	規定動畫的速度曲線。默認是 "ease"。	3
animation-delay	規定動畫什麼時候開始。默認是 0。	3
animation-iteration-count	規定動畫被播放的次數。默認是 1。	3
animation-direction	規定動畫是否在下一週期逆向地播放。默認是 "normal"。	3
animation-play-state	規定動畫是否正在運行或暫停。默認是 "running"。	3

經過 CSS3多列，您可以建立多個列來對文本進行佈局 - 就像報紙那樣！

在本章中，您將學習以下多列屬性：

column-count

column-gap

column-rule

div
{
-webkit-column-count:3; /* Safari and Chrome */    將文章劃爲3列

-webkit-column-gap:40px; /* Safari and Chrome */    每列間的距離爲40px

-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */  設置列之間

的寬度，樣式和顏色
} 

三．Html5

Html5新加了一些語義元素，畫布，拖放，web存儲（localstarge，sessionstrage）等。

1.HTML5 定了 8 個新的 HTML 語義（semantic） 元素。全部這些元素都是 塊級 元素。

爲了能讓舊版本的瀏覽器正確顯示這些元素，你能夠設置 CSS 的 display 屬性值爲 block:

2.你能夠爲 HTML 添加新的元素。

   fuck{

Font-family：simhei;

Color:pink

 }

本例中，JavaScript 語句 document.createElement("myHero") 是爲了爲 IE 瀏覽器添加新的元素。Internet Explorer 8 及更早 IE 版本的瀏覽器不支持以上的方式。幸運的是， Sjoerd Visscher 建立了 "HTML5 Enabling JavaScript", " shiv":以上代碼是一個註釋，做用是在 IE 瀏覽器的版本小於 IE9 時將讀取 html5.js 文件，並解析它。

3.HTML5 <canvas> 元素用於圖形的繪製，經過腳本 (一般是JavaScript)來完成.

<canvas> 標籤只是圖形容器，您必須使用腳原本繪製圖形。Ie8以及之前不支持、

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

getContext() 方法返回一個用於在畫布上繪圖的環境。

設置fillStyle屬性能夠是CSS顏色，漸變，或圖案。fillStyle 默認設置是#000000（黑色）。

fillRect(x,y,width,height) 方法定義了矩形當前的填充方式。

canvas 是一個二維網格。canvas 的左上角座標爲 (0,0)

在Canvas上畫線，咱們將使用如下兩種方法：

moveTo(x,y) 定義線條開始座標

lineTo(x,y) 定義線條結束座標

而後使用 stroke() 方法來繪製線條:

在canvas中繪製圓形, 咱們將使用如下方法: arc(x,y,r,start,stop)

 ctx.arc(95,50,20,0,2*Math.PI);

參數分別爲，圓心的橫座標，縱座標，半徑，起始角（以弧度記），結束角（以弧度記）

使用 canvas 繪製文本，重要的屬性和方法以下：

font - 定義字體

fillText(text,x,y) - 在 canvas 上繪製實心的文本

strokeText(text,x,y) - 在 canvas 上繪製空心的文本

漸變能夠填充在矩形, 圓形, 線條, 文本等等, 各類形狀能夠本身定義不一樣的顏色。

如下有兩種不一樣的方式來設置Canvas漸變：

createLinearGradient(x,y,x1,y1) - 建立線條漸變

createRadialGradient(x,y,r,x1,y1,r1) - 建立一個徑向/圓漸變

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

將圖片畫在畫布上：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)SVG 圖像在放大或改變尺寸的狀況下其圖形質量不會有損失

 

 

 

 

Canvas 與 SVG 的比較：

SVG 是一種使用 XML 描述 2D 圖形的語言。Canvas 經過 JavaScript 來繪製 2D 圖形。

Svg支持事件處理器，canvas不支持事件處理器

在 SVG 中，每一個被繪製的圖形均被視爲對象，而canvas可以以 .png 或 .jpg 格式保存結果圖像

若是 SVG 對象的屬性發生變化，那麼瀏覽器可以自動重現圖形。

 

Html5的拖放功能、

 

HTML5 - 使用地理定位：請使用 getCurrentPosition() 方法來得到用戶的位置。

Html5新的input類型：

color

date

datetime

datetime-local

email

month

number

range

search

tel

time

url

Week

HTML5 新的表單元素：

<datalist>

<keygen>

<output>

Select和datalist的區別：

select：5個值裏面選擇1個；
datalist：你能夠在文本框裏填值，也能夠在下面5個值裏選1個。

 

 

 

 <input list="browser" name="browser">

    <datalist id="browser">

        <option value="Internet Explorer"></option>

        <option value="Firefox">

        <option value="Chrome">

        <option value="Opera">

        <option value="Safari">

    </datalist>

<input type="submit">

 

<keygen> 元素的做用是提供一種驗證用戶的可靠方法。

<keygen>標籤規定用於表單的密鑰對生成器字段。

當提交表單時，會生成兩個鍵，一個是私鑰，一個公鑰。

<output> 元素用於不一樣類型的輸出，好比計算或腳本輸出：

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0     <input type="range" id="a" value="50">100     +<input type="number" id="b" value="50">     =<output name="x" for="a b"></output> </form> 屬性	值	描述
for	element_id	定義輸出域相關的一個或多個元素。
form	form_id	定義輸入字段所屬的一個或多個表單。
name	name	定義對象的惟一名稱。（表單提交時使用）

 

 

P.S：別忘了給range和number設置value屬性。

 

 

 

 

 

 

<form>新屬性：

autocomplete

novalidate

<input>新屬性：

autocomplete

autofocus

form

formaction

formenctype

formmethod

formnovalidate

formtarget

height and width

list

min and max

multiple

pattern (regexp)

placeholder

required

step

   ①. autocomplete 屬性規定 form 或 input 域應該擁有自動完成功能。

當用戶在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項。有on（開）,off（關）。

②．novalidate 屬性規定在提交表單時不驗證 form 或 input 域輸入元素的合法性。

③．autofocus 屬性是一個 boolean 屬性.autofocus 屬性規定在頁面加載時，域自動地得到焦點，就是進去就能夠直接輸入。

④．form 屬性規定輸入域所屬的一個或多個表單。Eg:

<form action="demo-form.php" id="form1">

First name: <input type="text" name="fname"><br>

<input type="submit" value="Submit">

</form>

Last name: <input type="text" name="lname" form="form1">

"Last name" 字段沒有在form表單以內，但它也是form表單的一部分。

⑤The formaction 屬性用於描述表單提交的URL地址.

⑥formenctype 屬性描述了表單提交到服務器的數據編碼 (只對form表單中 method="post" 表單)

⑦formmethod 屬性定義了表單提交的方式。

⑧novalidate屬性描述了 <input> 元素在表單提交時無需被驗證。

⑨formtarget 屬性指定一個名稱或一個關鍵字來指明表單提交數據接收後的展現。

<input type="submit" formtarget="_blank" value="提交到一個新的頁面上">

10.height 和 width 屬性規定用於 image 類型的 <input> 標籤的圖像高度和寬度。

<input type="image" src="05.jpg">這種形式寫在表單裏，能夠實現點擊圖片提交表單。

11.list 屬性規定輸入域的 datalist。datalist 是輸入域的選項列表。結合datalist標籤使用。

12.min、max 和 step 屬性用於爲包含數字或日期的 input 類型規定限定（約束）。

13.

       multiple 屬性是一個 boolean 屬性.

      multiple 屬性規定<input> 元素中可選擇多個值。例如同時選擇多個文件上傳。

14.pattern 屬性描述了一個正則表達式用於驗證 <input> 元素的值。

15.placeholder 屬性提供一種提示（hint），描述輸入域所期待的值

16.required 屬性規定必須在提交以前填寫輸入域（不能爲空）。

    17.step 屬性爲輸入域規定合法的數字間隔。

若是 step="3"，則合法的數是 -3,0,3,6 等

  語義元素：

    一個語義元素可以清楚的描述其意義給瀏覽器和開發者。

    無語義 元素實例: <div> 和 <span> - 無需考慮內容.

   語義元素實例: <form>, <table>, and <img> - 清楚的定義了它的內容.

HTML5中新的語義元素：

   許多現有網站都包含如下HTML代碼： <div id="nav">, <div class="header">, 或者 <div id="footer">, 來指明導航連接, 頭部, 以及尾部.

 

<section> 標籤訂義文檔中的節（section、區段）。好比章節、頁眉、頁腳或文檔中的其餘部分。

<article> 標籤訂義獨立的內容。.

<nav> 標籤訂義導航連接的部分。

<aside> 標籤訂義頁面主區域內容以外的內容（好比側邊欄）。

<header>元素描述了文檔的頭部區域

<footer> 元素描述了文檔的底部區域.

<figure>標籤規定獨立的流內容（圖像、圖表、照片、代碼等等）。

<figcaption> 標籤訂義 <figure> 元素的標題.

爲了讓這些塊及元素在全部版本的瀏覽器中生效，你須要在樣式表文件中設置一下屬性 (如下樣式代碼可讓舊版本瀏覽器支持本章介紹的塊級元素):

header, section, footer, aside, nav, article, figure
{ 
display: block; 
}

HTML5 Shiv解決ie舊版本不支持h5新元素。瀏覽器小於IE9版本時會加載html5shiv.js文件. 你必須將其放置於<head> 元素中。讓CSS 樣式應用在未知元素上只需執行 document.createElement(elementName) 便可實現。html5shiv就是根據這個原理建立的。以下：

1 2 3 4 5

<!--[ifltIE9]> <script type="text/javascript" src="scripts/html5shiv.js"></script> <![endif]-->

 

HTML5 Web 存儲

早些時候,本地存儲使用的是cookies。可是Web 存儲須要更加的安全與快速. 

localStorage - 沒有時間限制的數據存儲

sessionStorage - 針對一個 session 的數據存儲

    if(typeof(Storage)!=="undefined")

  {

  if (localStorage.clickcount)

    {

    localStorage.clickcount=Number(localStorage.clickcount)+1;

    }

  else

    {

    localStorage.clickcount=1;

    }

  關鍵詞：localStorage.clickcount

HTML5 應用程序緩存

離線瀏覽 - 用戶可在應用離線時使用它們

速度 - 已緩存資源加載得更快

減小服務器負載 - 瀏覽器將只從服務器下載更新過或更改過的資源。

 <!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

 

manifest 文件須要配置正確的 MIME-type，即 "text/cache-manifest"。必須在 web 服務器上進行配置。manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。

manifest 文件可分爲三個部分：

CACHE MANIFEST - 在此標題下列出的文件將在首次下載後進行緩存

NETWORK - 在此標題下列出的文件須要與服務器的鏈接，且不會被緩存

FALLBACK - 在此標題下列出的文件規定當頁面沒法訪問時的回退頁面（好比 404 頁面）

HTML5 Web Workers

web worker 是運行在後臺的 JavaScript，不會影響頁面的性能。

當在 HTML 頁面中執行腳本時，頁面的狀態是不可響應的，直到腳本已完成。

web worker 是運行在後臺的 JavaScript，獨立於其餘腳本，不會影響頁面的性能。您能夠繼續作任何願意作的事情：點擊、選取內容等等，而此時 web worker 在後臺運行。

     首先，檢測瀏覽器是否支持web worker。

if(typeof(Worker)!=="undefined"){

      ......

}

     首先建立 web worker 文件，也就是外部的js文件

     var i=0;

     postMessage(i);

     建立 Web Worker 對象

     w=new Worker("demo_workers.js");

 

當咱們建立 web worker 對象後，它會繼續監聽消息（即便在外部腳本完成以後）直到其被終止爲止。

 

w.terminate();             terminate【終止】

 

具體實例：

 

 if(typeof(Worker)!=="undefined"){

 

       var w=new Worker("client.js");

 

       w.onmessage=function(ev){

 

           alert(ev.data)

       }

 

   }

     關鍵：postMessage()   onmessage;

 

HTML5 服務器發送事件(Server-Sent Events):

Server-Sent 事件指的是網頁自動獲取來自服務器的更新。 單向消息傳遞.

客戶端代碼：

<!DOCTYPE html>

<html>

    <meta http-equiv="content-type" content="text/html charset=utf-8">

<body>

<h1>得到服務器更新</h1>

<div id="result"></div>

 

<script>

if(typeof(EventSource)!=="undefined")

  {

  var source=new EventSource("test.php");

  source.onmessage=function(event)

    {

    document.getElementById("result").innerHTML+=event.data+ "<br />";

    };

  }

else

  {

  document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events...";

  }

</script>

 

</body>

</html>

 

服務器代碼：

 

<?php

header('Content-Type: text/event-stream');

header('Cache-Control: no-cache');

echo "data: This is server info! \n\n";

flush();

?>

關鍵字：EventSource對象    flush();

 

 

PS:新加一些新問題，小夥伴們都會不會呀，不會趕忙去惡補呦。

1.html的doctype做用？嚴格模式和混雜模式都是什麼？

2.列舉js異步編程的方法

3.Css選擇器（符）有哪些?哪些可繼承？優先級如何？

4.setTimeout()的時間參數最小能夠是多少？爲何？

5.class_a .class_b(中間有空格) 和 .class_a.class_b 和.class_a,.class_b三者區別是什麼？