淺談 Comet、SSE、WebSocket

言

對于前端開發者,我們只做兩件事,獲取數據，和把數據展示出來。在不同業務場景下，我們需要不同的通信方式和后端交流。在最早的刀耕火種年代，那時候還沒有Ajax，我們只能通過URL請求資源，表單提交數據。后來隨著大前端的發展以及業務需要，越來越多的通信技術被發明出來。

Comet

在一些需要瀏覽器和服務器頻繁交流的情況下，如實時分數、市場報價等，我們需要一些適合技術來解決問題。在這個大環境下，Comet被Dojo創始人Alex Russell發明出來。Comet基于Ajax技術，是一種高級用法。它適合服務器實時推送新數據的業務。Comet有兩種方式實現，Ajax長輪詢和HTTP流。

1.Ajax長輪詢和短輪詢

「Ajax短輪詢」實現原理很簡單，使用一個間歇調用的定時器，定時向服務器發送Ajax請求，服務器將最新的信息送給客戶端。缺點：這種輪詢方式，開銷很大，大部分時候，可能并沒有新信息產生，但瀏覽器還是會一遍一遍的請求，服務器會一遍一遍的答復。

「Ajax長輪詢」則是將客戶與服務器在更新數據之前保持連接狀態，也就是客戶端暫不答復，客戶端先向服務器發送一次http請求。在沒有新的信息產生之前，兩者暫時保持連接狀態。而當有新的信息產生時，服務器response，進行一次問答。此次連接斷開，客戶端收到后，再次發起請求。優點：可以減少不必要的開銷。所有瀏覽器都支持輪詢技術。缺點：1.仍然需要大量的HTTP請求，具有一定的開銷 2.仍然是基于HTTP的問答形式，只能半雙工通信（一方發送數據時，另一方不能同時發送）

很多初學者會混淆長輪詢和http1.1的 「keep-alive」 這兩個概念。實際上并沒有直接關系。

2.HTTP流（HTTP chunk）

xhr對象擁有一個readyState屬性代表目前狀態、onreadystatechange方法在readyState改變時觸發。

請求未初始化，還沒有調用 open()。
請求已經建立，但是還沒有發送，還沒有調用 send()。
請求已發送，正在處理中。
請求在處理中。
響應已完成。

利用這一特點，可以只發送一次HTTP請求。只要服務器配合并不斷開連接，在客戶端接收到相應的數據時，readyState會周期性的變成3。這樣便可以持續收到消息。

    let xhr=new XMLHttpRequest()
    xhr.open('get', url, true)
    xhr.onreadystatechange=function () {
        if (xhr.readyState===3) {
            console.log(xhr.responseText);
        }
        if (xhr.readyState===4) {
            console.log(`finish!`);
        }
    }
    xhr.send(null)

node配合推送（SSE技術）

    res.writeHead(200)
    res.setHeader('Content-Type','text/event-stream')
    res.setHeader('Cache-Control','no-cache')
    res.setHeader('Connection','keep-alive')
    setInterval(function () {
        res.write("hello")
    },1000)

優點：基于Ajax技術支持性良好。保持一個TCP長連接，開銷較輪詢有較大改善。缺點：需要服務器SSE技術的配合。客戶端被動接受消息，無法與服務器對話。

SSE

圍繞著SSE技術，前端也推出了SSE API。在客戶端，SSE具有三個事件。open、message、error

var source=new EventSource("see.js");
source.onmessage=function(event) {
  document.getElementById("result").innerHTML +=event.data + "<br>";
};
source.onerror=function(err) {
  console.log(err)
};
source.onopen=function() {
  console.log('SSE opened!')
};

優點：相對于WebSocket更輕量。部署在 HTTP協議之上，支持自定義消息類型。缺點：不支持跨域，只能與創建頁面的對象同源。SSE是單向通道，是圍繞Comet技術的只讀API。

服務器相應的SSE技術（見上例），在這里并不深入。空間留給接下來的WebSocket。

WebSocket

