面試技術問題： l NULL的類型是object；undefined的類型是undefined類型，一個變數如果沒有初始化的話就是undefined。 l null 表示此處數值為空，undefined表示此處應該有值，但是確缺少值。null轉為數字是0，undefined轉為數字是NaN l nu ...
面試技術問題：
- Null 與 undefined區別？
l NULL的類型是object；undefined的類型是undefined類型，一個變數如果沒有初始化的話就是undefined。
l null 表示此處數值為空，undefined表示此處應該有值，但是確缺少值。null轉為數字是0，undefined轉為數字是NaN
l null的典型用法是作為一個空的對象，就像是一個占位符。在dom模型中獲取一個不存在的元素，會得到一個null
l undefined的用法，訪問不存在的對象屬性或者數組項的時候會返回undefined，void操作符也返回一個undefined
- Position的值有哪些？原點在哪裡？
position的值有5個：
原點位置：
relative（相對定位）：定位原點是元素原始位置；是通過設置垂直或水平位置，讓這個元素"相對於"它的原始起點進行移動。
absolute（絕對定位）：定位原點是離自己這一級元素最近的一級position設置為absolute或者relative的父元素的左上角為原點的。預設參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下麵簡稱TRBL)進行定位，有以下屬性：
1)如果沒有TRBL，以父級的左上角，在沒有父級的時候，他是參照瀏覽器左上角,如果在沒有父級元素的情況下，存在文本，則以它前面的最後一個文字的右上角為原點進行定位但是不斷開文字，覆蓋於上方。
2)如果設定TRBL，並且父級沒有設定position 屬性，那麼當前的absolute 則以瀏覽器左上角為原始點進行定位，位置將由TRBL 決定。
3)如果設定TRBL，並且父級設定position 屬性(無論是absolute 還是relative)，則以父級的左上角為原點進行定位，位置由TRBL 決定。即使父級有Padding 屬性，對其也不起作用，說簡單點就是：它只堅持一點，就以父級左上角為原點進行定位，父級的padding對其根本沒有影響。
以上三點可以總結出，若想把一個定位屬性為absolute 的元素定位於其父級元素內，只有滿足兩個條件，只要有一點不滿足，元素就會以瀏覽器左上角為原點。
第一：設定TRBL
第二：父級設定Position 屬性
- 對this的理解？
this永遠指向函數運行時所在的對象，而不是函數被創建時所在的對象。匿名函數或不處於任何對象中的函數指向window 。
1.如果是call，apply, with，指定的this是誰，就是誰。
2.普通的函數調用，函數被誰調用，this就是誰。
- 與普通函數相比，構造函數有以下明顯特點：
1.用new關鍵字調用
var prince=new Prince("charming",25);
2.函數內部可以使用this關鍵字
在構造函數內部，this指向的是構造出的新對象。用this定義的變數或函數/方法，就是實例變數或實例函數/方法。需要用實例才能訪問到，不能用類型名訪問。
prince.age;//25
Prince.age;//undefined
3.預設不用return返回值
構造函數是不需要用return顯式返回值的，預設會返回this，也就是新的實例對象。當然，也可以用return語句，返回值會根據return值的類型而有所不同，細節將在下文介紹。
4.函數命名建議首字母大寫，與普通函數區分開。
不是命名規範中的，但是建議這麼寫。
- Display的值有哪些？
- HTML5新加的特性有哪些？
l 不再基於SGML，只用<!DOCTYPE html>就夠了。
l 新增內容元素，比如 article、footer、header、nav、section 、time等。
l 用於媒介回放的 video 和 audio 元素
l input新type：date、email、url等。
l 新增一些使用API，比如geolocation等。其中需使用getCurrentPosition方法。
相容性情況： 針對瀏覽器的支持（除了IE6/IE7/IE8/IE9以為，其他的大部分主流的瀏覽器都是完美相容的）
- cookie與session區別？
Session和Cookie都是為瞭解決HTTP協議無狀態的問題，為了標識一次回話，記錄一些用戶信息。
session是伺服器端存儲的用戶信息，通過session_id來標識。
cookie也是用與保存用戶的一些信息，例如加入購物車的商品信息，瀏覽的一些選擇。cookie以鍵值對的形式保存這些信息，其中也包括session_id，並且隨著每次請求傳送到伺服器端。
cookie的內容包括：名字，值，過期時間，路徑和域。路徑與域一起構成cookie的作用範圍。若不設置過期時間，則表示這個cookie的生命期為瀏覽器會話期間，關閉瀏覽器視窗，cookie就消失。這種生命期為瀏覽器會話期的cookie被稱為會話cookie。會話cookie一般不存儲在硬碟上而是保存在記憶體里。若設置了過期時間，瀏覽器就會把cookie保存到硬碟上，關閉後再次打開瀏覽器，這些cookie仍然有效直到超過設定的過期時間。
https://juejin.im/entry/5766c29d6be3ff006a31b84e
- cookie、localStorage、sessionStorage的區別？
localStorage - 沒有時間限制的數據存儲
sessionStorage - 針對一個 session 的數據存儲
l 共同點：sessionStorage、localStorage和cookie都由瀏覽器存儲在本地的數據。
l 區別：cookie數據始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和伺服器間來回傳遞，localStorage和sessionStorage僅保存在客戶端，不與伺服器進行交互通信。
l cookie只在設置的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉。localStorage：始終有效，視窗或瀏覽器關閉也一直保存，因此用作持久數據。sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器視窗後，數據會被刪除。
l 存儲大小限制也不同，cookie數據不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數據，如會話標識。localStorage 和sessionStorage，但比cookie大得多，可以達到5M或更大。
l localStorage支持事件通知機制，可以將數據更新的通知發送給監聽者。 api 介面使用更方便。而cookie的原生介面不友好，需要程式員自己封裝
l 作用域不同，sessionStorage不在不同的瀏覽器視窗中共用，即使是同一個頁面；localStorage 在所有同源視窗中都是共用的；cookie也是在所有同源視窗中都是共用的。Web Storage 支持事件通知機制，可以將數據更新的通知發送給監聽者。Web Storage 的 api 介面使用更方便。
l 應用場景：localStoragese：常用於長期登錄（+判斷用戶是否已登錄），適合長期保存在本地的數據。sessionStorage：敏感賬號一次性登錄；
localStorage提供了幾個方法:
1.存儲:localStorage.setItem(key,value)如果key存在時，更新value
2.獲取 localStorage.getItem(key)如果key不存在返回null
3.刪除 localStorage.removeItem(key)一旦刪除，key對應的數據將會全部刪除
4.全部清除 localStorage.clear() 使用removeItem逐個刪除太麻煩，可以使用clear,執行的後果是會清除所有localStorage對象保存的數據。
- get與post區別？
get:1、提交的鍵值對，放在地址欄URL後面
2、安全性差
3、對提交內容長度有限制
4、GET冪等，POST不冪等，冪等是指同一個請求方法執行多次和僅執行一次的效果完全相同。
5、GET用於從伺服器端獲取數據，包括靜態資源(HTML|JS|CSS|Image等等)、動態數據展示(列表數據、詳情數據等等)。
post:1、安全性相對較高
2、對提交內容長度無限制
3、POST用於向伺服器提交數據，比如增刪改數據，提交一個表單新建一個用戶、或修改一個用戶等。
- 對js繼承的理解？
由於所有的實例對象共用同一個prototype對象，那麼從外界看起來，prototype對象就好像是實例對象的原型，而實例對象則好像"繼承"了prototype對象一樣。
- 對閉包的理解？
閉包是指有權訪問另一個函數作用域中的變數的函數。 創建閉包的常用方式，就是在一個函數內部創建另一個函數。
閉包最大用處有兩個：1、可以訪問其他函數內部的變數；2、讓這些變數的值始終保存在記憶體中。
創建的內部函數可以訪問外部函數中聲明的所有局部變數、參數和其他內部函數，當該內部函數在外部函數外被調用，就生成了閉包。
內部環境可以通過作用鏈訪問所有的外部環境，但外部環境不能訪問內部環境中的任何變數和函數。這些環境直接的聯繫是線性，有次序的，每個環境都可以向上搜索作用域鏈，以查詢變數和函數名；但任何環境都不能通過向下搜索作用域鏈而進入另一個執行環境。
- css選擇器有哪些？
- 對ajax的理解？跨域問題？
Ajax的原理簡單來說通過XmlHttpRequest對象來向伺服器發非同步請求，從伺服器獲得數據，然後用javascript來操作DOM而更新頁面。
Ajax可以實現動態不刷新（局部刷新），就是能在不更新整個頁面的前提下維護數據。這使得Web應用程式更為迅捷地回應用戶動作
優點：1. 通過非同步模式，提升了用戶體驗
2. 優化了瀏覽器和伺服器之間的傳輸，減少不必要的數據往返，減少了帶寬占用。
3. Ajax引擎在客戶端運行，承擔了一部分本來由伺服器承擔的工作，從而減少了大用戶量下的伺服器負載。
跨域問題：AJAX出現跨域問題，是因為瀏覽器的“同源策略” ，所謂“同源策略”，就是指：協議、功能變數名稱、埠相同。
跨域問題解決方案：
1、JSONP 比較常用，比較簡單，實現方式是：在請求查詢字元串加一個callback函數。只能發送get請求。
2、CORS 是AJAX跨域的根本解決辦法，CORS允許發送任何類型的請求，對跨域的解決，關鍵的伺服器。實現方式是：在頭部信息中，加origin欄位，舉例：origin=*。
- 請解釋JSONP的工作原理，以及它為什麼不是真正的AJAX？
JSONP (JSON with Padding)是一個簡單高效的跨域方式，HTML中的script標簽可以載入並執行其他域的javascript，於是我們可以通過script標記來動態載入其他域的資源。例如我要從域A的頁面pageA載入域B的數據，那麼在域B的頁面pageB中我以JavaScript的形式聲明pageA需要的數據，然後在 pageA中用script標簽把pageB載入進來，那麼pageB中的腳本就會得以執行。JSONP在此基礎上加入了回調函數，pageB載入完之後會執行pageA中定義的函數，所需要的數據會以參數的形式傳遞給該函數。JSONP易於實現，但是也會存在一些安全隱患，如果第三方的腳本隨意地執行，那麼它就可以篡改頁面內容，截獲敏感數據。但是在受信任的雙方傳遞數據，JSONP是非常合適的選擇。
AJAX是不跨域的，而JSONP是一個跨域的，還有就是二者接收參數形式不一樣！
- 請指出document.onload和document.ready兩個事件的區別。
頁面載入完成有兩種事件，一是ready，表示文檔結構已經載入完成（不包含圖片等非文字媒體文件），二是onload，指示頁麵包含圖片等文件在內的所有元素都載入完成。
- 什麼是三元表達式？“三元”表示什麼意思？
在表達式boolean-exp ? value0 : value1 中，如果“布爾表達式”的結果為true，就計算“value0”，而且這個計算結果也就是操作符最終產生的值。如果“布爾表達式”的結果為false，就計算“value1”，同樣，它的結果也就成為了操作符最終產生的值。
- 介紹一下你對瀏覽器內核的理解？
- 主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
- 渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然後會輸出至顯示器或印表機。瀏覽器的內核的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網路內容的應用程式都需要內核。
- JS引擎則解析和執行javascript來實現網頁的動態效果。
- 最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，內核就傾向於只指渲染引擎。
常見的瀏覽器內核有哪些？
Trident內核：IE，360，搜過瀏覽器；
Gecko內核：Netscape6及以上版本，
Presto內核：Opera
Blink內核：Opera；
Webkit內核：Safari，Chrome
- 簡述一下你對HTML語義化的理解？
1. 用正確的標簽做正確的事情。2. html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析;3. 即使在沒有樣式CSS情況下也以一種文檔格式顯示，並且是容易閱讀的;4. 搜索引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，利於SEO;5. 使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。
- HTML標題字數過多，如何實現隱藏？
- HTTP與HTTPs的區別？
- 狀態碼201、401、441含義？
面試常規問題
- 自我介紹
- 為什麼選擇前端
- 你的職業規劃是什麼？
- 有什麼問題需要問公司的？
<持續更新......>
