web前端面試題總結

一、javascript主要的數據類型：String、Number、boolean、Object、Null、Undefined、symbol(es6)

二、css盒子模型屬性包括：margin、border、padding、content

三、DOCTYPE 不存在或格式不正確會致使文檔以混雜模式呈現

四、TCP是   傳輸控制 的協議，UDP是 用戶數據報 的協議

五、css實現垂直水平居中？很多於3中方法。

垂直居中：
   一、line-height
        text-align: center;

   二、position: absolute;
        left: 50%;
        top: 50%;
        margin-left:-寬度/2
        margin-top:-高度/2

   三、父元素：display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-orient: vertical;
            box-orient: vertical;
            -webkit-flex-direction: column;
            flex-direction: column;
            -webkit-box-orient: vertical;
            box-orient: vertical;
            -webkit-flex-direction: column;
            flex-direction: column;
    四、position: absolute;
         top: calc(50% - 高度一半);
         left: calc(50% - 寬度一半);
    五、position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%); 
    六、margin: 50% auto 0;
         tarnsform: translateY(-50%);

六、簡述cookie、sessionStorage和localStorage 的區別

一、cookie數據始終在同源的http請求中攜帶（即便不須要），即cookie在瀏覽器和服務器間來回傳遞，而sessionStorage和localStorage不會自動把數據發送給服務器，僅在本地保存。cookie數據還有路徑（path）的概念，能夠限制cookie只屬於某個路徑下 
二、存儲大小限制也不一樣，cookie數據不能超過4K，同時由於每次http請求都會攜帶cookie、因此cookie只適合保存很小的數據，如會話標識。sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大 
三、數據有效期不一樣，sessionStorage：僅在當前瀏覽器窗口關閉以前有效；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，所以用做持久數據；cookie：只在設置的cookie過時時間以前有效，即便窗口關閉或瀏覽器關閉 
四、做用域不一樣，sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；localstorage在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的 

七、跨域請求資源的方法有哪些？

（1）JSONP（jsonp跨域get請求） 
     這種方式主要是經過動態建立一個script標籤，瀏覽器對script的資源引用沒有同源限制，同時資源加載到頁面後會當即執行；（建立script標籤向不一樣域提交http請求的不會被拒絕的方法，jsonp標籤的src屬性是沒有跨域限制的）
     實際項目中JSONP一般用來獲取json格式數據，這時先後端一般約定一個參數callback，該參數的值，就是處理返回數據的函數名稱；
缺點：這種方式沒法發送post請求，另外要肯定jsonp的請求是否失敗並不容易，大多數框架的實現都是結合超時時間來判斷。
 
（2）proxy 代理
    這種方式首先將請求發送給後臺服務器，經過服務器來發送請求，而後將請求的結果傳遞給前端；
須要注意的是若是你代理的是https協議的請求，那麼你的proxy首先須要信任該證書或者忽略證書檢查，不然你的請求沒法成功。
 
（3）cors
    當你使用XMLHttpRequest發送請求時，瀏覽器發現該請求不符合同源策略，會給該請求頭origin，後臺進行一系列處理，若是肯定接受請求則在返回結果加入一個響應頭Access-Control-Allow-Origin；
瀏覽器判斷該響應頭中是否包含Origin的值，若是有則瀏覽器會處理響應，咱們就能夠拿到響應數據，若是不包含瀏覽器直接駁回，這時咱們沒法拿到響應數據； 
 
post請求的content-type不是常規的三個：application/x-www-form-urlencoded（使用HTTP的post方式提交表單）、multipart/form-data（同上，但主要用於表單提交時伴隨文件上傳的場合）、text/plain（純文本）
 
post請求的payload爲text/html 
payload指在http中，應該是post請求時所攜帶的有效數據；
 
有一種跨域須要特別注意就是https協議下發送https請求，除了使用proxy代理外其餘方法都無解，會被瀏覽器直接block掉。

八、一個頁面從輸入URL到頁面加載顯示完成，這個過程當中發生了什麼？

一、瀏覽器根據請求的URL交給DNS域名解析，找到真實IP，向服務器發起請求；
二、服務器交給後臺處理完成後返回數據，瀏覽器接收文件（HTML、JS、CSS、圖象等）；
三、瀏覽器對加載到的資源（HTML、JS、CSS等）進行語法解析，創建相應的內部數據結構（如HTML的DOM）；
四、載入解析到的資源文件，渲染頁面，完成