Comet和SSE雖然實現了服務器近乎實時的消息推送，但是也只能單工通信或半雙工通信，適合對低延遲要求不太高的場景（如站內信）。如果要實現一些如聊天室、對戰游戲的需求，需要服務器和瀏覽器的 「全雙工通信」 。一個嶄新的協議， 「WebSocket」 因此而來。和SSE基于HTTP不同，WebSocket使用全新的協議。WebSocket的URL模式與HTTP不同，服務器在接收到HTTP的 「upgrade」 請求頭時，http：//和https://會升級到ws://和wss://。

WebSocket支持跨域，不需要像http那樣把響應頭設置"Access-Control-Allow-Origin"。WebSocket擁有一個readyState屬性代表目前狀態。

0 正在建立連接
1 已經建立
2 正在關閉
3 已經關閉

每一個WebSocket的readyState都是從0開始，到3結束。它的原生事件很簡單，分別為 open、error、close 和 message。可以這樣打開一個websocket。并使用send發送消息。

 let socket=new WebSocket('ws://www.wyh.com:8000')
 socket.onopen=()=> {
     console.log('建立webSocket連接');
     socket.send(JSON.stringify({user,data}))
 }
 socket.onclose=()=> {
      console.log('斷開webSocket連接');
 }
 socket.onerror=()=> {
      console.log('建立webSocket連接');
 }
 socket.onmessage=(msg)=>{
     let {user,data}=JSON.parse(msg.data)
 }

值得注意的是，send只能發送 「純文本」 ，所以在發送JavaScript對象之前進行序列化是有必要的。

node后端（心跳監聽客戶端是否存活）

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

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

2.HTML5 為什么只需要寫 <!DOCTYPE HTML>？

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

3.行內元素有哪些？塊級元素有哪些？空(void)元素有那些？

首先：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）常見的空元素：

<img><input><link><meta>
鮮為人知的是：
<area><base><col><command><embed><keygen><param><source><track><wbr>
4.頁面導入樣式時，使用link和@import有什么區別？
link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS;
頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題;

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

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

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

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

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

HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。繪畫 canvas;
用于媒介回放的 video 和 audio 元素;
本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失;
sessionStorage 的數據在瀏覽器關閉后自動刪除;
語意化更好的內容元素，比如 article、footer、header、nav、section;
表單控件，calendar、date、time、email、url、search;
新的技術webworker, websocket, Geolocation;

移除的元素：
純表現的元素：basefont，big，center，font, s，strike，tt，u;
對可用性產生負面影響的元素：frame，frameset，noframes；

支持HTML5新標簽：IE8/IE7/IE6支持通過document.createElement方法產生的標簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標簽，
瀏覽器支持新標簽后，還需要添加標簽默認的樣式。
當然也可以直接使用成熟的框架、比如html5shim;
如何區分HTML5： DOCTYPE聲明新增的結構元素功能元素
H5新特性
表單畫布音視頻地理定位媒體查詢 css新特性離線緩存本地存儲拖拽

8.簡述一下你對HTML語義化的理解？

用正確的標簽做正確的事情。
html語義化讓頁面的內容結構化，結構更清晰，便于對瀏覽器、搜索引擎解析;
即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的;
搜索引擎的爬蟲也依賴于HTML標記來確定上下文和各個關鍵字的權重，利于SEO;
使閱讀源代碼的人對網站更容易將網站分塊，便于閱讀維護理解。

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

在用戶沒有連網時，可以正常訪問站點或應用，在用戶與網絡連接時更新用戶機器上的緩存文件。
原理：HTML5的離線存儲是基于一個新建的.appcache文件的緩存機制(不是存儲技術)，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當網絡在處于離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示。
如何使用：
頁面頭部像下面一樣加入一個manifest的屬性；
在cache.manifest文件的編寫離線存儲的資源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
在離線狀態時，操作window.applicationCache進行需求實現。

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

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

11.iframe有那些缺點？

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

12.Label的作用是什么？是怎么用的？

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

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

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

WebSocket、也可以調用localstorge、cookies等本地存儲方式，還可以使用頁面的路有參數傳遞
localstorge另一個瀏覽上下文里被添加、修改或刪除時，它都會觸發一個事件，
我們通過監聽事件，控制它的值來進行頁面信息通信；
14.如何在頁面上實現一個圓形的可點擊區域？
map+area或者svg
border-radius
純js實現需要求一個點在不在圓上簡單算法、獲取鼠標坐標等等

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

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

16.data-屬性的作用是什么？

