前端面試題目整理

 

1.請說出三種減小頁面加載時間的方法。
* 1.優化圖片
* 2.優化css,壓縮合並css
* 3.減小http請求（合併文件，合併圖片）

 

2.解釋下CSS sprites ,以及你要如何在頁面或網站中使用它。
* CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background-repeat」,「background-position」的組合進行背景定位，background-position能夠用數字精確的定位出背景圖片的位置。

 

3.簡述一下你對HTML語義化的理解？
* 用正確的標籤作正確的事情。
* HTML語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析。即便在沒有樣式css狀況下也以一種文檔格式顯示，而且是容易閱讀的。

 

 

4.爲何要推出es6,相較es5有啥好處？（es6，實際上，就是一種新的javascript規範）
* es6，它包含了一些很棒的新特性，能夠更加方便的實現不少複雜的操做，提升開發人員的效率。

你所不知道的es6新特性

 

5.原生forEach和map的區別以及兼容

http://www.javashuo.com/article/p-hjrfcprx-cq.html

 

 

前端開發的優化問題

一、減小http請求次數：css spirit,data url

二、JS，CSS源碼壓縮

三、用innerHTML代替DOM操做，減小DOM操做次數，優化javascript性能

四、當設置的樣式不少時設置className而不是直接操做style

五、少用全局變量

六、緩存DOM節點查找的結果

七、圖片預加載

八、避免在頁面的主體佈局中使用table，table要等其中的內容徹底加載以後纔會顯示出來，顯示比div+css佈局慢

清除浮動

一、在浮動元素後面添加空標籤 clear:both

二、給父標籤使用overflow:hidden/auto；zoom:1

三、父級div定義，使用僞類：after和zoom

.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}

　　zoom:1的做用： 觸發IE下的hasLayout。zoom是IE瀏覽器專有屬性，能夠設置或檢索對象的縮放比例。

　　當設置了zoom的值以後，所設置的元素就會擴大或縮小，高度寬度就會從新計算了，這裏一旦改變zoom值時其實也會發生從新渲染，運用這個原理，也就解決了ie下子元素浮動時候父元素不隨着自動擴大的問題。

有哪些隱藏內容的方法（同時還要保證屏幕閱讀器可用）

 　　display:none; visibility:hidden;overflow:hidden;

一、display:none;的缺陷

　　a.搜索引擎可能認爲被隱藏的文字屬於垃圾信息而被忽略

　　b.屏幕閱讀器（是爲視覺上有障礙的人設計的讀取屏幕內容的程序）會忽略被隱藏的文字。

二、visibility:hidden;的缺陷

　　a.隱藏的內容會佔據他所應該佔據的物理空間

三、overflow:hidden;一個比較合理的方法

.texthidden{display:block;overflow:hidden;width:0;height:0}

　　將寬度和高度設定爲0，而後超過部分隱藏，就會彌補上述1、二方法中的缺陷，也達到了隱藏內容的目的。

css動畫和js動畫的優缺點

CSS3動畫

　　優勢：

　　　　1.在性能上會稍微好一點，瀏覽器會對CSS3的動畫作一些優化（好比專門新建一個圖層用來跑動畫）

　　　　2.代碼相對簡單

　　缺點：

　　　　1.在動畫控制上不夠靈活

　　　　2.兼容性很差

　　　　3.部分動畫功能沒法實現（如滾動動畫，視差滾動等）

JAVASCRIPT動畫

　　優勢 ：

　　　　1.控制能力很強，能夠單幀的控制、變換

　　　　2.兼容性好，寫得好徹底能夠兼容IE6，且功能強大

　　缺點：

　　　　計算沒有css快，另外常常須要依賴其餘的庫

總結：

　　不復雜的動畫徹底能夠用css實現，複雜一些的，或者須要交互的時候，用js會靠譜一些

cookies，sessionStorage和localStorage的區別

　　cookie：

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

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

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

　　存儲大小：

　　　　cookie數據大小不能超過4k

　　　　sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

　　有效時間：

　　　　localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據

　　　　sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除

　　　　cookie 設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉

　　做用域不一樣：

　　　　sessionStorage不在不一樣瀏覽器窗口中共享，即便是同一個頁面

　　　　localStorage在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。

　　　

資料連接：http://www.javashuo.com/article/p-wfdauyca-bd.html