前端面試題總結
第一部分:基礎知識
1:跨域請求資源的方法
proxy代理:proxy代理用於將請求傳送給後臺伺服器，通過伺服器來發送請求，然後將請求的結果傳遞給前端。
CORS:一般需要後端人員在處理請求資料的時候，新增允許跨域的相關操作。如下：
res.writeHead(200, {
"Content-Type": "text/html; charset=UTF-8",
"Access-Control-Allow-Origin":'http://localhost',
'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'
});
JSONP:通過動態建立script來讀取他域的動態資源，獲取的資料一般為json格式.
JSONP的缺點:無法實現POST請求,難判斷是否請求成功,一般使用超時時間判斷
2:垃圾回收機制及記憶體管理
標記清除:變數進入環境,加標記. 變數離開環境,去除標記.無標記的,清除
引用計數:即通常說的GC機制
3:開發過程中遇到的記憶體洩漏問題,如何解決?
什麼是記憶體洩漏? 一塊記憶體即不能用,也不能回收
記憶體洩漏的幾種情況
1:當頁面中元素被移除或替換時,元素繫結的時間仍然沒有被移除
2:閉包
4:JavaScript中繼承實現
原型鏈: prototype
call()/apply()
混合模式:
物件冒充
5:jQuery庫中$是什麼?
$() 函式是 jQuery() 函式的別稱。$() 函式用於將任何物件包裹成 jQuery 物件，
接著你就被允許呼叫定義在 jQuery 物件上的多個不同方法。你可以將一個選擇器字串傳入 $() 函式，
它會返回一個包含所有匹配的 DOM 元素陣列的 jQuery 物件。
6:$(this) 和 this 關鍵字在 jQuery 中有何不同？
$(this) 返回一個 jQuery 物件，你可以對它呼叫多個 jQuery 方法，比如用 text() 獲取文字，用val() 獲取值等等。
this是當前執行的上下文
7:jQuery中的Delegate()函式有什麼作用？
如果你有一個父元素，需要給其下的子元素新增事件，這時你可以使用delegate()了，程式碼如下：
$("ul").delegate("li", "click", function(){ $(this).hide(); });
當元素在當前頁面中不可用時，可以使用delegate()
8:$(document).ready()方法和window.onload有什麼區別？
window.onload方法是在網頁中所有的元素(包括元素的所有關聯檔案)完全載入到瀏覽器後才執行的。
$(document).ready() 方法可以在DOM載入就緒時就對其進行操縱，並呼叫執行繫結的函式。
9:get和post方法有什麼不同?
請求方式不同：$.get() 方法使用GET方法來進行非同步請求的。$.post() 方法使用POST方法來進行非同步請求的。
引數傳遞方式不同：get請求會將引數跟在URL後進行傳遞，而POST請求則是作為HTTP訊息的實體內容傳送給Web伺服器的，這種傳遞是對使用者不可見的。
資料傳輸大小不同：get方式傳輸的資料大小不能超過2KB 而POST要大的多
安全問題： GET 方式請求的資料會被瀏覽器快取起來，因此有安全問題。
10:簡述一下src與href的區別
href是指向網路資源所在位置,建立和當前元素和當前文件之間的連結,類似錨點
src是指向外部資源的位置,指定的內容將會嵌入到文件中當前標籤所在的位置;在請求src資源時會將其指向的資源下載,
並應用到文件中,例如js指令碼,img圖片和frame等元素
當瀏覽器解析到該元素時,會暫停其他資源的下載和處理,直到將該資源下載,編譯,執行完畢,圖片和框架等元素也是如此
11:簡述同步和非同步的區別
同步是阻塞模式,非同步是非阻塞模式
同步就是指一個程序在執行某個請求的時候,若該請求需要一段時間才能返回資訊,那麼這個程序將會一直等待下去,直到訊息返回
非同步是指程序不需要一直等待下去,而是繼續執行下面的操作. 當有訊息返回時,再回來繼續執行該程序
12:px和em的區別
px是固定的,表示畫素值
em是不固定的,瀏覽器預設的都是16px,且em會繼承父級元素的字型大小
13:瀏覽器的核心分別是什麼
IE:trident核心
Firfox:gecko核心
Safari:webkit核心
Opera:以前是presto,現在是blink
chrome:Blink
14:優雅降級和漸進增強
漸進增強:針對低版本瀏覽器進行構建頁面,保證最基本的功能,然後再針對高版本瀏覽器增加效果
優雅降級:一開始就構建完整的功能,然後再針對低版本瀏覽器進行相容
15:sessionStorage,localStorage和cookie之間的區別
1:需要傳送到:cookie資料需要傳送到伺服器,會造成一定的頻寬浪費,web Storage儲存在本地
2:資料儲存大小不同:cookie 4K, webStorage 5M
3:有效期限不同:cookie在設定的過期時間之前一直有用,session在當前會話關閉前有用,localStorage一直有用除非使用者刪除
4:作用域不同:cookie和localstorage在同源同窗口中都是共享的,session只在當前頁面有效
16:Web Stroage與cookie不同
1:webstorage儲存空間更大,ID8下每個獨立的儲存空間為10M,其他瀏覽器也都不同
2:儲存內容不會發送到伺服器,
3:介面更多,cookie需要自己封裝介面
3:獨立的儲存空間,每個域(包括子域)有獨立的儲存空間,各個儲存空間是完全獨立的,因此不會造成資料混亂
17:Ajax的優缺點及工作原理
定義:Ajax:非同步js和XML,是一種快速建立動態網頁的技術,是一種無需重新載入整個網頁的情況下,能夠更新部分網頁的技術
優點:1:減輕了伺服器的負擔,按需取資料
2:區域性重新整理頁面,使用者體驗更好
3:基於XML,被廣泛支援
缺點:1:區域性重新整理,頁面的後退按鈕是沒用的
2:對流媒體和移動裝置的支援不是很好
3:大量使用JavaScript和ajax引擎,在編寫的時候需要考慮瀏覽器相容性
工作原理:
1:建立ajax物件
2:判斷資料傳輸方式
3:開啟連結 open()
4:傳送 send()
5:判斷伺服器返回狀態碼,並執行回撥
18:規避JavaScript多人開發函式重名問題
1:名稱空間
2:封閉空間
3:js模組化MVC
4:變數裝換成物件的屬性
5:物件化
19:減輕頁面載入時間的方法
1:壓縮css,js檔案
2:合併css,js檔案,減少http請求
3:css檔案放在頁面頂,js檔案放在頁面底
4:減少dom操作,儘可能用變數替代不必要的dom操作
20:你瞭解到的Web攻擊技術
1:XSS(跨站指令碼攻擊) 是指通過存在安全漏洞的Web網站註冊使用者的瀏覽器內執行非法的HTML或JS進行的攻擊,
2:SQL注入
3:CSRF(跨站點請求偽造) 指攻擊者通過設定好的陷阱,強制對已完成的認證使用者進行非預期的個人資訊或設定資訊等某些狀態更新
21:Web前端開發,如何提高頁面效能優化
內容:
1:減少HTTP請求
2:減少DOM節點操作
3:使用ajax快取
css:
1:把css放到內碼表上方
2:從頁面中剝離JavaScript和css
3:精簡JavaScript和css
4:減少使用css表示式
JavaScript:
1:將JavaScript放到內碼表下方
2:移除重複指令碼
3:精簡JavaScript和css
4:從頁面中剝離JavaScript和css
面向圖片:
1:優化圖片
2:使用恰當的圖片格式
3:不要在HTML中使用縮放圖片
4:使用CSS sprites(css 精靈)技巧對圖片進行優化
22:前端開發中如何優化影象
1:不用影象,儘量用CSS3效果代替,比如實現陰影,圓角,等效果
2:使用向量圖SVG代替點陣圖
3:使用恰當的圖片格式.我們常見的圖片格式有JPEG,GIF,Png
4:按照HTTP協議設定合理的快取
5:使用字型圖示 webfont,css sprite等
6:用css或JavaScript實現預載入
7:用JavaScript實現懶載入
8:使用WebP圖片格式
23:圖片格式和區別
向量圖: webfont,SVG
點陣圖:gif,jpg,png
gif:gif是一種無損,8點陣圖片格式
jpg:jpg 微損,允許輕微色彩失真, 適合色彩豐富的圖片
png:
24:瀏覽器是如何渲染頁面的
1:解析HTML檔案,建立DOM樹
自上而下,遇到任何樣式與指令碼都會阻塞
2:解析CSS,優先順序:瀏覽器預設設定<使用者設定<外部樣式<內聯樣式<HTML中的style樣式；
3:將CSS與DOM合併,構建渲染樹
4:佈局和繪製,重繪和重排
25:如何避免XSS?
禁止危險指令碼
26:談談你對模組化的理解
什麼是模組化:
1:模組化是為了減少系統耦合度,提高高內聚,減少資源迴圈依賴,增強系統框架設計
2:模組化為了便於維護,提高程式碼複用性
3:模組化開發,針對功能和特性組織程式碼,JS方面而言,模組化解決了獨立作用域,API暴露,按需載入,安全合併,
依賴管理等問題 css反面主要是解決依賴管理,元件內部樣式管理等問題
27:如何使用快取
可以基於http的頭資訊控制快取
ajax請求對於早期的IE瀏覽器預設就是快取的,可以通過事件戳防止快取
28:談談你對預載入的理解
Web預載入指的是在網頁全部載入完成之前,在頁面優化顯示一些主要內容,以提高使用者體驗,對於一個較龐大的網站,
如果沒有使用預載入技術,使用者介面就會顯示教長時間的空白,可以使用JavaScript預先載入一些內容
例如，可以通過js預先從服務載入圖片資源(動態建立Image，設定src屬性)，只要瀏覽器把圖片下載到本地，
就會被快取，再次請求相當的src時就會優先尋找瀏覽器快取，提高訪問速度。
29:快取和預載入的區別是什麼?
快取是指把請求過的資料快取起來,下次再次請求的時候直接使用就行
預載入是指提前把需要的內容載入完成,當需要的時候,因為已經提前載入好了,所有不存在延遲
30:圖片如何壓縮
可以使用一些線上的圖片壓縮工具,
優先使用png,而不是jpg,
嘗試使用png8
使用css sprite
31:壓縮檔案有哪些方法?
Grunt,sass,ant壓縮
32:如何區分靜態頁面和動態頁面?
看字尾,一般動態頁面字尾都有'?'和'&'號,
33:字串拼接和模板引擎,專案中會如何操作?模板引擎會不會利於SEO優化?
簡單的資料渲染,字串憑藉就可以,複雜一點的使用模板引擎,需要關注SEO優化的頁面最好使用後臺渲染
34:前臺相容性問題有哪些?
主要是前端API渲染差異
35:你如何對網站的檔案和資源進行優化,期待的方案有哪些?
檔案合併,檔案壓縮
檔案快取
使用CDN
36:懶載入是用滾輪判斷高度好還是用外掛?
使用外掛比較好,外掛考慮的問題比較全面,僅通過滾輪判斷很容易導致一些副作用(比如一次請求多次)
37:如何快取整個頁面?在沒有網路的時候可以來回跳轉
使用H5,設定H5裡面的cache manifest
38:CDN是什麼
CDN全稱:內容分發網路,
CND加速原理:將網站內容快取在網路網格邊緣(離使用者接入網路最近的地方)
CDN的特點:
1:本地加速
2:映象服務
3:遠端加速
4:頻寬優化
5:叢集抗攻擊
39:瀏覽器一次可以從同一個域名下請求多少資源?
瀏覽器的併發請求數目是針對同一域名的,不同瀏覽器對這個限制數目都不一樣,不過一般是在10以內
40:image和canvas在處理圖片時有什麼不同?
image是通過物件的形式描述圖片的,
canvas是通過將圖片繪製在畫布上
41:簡述移動開發的注意點,如何做好不同手機的適配,你以前的專案是怎麼做的?
單獨做移動端專案,採用百分比佈局
採用響應式的方式做適配
42:簡述移動開發的注意點,如何做好不同手機的適配?
單獨做移動端專案,使用百分比佈局,
使用響應式的方式做適配
43:HTTP協議和TCP協議有什麼區別?
TCP/IP是傳輸層協議,主要解決資料如何在網路層傳輸,
HTTP是應用層協議,HTTP是使用TCP協議實現的
44:設計模式有哪些?列舉你在前端開發中自己應用或者瞭解到其他框架所用到的設計模式
簡單工廠,虛擬工廠,單例,介面卡,直譯器,橋接,享元,組合,裝飾,參與者,等待者,觀察者,狀態,策略,MVC,MVVM,鏈模式,代理模式
前端開發中自己最常用的有,觀察者模式,鏈模式,委託模式
45:JavaScript中的事件級別
DOM事件級別:
DOM0:document.onclick(funciton(){});
DOM2:document.addEventListener('click',function(){})
DOM3:在DOM2上新增的一些事件型別，如滑鼠雙擊，滾輪..
DOM事件模型:冒泡和捕獲
DOM事件流: 捕獲階段,目標階段,冒泡階段
事件捕獲具體流程: window>document>body>...>具體元素
46:前端如何進行錯誤監控?
前端錯誤分類:執行時錯誤和資源載入錯誤
執行時錯誤: try...catch 或 window.onerror
資源載入錯誤: object.onerror
47:MVVM模式與MVC模式的區別
MVVM: model-view-view-model 模型
低耦合:檢視可以獨立於model變化而修改
可重用性:把一些檢視邏輯放在一個viewModel中,讓很多view重用這段邏輯
獨立開發:開發專注邏輯,設計專注介面
可測試:MVVM模式開發中只需要測試單個View
MVC:model-view-control
MVC和MVVM其實差別不大,都是同一種設計模式,只不過在MVVM中將MVC中的Control換成了Model
這樣做的優點是,減少了MVC中的大量DOM節點操作
48:標準盒模型和IE盒模型有什麼區別?
都是margin(外邊距),border(邊框),padding(內填充),content(正文內容)組成
其中標準盒模型: width = content
IE盒模型: width = content + padding + border
49:瀏覽器是怎樣解析CSS選擇器的
CSS選擇器的解析是從右向左解析的
50:在網頁中使用的字型大小應該是偶數還是奇數
偶數:偶數字號更容易和其他web設計構成百分比關係,Window自帶的宋體點陣也只提供12,14,16px三個大小的點陣
51:元素豎向的百分比設定是相對於容器的高度嗎?
當按百分比設定一個元素的寬度時,它是相對於父容器的寬度計算的
一些屬性：margin-top,margin-bottom,padding-top,padding-bottom
但是對於一些表示豎向距離的屬性,當按百分比設定的時候,依據的也是其父容器的寬度,而不是高度
52:什麼是響應式設計?響應式設計的基本原理是什麼?如何相容低版本的IE
響應式網站設計是一個網站能夠相容多個終端,而不是為每一個終端做一個特定的版本
基本原理是:通過媒體查詢檢測不同的裝置螢幕尺寸做處理
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 user-scalable=no"/>
53:如何解決Chrome瀏覽器下不支援CSS字型小於12px的問題?
通過transform縮放
54:rgba()和opacity的透明效果的異同
opacity作用於元素以及元素內的所有內容的透明度
rgba()只作用於元素的顏色和背景色
55:手動寫動畫需要設定的最小時間間隔和原因
多數顯示器的預設頻率是60HZ,所以手動寫動畫設定的最小時間間隔是 1000/60 = 16.7ms
56:dispaly:inline-block 什麼時候會顯示間隙?
有空格時候會顯示間隙: 移除空格
margin正值的時候:margin使用負值
使用font-size的時候:font-size:0
57:overflow屬性的引數及其含義
overflow屬性定義溢位元素內容區域如何處理
scroll:出現滾動條
auto:子元素內容大於父元素時出現滾動條
visible:溢位的元素內容出現在父元素之外
hidden:溢位的元素內容隱藏
58:請簡述一下HTTP2協議的特性
多路複用請求
對請求劃分優先順序
壓縮HTTP頭
伺服器推送流
59:如果不給cookie設定過期時間會怎樣?
在瀏覽器會話結束時過期
60:執行以下程式段後,X的值是?
var x=0;
switch(++x) //x=1
{
case 0: ++x;
case 1: ++x; //x=2
case 2: ++x; //x=3
}
61:我們需要實現動態載入一個JavaScript資源,但是有幾處不知道如何處理,需要在您的幫助完成這項工作
var script = document.createElement('script');
var head = documnet.getElementsByTagName('head')[0];
script.type = 'text/javascript'
script.src = "//i.alicdn.com/resource.js"
//繫結資源或成功事件
script.onreadystatechange = function(){
//判斷資源載入狀態是否為載入成功或載入完成
if(/^(loaded|complete)$/.test(script.readyState)){
script.onreadystatechange = null;
...
}
};
//繫結資源載入失敗事件
script.onerr = function(){
...
}
62:在瀏覽器控制檯執行以下結果,輸出的資訊是
function test(){
var n = 4399;
function add(){
n++;
console.log(n);
}
return {n:n,add:add}
}
var result = test();
var result2 = test();
result.add(); //n=4400
result.add(); //n=4401
console.log(result.n) //n=4399
result2.add() //n=4400
63:關於3D變換屬性
在blink或webkit瀏覽器中,某個元素具有3D或透視變換的屬性,會讓瀏覽器建立單獨的圖層
在我們平時會使用left和top修改元素位置,但這樣會觸發重佈局,取而代之的是使用translate,這個不會觸發重佈局
解決瀏覽器渲染的首要問題是避免圖層的重繪和重佈局
64:移動端要想動畫效能流暢,應該使用3D硬體加速,因此最好給頁面中的元素新增translate3D() 或translateZ(0)屬性,來觸發硬體加速?
可通過這種方法來優化CSS3的動畫效果,在一個沒有特效的普通頁面中,一個頁面中只有一個圖層,當圖層中的元素大小位置發生變化
時,整個頁面都要重佈局,可能會出現卡頓.使用3D,透視變換的屬性,能強迫瀏覽器單獨繪製一個圖層,由GPU來重繪動畫,能減少卡頓
的情況,然而使用GPU可能會導致嚴重的效能問題,因為它增加了記憶體的使用,而且他會減少移動端電池的壽命,因此使用的時候要小心
65:margin重疊部分如何消除: overflow:hidden
66:常見的行內元素,塊級元素有哪些?
行內元素:a b br i span input select
塊級元素:div p h1 h2 h3 h4 form ul
67:給一個元素設定bakcground,其中padding和margin部分會生效嗎? 答:不會
68:簡述一下浮動,如何清除浮動?
浮動最開始出現是為了讓文字環繞圖片
浮動的元素沒有高度,不用佔位置的
清除浮動: 1,在父元素的最後加一個冗餘元素併為其設定clear:both
2,給父元素新增overflow:hidden||auto
69:簡述一下position
position:元素定位方式 static|absolute|relative|fixed
static:無特殊意義,使用瀏覽器預設的定位
absolute:絕對定位,相對於上一個使用了absolute定位的元素進行定位
relative:偏移定位,相對於元素原來的位置進行定位
fixed:相對螢幕定位
70:如何使用原生JS給CSS設定class,
var element = document.getElementById('elementname');
element.classList.addClass('className');
element.classList.removeClass('className');
71:import和link的區別,如果import一個非常重要而且非常大的重要檔案,會發生什麼?
從屬關係區別:@import是CSS提供的語法規則,只有匯入樣式表的作用;
link是HTML提供的標籤,不僅可以載入CSS檔案,而且可以載入其他檔案
載入順序區別:載入頁面時,link標籤引入的css被同時載入,@import引入的CSS將在頁面載入完畢後被載入
相容性區別:@import是css2.1 後加入的語法,再早期IE版本中不能使用
DOM可控性區別: @import是CSS語法,不可用js控制,link是HTML語法,可使用js操作DOM,插入link標籤來改變樣式
權重區別:link引入的樣式權重大於@import引入的樣式
如果引入一個非常大的CSS檔案,會導致閃屏
72:簡述選擇器和其優先順序,為什麼不推薦使用!important
ID>class,偽類>標籤
當!important被用在一個樣式宣告中,該樣式宣告會覆蓋任何其他的宣告
73:JS的資料型別,以及對應的記憶體型別
基本資料型別是棧儲存,存的是數值
引用資料型別是堆儲存,存的是引用
74:偽陣列型別與真正的陣列型別的區別，偽陣列型別不能使用pop（）和push（），
那如何將一個偽陣列型別轉換為一個真正的陣列型別
Array.prototype.slice.call(fakeArray)
75:getXXXByXXX 和querySelector的區別
前者獲取的是動態集合,選出的元素會隨文件改變,
後者獲取的是靜態集合,選出的元素不會隨文件改變
前者獲取的是偽陣列,後者獲取的是真陣列
76:rem與em的使用和區別詳解
rem基於HTML元素的字型大小來決定,em根據使用它的元素的大小來決定
77:HTTP狀態碼
常見:200 伺服器成功返回網頁 404:請求的網頁不存在 503:服務不可用
1XX:臨時響應
2XX:成功
3XX:重定向
4XX:請求錯誤
5XX:伺服器錯誤
78:TCP3次握手和4次揮手
3次握手:傳送端首先發送一個帶有SYN標誌的資料包發給對方,對方收到後傳送一個帶有SYN/ACK回來,
傳送端收到後再次回傳一個ACK表示"握手"結束
4次揮手:主動關閉方傳送一個FIN,告訴被動關閉方已經不會向它傳送訊息了
被動關閉方收到FIN後,傳送一個ACK給對方,確認序號為收到序號+1
被動關閉方傳送一個FIN,告訴主動關閉方不會向它傳送訊息了
主動關閉方收到FIN後,傳送一個ACK給被動關閉方,確認序號為受到序號+1
79:XSS原理及防範(跨站指令碼攻擊)
原理:攻擊者往web頁面插入惡意程式碼,騙取使用者點選後竊取cookie中的使用者隱私訊息
防範:1:對使用者輸入進行處理 2:對使用者cookie進行處理,不要在cookie中放直接洩漏使用者資訊的資料
3:使用cookie和ip繫結
80:CSRF原理及防範(跨站點請求偽造)
原理:在使用者不知情的情況下執行其他站點的請求
攻擊過程:1:使用者以合法身份登入網站A,
2:使用者登入危險網站B
3:危險網站B請求開啟A,
4:使用者同意,危險網站提交表單給網站A
防範:1:驗證HTTP頭部refer資訊
2:在請求地址中新增token並驗證
3:在HTTP頭中自定義屬性並驗證
81:web worker和websocket
webworker:H5中新增的多執行緒實現
websocket:H5中新增的資訊,伺服器可以主動發起通訊,用來代替以前的輪訓
82:HTTP和HTTPS
HTTP:基於TCP的應用層協議 HTTPS在HTTP層和TCP層新增SSL層
HTTP:80埠 HTTPS:443埠
83:效能優化
程式碼層面:避免使用CSS表示式,避免使用高階選擇器,通配選擇器 CSS放頭部,js放尾部,css和js精簡化
快取利用:AJAX快取,使用CDN,減少DNS查詢使用外部JS和CSS檔案以便快取,新增Expires頭，服務端配置Etag
請求數量:合併樣式和指令碼,使用CSS 精靈,初始首屏之外的圖片按需載入,靜態資源延遲載入
請求頻寬:壓縮檔案,使用Gzip
程式碼層面:
少用全域性變數,使用CSS 精靈,快取DOM查詢,避免全域性查詢,避免使用with,避免在HTML標籤中寫src屬性
移動端:
使用CSS3動畫,開啟硬體加速
儘量使用touch代替click事件
避免使用CSS3漸變,陰影效果
不濫用float
不濫用網路字型
84:一次使用者訪問HTTP頁面的過程
1:DNS查詢
2:TCP連線
3:HTTP請求
4:伺服器響應
5:客戶端渲染
85:如何快速實現渲染?
1:伺服器必須在200ms以內渲染出響應內容
2:重定向的次數應該減至最少
3:首次渲染所需的網路往返次數減至最少
由於TCP的擁塞視窗機制,首次TCP連線一般只能傳送10個包,即大概14KB的資料,所以首頁的內容儘量在14K以內
4:避免在首屏內容中出現外鏈的阻塞式JavaScript和css
86:堆和棧的區別
1:棧區:由編譯器自動編譯釋放,存放函式的值,區域性變數的值等
2:堆區:一般由程式設計師分配釋放,若程式設計師不釋放,可能程式結束後會被OS回收
3:堆:堆可以看作一顆數,如堆排序
3:棧:後進先出
87:快速排序的思想
1:在資料集中尋找一個基準點,
2:建立兩個陣列,風別儲存左邊和右邊的陣列
3:利用遞迴進行排序
88:你覺得jQuery或zepto原始碼有哪些寫的好的地方?
jQuery將所有程式碼都寫在一個閉包中,並且傳入window引數,防止汙染全域性作用域,而且查詢window物件更快
jQuery將一些原型屬性和方法封裝在jQuery.prototye中,然後又賦給jQuery.fn 寫法比較形象
jQuery大量使用鏈模式,即返回this,解決程式碼,提高了程式碼效率
有一些陣列和物件經常能用到,jQuery將其儲存為區域性變數,提高了查詢速度
89:cookie和session的區別
1:cookie資料存放在使用者瀏覽器上,session存放在伺服器中
2:cookie可被攻擊者盜取用來cookie欺騙,考慮到安全,應該使用session
3:session會在一定時間內儲存在伺服器中,當訪問量增加,比較消耗伺服器效能.
4:一般來說,將登入資訊等重要資訊存放在session
其他資訊存放在cookie中
90:display:none 和 visibility:hidden的區別
兩者都起到隱藏元素的作用
display:none 通過收攏當前元素實現隱藏,即不給它分配空間
visibility:hidden 隱藏對應的元素,但是在文件中仍然儲存它的佈局
91:position:absolute 和 float 屬性的異同
相同點:設定了position:absolute 和 float屬性的元素,文件都脫離了正常的文件流,並且可以設定其寬高
不同點:position:absolute 會覆蓋原文件流,float不會覆蓋原文件流,會佔位置
92:box-sizing屬性用來控制元素的盒模型的解析模式.預設值是content-box
content-box:標準盒模型, width = contentWidth
border-box:IE盒模型,width = contentWidth+padding + border
93:CSS3選擇符有哪些?
id選擇器,class選擇其,tag選擇器,子選擇器(p>li),後代選擇器(p li)
萬用字元選擇器(*),偽類選擇器(p:hover),屬性選擇器
94:說說你對語義化的理解
1:去掉或丟失樣式的時候能夠讓頁面呈現出清晰的結構
2:有助於SEO:和搜尋引擎,因為這兩者是靠頁面結構來確認關鍵字權重的
3:方便其他裝置解析
4:便於團隊開發和維護
95:常見相容性問題
1:png24位的圖片在IE6瀏覽器中
96:上下margin重合問題
ie和ff都存在,相鄰的兩個div的margin-left和margin-right不會重合,
但是margin-top和margin-bottom卻會重合
解決方法:養成良好的程式設計習慣,同時使用margin-top或margin-bottom
97:null和undefined的區別
null表示無,轉為數值時為0,undefined表示未賦值,轉為數值時為NAN
一般當變數的宣告還沒有被初始化時,該變數未undefined
undefined使用場景:
1:變數被聲明瞭,但沒有被賦值時
2:呼叫函式時,該提供的變數沒有被提供
3:物件沒有賦值的屬性
4:函式沒有返回值時,預設返回undefined
null使用場景
1:作為函式的引數
2:作為原型鏈的終點
98:new操作符具體幹了什麼?
1:建立一個空物件,並且this指向該物件,同時還繼承了該函式的原型
2:屬性和方法被加入到this中
3:新建立的物件由this引用,並且隱式返回this
99:js延遲載入的方式有哪些
defer和async,動態建立DOM方式,按需求非同步載入js
100:call()和apply()的區別和作用?
動態改變某個類的某個方法的執行上下文
101:哪些操作會造成記憶體洩漏?
setTimeout的第一個引數使用字串而非函式的話,會引發記憶體洩漏
閉包,控制檯日誌,迴圈,移除元素而未移除元素上繫結的監聽事件
102:對前端工程師這個職位是怎麼理解的?它的前景會是怎樣?
前端是最貼近使用者的程式設計師,比後端,資料庫,產品經理,運營,安全都進
前端需要實現:
1:實現介面互動
2:提升使用者體驗
3:有了node.js,前端可以實現服務端的一些事情
前端是最貼近使用者的程式設計師,前端的編碼相對後端來說多了一個對使用者友好
103:JavaScript物件的幾種建立方式
工廠模式,建構函式模式,原型模式,混合建構函式和原型模式,動態原型模式,
寄生建構函式模式,穩妥建構函式模式
104:JavaScript繼承的6種方法
原型鏈繼承,借用建構函式繼承,組合繼承,原型式繼承,寄生式繼承,寄生組合式繼承
105:GET和POST的區別,何時使用POST?
GET:一般用於資訊獲取,使用URL傳遞引數,對所傳送的數量也有限制,一般在2000個字元內
POST:一般用於修改伺服器上的資源,對所傳送的資料沒有限制
GET方式需要使用Request.querystring來獲得請求字串的值,
而PSOT需要使用Request.Form來獲取變數的值
也就是說GET通過位址列傳值,POST通過表單傳值
然而在以下的一些情況下,請使用POST:
更新伺服器上的檔案或資料庫
向伺服器傳送大量資料
傳送包含未知字元的使用者輸入時,POST比get更穩定
106:ajax的缺點和IE下的問題?
缺點:1:ajax不支援瀏覽器back按鈕,
2:安全問題,暴露了與伺服器互動的細節
3:對搜尋引擎的支援比較弱
4:破壞了程式的異常機制
3:不容易除錯
IE快取問題
在IE瀏覽器下,如果請求的方法是GET,並且GET的URL不變,那麼這個結果就會被快取,只要URL改變就不會被快取.
常用的方法是在請求URL後面新增隨機數
107:談談你對重構的理解
網站重構:在不改變網站的原有功能的前提下,簡化結構,增加可讀性,而在網頁前端保持一致的行為.
對於傳統網站的優化:
1:將table佈局該為div+css佈局
2:使網站前端相容現代瀏覽器(以及移動端瀏覽器)
3:針對SEO的優化
深層次的網站重構應該考慮的問題
1:減少程式碼間的耦合
2:讓程式碼保持彈性
3:嚴格按規範編寫程式碼
4:設計可擴充套件的API
5:代替舊有的框架,語言
6:增強使用者體驗
7:壓縮js,css,image等資源
8:程式的效能優化
9:採用CDN進行資源加速
10:對於DOM操作的優化
11:HTTP伺服器的檔案快取
108:說說你對Promise的理解
Promise有4種狀態
pending:初始狀態,非fulfilled或rejected
fulfilled:成功
rejected:失敗
settled:Promise已被fulfilled或rejected
Promise的API有:
then():
reject():
catch():
all():
race():
resolve():
done():置於回撥鏈的尾端,保證任何可能丟擲的錯誤
finally():不管Promise最後的狀態是什麼,都會指向該函式
109:說說嚴格模式的限制
1:變數必須先聲明後使用
2:函式的引數不能有同名屬性,否則報錯
3:不能使用with屬性
4:不能對只讀屬性賦值,否則報錯
5:不能使用字首0表示八進位制數,否則報錯
6:不能刪除不可刪除的屬性,否則報錯
7:不能刪除變數delete prop,會報錯,只能delete grobal[prop]
8:eval不會在它的外層作用域引入變數
9:eval和arguments不能被重新賦值
10:arguments不會自動反應函式引數的變化
11:不能使用arguments.callee
12:不能使用arguments.caller
13:禁止this指向全域性物件
14:不能使用fn.callee和fn.caller
15:增加了保留字(比如 protected,static和interface)
110:設立"嚴格模式的目的",主要有以下幾個
消除JavaScript語法的一些不合理,不嚴謹之處,
消除程式碼執行的一些不安全之處
提高編譯器效率,增加執行速度
為未來新版本的JavaScript做好鋪墊
111:expires是什麼?
Expires是RFC 2616協議中和網頁快取相關自段.用來控制快取的失效日期
112:attribute和propety的區別是什麼?
attribute是dom元素在文件中作為html標籤擁有的屬性
property就是dom元素在js中作為物件擁有的屬性
所以:
對於html的標準屬性而言,attribute和prototype是等價的,是會自動更新的
但是對於自定義的屬性來說,他們是不等價的,不會自動更新
113:說說網路分層裡七層模型是哪七層
應用層,表示層,會話層,傳輸層,網路層,資料鏈路層,物理層
每一層的作用如下:
物理層:通過媒介傳輸位元,確定機械及電氣特效(單位:位元)
資料鏈路層:將位元組裝成幀和點到點的傳輸(幀)
網路層:負責資料包從源節點到目的節點的傳遞,並負責網際互連(包)
傳輸層:提供端到端的可靠報文傳輸和錯誤恢復(段)
會話層:建立,管理和終止會話(會話協議資料單元)
表示層:對資料進行防疫,加密和壓縮(表示協議資料單元)
應用層:允許防衛OSI環境的手段(應用協議資料單元)
114:請說一下常見的協議
ICMP協議:因特網報文協議。它是TCP/IP協議族的一個子協議,用於在IP主機,路由器之間傳遞控制訊息.
TFTP協議:是TCP/IP協議族中的一個用來在客戶機與伺服器之間進行簡單檔案傳輸的協議,提供不負責,開銷不大的檔案傳輸服務
HTTP協議:超級文字傳輸協議,是一個屬於應用層的面向物件的協議,由於其簡捷,快速的方式,適用於分散式超媒體資訊系統
DHCP協議:動態主機配置協議,是一種讓系統得以連線到網路上,並獲取所需要的配置引數手段
RIP協議:動態路由選擇協議，
115:說說NOSQL和MYSQL的區別
MYSQL是傳統的關係型資料庫,NOSQL則是非關係型資料庫
NOSQL的全稱是not only SQL,直面翻譯表示不僅僅是SQL,它提供了對關係的更高層抽象,即使用值鍵對的形式儲存資料
mongodb以BSON結構(二進位制)進行儲存,對海量資料儲存有著明顯的優勢
對比傳統關係型資料庫,NoSQL有著非常顯著的效能和擴充套件性優勢,與關係型資料庫相比,MongoDB的優點有:
1:弱一致性(即最終一致),更能保證使用者的訪問速度
2:文件結構的儲存方式,能夠更快捷的獲取資料
116:講講304快取的原理
伺服器首先產生ETag,伺服器可在稍後使用它來判斷頁面是否已經被修改,本質上,客戶端通過將該記號傳回伺服器要求伺服器驗證其(客戶端)快取
304是HTTP狀態碼,伺服器用來標識這個檔案沒修改,不返回內容,瀏覽器在接收到這個狀態碼後,會使用瀏覽器已快取的檔案
117:什麼樣的前端程式碼是好的?
高複用,低耦合, 低程式碼量,高頁面效果 低執行資源要求,高效果
118:什麼是CSS Hack
一般來說是針對不同的瀏覽器寫不同的CSS,就是CSS Hack
IE瀏覽器Hack一般分為三種,條件Hack,屬性Hack,選擇符Hack
119:JavaScript中callee和caller的作用
caller是返回一個對函式的引用,該函式呼叫了當前函式
callee是返回正在被執行的function函式,也就是所指定的function物件的正文
120:手寫快速排序
1:在資料集中,選擇一個元素作為基準
2:所有小於基準的元素,都移到基準的左邊,大於基準的元素都移到基準的右邊
3:對基準左邊和右邊的兩個子集,不斷重複第一步和第二步,直到所有的子集都只剩下一個元素為止
121:手寫二分查詢
1:首先,從有序陣列的中間的元素開始搜尋,如果該元素正好是目標元素,則搜尋結束.
2:如果目標元素大於該元素,則繼續從有序陣列的後半段開始查詢,否則從前半段開始查詢
3:迭代上述過程,直到找到目標元素,或者某一步陣列為空,則表示找不到目標
122:Doctype作用?標準模式與相容模式各有什麼區別?
1:告知瀏覽器的解析器用什麼文件標準解析這個文件.Doctype不存在或格式不正確,都會導致瀏覽器以相容模式解析這個文件
2:標準模式的排版和js執行模式都是以該瀏覽器支援的最高標準執行.在相容模式中,瀏覽器以向後相容的方式,模擬老式瀏覽器的行為以防止站點無法工作
123:HTML5為什麼只需要寫<!DOCTYPE html>?
HTML5不基於SGML,因此不需要對DTD進行引用,但是需要doctype規範瀏覽器的行為
而HTML4基於SGML,所以需要對DTD進行引用
124:介紹一下你對瀏覽器核心的理解
瀏覽器核心主要分為兩部分:渲染引擎和js引擎
渲染引擎:負責取得網頁內容,整理資訊,以及計算網頁的顯示方式,然後會輸出至顯示器
瀏覽器核心的不同對於語法解釋會有不同,所以渲染的效果也不相同,
js引擎:解析和執行JavaScript來實現網頁的動態效果
最開始渲染引擎和js引擎並沒有區分的很明確,後來js引擎漸漸獨立,瀏覽器核心就一直只指渲染引擎
125:簡述一下你對HTML語義化的理解
1:HTML語義化指,即使沒有CSS樣式,html文件也能顯示出清晰的文件結構
2:用正確的標籤做正確的事
3:HTML語義化讓頁面內容結構更清晰,便於瀏覽器解析,搜尋引擎搜尋
4:搜尋引擎的爬蟲也依賴於HTML標籤來確定網站關鍵字的權重
5:使閱讀原始碼的人對網站更容易分塊
126:介紹js的基本資料型別
undefined,null,boolean,number,string,object,Symbol
127:js有哪些內建物件
資料封裝類物件:Object,number,string,array,boolean
其他物件:Function,Date,Math,Aruguments,Regexp,Error
128:eval是做什麼的?
它的功能是把對應的字串程式碼解析成js程式碼並執行
應該避免使用eval,因為它特別耗效能,eval的執行需要執行兩次(一次解析成js程式碼,一次執行)
129:call()和apply()的區別和作用
apply()函式有兩個引數;第一個引數是上下文,第二個引數是引數組成的陣列,如果上下文是null,則使用全域性物件代替
call()的第一個引數是上下文,後續是例項傳入的引數序列
130:HTTP狀態碼知道哪些?
100:continue,繼續,一般在傳送post請求時,已傳送了http header之後,服務端將返回此狀態碼
200:ok,正常返回資訊
201:createed 請求成功並且伺服器建立了新的資源
202:accept,伺服器已接受請求
301:請求的網頁已永久性的移動到新位置
302:臨時性重定向
303:重定向
304:請求的網頁未更改
400:伺服器無法理解請求的格式
401:請求未授權
403:禁止訪問
404:Not found
500:伺服器錯誤
501:伺服器暫時無法處理請求,(過載或是維護)
131:你有哪些效能優化的方法?
1:減少HTTP請求,減少外鏈的DNS查詢,CSS 精靈,Date快取,AJAX快取,
2:js,css原始碼壓縮,js,css檔案放在外鏈中,CDN託管,圖片伺服器
3:前端模板js+資料,減少由於HTML標籤導致的頻寬浪費,
4:DOM快取,並且用innerHTML代替DOM操作,
5:少用全域性變數,
6:避免使用css表示式
7:圖片預載入,js放底部,css放頂部,
132:執行緒和程序的區別
1:一個程式至少有一個程序,一個程序至少有一個執行緒
2:程序是排程資源的基本單位,在瀏覽器中的情況就是程序在執行過程中擁有獨立的記憶體單元,
而多個執行緒共享記憶體,從而極大提高了程序的執行效率
3:執行緒的粒度比程序小,執行緒之間的切換效能損失小於程序之間的切換
133:常用瀏覽器核心,
ie(ir),opera(presto),火狐(Gecko),谷歌(webkit)
134:標籤上title與alt屬性的區別是什麼?
alt當圖片不顯示時用文字代表
title為該屬性提供資訊
135:描述css reset的作用和用途
重置瀏覽器的css預設屬性,讓他們統一
136:瀏覽器標準模式和怪異模式之間的區別是什麼?
瀏覽器標準模式指瀏覽器按照W3C標準來執行頁面程式碼,怪異模式指按照瀏覽器自己的標準來執行
區別主要是盒子模型,和渲染模式的不同
137:你如何對網站的檔案和資源進行優化?期待的解決方案包括:
檔案合併
檔案最小化/檔案壓縮
使用CDN託管
快取的使用
138:列舉三種強制型別轉換和2種隱式型別轉換
強制:(parseInt,parseFloat,number)
隱式:== -
139:陣列方法pop(),push(),shift(),unshift()
pop()尾刪除 push()尾新增
unshift()頭部新增, shift()頭刪除
140:事件繫結和普通事件有什麼區別?
普通事件只能繫結一個事件,上面的事件會覆蓋下面的.
事件繫結可以繫結很多個,不會覆蓋
141:JavaScript的本地物件,內建物件和宿主物件.
本地物件為 array,object,regexp等可以new例項化的物件
內建物件為Math,Number,global等不可以例項化的物件
宿主為瀏覽器自帶的document,window等
142:'=='和'==='的不同
前者會自動轉化型別,後者不會
143:對web標準以及w3c的理解和認識
標籤閉合,標籤小寫,不亂巢狀,提高搜尋機器人效率.使用外鏈css和js指令碼,結構行為表現分離,
內容能被更多廣泛的裝置所訪問,更少的程式碼和元件,更易維護,該版方便,不需要變動頁面內容
144:HTML和xhtml有什麼區別
html是一種基本的web網頁設計語言,xhtml是一個基於XML的置標語言,
最主要的區別:XHTML中元素必須被正確的巢狀,元素必須關閉,標籤必須小寫,必須有根元素
145:<!DOCTYPE>
<!DOCTYPE>宣告必須是html文件的第一行,位於<html>標籤之前
<!DOCTYPE>宣告不是HTML標籤,它是指示瀏覽器頁面是使用哪個版本的HTML進行編寫的
在html4.01中,<!DOCTYPE>宣告引用DTD,因為HTML4.1基於SGML,DTD規定了標記語言的規則.
HTML5不急於SGML,所以不需要引用DTD
146:有這麼一段HTML,請挑毛病:
<p> 哥寫的不是HTML,是寂寞.<br><br> 我說：<br>不要迷戀哥，哥只是一個傳說
考點1:html和Xhtml的區別
這行程式碼在html4.01strict下是完全正確的,在xhtml1.0中是錯誤一大堆,xhtml需要標籤完全閉合.
p,br需要閉合,標籤不允許大寫,p要小寫.同時 必須包含在容器裡.html下這些都沒有錯
考點2:考樣式分離
用 控制縮排是不合理的,應該用css控制縮排
考點3:合理使用標籤
br是強制拆行標籤,p是段落.原題用連續的br製造兩個段落的效果,效果是達到了,但顯然用的不合理,
段落間距後期無法再控制.正確的做法是用兩個p表現兩個段落.
147:CSS層疊是什麼?介紹一下
CSS就是層疊式樣式表的簡稱.CSS層疊的意思就是在文件樹中,子標記可以繼承父標記定義的樣式,
後定義的樣式可以覆蓋先定義的樣式,優先順序高的樣式可以覆蓋優先順序低的樣式.
148:JavaScript中this關鍵字的指向
在函式執行時,this總是指向呼叫該函式的物件,有呼叫物件則指向該呼叫物件,無呼叫物件則指向全域性物件
使用場景:
1:元素button點選事件函式
2:有物件就指向呼叫物件
3:沒有物件就指向全域性物件window
4:用new建構函式,指向新物件
5:通過apply或bind來改變this
149:JavaScript繼承有哪兩種形式,進行描述
1:構造函數借用,在子類構造方法內,通過apply/call作為引數闖入
優點:可以向父類構造方法傳遞引數,即給apply第二個引數arguments
父類的屬性都複製到子類例項中,屬性之間無干擾,無論是引用型別還是封裝型別
缺點:每一個例項都擁有一份父類物件的拷貝,互不干擾,所以無法統一修改
無法擁有父親原型中定義的方法
子類的例項物件不能通過instance操作符判斷是不是父類的例項
2:原型鏈繼承:指定子類的prototype為父類的一個例項物件
優缺點和建構函式剛好相反
150:說說有哪些查詢
折半查詢,插值查詢,二叉排序樹,平衡二叉樹B樹
151:排序
氣泡排序:使用兩個迴圈進行排序
選擇排序:
152:你使用CSS前處理器嗎?
不使用,但知道一點
CSS預處理使用一種專門的程式語言,為CSS增加了一些程式設計的特效,將CSS作為目標生成檔案
這樣開發者就只要使用這中語言進行編碼工作,通俗的說,CSS前處理器用一種專門的程式語言,
進行Web頁面樣式設計,然後在編譯成正常的CSS檔案,以供瀏覽器使用.css前處理器為CSS
添加了一些程式設計的特效,無需考慮瀏覽器的相容性問題,
153:寫出幾種IE6 BUG的解決方法
1:雙邊距BUG float引起的 使用display
2:畫素問題 使用float引起的 使用display:inline -3px
3:超連結點選失效問題 使用正確的書寫順序 link visited hover active
4:z-index問題 給父級新增position:relative
5:png透明問題 使用js程式碼改
6:Min-height 最小高度 !important解覺
154:IE和DOM事件流的區別
IE採用冒泡型事件,Netscape使用捕獲型事件 DOM使用先捕獲後冒泡型事件
155:看下面的程式碼，將會輸出什麼？
var a = 1;
function a(){}
alert(a); //列印1
解釋：變數提升
var a;function a(){}
a = 1;
alert(a)
156:事件迴圈繫結，輸出結果
var list = document.getElementsByTagName('a'); //假設有0個A
for(var i = 0;i<list.length;i++){
list[i].onclick = function(i){
return function(){
alert(i);
}
}
}
//最終列印的結果都是10
改進方法，將var i = 0;改為let i =0;
157:js陣列去重
var arr = [1,6,3,9,3,8,2];
var obj = {}，newArr = [];
function delRepeat(){
for(var i =0,j=arr.length;i<j;i++){
if(!obj[arr[i]]){
newArr.push(arr[i])
obj[arr[i]] = arr[i];
}
}
}
158:兩個div標籤，如何控制標籤左邊固定，右邊自適應，左邊div標籤的寬度為100px
//左邊左浮動，右邊overflow:hidden;
#lt{float:left;width:100px;background:#ff0;}
#rt{overflow:hidden;background:#f0f;}
159:實現一個函式clone,可以對JavaScript中的主要5種資料型別進行復制
Object.prototype.clone = function(){
var o = this.constructor === Array?[]:{};
for(var e in this){
o[e] = typeof this[e] === "object"?this[e].clone:this[e];
}
return o;
}
160:事件監聽函式
function addEvent(elem,type,handler){
if(elem.addEventListener){
elem.addEventListener(type,handle,false);
}else if(elem.attachEvent){
elem.attachEvent('on'+type,handler)
}else{
elem['on'+type]=handler;
}
}
161:對作用域上下文和this的理解,看下列程式碼
var User = {
count:1,
getCount:function(){
return this.count;
}
};
console.log(User.getCount()); //1
var func = User.getCount;
console.log(func()); //undefined
162:如何實現瀏覽器多個標籤頁之間的通訊？
呼叫localstorage,cookies等本地儲存方式
163:CSS隱藏元素的幾種方法(至少說出三種)
1:opacity： 元素本身依然佔據它自己的位置並對網頁的佈局其作用，同時響應使用者互動
2:visibility: 不會響應使用者互動
3:display:none 設為none，讀屏軟體讀不到元素的內容
4:position: 不會影響佈局，能讓元素保持可操作
164:CSS清除浮動的幾種方法
clear:both
overflow:auto
:after
165:下面程式的執行結果
function fun(n,o){
console.log(o);
return{
fun:function(m){
return fun(m,n);
}
}
}
var a = fun(0); a.fun(1);a.fun(2);a.fun(3);
var b = fun(0).fun(1).fun(2).fun(3);
var c = fun(0).fun(1); c.fun(2); c.fun(3);
166:瞭解node嗎？Node的使用場景有哪些？
高併發，聊天，實時訊息推送
167:對node的優點和缺點提出自己的看法？
優點:因為Node是基於事件驅動的和無阻塞的，所以非常適合處理併發請求，
因此建立在node上的代理伺服器相比其他技術實現的伺服器效能好的多
此外，與node代理伺服器互動的客戶端程式碼是由JavaScript語言編寫的
因此客戶端和伺服器端都用同一種語言編寫，這是非常美妙的事情
缺點:支援不夠完善
168:對普通網站優化的思路
對普通網站優化有一個統一的思路，就是儘量向前端優化，減少資料庫操作
減少磁碟IO。向前端優化指的是，在不影響功能和體驗的情況下，能在瀏覽
器執行的不要在伺服器端執行，能在快取中取的不要在磁碟中取，能在本地
伺服器上取的不要到遠端伺服器上取，程式能取得的結果不要到外部取得，
快取中有的不要到資料庫中查詢。 減少資料庫操作，減少磁碟IO，減少檔案讀取
儘量使用記憶體而不使用外存。
169:HTTP請求過程
1:查詢瀏覽器快取
2:DNS解析，查詢該域名對應的IP地址,重定向(301),發出第二個GET請求
3:發起TCP連線
4:HTTP連線
5:客戶端傳送報頭(請求報頭)
6:伺服器響應客戶端請求的資源
7:文件開始下載
8:客戶端解析文件，構建DOM樹，解析CSS，CSS和DOM樹重合，重繪，重排
9:輸出到螢幕顯示裝置
170:瀏覽器是怎樣對HTML5的離線？
線上的情況下，瀏覽器發現HTML頭部有manifest屬性，它會請求manifest檔案
如果是第一次訪問APP，那麼瀏覽器就會根據manifest檔案的內容下載相應的資源
並且進行離線儲存。如果已經訪問過APP並且資源已經離線儲存了，那麼瀏覽器就會
使用離線的資源載入頁面，然後瀏覽器會對比新的manifest檔案與舊的manifst檔案
如果檔案沒有發生改變，就不做任何操作，如果檔案改變了，那麼重新下載檔案中的
資源，並進行離線儲存。離線的情況下，瀏覽器就直接使用離線儲存的資源
171:如何實現雙向資料繫結？
vue:採用資料劫持結合釋出者-訂閱者模式的方式，通過Object.defineProperty()來
劫持各個屬性的setter和getter，在資料變動時釋出訊息給訂閱者，在收到訊息後執行
相應的更新操作
AngularJS:採用"髒值檢測"的方式，資料發生變更後，對於所有的資料和檢視的繫結關係
進行一次檢測，識別是否有資料發生了改變
172:http響應中content-type包含哪些內容
請求訊息主體是用何種方式編碼
application/x-www-form-urlencoded
這是最常見的POST提交資料的方式 按照key1=value1&key2=val2&key3=val3
application/json
告訴伺服器訊息主體是序列化後的JSON字串
173:瀏覽器快取有哪些，通常快取有哪幾種方式
強快取 強快取如果命中，瀏覽器直接從自己的快取中讀取資源，不會發請求到伺服器
174:ajax中當前狀態有哪些？
0:代表未初始化。還沒有呼叫open方法
1:代表正在載入。open方法已被呼叫，但是send方法還沒有被呼叫
2:代表已經載入完畢，send已被呼叫，請求已經開始
3:代表互動中。伺服器正在發生響應
4:代表完成。響應傳送完畢
175:將三個DIV等分排布在一行(考察border-box)
1:設定border-box width:33.3%
2:flexbox flex:1
176:函式防抖和函式節流
函式防抖:是指頻繁觸發的情況下，只有足夠的空閒時間，才執行程式碼一次
實現方法:使用一個setTimeout來輔助實現。延遲執行需要跑的程式碼
函式節流:是指一定時間內js只跑一次
實現方法:宣告一個變數當標誌位，記錄當前程式碼是否在執行，如果空閒，則可以正常觸發方法執行
177:實現兩欄佈局有哪些方法
*{margin:0;padding:0;}
html,body{
height:100%;
}
#left{
width:300px;
height:100%;
float:left;
}
#right{
height:100%;
margin-left:300px;
background-color:#eee;
}
178:判斷連結串列是否有環
使用追趕的方法,設定兩個指標 slow,fast,從頭指標開始，每次分別前進1步和2步.如存在環，則兩者相遇，
如不存在環，則兩者不相遇
179:輸出二叉樹的最小深度
判斷左子樹或右子樹是否為空，若左子樹為空，則返回右子樹的深度，若右子樹為空，則返回左子樹的深度
若兩個都不為空，則返回左子樹和右子樹的深度的最小值
18