前端跨域問題

答案：

Jsonp（ajax跨域請求一般是get請求）
document.domain + iframe
location.hash + iframe
window.name + iframe
postMessage
跨域資源共享（CORS）
nginx代理
nodejs中間件代理
WebSocket協議

跨域的方法很多，不同的應用場景我們都可以找到一個最合適的解決方案。比如單向的數據請求，我們應該優先選擇JSONP或者window.name，雙向通信優先採取location.hash，在未與數據提供方達成通信協議的情況下我們也可以用server proxy的方式來抓取數據。

Echars、Highchars及3D.js數據圖形化了解一下

答案：看實際數據展示情況,決定使用插件，可以去官網查看示例

懶加載和預加載

答案：

1.懶加載：懶加載也叫延遲加載，指的是在長網頁中延遲加載圖像，是一種很好優化網頁性能的方式。用戶滾動到它們之前，可視區域外的圖像不會加載。這與圖像預加載相反，在長網頁上使用延遲加載將是網頁加載更快。在某些情況下可以幫助減少服務器負載。

1.1懶加載的優點：

1）.能提升用戶體驗

2）.減少無效資源的加載

3）.防止併發加載的資源過多會阻塞js的加載

1.2懶加載的原理

首先將頁面上的圖片的 src 屬性設爲空字符串，而圖片的真實路徑則設置在data-original屬性中，當頁面滾動的時候需要去監聽scroll事件，在scroll事件的回調中，判斷我們的懶加載的圖片是否進入可視區域,如果圖片在可視區內將圖片的 src 屬性設置爲data-original 的值，這樣就可以實現延遲加載。

2、預加載：資源預加載是另一個性能優化技術，我們可以使用該技術來預先告知瀏覽器某些資源可能在將來會被使用到。預加載簡單來說就是將所有所需的資源提前請求加載到本地，這樣後面在需要用到時就直接從緩存取資源。

2.1預加載的優點：

在網頁全部加載之前，對一些主要內容進行加載，以提供給用戶更好的體驗，減少等待的時間。否則，如果一個頁面的內容過於龐大，沒有使用預加載技術的頁面就會長時間的展現爲一片空白，直到所有內容加載完畢。

3.懶加載和預加載的對比

兩者都是提高頁面性能有效的方法，兩者主要區別是一個是提前加載，一個是遲緩甚至是不加載。懶加載對服務器前端有一定的緩解壓力作用，預加載則會增加服務器前端壓力

jQuery中事件綁定的區別：（on和click事件區別）

答案：

click事件：如果同一個標籤上有兩個click事件，那麼第二個事件會覆蓋掉第一個事件；

on事件：on.("click"),on在事件中起了監聽的作用，如果同一個標籤上有兩個click事件，那麼在第二個click事件發生時，on會監聽第一個事件，不會進行覆蓋。

點外賣的App上的點擊添加購物車時的動畫效果

(1)jQuery實現購物車動畫效果案例地址

https://www.helloweba.net/javascript/294.html

首先載入jQuery庫文件和jquery.fly.min.js插件。

接着，將商品信息html結構佈置好，本例中，我們用四個商品並排佈置，每個商品box中包括有商品圖片、價格、名稱以及加入購物車按鈕等信息。

前後臺交互用的協議

答案：http協議

前端信息存儲（session和cookie）

答案：session與cookie的區別

（1）Cookie以文本文件格式存儲在瀏覽器中，而session存儲在服務端它存儲了限制數據量。它只允許4kb它沒有在cookie中保存多個變量。

（2）cookie的存儲限制了數據量，只允許4KB，而session是無限量的

（3）我們可以輕鬆訪問cookie值但是我們無法輕鬆訪問會話值，因此它更安全

（4）設置cookie時間可以使cookie過期。但是使用session-destory（），我們將會銷燬會話。

總結：如果我們需要經常登錄一個站點時，最好用cookie來保存信息，要不然每次登陸都特別麻煩，如果對於需要安全性高的站點以及控制數據的能力時需要用會話效果更佳，當然我們也可以結合兩者，使網站按照我們的想法進行運行

盒子模型分爲幾種

答案：

隨着CSS3的興起，現在的盒模型尺寸基準有兩種，分別是默認的content-box和border-box
默認情況下我們代碼中元素的是以content-box作爲標準的盒子
理論上說，content-box和border-box的主要區別是二者的盒子的寬度是否包含元素的邊框和內邊距。

