前端面試題集錦

時間 2019-12-06

標籤端面試題集錦简体版

原文原文鏈接

又一年校招季~這是近來收集的前端面試題，共勉。
這裏寫的答案有些比較簡略，只是給出一個方向吧，你們能夠本身去深刻去學習探究。javascript

『HTML&CSS基礎』

【HTML】

行內元素
關注行內置換元素相似inline-block方式展示 input textarea img selectcss
瀏覽器內核
基於Webkit：
Chrome - blink、騰訊X五、UC U三、華爲T9
基於Gecko：Firefox
基於Trident：IE
基於Presto：Opera
兼備Webkit&Trident：獵豹、360html
W3C標準
包括結構(xhtml,xml)、表現(css)、行爲(ecmascript、dom)的標準。更好地規範瀏覽器對頁面渲染，使得同一套網頁方案儘量在多套瀏覽器中表現一致。提升開發者開發效率和用戶體驗前端
Doctype
用來告訴瀏覽器以什麼文檔類型解析html，沒有的話，會按照向下兼容的怪異模式對文檔進行解析
h4及如下須要引用dtd聲明，dtd有標準型和過渡型兩種。二者區別可忽略
h5不急於SGML標準，所以不須要引用dtdjava
標籤語義化的重要性
1.便於瀏覽器、搜索引擎解析
2.在沒css狀況也以一種文檔形式展示，便於閱讀
3.有利於SEO
4.有利於代碼的閱讀和維護ios
strong與em的異同
同：都是對文本起強調做用
異：em以斜體顯示文本，strong更利於SEO識別語義web
SEO 詳細
可分爲白帽SEO和黑帽SEO
SEO的主要方面：
1.網站標題、關鍵字、描述 (meta)
2.網站結構佈局優化：目錄層級不要太多，儘可能讓Spider跳轉3次就能夠到達網站的任意一個內頁
3.網站代碼優化：
SEO會過濾掉display none的元素、利用<meta description和<meta keywords>、html語義化面試
圖片格式
png-8 256色、png-2四、gif、apng(Chrome不支持)、svg、webp(ios不支持)ajax
link vs @import
區別：
1.link無兼容性缺點，@import僅兼容IE5+
2.link權重高於import
3.link外鏈的css與html是並行加載的，而import需等html加載完才加載編程

【CSS】

CSS盒模型
包括 margin padding border content
IE盒模型 (lt IE8)：content包含padding和border
如何改變：box-sizing
CSS可繼承屬性
與font有關的屬性如font-size、font-family、font-weight等
line-height、color、text-align、text-indent等
BFC
不一樣的display會參與不一樣的環境(formatting context)去渲染，而block參與BFC
BFC特色
1.同個BFC內盒子產生margin塌陷
2.計算BFC的高度時，考慮BFC所包含的全部元素，連浮動元素也參與計算
3.BFC就是頁面上的一個隔離的獨立容器，裏外互相不影響
產生新BFC
1.float屬性不爲none
2.position爲absolute或fixed
3.display爲inline-block | table-cell | table-caption | flex | inline-flex
4.overflow不爲visible
清除浮動
1.造成新的BFC
2.新增div 設置clear:both
3.在父元素添加:after僞類，設置content:"";display:block;clear:both;zoom:1
position
absolute | relative | static | sticky | fixed

『HTML5』

【新標籤】

新增的標籤
1.佈局，內容 <header> <section> <nav> <article> <aside> <mark> <footer>
2.表單 <datalist> <keygen> <output>
3.媒體 <canvas> <video> <audio> <figure> <figcaption> <source>
4.狀態 <progress> <meter>
5.冷門 <command> <details> <summary>
表單新類型
email url number tel search color DatePicker
表單新屬性
autocomplete autofocus require pattern placeholder multiple

【新API】

交互
重力感應 DeviceOrientation
手機加速傳感器 DeviceMotion
history 詳細
以Pjax方式實現SPA history.pushState history.replaceState 解決ajax不能後退前進問題
儲存
客戶端儲存：localStorage sessionStorage>只存在一個會話週期內
跨域
postMessage