h5新增的屬性
可以通過ele.dataset獲取到標簽上的data-x的屬性
返回一個對象

17.常見兼容性問題？

問題：png24位的圖片在iE6瀏覽器上出現背景，

解決：解決方案是做成PNG8.

問題：瀏覽器默認的margin和padding不同。

解決：方案是加一個全局的*{margin:0;padding:0;}來統一。

問題：IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在ie6顯示margin比設置的大。浮動ie產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}這種情況之下IE會產生20px的距離**

解決：解決方案是在float的標簽樣式控制中加入 ——_display:inline;將其轉化為行內屬性。(_這個符號只有ie6會識別)
漸進識別的方式，從總體中逐漸排除局部。
首先，巧妙的使用“9”這一標記，將IE游覽器從所有情況中分離出來。接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。
css

.bb{ 
   background-color:#f1ee18;/*所有識別*/ 
  .background-color:#00deff\9; /*IE6、7、8識別*/ 
  +background-color:#a200ff;/*IE6、7識別*/ 
  _background-color:#1e0bd1;/*IE6識別*/ 
  }

問題：IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性，Firefox下,只能使用getAttribute()獲取自定義屬性.

解決：解決方法:統一通過getAttribute()獲取自定義屬性.

問題：IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性，Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性.

解決方法：（條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。

問題：Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示,

解決：可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.

問題：超鏈接訪問過后hover樣式就不出現了被點擊訪問過的超鏈接樣式不在具有hover和active了

解決：方法是改變CSS屬性的排列順序:L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

18.你知道多少種Doctype文檔類型？

該標簽可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基于框架的 HTML 文檔。
HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。
XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
Standards （標準）模式（也就是嚴格呈現模式）用于呈現遵循最新標準的網頁，而 Quirks（包容）模式（也就是松散呈現模式或者兼容模式）用于呈現為傳統瀏覽器而設計的網頁。

19.HTML與XHTML——二者有什么區別？

1）所有的標記都必須要有一個相應的結束標記
2）所有標簽的元素和屬性的名字都必須使用小寫
3）所有的XML標記都必須合理嵌套
4）所有的屬性必須用引號""括起來
5）把所有<和&特殊符號用編碼表示
6）給所有屬性賦一個值
7）不要在注釋內容中使“--”
8）圖片必須有說明文字

20.<img>的title和alt有什么區別？

title是global attributes之一，用于為元素提供附加的advisory information。通常當鼠標滑動到元素上的時候顯示。
alt是<img>的特有屬性，是圖片內容的等價描述，用于圖片無法加載時顯示、讀屏器閱讀圖片。可提圖片高可訪問性，除了純裝飾圖片外都必須設置有意義的值，搜索引擎會重點分析。

21.div+css的布局較table布局有什么優點？

改版的時候更方便只要改css文件。
頁面加載速度更快、結構化清晰、頁面顯示簡潔。
表現與結構相分離。
易于優化（seo）搜索引擎更友好，排名更容易靠前。

22.CSS都有哪些選擇器？

派生選擇器（用HTML標簽申明）
id選擇器（用DOM的ID申明）
類選擇器（用一個樣式類名申明）
屬性選擇器（用DOM的屬性申明，屬于CSS2，IE6不支持，不常用，不知道就算了）
除了前3種基本選擇器，還有一些擴展選擇器，包括
后代選擇器（利用空格間隔，比如div .a{ }）
群組選擇器（利用逗號間隔，比如p,div,#a{ }）
那么問題來了，CSS選擇器的優先級是怎么樣定義的？

基本原則：

一般而言，選擇器越特殊，它的優先級越高。也就是選擇器指向的越準確，它的優先級就越高。
復雜的計算方法：
用1表示派生選擇器的優先級
用10表示類選擇器的優先級
用100標示ID選擇器的優先級
div.test1 .span var 優先級 1+10 +10 +1
span#xxx .songs li 優先級1+100 + 10 + 1
xxx li 優先級 100 +1
那么問題來了，看下列代碼，<p>標簽內的文字是什么顏色的？
<style>
.classA{ color:blue;}
.classB{ color:red;}
</style>
<body>
<p class='classB classA'> 123 </p>
</body>
答案：red。與樣式定義在文件中的先后順序有關，即是后面的覆蓋前面的，與在<p class=’classB classA’>中的先后關系無關。