js的防抖和節流

答案：

函數防抖：將幾次操作合併爲一此操作進行。原理是維護一個計時器，規定在delay時間後觸發函數，但是在delay時間內再次觸發的話，就會取消之前的計時器而重新設置。這樣一來，只有最後一次操作能被觸發。

函數節流：使得一定時間內只觸發一次函數。原理是通過判斷是否到達一定時間來觸發函數。

區別：函數節流不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函數，而函數防抖只是在最後一次事件後才觸發一次函數。比如在頁面的無限加載場景下，我們需要用戶在滾動頁面時，每隔一段時間發一次 Ajax 請求，而不是在用戶停下滾動頁面操作時纔去請求數據。這樣的場景，就適合用節流技術來實現。

html語義化標籤的理解

1).常用的語義化標籤包括:

<header></header>頭部

<nav></nav>導航欄

<section></section>區塊（有語義化的div）

<main></main>主要區域

<artical></artical>主要內容

<aside></aside>側邊欄

<footer></footer>底部

2).頁面佈局

3).總結

其實總結起來也就是一句話，沒有沒有用的東西，div等無語義化的標籤有他們的好處，語義化標籤也有語義化標籤的好處，不可一概而論。但是語義化標籤也不是亂用的，視我們頁面需求與情況而定。

2、h5中新增的屬性，如自定義屬性data、類名className等；新增表單元素；拖拽Drag。

3、h5中新增的API、修改的API、廢棄的API稍作了解（離線存儲、audio、video）。

Css

答案：

1、CSS選擇器（三大特性）。

2、BFC機制。

3、盒模型。

4、CSS模塊化開發（封裝）；SCSS和LESS的使用。

5、屏幕適配以及頁面自適應。

6、CSS3中新增的選擇器。

7、CSS3中新增的屬性，transform、trasition、animation等。

前端兼容問題

答案：

1瀏覽器兼容問題一：不同瀏覽器的標籤默認的外補丁和內補丁不同

問題症狀：隨便寫幾個標籤，不加樣式控制的情況下，各自的margin 和padding差異較大。

碰到頻率:100%

解決方案：CSS裏 *{margin:0;padding:0;}

備註：這個是最常見的也是最易解決的一個瀏覽器兼容性問題，幾乎所有的CSS文件開頭都會用通配符*來設置各個標籤的內外補丁是0；

2瀏覽器兼容問題二：塊屬性標籤float後，又有橫行的margin情況下，在IE6顯示margin比設置的大

問題症狀：隨便寫幾個標籤，不加樣式控制的情況下，各自的margin 和padding差異較大。

碰到頻率:100%

解決方案：CSS裏 *{margin:0;padding:0;}

備註：這個是最常見的也是最易解決的一個瀏覽器兼容性問題，幾乎所有的CSS文件開頭都會用通配符*來設置各個標籤的內外補丁是0。

3瀏覽器兼容問題三：設置較小高度標籤（一般小於10px），在IE6，IE7，遨遊中高度超出自己設置高度

問題症狀：IE6、7和遨遊裏這個標籤的高度不受控制，超出自己設置的高度

碰到頻率：60%

解決方案：給超出高度的標籤設置overflow:hidden;或者設置行高line-height 小於你設置的高度。

備註：這種情況一般出現在我們設置小圓角背景的標籤裏。出現這個問題的原因是IE8之前的瀏覽器都會給標籤一個最小默認的行高的高度。即使你的標籤是空的，這個標籤的高度還是會達到默認的行高

4瀏覽器兼容問題四：行內屬性標籤，設置display:block後採用float佈局，又有橫行的margin的情況，IE6間距bug

問題症狀：IE6裏的間距比超過設置的間距

碰到機率：20%

解決方案：在display:block;後面加入display:inline;display:table;

備註：行內屬性標籤，爲了設置寬高，我們需要設置display:block;(除了input標籤比較特殊)。在用float佈局並有橫向的margin後，在IE6下，他就具有了塊屬性float後的橫向margin的bug。不過因爲它本身就是行內屬性標籤，所以我們再加上display:inline的話，它的高寬就不可設了。這時候我們還需要在display:inline後面加入display:talbe。

5瀏覽器兼容問題五：圖片默認有間距

