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

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

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

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

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

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

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

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

(4)讓頁(yè)面盡早開(kāi)始顯示

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

2、cookie sessionStorage localStorage 區(qū)別

區(qū)別：

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

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

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

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

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

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

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

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

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

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

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

4、清除浮動(dòng)的方式

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

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

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

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

靜態(tài)布局

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

自適應(yīng)布局

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

響應(yīng)式布局

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

彈性布局(flex布局)

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

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

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() 從開(kāi)頭查詢(xún) 查詢(xún)到即結(jié)束 、 lastIndexOf() 從末尾查詢(xún) 查詢(xún)到即結(jié)束、 reverse() 數(shù)組倒序

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

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

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

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

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

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

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

8、字符串方法

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

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

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

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