23.行內元素和塊級元素的具體區別是什么？行內元素的padding和margin可設置嗎？

塊級元素(block)特性：
總是獨占一行，表現為另起一行開始，而且其后的元素也必須另起一行顯示;
寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)都可控制;
內聯元素(inline)特性：
和相鄰的內聯元素在同一行;
寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變（也就是padding和margin的left和right是可以設置的），就是里面文字或圖片的大小。
那么問題來了，瀏覽器還有默認的天生inline-block元素（擁有內在尺寸，可設置高寬，但不會自動換行），有哪些？
答案：<input> 、<img> 、<button> 、<texterea> 、<label>。

24.什么是外邊距重疊？重疊的結果是什么？

外邊距重疊就是margin-collapse。
在CSS當中，相鄰的兩個盒子（可能是兄弟關系也可能是祖先關系）的外邊距可以結合成一個單獨的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結合成的外邊距稱為折疊外邊距。
折疊結果遵循下列計算規則：
兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值。
兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值。
兩個外邊距一正一負時，折疊結果是兩者的相加的和。

25.rgba()和opacity的透明效果有什么不同？

rgba()和opacity都能實現透明效果，但最大的不同是opacity作用于元素，以及元素內的所有內容的透明度，
而rgba()只作用于元素的顏色或其背景色。（設置rgba透明的元素的子元素不會繼承透明效果！）

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

*   1.id選擇器（ # myid）
    2.類選擇器（.myclassname）
    3.標簽選擇器（div, h1, p）
    4.相鄰選擇器（h1 + p）
    5.子選擇器（ul < li）
    6.后代選擇器（li a）
    7.通配符選擇器（ * ）
    8.屬性選擇器（a[rel="external"]）
    9.偽類選擇器（a: hover, li: nth - child）
*   可繼承： font-size font-family color, UL LI DL DD DT;
*   不可繼承 ：border padding margin width height ;
*   優先級就近原則，樣式定義最近者為準;
*   載入樣式以最后載入的定位為準;

優先級為:

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

CSS3新增偽類舉例：

p:first-of-type 選擇屬于其父元素的首個 <p> 元素的每個 <p> 元素。
p:last-of-type  選擇屬于其父元素的最后 <p> 元素的每個 <p> 元素。
p:only-of-type  選擇屬于其父元素唯一的 <p> 元素的每個 <p> 元素。
p:only-child    選擇屬于其父元素的唯一子元素的每個 <p> 元素。
p:nth-child(2)  選擇屬于其父元素的第二個子元素的每個 <p> 元素。
:enabled、:disabled 控制表單控件的禁用狀態。
:checked，單選框或復選框被選中。

27.如何居中div,如何居中一個浮動元素?

給div設置一個寬度，然后添加margin:0 auto屬性

div{

width:200px;
margin:0 auto;

}

居中一個浮動元素

  確定容器的寬高 寬500 高 300 的層
  設置層的外邊距

.div {
Width:500px ; height:300px;//高度可以不設
Margin: -150px 0 0 -250px;
position:relative;相對定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}

28.瀏覽器的內核分別是什么?經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用hack的技巧？

*  IE瀏覽器的內核Trident、 Mozilla的Gecko、google的WebKit、Opera內核Presto；
*  png24為的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.
*  瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一。
*  IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在ie6顯示margin比設置的大。 
  浮動ie產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;} 
 這種情況之下IE會產生20px的距離，解決方案是在float的標簽樣式控制中加入 ——_display:inline;將其轉化為行內屬性。(_這個符號只有ie6會識別)
  漸進識別的方式，從總體中逐漸排除局部。 
  首先，巧妙的使用“\9”這一標記，將IE游覽器從所有情況中分離出來。 
  接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。

css

  .bb{
   background-color:#f1ee18;/*所有識別*/
  .background-color:#00deff\9; /*IE6、7、8識別*/
  +background-color:#a200ff;/*IE6、7識別*/
  _background-color:#1e0bd1;/*IE6識別*/
  }


*  IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,
   也可以使用getAttribute()獲取自定義屬性;
   Firefox下,只能使用getAttribute()獲取自定義屬性. 
   解決方法:統一通過getAttribute()獲取自定義屬性.
