2019年前端面試題

CSS選擇器有哪些？

http://www.runoob.com/cssref/css-selectors.html

CSS中px、em、rem的區別？

px像素（Pixel）。相對長度單位。像素px是相對於顯示器屏幕分辨率而言的。(引自CSS2.0手冊)

PX特色

1. IE沒法調整那些使用px做爲單位的字體大小；

2. 國外的大部分網站可以調整的緣由在於其使用了em或rem做爲字體單位；

3. Firefox可以調整px和em，rem，可是96%以上的中國網民使用IE瀏覽器(或內核)。

em是相對長度單位，相對於當前對象內文本的字體尺寸，如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。(引自CSS2.0手冊)

（任意瀏覽器的默認字體高都是16px。全部未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em,10px=0.625em。爲了簡化font-size的換算，須要在css中的body選擇器中聲明Font-size=62.5%，這就使em值變爲 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只須要將你的原來的px數值除以10，而後換上em做爲單位就好了。）

 

EM特色 

 1. em的值並非固定的；

 2. em會繼承父級元素的字體大小

因此咱們在寫CSS的時候，須要注意兩點：

1. body選擇器中聲明Font-size=62.5%；

2. 將你的原來的px數值除以10，而後換上em做爲單位；

3. 從新計算那些被放大的字體的em數值。避免字體大小的重複聲明。

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

 

addClass、removeClass、toggleClass三者的區別?

.addClass(「className」)方法是用來給指定元素增長類名，也就是說給指定的元素追加樣式； 

.removeClass(「className」)方法是用來給指定的元素移除類名，也就是說給指定元素移除樣式； 

.toggleClass(「className」)方法是用來給脂定的元素增長或移除類名（若是元素的類名存在就移除，若是不存在就增長），也就是說用來給指定的元素進行樣式切換（若是元素存在樣式則去掉，若是不存在則加上樣式）。

 

JS有哪些數據類型？

1，基本類型：字符串類型（string），數字類型（number），布爾類型（boolean）
2，複雜類型：數組類型（array），對象類型（object），函數類型（function），正則類型（regexp）
3，空類型：undefine  和 null

字符串轉數字類型方法：1，加減乘除取餘 接字符串 隱士轉換

                                 2，parseInt(字符串)  轉爲整數   

                                 3，parseFloat(字符串)  轉爲浮點數類型  

                                 4，number  （字符串）

 
數字轉字符串類型方法：1，.toString() 

                                 2.string()  通常用於轉換NAN和 undefine 

                                 3.鏈接符+號

字符串或數字轉boolean類型： boolean(字符串)  除false NaN 空字符串  數字0  和undefine   其他轉換後都是true

 

談談document.ready和window.onload的區別?

最基本的區別:

1.執行時間

　　window.onload必須等到頁面內包括圖片的全部元素加載完畢後才能執行。 
　　$(document).ready()是DOM結構繪製完畢後就執行，沒必要等到加載完畢。

2.編寫個數不一樣

　　window.onload不能同時編寫多個，若是有多個window.onload方法，只會執行一個 
　　$(document).ready()能夠同時編寫多個，而且均可以獲得執行

3.簡化寫法

　　window.onload沒有簡化寫法 
　　$(document).ready(function(){})能夠簡寫成$(function(){});

jQuery中.bind() .live() .delegate() .on()區別?

http://www.javashuo.com/article/p-ratdfbyc-bn.html

 

setTimeout與setInterval的主要區別?

setTimeout()方法只運行一次，也就是說當達到設定的時間後就出發運行指定的代碼，運行完後就結束了，若是還想再次執行一樣的函數，能夠在函數體內再次調用setTimeout()，能夠達到循環調用的效果。

setInterval()是循環執行的，即每達到指定的時間間隔就執行相應的函數或者表達式，是真正的定時器。

 get和post的區別？

get把請求的數據放在url上，即HTTP協議頭上，其格式爲： 以?分割URL和傳輸數據，參數之間以&相連。 數據若是是英文字母/數字，原樣發送， 若是是空格，轉換爲+， 若是是中文/其餘字符，則直接把字符串用BASE64加密，及「%」加上「字符串的16進制ASCII碼」。 

post把數據放在HTTP的包體內（requrest body）。

get提交的數據最大是2k（原則上url長度無限制，那麼get提交的數據也沒有限制咯？限制實際上取決於瀏覽器，(大多數)瀏覽器一般都會限制url長度在2K個字節，即便(大多數)服務器最多處理64K大小的url。也沒有卵用。）。
post理論上沒有限制。實際上IIS4中最大量爲80KB，IIS5中爲100KB。