【Web app】

常見dpr
ip6 二、ip6+ 三、nexus5 3
移動端適配
1.自適應方式
2.viewport方式
3.rem方式
4.scale()方式縮放
經常使用meta
IE相關
避免IE使用兼容模式 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
爲不支持viewport的IE Mobile設定寬度 <meta name="MobileOptimized" content="320" />
是否對手持設備友好 <meta name="HandheldFriendly" content="true" />
UC瀏覽器
強制豎屏 <meta name="screen-orientation" content="portrait" />
強制全屏 <meta name="full-screen" content="yes" />
應用模式 <meta name="browsermode" content="application" />
X5瀏覽器
強制豎屏 <meta name="x5-orientation" content="portrait" />
強制全屏 <meta name="x5-fullscreen" content="yes" />
應用模式 <meta name="x5-page-mode" content="app" />
360
開啓極速模式 <meta name="renderer" content="webkit" />
iphone相關
啓動webapp功能刪除工具欄和菜單欄 <meta name="apple-mobile-web-app-capable" content="yes">
控制狀態欄顏色 <meta name="apple-mobile-web-app-status-bar-style" content="black" />
開啓號碼或郵箱檢測 <meta name="format-detection" content="telephone=no" />
添加主屏幕icon <link rel="apple-touch-icon" href="touch-icon-iphone.png">

『CSS3』

【新屬性】

flex、column、文本換行、媒體查詢、待補充……

開啓GPU加速

注意啓用-webkit-backface-visibility:hidden; -webkit-perspective:1000;解決啓用transform3d頁面閃爍和抖動問題

【動畫】

CSS3動畫性能

『Javascript』

【原生】

js數據類型
5基本 string number boolean undefined null 儲存在棧內存中
1複雜 object 儲存在堆內存中
this指向
this老是指向函數的直接調用者（而非間接調用者）
null和undefined區別
null表示一個無的對象
undefined表示一個無的初始值。表示此處應該有值，但尚未定義，即缺乏值
new的具體做用
如var p = new P();
var p = {}; //建立新對象
p.__proto__ = P.prototype; //繼承構造函數的原型
P.call(p); //修改this指向
建立對象方式
對象字面量、工廠模式、構造函數、原型模式、構造函數+原型
原型原型鏈
每一個對象都有一個屬性 prototype 當須要從對象中尋找屬性時，若是在當前對象上沒有找到就會從原型對象開始找一直追溯到原型鏈的最頂端
實現繼承
1.構造函數繼承詳細
- 利用call、apply修改this指向
- 讓子元素原型指向父元素實例，注意要修改子元素prototype.constructor指向
- 將需繼承的屬性寫在父元素的prototype上，讓子元素prototype指向父元素prototype，但在修改子元素prototype.constructor指向時會同時修改父元素prototype.constructor
- 同上方法利用中介函數
2.非構造函數繼承詳細
把父對象的屬性，所有拷貝給子對象
淺拷貝vs深拷貝
淺拷貝
深拷貝遞歸調用淺拷貝
閉包詳細
用途：讀取函數內部變量。變量得不到銷燬，一直儲存在內存中，可能形成內存泄漏
內存泄漏
指分配的內存既不能使用又得不到回收
- 如爲某元素綁定了一個事件，而該元素又從dom中移除
- 濫用閉包
- 兩變量互相引用
原生Ajax實現過程
1.獲取XMLHttpRequest對象
2.xhr.open(type,url,ifAsyn)
3.監聽xhr狀態改變，xhr.onreadystatechange = function(){} xhr.readyState==4&&xhr.status==200說明請求成功
【readyState：0=未初始化 1=啓動 2=發送 3=接收 4=完成】
4.xhr.send()
GET和POST區別
GET 安全性低可傳內容少經過url傳值
POST 安全性高可傳內容多經過表單傳值
事件處理 詳細
- 事件委託
  利用事件冒泡機制將事件綁定在父元素上，節省性能
- 事件處理程序
  DOM0 -> DOM1 -> DOM2 (對比與0，可同時綁定多個事件)