*  IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性; 
  Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性.
* （條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。
*  Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.
超鏈接訪問過后hover樣式就不出現了 被點擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:
L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

29.css優先級算法如何計算？

!important > id > class > 標簽
!important 比內聯優先級高

優先級就近原則，樣式定義最近者為準;
以最后載入的樣式為準;

30.哪些css屬性可以繼承？

可繼承： font-size font-family color, ul li dl dd dt;
不可繼承：border padding margin width height ;

DOM

講 DOM 先從 HTML 講起，講 HTML 先從 XML 講起。XML 是一種可擴展的標記語言，所謂可擴展就是它可以描述任何結構化的數據，它是一棵樹！

1.documen.write和 innerHTML的區別

document.write只能重繪整個頁面
innerHTML可以重繪頁面的一部分

2.DOM操作——怎樣添加、移除、移動、復制、創建和查找節點?

1）創建新節點

createDocumentFragment() //創建一個DOM片段
createElement() //創建一個具體的元素
createTextNode() //創建一個文本節點

2）添加、移除、替換、插入

appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子節點前插入一個新的子節點

3）查找

getElementsByTagName() //通過標簽名稱
getElementsByName() //通過元素的Name屬性的值(IE容錯能力較強，會得到一個數組，其中包括id等于name值的)
getElementById() //通過元素Id，唯一性

3.attribute和property的區別是什么？

attribute是dom元素在文檔中作為html標簽擁有的屬性；
property就是dom元素在js中作為對象擁有的屬性。
所以：
對于html的標準屬性來說，attribute和property是同步的，是會自動更新的，
但是對于自定義的屬性來說，他們是不同步的，

4.src和href的區別

src用于替換當前元素，href用于在當前文檔和引用資源之間確立聯系。
src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載并應用到文檔內，當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當前標簽內。這也是為什么將js腳本放在底部而不是頭部。
Src source,指向外部資源的位置,如果我們添加<script src="js.js"></script>瀏覽器會暫停其他資源的下載和處理,直到該資源加載,編譯,執行完畢(圖片和框架也是如此),這也就是為什么js腳本要放在底部。
src用于替換當前元素,href用于在當前文檔和引入資源之間建立聯系。

存儲

cookie

cookie 本身不是用來做服務器端存儲的（計算機領域有很多這種“狗拿耗子”的例子，例如 CSS 中的 float），它是設計用來在服務器和客戶端進行信息傳遞的，因此我們的每個 HTTP 請求都帶著 cookie。但是 cookie 也具備瀏覽器端存儲的能力（例如記住用戶名和密碼），因此就被開發者用上了。
使用起來也非常簡單，document.cookie=....即可。
但是 cookie 有它致命的缺點：
存儲量太小，只有 4KB
所有 HTTP 請求都帶著，會影響獲取資源的效率
API 簡單，需要封裝才能用

locationStorage 和 sessionStorage

后來，HTML5 標準就帶來了sessionStorage和localStorage，先拿localStorage來說，它是專門為了瀏覽器端緩存而設計的。

其優點有：

存儲量增大到 5MB
不會帶到 HTTP 請求中
API 適用于數據存儲 localStorage.setItem(key, value) localStorage.getItem(key)
sessionStorage的區別就在于它是根據 session 過去時間而實現，而localStorage會永久有效，應用場景不同。例如，一些需要及時失效的重要信息放在sessionStorage中，一些不重要但是不經常設置的信息，放在localStorage中。

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

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

家好，我是 Echa。

今天來分享 50 個超實用的 Chrome 瀏覽器擴展！

JSON

1. JSON Viewer Pro

JSON Viewer Pro 用于可視化JSON文件。其核心功能包括：

支持將JSON數據進行格式化，并使用屬性或者圖表進行展示；
使用面包屑深入遍歷 JSON 屬性；
在輸入區寫入自定義 JSON；
導入本地 JSON 文件；
使用上下文菜單下載 JSON 文件；
網址過濾器；
改變主題；
自定義 CSS ；
復制屬性和值；

輸入界面如下：

格式化之后：

2. JSONVue

JSONVue 是一個JSON數據查看器，主要用來格式化JSON數據：

網站技術

3. Library Sniffer