GET產生一個TCP數據包，瀏覽器會把http header和data一併發送出去，服務器響應200(返回數據);
POST產生兩個TCP數據包，瀏覽器先發送header，服務器響應100 continue，瀏覽器再發送data，服務器響應200 ok(返回數據)。

GET在瀏覽器回退時是無害的，POST會再次提交請求。

GET產生的URL地址能夠被Bookmark，而POST不能夠。

GET請求會被瀏覽器主動cache，而POST不會，除非手動設置。

GET請求只能進行url編碼，而POST支持多種編碼方式。

GET請求參數會被完整保留在瀏覽器歷史記錄裏，而POST中的參數不會被保留。

GET只接受ASCII字符的參數的數據類型，而POST沒有限制

那麼，post那麼好爲何還用get？get效率高！。

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

 

方法一：localstorge在一個標籤頁裏被添加、修改或刪除時，都會觸發一個storage事件，經過在另外一個標籤頁裏監聽storage事件，便可獲得localstorge存儲的值，實現不一樣標籤頁之間的通訊。

方法二：使用cookie+setInterval，將要傳遞的信息存儲在cookie中，每隔必定時間讀取cookie信息，便可隨時獲取要傳遞的信息。

 

 

token、session的區別？

session：session 從字面上講，就是會話。這個就相似於你和一我的交談，你怎麼知道當前和你交談的是張三而不是李四呢？對方確定有某種特徵（長相等）代表他就是張三。

session 也是相似的道理，服務器要知道當前發請求給本身的是誰。爲了作這種區分，服務器就要給每一個客戶端分配不一樣的「身份標識」，而後客戶端每次向服務器發請求的時候，都帶上這個「身份標識」，服務器就知道這個請求來自於誰了。至於客戶端怎麼保存這個「身份標識」，能夠有不少種方式，對於瀏覽器客戶端，你們都默認採用 cookie 的方式。

服務器使用session把用戶的信息臨時保存在了服務器上，用戶離開網站後session會被銷燬。這種用戶信息存儲方式相對cookie來講更安全，但是session有一個缺陷：若是web服務器作了負載均衡，那麼下一個操做請求到了另外一臺服務器的時候session會丟失。

token：

Token的引入：Token是在客戶端頻繁向服務端請求數據，服務端頻繁的去數據庫查詢用戶名和密碼並進行對比，判斷用戶名和密碼正確與否，並做出相應提示，在這樣的背景下，Token便應運而生。

Token的定義：Token是服務端生成的一串字符串，以做客戶端進行請求的一個令牌，當第一次登陸後，服務器生成一個Token便將此Token返回給客戶端，之後客戶端只需帶上這個Token前來請求數據便可，無需再次帶上用戶名和密碼。最簡單的token組成:uid(用戶惟一的身份標識)、time(當前時間的時間戳)、sign(簽名，由token的前幾位+鹽以哈希算法壓縮成必定長的十六進制字符串，能夠防止惡意第三方拼接token請求服務器)。

使用Token的目的：Token的目的是爲了減輕服務器的壓力，減小頻繁的查詢數據庫，使服務器更加健壯。

 

 cookie,localStorage和sessionStorage的區別?

共同點：都是保存在瀏覽器端、且同源的 
區別： 
一、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接口使用更方便

HTTP1.0、HTTP1.1 和 HTTP2.0 的區別?

一、HTTP的歷史

早在 HTTP 創建之初，主要就是爲了將超文本標記語言(HTML)文檔從Web服務器傳送到客戶端的瀏覽器。也是說對於前端來講，咱們所寫的HTML頁面將要放在咱們的 web 服務器上，用戶端經過瀏覽器訪問url地址來獲取網頁的顯示內容，可是到了 WEB2.0 以來，咱們的頁面變得複雜，不只僅單純的是一些簡單的文字和圖片，同時咱們的 HTML 頁面有了 CSS，Javascript，來豐富咱們的頁面展現，當 ajax 的出現，咱們又多了一種向服務器端獲取數據的方法，這些其實都是基於 HTTP 協議的。一樣到了移動互聯網時代，咱們頁面能夠跑在手機端瀏覽器裏面，可是和 PC 相比，手機端的網絡狀況更加複雜，這使得咱們開始了不起不對 HTTP 進行深刻理解並不斷優化過程當中

詳細介紹：https://mp.weixin.qq.com/s/GICbiyJpINrHZ41u_4zT-A

 

http和https的區別？https的原理？

http://www.javashuo.com/article/p-vcsaiego-be.html

WebSerivce與WebAPI的區別？

http://www.javashuo.com/article/p-uezhapqn-bb.html

 

前端性能優化方案有哪些？

http://www.javashuo.com/article/p-vhrqdgxj-bx.html

1. 減小 HTTP請求數

(1). 從設計實現層面簡化頁面