九、對於網站優化，有哪些方法？

一、html語義化
二、減小重複代碼，壓縮css，js代碼大小
三、背景圖片大小及數量
四、減小http請求，合理設置緩存
五、圖片懶加載
六、減小cookie傳輸
七、js中減小DOM操做，避免使用eval和 Function，減小做用域鏈查找
八、CDN加速
九、反向代理
    一、傳統代理服務器位於瀏覽器一側，代理瀏覽器將http請求發送到互聯網上，而反向代理服務器位於網站機房一側，代理網站web服務器接收http請求。
　　 二、反向代理也能夠實現負載均衡的功能，而經過負載均衡構建的應用集羣能夠提升系統整體處理能力，進而改善網站高併發狀況下的性能。

 十、常見的瀏覽器內核有哪些？以及對瀏覽器內核的理解

    瀏覽器內核又能夠分紅兩部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。它負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入 CSS 等），以及計算網頁的顯示方式，
而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。全部網頁瀏覽器、電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用程序都須要內核。
JS 引擎則是解析 Javascript 語言，執行 javascript 語言來實現網頁的動態效果。最開始渲染引擎和 JS 引擎並無區分的很明確，後來 JS 引擎愈來愈獨立，內核就傾向於只指渲染引擎。
有一個網頁標準計劃小組製做了一個 ACID 來測試引擎的兼容性和性能。內核的種類不少，如加上沒什麼人使用的非商業的免費內核，可能會有 10 多種，可是常見的瀏覽器內核能夠分這四種：Trident、Gecko、Blink、Webkit。

1、IE瀏覽器內核：Trident內核，也是俗稱的IE內核；

2、Chrome瀏覽器內核：統稱爲Chromium內核或Chrome內核，之前是Webkit內核，如今是Blink內核；

3、Firefox瀏覽器內核：Gecko內核，俗稱Firefox內核；

4、Safari瀏覽器內核：Webkit內核；

5、Opera瀏覽器內核：最初是本身的Presto內核，後來加入谷歌大軍，從Webkit又到了Blink內核；

六、360瀏覽器、獵豹瀏覽器內核：IE+Chrome雙內核；

七、搜狗、遨遊、QQ瀏覽器內核：Trident（兼容模式）+Webkit（高速模式）；

8、百度瀏覽器、世界之窗內核：IE內核；

九、2345瀏覽器內核：好像之前是IE內核，如今也是IE+Chrome雙內核了；

十、UC瀏覽器內核：這個衆口不一，UC說是他們本身研發的U3內核，但好像仍是基於Webkit和Trident，還有說是基於火狐內核。。

十一、簡述行內樣式與行外樣式的區別

（1）行內元素有：a b span img input select strong

（2）塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

（3）常見的空元素： <br> <hr> <img> <input> <link> <meta>

不爲人知的是： <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

塊級元素的先後都會自動換行，如同存在換行符同樣，默認狀況下，塊級元素會獨佔一行

行內元素能夠與其餘行內元素位於同一行，在瀏覽器中顯示時不會換行，對其不能設置高度和寬度。

還有一種稱爲行內塊級元素，好比<img>、<input>等，能夠和其餘行內元素位於一行，且設置其高度和寬度

十二、H5爲何只寫<!DOCTYPE html>

HTML5 不基於 SGML，所以不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行）；

而HTML4.01基於SGML,因此須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

1三、請描述一下 cookies，sessionStorage 和 localStorage 的區別？

cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）。

cookie數據始終在同源的http請求中攜帶（即便不須要），記會在瀏覽器和服務器間來回傳遞。

sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

存儲大小： cookie數據大小不能超過4k。 sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

有期時間： localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據； sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除。 cookie 設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉。

 1四、什麼是閉包和閉包的優缺點

閉包就是可以讀取其餘函數內部變量的函數
優勢：1、可以讀取其餘函數內部變量 
     2、使變量的值始終保持在內存中
缺點：1、閉包使函數中的變量都被保存在內存中，消耗內存，在IE中可能會形成內存泄漏