不少同學(xué)現(xiàn)在面臨這工作發(fā)展前景不樂觀，計(jì)劃這新年過后換一份更有前景的工作，你是不是也在計(jì)劃這呢?那么肯定是需要提前坐好準(zhǔn)備的，小編的這份面試題希望可以幫助到你：

1、前端如何實(shí)現(xiàn)優(yōu)化性能

(1)減少網(wǎng)絡(luò)時(shí)間

①使用DNS緩存技術(shù) ? ②減少需要傳輸?shù)奈募叽?? ③加快文件傳輸速度

(2)減少發(fā)送的請求數(shù)量

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

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

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

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

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

2、cookie sessionStorage localStorage 區(qū)別

區(qū)別：

cookie數(shù)據(jù)始終在同源的http請求中攜帶(即使不需要)，即cookie在瀏覽器和服務(wù)器間來回傳遞，而sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)送給服務(wù)器，僅在本地保存。cookie數(shù)據(jù)還有路徑(path)的概念，可以限制cookie只屬于某個(gè)路徑下

存儲大小限制也不同，cookie數(shù)據(jù)不能超過4K，同時(shí)因?yàn)槊看蝖ttp請求都會攜帶cookie、所以cookie只適合保存很小的數(shù)據(jù)，如會話標(biāo)識。sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，可以達(dá)到5M或更大

數(shù)據(jù)有效期不同，sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉之前有效;localStorage：始終有效，窗口或?yàn)g覽器關(guān)閉也一直保存，因此用作持久數(shù)據(jù);cookie：只在設(shè)置的cookie過期時(shí)間之前有效，即使窗口關(guān)閉或?yàn)g覽器關(guān)閉

作用域不同，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個(gè)頁面;localstorage在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的

3、Canvas和SvG的區(qū)別是什么?

兩者的區(qū)別如下：

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

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

因?yàn)椴恍枰涀∫院笫虑椋?Canvas運(yùn)行更快;因?yàn)闉榱酥蟮牟僮鳎琒VG需要記錄坐標(biāo)，所以運(yùn)行比較 緩慢。

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

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

4、清除浮動的方式

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

第二種 當(dāng)子元素發(fā)生浮動 使用 overflow屬性會強(qiáng)制性包裹起來浮動內(nèi)容 而達(dá)到清除浮動的效果

第三種：用偽類去實(shí)現(xiàn)清除浮動 ： after偽類 來實(shí)現(xiàn)清除浮動 有借助第二種方式的方法

5、談?wù)勀銓o態(tài)布局、自適應(yīng)布局、響應(yīng)式布局、彈性布局的理解?

靜態(tài)布局

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

自適應(yīng)布局

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

響應(yīng)式布局

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

彈性布局(flex布局)

描述：目前比較流行的一種布局，使用傳統(tǒng)布局難以實(shí)現(xiàn)一些復(fù)雜的布局，使用flex布局實(shí)現(xiàn)就變得非常容易

6、JS判斷數(shù)據(jù)類型的方法

1、typeof

2、instanceof

3、constructor

4、toString

5、is Array 判斷是否為數(shù)組

7、數(shù)組的方法

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

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

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

some()方法 用于數(shù)組判斷 當(dāng)數(shù)組中只要有一個(gè)符合條件就返回 true

forEach此方法是用來代替 for 循環(huán)遍歷數(shù)組

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

find 、findLast返回值為符合條件的對應(yīng)的那個(gè)值后者從后往前遍歷

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

8、字符串方法

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

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

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

以上就是“必過的一些web前端基礎(chǔ)面試題”，你能回答上來嗎?如果想要了解更多的Java面試題相關(guān)內(nèi)容，可以關(guān)注動力節(jié)點(diǎn)Java官網(wǎng)。