Library Sniffer 是一款給開發者使用的工具，能夠探測當前網頁所使用的類庫、框架和服務器環境，為開發者提供了方便。

4. Wappalyzer

Wappalyzer 擴展可以用來識別網站背后的底層技術。通過此擴展，可以了解特定應用程序是否是用 React、Vue、Angular、PHP等編寫的。還可以訪問有關 Web 服務器、編程語言、框架、內容管理系統、分析的信息工具、數據庫等。

5. WhatRuns

WhatRuns 擴展程序只需單擊一下即可找到任何網站上使用的技術。

開發調試

6. PerfectPixel by WellDoneCode

使用PerfectPixel插件可以將設計圖加載至網頁中，與已成型的網頁進行重疊對比，以幫助開發和設計人員規范網頁像素精度。這是一款可以優化前端頁面顯示的Chrome插件。

7. Clear Cache

可以使用此擴展程序快速清除緩存，無需任何確認對話框、彈出窗口等。可以在選項頁面上自定義要清除的數據和數量，包括：應用程序緩存、緩存、Cookie、下載、文件系統、表單數據、歷史記錄、索引數據庫、本地存儲、插件數據、密碼和 WebSQL。

8. VisBug

VisBug 是一個使用 JavaScript 構建的開源網頁設計調試工具，它可以讓用戶使用點擊式和拖放式界面來查看網站的元素。

9. Debug CSS

Debug CSS 是一個幫助調試CSS的插件。他可以顯示出頁面元素的輪播，按住Ctrl，并將鼠標懸浮在元素上，即可查看其信息：

10. CSS Viewer

CSS Viewer 是一款適用于 Web 開發人員的高效 Chrome 擴展。顧名思義，CSS 查看器可以顯示將鼠標懸停在任何網頁上的元素的 CSS 屬性。

11. EditThisCookie

EditThisCookie 是一個 cookie 管理器。可以添加，刪除，編輯，搜索，鎖定和屏蔽cookies。

12. React Developer Tools

React Developer Tools 是開源 JavaScript 庫 React 的 Chrome DevTools 擴展。它允許我們在 Chrome 開發者工具中檢查 React 組件層次結構。安裝此插件之后，將在 Chrome DevTools 中獲得兩個新選項卡："?? Components" 和 "?? Profiler"：

Components 選項卡顯示了在頁面上呈現的根 React 組件，以及它們最終呈現的子組件；
Profiler 選項卡用來記錄性能信息。

13. Vue.js devtools

Vue.js devtools 是一款基于chrome瀏覽器的用于調試Vue.js應用程序的插件，可以使得開發人員大大提高調試效率。支持用戶對DOM結構數據結構進行解析和調試功能。

14. Augury

Augury 可以幫助開發人員在 Google Chrome 瀏覽器中調試和分析 Angular 應用程序。

15. Firebug Lite for Google Chrome

Firebug Lite是火狐瀏覽器中著名的開發者工具firebug插件移植到Chrome中的插件，在Chrome中安裝了Firebug Lite插件以后，開發人員可以像在火狐瀏覽器中使用firebug一樣熟悉的方式來調試網頁內容，其包含了基本的HTML、CSS以及Javascript的調試功能，用于幫助網頁前端開發工程師快速地調試網頁，以便及時地找到網頁中的BUG并及時修復。

16. HTML Validator

HTML Validator 在 Chrome 的開發者工具中添加了 HTML Validator。HTML 頁面的錯誤數通過瀏覽器狀態欄中的圖標顯示，詳細信息可以在瀏覽器的開發者工具中查看。

17. Web Developer

Web Developer 擴展為帶有各種 Web 開發工具的瀏覽器添加了一個工具欄按鈕。該擴展適用于 Chrome 和 Firefox，并且可以在這些瀏覽器支持的任何平臺上運行，包括 Windows、macOS 和 Linux。

18. Requestly

Requestly 是一款Chrome和Firefox瀏覽器插件，提供URL轉發、修改HTTP請求和結果、插入腳本等功能。

19. Window Resizer

Window Resizer 主要用來調整瀏覽器窗口的大小以模擬各種屏幕分辨率。

20. Responsive Viewer

Responsive Viewer 是在一個視圖中顯示多個屏幕的 Chrome 擴展程序。該擴展將幫助前端開發人員在開發響應式網站/應用程序時測試多個屏幕。

