因為以前面試一大公司的時候沒看基礎題,翻車了
所以這篇博客就用來寫一些 js 面試的基礎題目
行內元素和塊元素分別有哪些
塊級元素：div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table
行內元素：span, strong, em, br, img , input, label, select, textarea, cite
塊級元素的前后都會自動換行，如同存在換行符一樣，默認情況下，塊級元素會獨占一行
行內元素可以與其他行內元素位於同一行，在瀏覽器中顯示時不會換行，對其不能設置高度和寬度。
iframe有那些缺點？
1.frame會阻塞主頁面的Onload事件；
2.iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的並行加載。
3.SEO不利，對爬蟲不友好。
CSS的優先級？內聯和important哪個優先級高？
!important > 行內樣式（比重1000）> ID 選擇器（比重100） > 類選擇器（比重10） > 標簽（比重1） > 通配符 > 繼承 > 瀏覽器默認屬性
浮動元素清除浮動方法
1、使用空標簽清除浮動
2、使用overflow屬性。（overflow:auto；zoom:1″用於兼容IE6）
3、使用after偽對象清除浮動。 該方法只適用於非IE瀏覽器
4、浮動外部元素，float-in-float。這種方法很簡單，就是把“#outer”元素也進行浮動（向左或者向右）。
閉包的理解，javascript的作用域
a、閉包就是能夠讀取其他函數內部變量的函數。
b、在本質上，閉包就是將函數內部和函數外部連接起來的一座橋梁。
閉包的用途
閉包可以用在許多地方。它的最大用處有兩個，一個是前面提到的可以讀取函數內部的變量，另
一個就是讓這些變量的值始終保持在內存中。
實例如下：
根據作用域鏈的規則，底層作用域沒有聲明的變量，會向上一級找，找到就返回，沒找到就一
直找，直到window的變量，沒有就返回undefined。這里明顯count 是函數內部的flag2 的那
個count 。
var count=10; //全局作用域 標記為flag1
function add(){
var count=0; //函數全局作用域 標記為flag2
return function(){
count+=1; //函數的內部作用域
alert(count);
}
}
var s = add()
s();//輸出1
s();//輸出2
JS中作用域的概念：
表示變量或函數起作用的區域，指代了它們在什么樣的上下文中執行，亦即上下
執行環境。Javascript的作用域只有兩種：全局作用域和本地作用域，本地作用
是按照函數來區分的。
網站性能優化的方法
1、html語義化
2、減少重復代碼，壓縮css，js代碼大小
3、背景圖片大小及數量
4、減少http請求，合理設置緩存
5、圖片懶加載
6、減少cookie傳輸
7、js中減少DOM操作，避免使用eval和 Function，減少作用域鏈查找
8、CDN加速
9、反向代理
9.1 傳統代理服務器位於瀏覽器一側，代理瀏覽器將http請求發送到互聯網上，而反向代理服務器位於網站機房一側，代理網站web服務器接收http請求。
9.2 反向代理也可以實現負載均衡的功能，而通過負載均衡構建的應用集群可以提高系統總體處理能力，進而改善網站高並發情況下的性能。
請描述一下 cookies，sessionStorage 和 localStorage 的區別
cookie是網站為了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（通常經過加密）。
cookie數據始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和服務器間來回傳遞。
sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
存儲大小： cookie數據大小不能超過4k。 sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
有期時間： localStorage 存儲持久數據，瀏覽器關閉后數據不丟失除非主動刪除數據； sessionStorage 數據在當前瀏覽器窗口關閉后自動刪除。 cookie 設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。
介紹一下CSS的盒子模型？
有兩種， IE 盒子模型、標准 W3C 盒子模型；IE的content部分包含了 border 和 pading;
盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border).
box-sizing的作用就是告訴瀏覽器，使用的盒模型是W3C盒模型，還是IE盒模型。
當 box-sizing 的值為 content-box 指定盒子模型為W3C (表示width = content)，border-box 為IE盒子模型 (width = padding + border + content)。
get 與 post 的區別
GET后退按鈕/刷新無害，POST數據會被重新提交（瀏覽器應該告知用戶數據會被重新提交）。
GET書簽可收藏，POST為書簽不可收藏。GET能被緩存，POST不能緩存 。
GET編碼類型application/x-www-form-url，POST編碼類型encodedapplication/x-www-form-urlencoded 或 multipart/form-data。為二進制數據使用多重編碼。
GET歷史參數保留在瀏覽器歷史中。POST參數不會保存在瀏覽器歷史中。
GET對數據長度有限制，當發送數據時，GET 方法向 URL 添加數據；URL 的長度是受限制的（URL 的最大長度是 2048 個字符）。POST無限制。GET只允許 ASCII 字符。POST沒有限制。也允許二進制數據。
與 POST 相比，GET 的安全性較差(相對來說,其實對於服務器都是不安全的)，因為所發送的數據是 URL 的一部分。在發送密碼或其他敏感信息時絕不要使用 GET ！POST 比 GET 更安全，因為參數不會被保存在瀏覽器歷史或 web 服務器日志中。
GET的數據在 URL 中對所有人都是可見的。POST的數據不會顯示在 URL 中。
額外知識點 put 和 delete
PUT，DELETE操作是冪等的。所謂冪等是指不管進行多少次操作，結果都一樣。比如我用PUT修改一篇文章，然后在做同樣的操作，每次操作后的結果並沒有不同，DELETE也是一樣。順便說一句，因為GET操作是安全的，所以它自然也是冪等的。
POST操作既不是安全的，也不是冪等的，比如常見的POST重復加載問題：當我們多次發出同樣的POST請求后，其結果是創建出了若干的資源。
HTTP狀態碼及其含義
1XX：信息狀態碼100 Continue繼續，一般在發送post請求時，已發送了http header之后服務端將返回此信息，表示確認，之后發送具體參數信息
2XX：成功狀態碼200 OK正常返回信息201 Created請求成功並且服務器創建了新的資源202 Accepted服務器已接受請求，但尚未處理
3XX：重定向301 Moved Permanently請求的網頁已永久移動到新位置。302 Found臨時性重定向。303 See Other臨時性重定向，且總是使用GET請求新的URI。304 Not Modified自從上次請求后，請求的網頁未修改過。
4XX：客戶端錯誤400 Bad Request服務器無法理解請求的格式，客戶端不應當嘗試再次使用相同的內容發起請求。401 Unauthorized請求未授權。403 Forbidden禁止訪問。404 Not Found找不到如何與URI相匹配的資源。
5XX:服務器錯誤500 Internal Server Error最常見的服務器端錯誤。503 Service Unavailable服務器端暫時無法處理請求（可能是過載或維護）。
display: none;與visibility: hidden;的區別
-
聯系：它們都能讓元素不可見
-
區別：
display:none;會讓元素完全從渲染樹中消失，渲染的時候不占據任何空間；visibility: hidden;不會讓元素從渲染樹消失，渲染師元素繼續占據空間，只是內容不可見display: none;是非繼承屬性，子孫節點消失由於元素從渲染樹消失造成，通過修改子孫節點屬性無法顯示；visibility: hidden;是繼承屬性，子孫節點消失由於繼承了hidden，通過設置visibility: visible;可以讓子孫節點顯式- 修改常規流中元素的
display通常會造成文檔重排。修改visibility屬性只會造成本元素的重繪。 - 讀屏器不會讀取
display: none;元素內容；會讀取visibility: hidden;元素內容
display有哪些值？說明他們的作用
block象塊類型元素一樣顯示。none缺省值。象行內元素類型一樣顯示。inline-block象行內元素一樣顯示，但其內容象塊類型元素一樣顯示。list-item象塊類型元素一樣顯示，並添加樣式列表標記。table此元素會作為塊級表格來顯示inherit規定應該從父元素繼承display屬性的值
position的值， relative和absolute定位原點是
absolute：生成絕對定位的元素，相對於static定位以外的第一個父元素進行定位fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位relative：生成相對定位的元素，相對於其正常位置進行定位static默認值。沒有定位，元素出現在正常的流中inherit規定從父元素繼承position屬性的值sticky可以說是相對定位relative和固定定位fixed的結合；它主要用在對scroll事件的監聽上；簡單來說，在滑動過程中，某個元素距離其父元素的距離達到sticky粘性定位的要求時(比如top：100px)；position:sticky這時的效果相當於fixed定位，固定到適當位置。
事件模型
W3C中定義事件的發生經歷三個階段：捕獲階段（capturing）、目標階段（targetin）、冒泡階段（bubbling）
- 冒泡型事件：當你使用事件冒泡時，子級元素先觸發，父級元素后觸發
- 捕獲型事件：當你使用事件捕獲時，父級元素先觸發，子級元素后觸發
DOM事件流：同時支持兩種事件模型：捕獲型事件和冒泡型事件- 阻止冒泡：在
W3c中，使用stopPropagation（）方法；在IE下設置cancelBubble = true - 阻止捕獲：阻止事件的默認行為，例如
click - <a>后的跳轉。在W3c中，使用preventDefault（）方法，在IE下設置window.event.returnValue = false