1、前端如何實現優化性能

(1)減少網絡時間

①使用DNS緩存技術 ? ②減少需要傳輸的文件尺寸 ? ③加快文件傳輸速度

(2)減少發送的請求數量

①利用瀏覽器緩存 ? ②使用合并的圖片文件

(3)提高瀏覽器下載的并發度

①JS文件放在HTML文檔最后 ? ②使用多個域名

(4)讓頁面盡早開始顯示

①將樣式表的引用放在HTML文檔的開頭，將JS的引用放在HTML文檔的最后，這樣JS文件的下載和執行會在所有頁面都下載完成后，不會阻止其他頁面元素的顯示。從用戶感官上說，JS文件的下載和執行時間完全不會被用戶感覺到。

2、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也是在所有同源窗口中都是共享的

3、Canvas和SvG的區別是什么?

兩者的區別如下：

一旦 Canvas繪制完成將不能訪問像素或操作它;任何使用SVG繪制的形狀都能被記憶和操作，可以被瀏覽器 再次顯示。

Canvas對繪制動畫和游戲非常有利;SVG對創建圖形(如CAD)非常有利。

因為不需要記住以后事情，所以 Canvas運行更快;因為為了之后的操作，SVG需要記錄坐標，所以運行比較 緩慢。

在 Canvas中不能為繪制對象綁定相關事件;在SVG中可以為繪制對象綁定相關事件。

Canvas繪制出的是位圖，因此與分辨率有關;SvG繪制出的是矢量圖，因此與分辨率無關

4、清除浮動的方式

第一種 清除浮動方式 clear 在浮動元素的同級末尾加上 一個空div 并添加樣式 clear屬性

第二種 當子元素發生浮動 使用 overflow屬性會強制性包裹起來浮動內容 而達到清除浮動的效果

第三種：用偽類去實現清除浮動 ： after偽類 來實現清除浮動 有借助第二種方式的方法

5、談談你對靜態布局、自適應布局、響應式布局、彈性布局的理解?

靜態布局

描述：就是設定好的長和寬，大小不會改變，不管你多大的屏幕它都是那么大，分辨率是不會改變的

自適應布局

描述：不同屏幕分辨率下，保持原有展示方式。元素的尺寸大小可以改變，但展示方式不會改變

響應式布局

描述：不同屏幕分辨率下，展示方式不同

彈性布局(flex布局)

描述：目前比較流行的一種布局，使用傳統布局難以實現一些復雜的布局，使用flex布局實現就變得非常容易

6、JS判斷數據類型的方法

1、typeof

2、instanceof

3、constructor

4、toString

5、is Array 判斷是否為數組

7、數組的方法

push() 末尾添加 、 join() 數組轉化字符串、 pop() 末尾刪除 、 unshift() 首個添加、 shift() 第一個刪除 、 sort() 排序、 concat() 合并數組 、 slice() 截取 、 splice() 數組更新、 indexOf() 從開頭查詢 查詢到即結束 、 lastIndexOf() 從末尾查詢 查詢到即結束、 reverse() 數組倒序

map()方法 給數組的每個元素做特殊的處理 返回一個新的數組

filter() 方法 過濾一個數組中符合要求的元素，返回一個新數組

some()方法 用于數組判斷 當數組中只要有一個符合條件就返回 true

forEach此方法是用來代替 for 循環遍歷數組

every返回值是布爾值，判斷數組中的值是否都符合條件，如果是則返回true，有一個不符合則返回false

find 、findLast返回值為符合條件的對應的那個值后者從后往前遍歷

includes方法用來判斷一個數組是否包含一個指定的值，包含就返回 true , 否則返回false。

8、字符串方法

charAt() 返回指定位置字符 concat() 連接字符串 replace() 替換 split() 分割 indexOf() 從前往后第一次出現 lastindexOf() 從后往前第一次出現 toLowerCase() 轉換為小寫 toUpperCase() 轉換為大寫 clice()字符串截取 subString() 字符串截取

includes()：返回布爾值，表示是否找到了參數字符串。 startsWith()：返回布爾值，表示參數字符串是否在原字符串的頭部。 endsWith()：返回布爾值，表示參數字符串是否在原字符串的尾部。 repeat()方法返回一個新字符串，表示將原字符串重復n次

padStart()和padEnd()接受兩個參數第一個參數是字符串補全生效的最大長度，第二個參數是用來補全的字符串。少補多刪

以上就是“web前端面試問題，金三銀四有備無患”，你能回答上來嗎?如果想要了解更多的Java面試題相關內容，可以關注動力節點Java官網。