21. Moesif Origin & CORS Changer

此插件允許直接從瀏覽器發送跨域請求，而不會收到跨域錯誤。可以使用此插件覆蓋 Request Origin 標頭，并將 Access-Control-Allow-Origin 設置為 *.

22. ColorPick Eyedropper

ColorPick Eyedropper 是一個放大的吸管和顏色選擇器工具，可讓從網頁等中選擇顏色值。

23. CSSPeeper

CSS Peeper 用于檢查和復制元素樣式的優秀工具，使用 CSSPeeper 可以將鼠標懸停在網頁中的任何元素上，然后單擊鼠標即可復制元素的樣式。

24. Dimensions

Dimensions是一款能幫助使用者對網頁上各種元素屬性之間的距離進行測量的Chrome頁面元素測量插件，該插件在點擊啟動插件圖標后，可以對頁面中圖像、輸入字段、按鈕以及視頻等頁面元素之間上下左右的方位尺寸進行測量，同時還可以通過使用快捷鍵來快速啟用或關閉該插件的功能，簡單實用。

25. Site Palette

Site Palette 用于生成調色板。設計師和前端開發人員必備的工具。可以通過這款插件輕松獲取網站的配色方案。

26. ColorZilla

ColorZilla 是一款功能強大地提取網頁色彩的工具；也是個快速的對顏色進行調節的Chrome插件，許多的用戶將這款軟件稱呼為顏色吸取插件，它提取的顏色是非常的多樣化，還可生產css顏色的代碼等。

吸管器-獲取頁面上任何像素或區域的顏色；
一個先進的顏色選擇器類似于可以在Photoshop和Paint Shop Pro中找到的；
網頁顏色分析器-分析任何網頁上的DOM元素顏色，找到相應的元素；
終極CSS梯度發生器；
調色板查看器與7預先安裝調色板；
顏色歷史最近挑選的顏色；
顯示標簽名稱，類別，編號，大小等元素信息；
光標下的輪廓元素；
自動將生成或采樣的顏色復制到CSS RGB，Hex和其他格式的剪貼板；
使用鍵盤快速采樣頁面顏色的鍵盤快捷鍵。

字體

27. WhatFont

當我們想查看網頁中文字的字體時，最常用的方法就是在控制臺查看文字的字體樣式。那還有沒有更簡單的方法呢？WhatFont 就是一個查看網頁字體的Chrome擴展。只需要的點擊擴展圖標，再點需要查看為文字即可：

28. Fonts Ninja

Fonts Ninja 可以從任何網站識別字體、添加書簽、試用并購買它們。

標簽頁

29. BrowserStack

使用 BrowserStack 快速啟動擴展在任何瀏覽器中啟動一個新的測試會話。最多可設置 12 個瀏覽器以實現快速訪問并最大限度地減少切換瀏覽器所花費的時間。

30. Toby

Toby 是一款 Chrome 新標簽頁工具，能夠將未讀的標簽頁分組顯示在新標簽頁中，這樣就能把所有未看完的標簽頁都關閉了。分組相當于多個 Chrome 窗口，將你的標簽頁都拖進 Toby 中，就不需要實時開著占地方了。

31. daily.dev

該擴展提供了每日熱門開發者新聞，不需要再浪費時間搜索高質量的文章了。

32. Momentum

Momentum 擁有漂亮的新標簽頁面，每日更新精彩背景壁紙圖片，可設置每日新鮮事焦點以及跟蹤待辦事項，無廣告，無彈窗。

33. The Great Suspender

The Great Suspender 是一個輕量級的擴展用來減少 Chrome 的內存占用。如果同時打開許多選項卡，在可配置的時間之后未查看的選項卡將在后臺自動掛起，從而釋放該選項卡消耗的內存和 CPU。

34. Session Buddy

Session Buddy是一個可以幫助用戶查看、新增、編輯當前網站Session狀態的Chrome插件。用戶可以利用該插件保存網站當前的狀態以便在關閉Chrome或關閉計算機后恢復，從而達到節省內存的作用。

Github

35. Octotree

Octotree 旨在讓 GitHub 體驗更好。通常，為了檢查 Github 中的子文件夾，需要手動單擊文件夾并導航。Octotree 擴展解決了這個問題。此擴展在項目的左側顯示存儲庫的目錄結構，這有助于更好地理解文件夾結構。