問題症狀：幾個img標籤放在一起的時候，有些瀏覽器會有默認的間距，加了問題一中提到的通配符也不起作用。

碰到機率：20%

解決方案：使用float屬性爲img佈局

備註：因爲img標籤是行內屬性標籤，所以只要不超出容器寬度，img標籤都會排在一行裏，但是部分瀏覽器的img標籤之間會有個間距。去掉這個間距使用float是正道。（我的一個學生使用負margin，雖然能解決，但負margin本身就是容易引起瀏覽器兼容問題的用法，所以我禁止他們使用）

6瀏覽器兼容問題六：標籤最低高度設置min-height不兼容

問題症狀：因爲min-height本身就是一個不兼容的CSS屬性，所以設置min-height時不能很好的被各個瀏覽器兼容

碰到機率：5%

解決方案：如果我們要設置一個標籤的最小高度200px，需要進行的設置爲：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

備註：在B/S系統前端開時，有很多情況下我們又這種需求。當內容小於一個值（如300px）時。容器的高度爲300px；當內容高度大於這個值時，容器高度被撐高，而不是出現滾動條。這時候我們就會面臨這個兼容性問題。

7瀏覽器兼容問題七：透明度的兼容CSS設置

做兼容頁面的方法是：每寫一小段代碼（佈局中的一行或者一塊）我們都要在不同的瀏覽器中看是否兼容，當然熟練到一定的程度就沒這麼麻煩了。建議經常會碰到兼容性問題的新手使用。很多兼容性問題都是因爲瀏覽器對標籤的默認屬性解析不同造成的，只要我們稍加設置都能輕鬆地解決這些兼容問題。如果我們熟悉標籤的默認屬性的話，就能很好的理解爲什麼會出現兼容問題以及怎麼去解決這些兼容問題。

/* CSS hack*/

我很少使用hacker的，可能是個人習慣吧，我不喜歡寫的代碼IE不兼容，然後用hack來解決。不過hacker還是非常好用的。使用hacker我可以把瀏覽器分爲3類：IE6 ；IE7和遨遊；其他（IE8 chrome ff safari opera等）

◆IE6認識的hacker 是下劃線_ 和星號 *

◆IE7 遨遊認識的hacker是星號 *

比如這樣一個CSS設置：

height:300px;*height:200px;_height:100px;

IE6瀏覽器在讀到height:300px的時候會認爲高時300px；繼續往下讀，他也認識*heihgt，所以當IE6讀到*height:200px的時候會覆蓋掉前一條的相沖突設置，認爲高度是200px。繼續往下讀，IE6還認識_height,所以他又會覆蓋掉200px高的設置，把高度設置爲100px；

IE7和遨遊也是一樣的從高度300px的設置往下讀。當它們讀到*height200px的時候就停下了，因爲它們不認識_height。所以它們會把高度解析爲200px，剩下的瀏覽器只認識第一個height:300px;所以他們會把高度解析爲300px。因爲優先級相同且想衝突的屬性設置後一個會覆蓋掉前一個，所以書寫的次序是很重要的

數組去重

冒泡排序

閉包

從輸入url到頁面呈現經歷的過程

分爲4個步驟：

（1），當發送一個URL請求時，不管這個URL是Web頁面的URL還是Web頁面上每個資源的URL，瀏覽器都會開啓一個線程來處理這個請求，同時在遠程DNS服務器上啓動一個DNS查詢。這能使瀏覽器獲得請求對應的IP地址。

（2），瀏覽器與遠程Web服務器通過TCP三次握手協商來建立一個TCP/IP連接。該握手包括一個同步報文，一個同步-應答報文和一個應答報文，這三個報文在瀏覽器和服務器之間傳遞。該握手首先由客戶端嘗試建立起通信，而後服務器應答並接受客戶端的請求，最後由客戶端發出該請求已經被接受的報文。

（3），一旦TCP/IP連接建立，瀏覽器會通過該連接向遠程服務器發送HTTP的GET請求。遠程服務器找到資源並使用HTTP響應返回該資源，值爲200的HTTP響應狀態表示一個正確的響應。

（4），此時，Web服務器提供資源服務，客戶端開始下載資源。

請求返回後，便進入了我們關注的前端模塊

簡單來說，瀏覽器會解析HTML生成DOM Tree，其次會根據CSS生成CSS Rule Tree，而javascript又可以根據DOM API操作DOM

2019年面試問題及部分答案總結