P1 HTML5面試題

1、HTML5結構語義化

簡單來說就是在合適的時候用正確的標簽做正確的事

好處：

對于開發(fā)者：便于代碼的開發(fā)和維護，可以使代碼的可閱讀性更強

對于瀏覽器：有利于SEO，搜索引擎的爬蟲依賴于標簽確定上下文和各個關鍵字的權重

方便其他設備的解析，可以提高可訪問性

2、HTML5的新特性

HTML已經(jīng)不是SGML的子集，主要是關于圖像、位置、存儲、多任務等功能的增加

video、audio用于媒介回放

localStorage，用于將數(shù)據(jù)存儲在本地

artice、footer、header、nav、section，語義化標簽

calendar、date、time、email、url、search，表單控件

webworker、websocke、Geolocationt等新技術

對純表現(xiàn)和對可用性產(chǎn)生負面影響的元素進行刪除，如basefont、big、center、frame等

對于瀏覽器不支持的，可以通過document。createElement創(chuàng)造標簽，或者是使用一些成熟的庫，如html5shim

3、cookie、sessionStorage、locaStroge的區(qū)別

cookie可以在標識當前使用者的身份，始終會在同源的http請求中攜帶，可以在瀏覽器和服務器之前傳遞，sessionStorage、locaStroge不會將數(shù)據(jù)發(fā)送給服務器，僅在本地保存

存儲大小：cookie數(shù)據(jù)大小不能超過4k，sessionStorage、locaStroge可以達到5M或者更大

有效時間：locaStroge即使關閉瀏覽器數(shù)據(jù)都不會丟失，除非主動刪除

sessionStorage在當前瀏覽器窗口關閉后會自動刪除

cookie在有效期之內(nèi)可以一直訪問，有效期過后會自動刪除

4、瀏覽器的渲染機制

處理HTML并創(chuàng)建DOM樹

創(chuàng)建css構建CSSOM樹

將DOM與CSSOM合并為一個渲染樹

根據(jù)渲染樹進行布局，計算每一個節(jié)點的位置

調(diào)用GPU繪制，合成圖層顯示在屏幕上

在構建CSSOM樹會阻塞頁面的渲染，應該盡量避免過多層疊，當HTMl遇到js會暫停dom的渲染，js加載完成后會從暫停的地方開始重新渲染，首頁應該避免加載js文件

5、重繪和回流

重繪是當節(jié)點需要更改外觀但不影響布局，如改變一個div的背景顏色

回流是指布局或者幾何屬性需要改變（計算機需要重新計算在設備視口內(nèi)的確切位置和大?。┗亓饕欢〞M行重繪，但是重繪不一定會引發(fā)回流

會導致出現(xiàn)回流的操作：

添加或者刪除可見的DOM元素

元素的位置發(fā)生變化（外邊框、內(nèi)邊框、邊框大小、寬高等）

內(nèi)容發(fā)生變化（文本變化或者是圖片被另一個不同尺寸的圖片代替）

減少方式（頁面的性能優(yōu)化）

批量的修改DOM，

對于復雜的效果，使用絕對定位讓其脫離文檔流

6、自定義屬性（data）用法及其優(yōu)勢

獲取和設置

傳統(tǒng)方法：getAttribute獲取，setAttribute設置（沒有兼容問題）

HTML5新方法：data-變量名，通過當前節(jié)點的對象.dataset.變量名獲取，通過當前節(jié)點的對象.dataset.變量名="值"進行設置（有兼容問題）

優(yōu)點：可以使頁面擁有更好的交互體驗( 不需要使用Ajax或去服務器查詢數(shù)據(jù) )

P2、CSS面試題

1、box-sizing的有效值以及對應的規(guī)則

語法：box-sizing：content | border-box | inherit

box-sizing：content(默認值) 內(nèi)容+border+padding = width

box-sizing：border-box(怪異盒子模型) 設置的邊框內(nèi)邊距是包含在width內(nèi)部

box-sizing：inherit 從父元素繼承值

2、移動端的適配

meat viewport（視口），移動端瀏覽器不進行設置視口默認為980px，通過device-width將視口的寬度設置為設備的寬度

device-width屬性：initial-scale--第一次進入頁面的初始比例，minimum-scale：允許縮小最小比例，maximum-scale：允許放大最大比例，user-scalable：允許使用者縮放

圖片的適配：img{max-width：100%}圖片會自動縮放

媒體查詢：針對不同的設備提前為網(wǎng)頁設定各種css樣式，自動檢測屏幕寬度，加載對應的css文件

動態(tài)rem方案（等比縮放）：px、em、rem區(qū)別

px-像素屏幕顯示數(shù)據(jù)的基本點，em-相對單位（相對于父元素），rem-相對單位（相對于根元素）

P3、js高頻面試題

1、如何最小化重繪和回流

需要對元素進行復雜操作時，可以先隱藏，操作完成后再顯示

需要創(chuàng)建多個DOM節(jié)點時，使用DocumentFragment創(chuàng)建完成后一次性加入document

緩存Layout屬性值，如：var left = elem.offssetLeft，這樣多次使用left只會產(chǎn)生一次回流，

盡量避免table布局（table元素觸發(fā)回流會導致table內(nèi)部所有元素進行回流）

2、js的作用域鏈

全局函數(shù)無法查看局部函數(shù)的內(nèi)部細節(jié)，但是局部函數(shù)可以向上查找，直到全局

如果在當前函數(shù)作用域中沒用找到該屬性和方法，會向上查找，直到全局

3、跨域問題和同源策略

同源策略就是瀏覽器的一種機制，只允許同源，也就是用協(xié)議、同域名、同端口的情況下才能進行數(shù)據(jù)交互

解決方案：

1）JSONP，主要依賴的時script標簽不受同源策略的影響，src指向某一個接口地址，指定callback回調(diào)函數(shù)名稱

2）CORS，依賴于服務器( 后端 )對前端請求體信息進行放行

3）請求代理，前端訪問不存在跨域問題的代理服務器，代理服務器去訪問目標服務器

2、原型鏈

如果一個對象想要訪問一個屬性，對象會在自己本身上找這個屬性，沒有會通過__proto__在其對應的構造函數(shù)中的prototype中尋找，沒有就向上查找，直到Object，這個查找的過程就叫原型鏈