1_EKF88oqIyX6FzgueCKdtXg.gif

36. File Icons for GitHub and GitLab

File Icons for GitHub and GitLab 可以將 GitHub 和 GitLab 上的原始文件圖標替換為特定文件類型的圖標。

網頁測試

37. axe DevTools

ax DevTools 是一個快速、輕量級但功能強大的測試工具，由 Deque 開發的世界上最值得信賴的可訪問性測試引擎 axe-core 驅動。使用 ax DevTools 在網站開發過程中查找并修復更多可訪問性問題。

38. OctoLinker

OctoLinker 可以將特定語言的語句（如 include、require 或 import）轉換為鏈接。當打開一個包含多個導入語句的文件并且想要快速打開它時，只需將鼠標懸停在鏈接的文件上并單擊即可打開。

39. Web Developer Checklist

此擴展可幫助 Web 開發人員分析網頁是否違反最佳實踐。

40. Check My Links

Check My Links 是一個鏈接檢查器，它可以抓取網頁并查找損壞的鏈接。

41. Checkbot

Checkbot 是用于驗證一組HTML頁面上的鏈接的工具。Checkbot可以檢查一個或多個服務器上的單個文檔或一組文檔。它會創建一個報告，該報告匯總了引起某種警告或錯誤的所有鏈接。

42. PageSpeed Insights

Google Page Speed Insighs 是一款旨在優化所有設備上的網頁、提高網頁加載速度的工具。

43. Meta SEO Inspector

META SEO inspector是一款可以幫助用戶分析網頁的meta信息并得到SEO評估的谷歌瀏覽器插件。

隱私廣告

44. Ghostery

Ghostery 是強大的隱私保護擴展程序。其主要有以下功能：

攔截廣告：Ghostery 內置的廣告攔截工具可以移除網頁上的廣告，防止網頁雜亂無章，讓你專注于想看的內容。
保護隱私：利用 Ghostery 可以查看和攔截所瀏覽的網站上的跟蹤器，控制收集數據的跟蹤器。增強反跟蹤功能還能將數據匿名化，進一步保護隱私。
提高瀏覽速度：Ghostery 的智能攔截功能可以自動攔截和取消攔截跟蹤器來滿足網頁質量標準，提高網頁加載速度，優化網頁性能。

45. AdBlock

AdBlock 用來在YouTube、Facebook、Twitch和其他你喜愛的網站上攔截廣告和彈窗。

效率工具

46. Marinara

番茄工作法（Pomodoro?）時間管理助理。? 長短兩種休息時間 ? 帶有倒計時顯示的工具欄圖標 ? 追蹤Pomodoro歷史和統計訊息 ? 可配置的長休間隔 ? 可配置的定時器時長 ? 桌面與新標簽頁通知 ? 超過20種音效可選的聲音通知 ? 計時器秒針走動音效

47. Loom

Loom 可以用來快速錄制視頻，并且能夠將錄制的視頻上傳到指定的網頁中，Loom還支持在用戶點擊啟動插件時，立即捕捉屏幕圖像，同時開始視頻錄制操作，還可以將錄制好的視頻復制到粘貼板中存儲。

48. GoFullPage

GoFullPage 是一款全屏截圖插件（整個網頁截圖），完整捕獲您當前頁面的屏幕，進行滾動截圖，而無需任何額外的權限。單擊擴展程序圖標，然后將其傳輸到屏幕快照的新標簽頁中，可以在其中將其下載為圖像或PDF，甚至只需拖動即可，保存到桌面。

49. BetterViewer

BetterViewer 可以提供更好的圖像查看體驗，旨在替代基于 Chrome 瀏覽器中內置的圖像查看模式。使用時，只需在頁面右鍵點擊圖片，選擇“在新標簽頁中打開圖片”即可。

50. svg-grabber

svg-grabber 是一個快速預覽并從網站獲取所有 svg 的工具。可以用來預覽、下載和復制網站中所有 SVG 圖標和插圖的代碼。

在線咨詢

上一篇：賊爽，在Github網頁版也能用開發工具看源碼了
下一篇：每個JavaScript開發人員都應該了解的編程概念

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商