web前端面試題
1、前端如何實現優化性能
(1)減少網絡時間 ①使用DNS緩存技術 ? ②減少需要傳輸的文件尺寸 ? ③加快文件傳輸速度
(2)減少發送的請求數量 ①利用瀏覽器緩存 ? ②使用合并的圖片文件
(3)提高瀏覽器下載的并發度 ①JS文件放在HTML文檔最后 ? ②使用多個域名
(4)讓頁面盡早開始顯示
①將樣式表的引用放在HTML文檔的開頭，將JS的引用放在HTML文檔的最后，這樣JS文件的下載和執行會在所有頁面都下載完成后，不會阻止其他頁面元素的顯示。從用戶感官上說，JS文件的下載和執行時間完全不會被用戶感覺到。
2、瀏覽器緩存
引用地址
3、cookie sessionStorage localStorage 區別
區別：
1、cookie數據始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和服務器間來回傳遞，而sessionStorage和localStorage不會自動把數據發送給服務器，僅在本地保存。cookie數據還有路徑（path）的概念，可以限制cookie只屬于某個路徑下
2、存儲大小限制也不同，cookie數據不能超過4K，同時因為每次http請求都會攜帶cookie、所以cookie只適合保存很小的數據，如會話標識。sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大
3、數據有效期不同，sessionStorage：僅在當前瀏覽器窗口關閉之前有效；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，因此用作持久數據；cookie：只在設置的cookie過期時間之前有效，即使窗口關閉或瀏覽器關閉
4、作用域不同，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的
4、Canvas和SvG的區別是什么？
兩者的區別如下：
一旦 Canvas繪制完成將不能訪問像素或操作它；任何使用SVG繪制的形狀都能被記憶和操作，可以被瀏覽器 再次顯示。
Canvas對繪制動畫和游戲非常有利；SVG對創建圖形（如CAD）非常有利。
因為不需要記住以后事情，所以 Canvas運行更快；因為為了之后的操作，SVG需要記錄坐標，所以運行比較 緩慢。
在 Canvas中不能為繪制對象綁定相關事件；在SVG中可以為繪制對象綁定相關事件。
Canvas繪制出的是位圖，因此與分辨率有關；SvG繪制出的是矢量圖，因此與分辨率無關
5、清除浮動的方式
第一種 清除浮動方式 clear 在浮動元素的同級末尾加上 一個空div 并添加樣式 clear屬性
第二種 當子元素發生浮動 使用 overflow屬性會強制性包裹起來浮動內容 而達到清除浮動的效果
第三種：用偽類去實現清除浮動 ： after偽類 來實現清除浮動 有借助第二種方式的方法
6、談談你對靜態布局、自適應布局、響應式布局、彈性布局的理解？
靜態布局
描述：就是設定好的長和寬，大小不會改變，不管你多大的屏幕它都是那么大，分辨率是不會改變的
自適應布局
描述：不同屏幕分辨率下，保持原有展示方式。元素的尺寸大小可以改變，但展示方式不會改變
響應式布局
描述：不同屏幕分辨率下，展示方式不同
彈性布局（flex布局）
描述：目前比較流行的一種布局，使用傳統布局難以實現一些復雜的布局，使用flex布局實現就變得非常容易
7、async和defer的區別
defer和async是script標簽的兩個屬性，用于在不阻塞頁面文檔解析的前提下，控制腳本的下載和執行。
defer：用于開啟新的線程下載腳本文件，并使腳本在文檔解析完成后執行 - js的執行在所有的元素都解析完成之后執行。
async：新增屬性，用于異步下載腳本文件，下載完畢立即解釋執行代碼 - js加載完成之后立即執行。
8、JS判斷數據類型的方法
1、typeof
2、instanceof
3、constructor
4、toString
5、is Array 判斷是否為數組
6、通過原型 Object.prototype.toString.call(val) === ‘[object Object]’
9、數組去重
利用ES6 Set去重（ES6中最常用）
利用for嵌套for，然后splice去重（ES5中最常用）
10、var let const的區別
①var有變量提升 let、const沒有變量提升
②var除函數內部都為全局變量 let、const都屬于塊級作用域
③var可以重復定義，會覆蓋之前的變量 let、const不能重復定義，報錯
④var沒有暫時性死區 let、const有暫時性死區
⑤var聲明為全局變量的時候會掛載到window let、 const不會掛載到window
⑥var、let為變量 const為常量
11、new操作符具體做了哪些事情
①new會在內存中創建一個新的空對象
②new會讓this指向這個對象
③執行構造函數里的代碼，給這個新對象添加屬性和方法
④new 會返回這個新對象（所以構造函數不需要return）
12、js的繼承
1、原型鏈繼承
優點：父類方法和屬性可以復用
缺點：1、父類中的引用數據類型會被共享（子類修改父類中的引用數據，另一個子類跟著改動）2、不能傳遞參數
function Person() {this.name = "小明"this.eats = ['蘋果']this.getName = function() {console.log(this.name)}
}
Person.prototype.get = () => {console.log("Person.prototype上的方法")
}