(2). 合理設置 HTTP緩存

(3). 資源合併與壓縮

(4). CSS Sprites

(5). Inline Images-->使用 data:  URL scheme的方式將圖片嵌入到頁面或 CSS中，若是不考慮資源管理上的問題的話，不失爲一個好辦法。若是是嵌入頁面的話換來的是增大了頁面的體積，並且沒法利用瀏覽器緩存。使用在 CSS中的圖片則更爲理想一些。

(6). Lazy Load Images（本身對這一塊的內容仍是不瞭解）

2. 將外部腳本置底（將腳本內容在頁面信息內容加載後再加載）

3. 異步執行 inline腳本(其實原理和上面是同樣，保證腳本在頁面內容後面加載。)

4. Lazy Load Javascript（只有在須要加載的時候加載，在通常狀況下並不加載信息內容。）

5. 將 CSS放在 HEAD中

6. 異步請求 Callback（就是將一些行爲樣式提取出來，慢慢的加載信息的內容）

7. 減小沒必要要的 HTTP跳轉

8. 避免重複的資源請求--> 這種狀況主要是因爲疏忽或頁面由多個模塊拼接而成，而後每一個模塊中請求了一樣的資源時，會致使資源的重複請求

9. Javascript代碼塊優化

10.CSS選擇符

11. HTML優化

12. Image壓縮

 

各瀏覽器兼容性問題？

https://blog.csdn.net/xustart7720/article/details/73604651/

http://www.javashuo.com/article/p-yrseomyp-z.html

 

HTML5和傳統HTML的區別？

http://www.javashuo.com/article/p-tjjvidzx-y.html

 

CSS3新特性有哪些？

http://www.javashuo.com/article/p-gsngimyd-g.html

 

ES6新特性有哪些？

ECMAScript 6 簡稱 ES6，是 JavaScript 語言的下一代標準，已經在2015年6月正式發佈了。它的目標是使得 JavaScript 語言能夠用來編寫複雜的大型應用程序，成爲企業級開發語言。 

ECMAScript 和 JavaScript 的關係：前者是後者的語法規格，後者是前者的一種實現

• 1. let、const
• 2. import、export
• 3. class、extends、super
• 4. arrow functions （箭頭函數）
• 5. template string （模板字符串）
• 6. destructuring （解構）
• 7. default 函數默認參數
• 8. rest arguments （rest參數）
• 9. Spread Operator （展開運算符）
• 10. 對象
• 11. Promise
• 12. Generators

ES七、ES8新特性？

ES7在ES6的基礎上主要添加了兩項內容：

• Array.prototype.includes()方法
• 求冪運算符（**）

ES8特性：

主要新功能：

• 異步函數 Async Functions（Brian Terlson）
• 共享內存和Atomics（Lars T. Hansen）

次要新功能：

• Object.values / Object.entries（Jordan Harband）
• String padding（Jordan Harband，Rick Waldron）
• Object.getOwnPropertyDescriptors() （Jordan Harband，Andrea Giammarchi）
• 函數參數列表和調用中的尾逗號（Jeff Morrison）

 

對HTML5 websocket的瞭解？

WebSocket 是 HTML5 開始提供的一種在單個 TCP 鏈接上進行全雙工通信的協議。

WebSocket 使得客戶端和服務器之間的數據交換變得更加簡單，容許服務端主動向客戶端推送數據。在 WebSocket API 中，瀏覽器和服務器只須要完成一次握手，二者之間就直接能夠建立持久性的鏈接，並進行雙向數據傳輸。

在 WebSocket API 中，瀏覽器和服務器只須要作一個握手的動做，而後，瀏覽器和服務器之間就造成了一條快速通道。二者之間就直接能夠數據互相傳送。

如今，不少網站爲了實現推送技術，所用的技術都是 Ajax 輪詢。輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對服務器發出HTTP請求，而後由服務器返回最新的數據給客戶端的瀏覽器。這種傳統的模式帶來很明顯的缺點，即瀏覽器須要不斷的向服務器發出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數據可能只是很小的一部分，顯然這樣會浪費不少的帶寬等資源。

HTML5 定義的 WebSocket 協議，能更好的節省服務器資源和帶寬，而且可以更實時地進行通信。

瀏覽器經過 JavaScript 向服務器發出創建 WebSocket 鏈接的請求，鏈接創建之後，客戶端和服務器端就能夠經過 TCP 鏈接直接交換數據。

當你獲取 Web Socket 鏈接後，你能夠經過 send() 方法來向服務器發送數據，並經過 onmessage 事件來接收服務器返回的數據。

http://www.runoob.com/html/html5-websocket.html

 

React_Flux入門

https://blog.csdn.net/i10630226/article/details/54984299