① HTML5 Web Socket和Web Worker的區別以及使用方法
一、WEB SOCKET
1、Web Socket是一種協議、本質上和http、tcp一樣、協議是用來說明數據是如何傳輸的,寫過一個小的在線聊天使用了socket.io、之後總結這個項目
2、Web Socket的前綴有兩種：（1）ws:// 不是加密的、 (2)wss:// 是加密的
3、客戶端和服務端進行Web Socket交互的方式也可以理解為「http握手 tcp數據傳輸」的方式
（1）瀏覽器（支持Websocket的瀏覽器）像HTTP一樣、發起一個請求、然後等待服務端的響應
（2）伺服器返回握手響應、告訴瀏覽器請將後續的數據按照websocket制定的數據格式傳過來
（3）瀏覽器和伺服器的socket連接不中斷、此時這個連接和http不同的是它是雙工的了
（4）瀏覽器和伺服器有任何需要傳遞的數據的時候使用這個長連接進行數據傳遞
注
HTTP握手：是因為瀏覽器和伺服器在建立長連接的握手過程是按照HTTP1.1的協議發送的、有Request、Request Header、 Response、 Response Header、但是不同的是Header裡面的欄位是有特定含義的
TCP傳輸: 主要體現在建立長連接後、瀏覽器是可以給伺服器發送數據、伺服器也可以給瀏覽器發送請求的、當然它的數據格式並不是自己定義的、是在要傳輸的數據外層有ws協議規定的外層包的
4、數據傳輸過程:websocket的數據傳輸形式是：frame、比如會將一條消息分為幾個frame、按照先後順序傳輸出去、這樣做會有幾個好處
（1）大數據的傳輸可以分片傳輸、不用考慮到數據大小導致的長度標志位不足夠的情況
（2）和http的chunk一樣、可以邊生成數據邊傳遞消息、即提高傳輸效率
5、客戶端使用Web Socket的語法：JavaScript、服務端：多種web框架支持
二、WEB WORKER
1、當在 HTML 頁面中執行腳本時、頁面的狀態是不可響應的、直到腳本已完成、而Web Worker 是運行在後台的 JavaScript、獨立於其他腳本、不會影響頁面的性能、您可以繼續做任何願意做的事情：點擊、選取內容等等、而此時 Web Worker 在後台運行
除了DOM操作之外、理論上任何JS腳本任務都可放入worker中執行；語法上的限制、則是不能跨域訪問JS、worker常用於需要消耗大量時間和CPU資源的復雜計算、以換來前台用戶操作的友好型；換句話說、從用戶體驗上看、提高了服務性能
2、Web Worker使用：(當我們創建 Web Worker 對象後、它會繼續監聽消息（即使在外部腳本完成之後）直到其被終止為止）
（1）通過向 Web Worker 添加一個 "onmessage" 事件監聽器來獲取接受到的消息
（2）發送消息：postMessage()
（3）終止 Web Worker、並釋放瀏覽器/計算機資源: terminate()
② web worker 一般應用於什麼場景
WebWorker為Web應用程序提供了一種能在後台中運行的方法。通過WebWorker可以生成多個線程同時運行，並保證頁面對用戶的及時響應，完全不會影響用戶的正常操作。在WebWorker中，不能直接對DOM進行操作。怎麼用的話，去看下相關的視頻，比如說「
③ QWebWorker
是不是病毒呢？
④ 用WebSocket，WebWorker和requestAnimationFrame如何實現服務端定時推送隨機數到客戶端
你使用WebSocket就可以達到這個效果。WebWorker是優化的事情，requestAnimationFrame只和顯示有關。
後端@ServerEndpoint的類裡面對應前端的new WebSocket("ws://localhost:8080/websocket");
在後端的定時推送有兩個辦法
1、@OnOpen方法裡面為每個webSocket創建一個線程去做定時及推送
2、@OnOpen將webSocket加入一個SET或者List，服務啟動的時候就啟動一個線程，定時為SET裡面的所有webSocket發送隨機數。
⑤ Web前端最全面試寶典- Html篇
HTML
1.對WEB標准以及W3C的理解與認識
標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外 鏈css和js腳本、結構行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件，容易維 護、改版方便，不需要變動頁面內容、提供列印版本而不需要復制內容、提高網站易用性；
2.xhtml和html有什麼區別
HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言
最主要的不同：
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關閉。
標簽名必須用小寫字母。
XHTML 文檔必須擁有根元素。
3.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?
用於聲明文檔使用那種規范（html/Xhtml）一般為 嚴格 過度 基於框架的html文檔
加入XMl聲明可觸發，解析方式更改為IE5.5 擁有IE5.5的bug
4.行內元素有哪些?塊級元素有哪些?
塊級元素：div p h1 h2 h3 h4 form ul
行內元素: a b br i span input select
5.HTML全局屬性(global attribute)有哪些
參考資料：MDN: html global attribute或者W3C HTML global-attributes
accesskey
:設置快捷鍵，提供快速訪問元素如aaa在windows下的firefox中按alt + shift + a
可激活元素
class
:為元素設置類標識，多個類名用空格分開，CSS和javascript可通過class屬性獲取元素
contenteditable
: 指定元素內容是否可編輯
contextmenu
: 自定義滑鼠右鍵彈出菜單內容
data-*
: 為元素增加自定義屬性
dir
: 設置元素文本方向
draggable
: 設置元素是否可拖拽
dropzone
: 設置元素拖放類型： , move, link
hidden
: 表示一個元素是否與文檔。樣式上會導致元素不顯示，但是不能用這個屬性實現樣式效果
id
: 元素id，文檔內唯一
lang
: 元素內容的的語言
spellcheck
: 是否啟動拼寫和語法檢查
style
: 行內css樣式
tabindex
: 設置元素可以獲得焦點，通過tab可以導航
title
: 元素相關的建議信息
translate
: 元素和子孫節點內容是否需要本地化
6.什麼是web語義化,有什麼好處
web語義化是指通過HTML標記表示頁麵包含的信息，包含了HTML標簽的語義化和css命名的語義化。 HTML標簽的語義化是指：通過使用包含語義的標簽（如h1-h6）恰當地表示文檔結構 css命名的語義化是指：為html標簽添加有意義的class，id補充未表達的語義，如Microformat通過添加符合規則的class描述信息 為什麼需要語義化：
去掉樣式後頁面呈現清晰的結構
盲人使用讀屏器更好地閱讀
搜索引擎更好地理解頁面，有利於收錄
便團隊項目的可持續運作及維護
7.html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
新特性：
HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。
拖拽釋放(Drag and drop) API
語義化更好的內容標簽（header,nav,footer,aside,article,section）
音頻、視頻API(audio,video)
畫布(Canvas) API
地理(Geolocation) API
本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
sessionStorage 的數據在瀏覽器關閉後自動刪除
表單控制項，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 新標簽，瀏覽器支持新標簽後，還需要添加標簽默認的樣式（當然最好的方式是直接使用成熟的框架、使用最多的是html5shiv框架）：
如何區分：
DOCTYPE聲明新增的結構元素、功能元素
8. HTML5 存儲類型有什麼區別？
HTML5 能夠本地存儲數據，在之前都是使用 cookies 使用的。HTML5 提供了下面兩種本地存儲方案：
localStorage - 沒有時間限制的數據存儲，數據永遠不會過期，關閉瀏覽器也不會丟失
sessionStorage - 針對一個 session 的數據存儲，同一個會話中的頁面才能訪問並且當會話結束後數據也隨之銷毀。
9. HTML5 標准提供了哪些新的API？
1：canvas，不用多說，可以畫出很多絢麗的圖形，甚至可以直接做出偽3D游戲。
2：媒體控制，也很好理解(直譯就是回放功能，假如只用html5.0以下的標簽寫，以前的音樂播放是不可能實現滾動條的。)
3：離線網頁程序，可以把資源文件完全緩存在客戶端，並且通過js的一些方法清空緩存
4：文檔編輯，應該是更好的支持對文檔的編輯。
5：拖動，可以將文件拖動到某些區域上傳
6：跨文檔請求，websocket，一種更加高效的通訊方式
7：歷史管理，可以通過js管理和插入歷史記錄
8：MIME頭自定義
9：客戶端數據存儲，localstoage sessionstoage
10：地理位置共享
11：本地資料庫
12：索引資料庫
10.HTML5 應用程序緩存和瀏覽器緩存有什麼區別？
HTML5 引入了應用程序緩存，這意味著 web 應用可進行緩存，並可在沒有網際網路連接時進行訪問。
應用程序緩存為應用帶來三個優勢：
離線瀏覽 - 用戶可在應用離線時使用它們
速度 - 已緩存資源載入得更快
減少伺服器負載 - 瀏覽器將只從伺服器下載更新過或更改過的資源。
11.常用那幾種瀏覽器測試？有哪些內核(Layout Engine)?
(Q1)瀏覽器：IE，Chrome，FireFox，Safari，Opera。
(Q2)內核：Trident，Gecko，Presto，Webkit。
12.請描述一下 cookies，sessionStorage 和 localStorage 的區別？
cookie在瀏覽器和伺服器間來回傳遞。 sessionStorage和localStorage不會
sessionStorage和localStorage的存儲空間更大；
sessionStorage和localStorage有更多豐富易用的介面；
sessionStorage和localStorage各自獨立的存儲空間；
13.如何實現瀏覽器內多個標簽頁之間的通信?
調用localstorge、cookies等本地存儲方式
14.請寫出localStorage對象的常用方法。
存儲 - localStorage.setItem(key, value) - 如果key存在，更新value
獲取 - localStorage.getItem(key) - 如果key不存在，返回null
刪除 - localStorage.removeItem(key) - 刪除key對應的數據
全部清除 - localStorage.clear() - 清空localStorage中所有數據
遍歷 - localStorage.length
遍歷 - localStorage.key(index)
15.如何在HTML5中啟用應用程序緩存？
<html manifest="fileName.appcache">
每個指定了manifest的頁面在用戶對其訪問時都會被緩存。
.appcache是manifest文件的擴展名
16.html5 離線存儲
Html5的一個重要特性就是離線存儲，所謂的離線存儲就是將一些資源文件保存在本地，這樣後續的頁面重新載入將使用本地資源文件，在離線情況下可以繼續訪問web應用，同時通過一定的手法（更新相關文件或者使用相關API），可以更新、刪除離線存儲等操作。
Html5的離線存儲使用一個manifest文件來標明哪些文件是需要被存儲的，使用如 <html manifest='offline.manifest'> 來引入一個manifest文件，這個文件的路徑可以是相對的，也可以是絕對的，如果你的web應用很多，而且希望能集中管理manifest文件，那麼靜態文件伺服器是個不錯的選擇。
17.HTML5 Canvas 元素有什麼用？
Canvas 元素用於在網頁上繪制圖形，該元素標簽強大之處在於可以直接在 HTML 上進行圖形操作
⑥ 學習web前端都需要會什麼軟體
有一種軟體
dw 代碼編輯軟體
ftp 上傳代碼文件到伺服器的軟體
wampserver 本地模擬伺服器的軟體
谷歌瀏覽器或火狐瀏覽器軟體
⑦ 學習web前端開發，需要掌握哪些知識
第一階段：HTML+CSS/HTML5+CSS3（HTML+CSS、PC端網頁重構、HTML5+CSS3）
第二階段： Javascript（JS數據類型、語法、JS對象、JS內置對象、BOMDOM）
第三階段：Javascript高級/ Ajax/JQ（AJAX、瀏覽器緩存、JS對象高級、ES6、JQuery）
第四階段：前端主流框架（前端工程化、AugularJS、VueJS、React Native、微信小程序）
⑧ 學習WEB前端要多久呀.先從什麼方向開始學習哦
您好學習web前端一定要有方向，學習web前端先從核心基礎開始學：
階段1.前端核心基礎
HTML +_CSS核心、JavaScript基礎語法、JavaScript面向對象、JavaScript DOM和
BOM編程、jQuery框架
階段2.HTML5 + CSS3 + 移動端核心
HTML5新特性、Canvas專列、CSS3新特性、CSS3進階、CSS3實例演練
階段3.移動端
移動端核心、移動端適配、移動端特效
階段4.伺服器端
伺服器端開發、資料庫操作、前後端交互核心、微信公眾號開發
階段5.JavaScript高級
JavaScript基礎深入剖析、JavaScript面向對象深入講解、JavaScript非同步編程、
JavaScript函數式編程JavaScript設計模式
階段6.前端必備
性能優化、版本控制工具、模塊化、項目構建工具
階段7.高級框架
React框架基本使用、React框架進階、Vue框架基本使用、Vue框架進階、Vue源碼分析
階段8.小程序
原生小程序入門、原生小程序API使用、小程序框架Mpvue
web前端學習路線
這個是web前端的學習方向你從上到下按照順序學習就可以了，一般來說零基礎學習前端是5個月左右的時間，學習方法就是做到3多，多問、多思考、多敲 學習的本質就是不斷的重復，熟能生巧，希望可以幫到你。
⑨ WebWorker是什麼鬼
Web Worker為Web應用程序提供了一種能在後台中運行的方法。通過Web Worker可以生成多個線程同時運行，並保證頁面對用戶的及時響應，完全不會影響用戶的正常操作。
⑩ HTML5 Web Worker是利器還是擺設
Worker能解決兩個問題：解決程序阻塞問題：提升效率。不過Worker還有局限性，它不能操作DOM。解決方法如下：
1、首先在創建之前，檢測所用瀏覽器是否支持它，當前除了IE瀏覽器以外，其它主流瀏覽器都是支持的。