- mouseover和mouseenter區別
  mouseenter不冒泡

數組去重
hash方式和index方式

Array.prototype.unique = function(){
var n = [];
for(var i=0,len=this.length;i<len;i++){
    if(n.indexOf(this[i])==-1) {
        n.push(this[i])
    }
}
return n;
}
Array.prototype.unique2 = function(){
    var n = {},a =[];
    for(var i=0,len=this.length;i<len;i++){
        if(!n[this[i]]) {
            a.push(this[i]);
            n[this[i]] = true;
        }
    }
    return a;
}

ES5數組新方法

斐波納挈數列高效遞歸 詳細
附斐波納挈數列

function getNthFibonacci(count) {
    var fibonacci = [1,1];
    for(var i=2;i<=count;i++){
        fibonacci[i] = fibonacci[i-1]+ fibonacci[i-2];
    }
    return fibonacci[count];
};
var a = getNthFibonacci(5);
console.log(a)

getComputedStyle和style區別
getC 只讀可獲取未被style定義的樣式
style 讀寫只可獲取含style的樣式
DOM
插入新節點
document:createElement()、createDocumentFragment()、createTextNode()
insertBefore(new,old)
獲取節點
childNodes、parentNode、previousSibling、nextSibling、firstChild、lastChild、children
節點操做
appendChild、removeChild、replaceChild、cloneNode、normalize
獲取位置
- 瀏覽器寬高 window.innerWidth document.documentElement.clientWidth
- 文檔寬高 document.documentElement.offsetHeight、 document.documentElement.scrollHeight
- 到文檔的最端處距離 offsetTop、offsetLeft
BOM
瀏覽器內核 navigator.appVersion
異步編程方法
1.回調函數，這是異步編程最基本的方法。
2.事件監聽，另外一種思路是採用事件驅動模式。任務的執行不取決於代碼的順序，而取決於某個事件是否發生。
3.發佈/訂閱，上一節的"事件"，徹底能夠理解成"信號"。
4.Promises對象，Promises 對象是CommonJS 工做組提出的一種規範，目的是爲異步編程提供統一接口。

【jQuery】

操做DOM
ajax

【模塊化】

【MV*】詳細

【虛擬DOM】詳細

以對象樹的方式儲存在內存中

『性能優化』

雅虎14條詳細
移動端優化
16毫秒的優化詳細
1. google提出1s完成終端首屏渲染：網絡消耗+js執行與頁面渲染
2. 瀏覽器渲染頻率1s 60幀，確保每一幀能在16ms內執行與渲染，儘量避免重排與重繪
3. 使用RAF控制渲染頻率，減小重複渲染，避免事件重複執行
4. 讓js操做讀寫分離
渲染路徑優化
1. 最小化關鍵資源數量
2. 最小化關鍵資源字節
3. 最小化關鍵路徑長度
頁面直出詳細
1. server上獲取數據並將數據與頁面模板結合，在服務端渲染成最終的 HTML
2. 返回最終的 HTML 展現

『跨域與前端安全』

跨域的方式
1. JSONP：強行執行不一樣域下的JS文件，須要外部JS配合。只能用GET方式
2. CORS：服務器端設置Access-Control-Allow-Origin，使其能被其餘域使用AJAX訪問到
3. domain+iframe：只適用主域相同子域不一樣的兩個站。須要將兩個站的document.domain設成同一個主域
4. window.postMessage(msg,targetOrgin)
跨域攻擊詳細
1. 跨域腳本
2. 跨域請求僞造

『HTTP 』

HTTP報文
HTTP/1 HTTP/2 HTTPS 詳細
創建在TCP基礎上
狀態碼
緩存
設置緩存服務器返回Cache-Control:max-age=xxx；expires:Thu, 03 Jan 2019 04:24:16 GMT、設置etag、last-modified

實際上瀏覽器輸入 url 以後敲下回車就是先看本地 cache-control、expires 的狀況，刷新(F5)就是忽略先看本地
cache-control、expires 的狀況，帶上條件
If-None-Match、If-Modified-Since，強制刷新(Ctrl + F5)就是不帶條件的訪問。