前端面試經典題目合集–77題

NO IMAGE

(整理自網路)

1.請你談談Cookie的弊端

cookie雖然在持久儲存客戶端資料提供了方便,分擔了伺服器儲存的負擔,但還是有很多侷限性的。

第一:每個特定的域名下最多生成20個cookie

1.IE6或更低版本最多20個cookie

2.IE7和之後的版本最後可以有50個cookie。

3.Firefox最多50個cookie

4.chrome和Safari沒有做硬性限制

 

IE和Opera
會清理近期最少使用的cookie,Firefox會隨機清理cookie。

cookie的最大大約為4096位元組,為了相容性,一般不能超過4095位元組。

IE 提供了一種儲存可以持久化使用者資料,叫做uerData,從IE5.0就開始支援。每個資料最多128K,每個域名下最多1M。這個持久化資料放在快取中,如果快取沒有清理,那麼會一直存在。

 

優點:極高的擴充套件性和可用性

1.通過良好的程式設計,控制儲存在cookie中的session物件的大小。

2.通過加密和安全傳輸技術(SSL),減少cookie被破解的可能性。

3.只在cookie中存放不敏感資料,即使被盜也不會有重大損失。

4.控制cookie的生命期,使之不會永遠有效。偷盜者很可能拿到一個過期的cookie。

缺點:

 

1.`Cookie`數量和長度的限制。每個domain最多只能有20條cookie,每個cookie長度不能超過4KB,否則會被截掉。

2.安全性問題。如果cookie被人攔截了,那人就可以取得所有的session資訊。即使加密也與事無補,因為攔截者並不需要知道cookie的意義,他只要原樣轉發cookie就可以達到目的了。

3.有些狀態不可能儲存在客戶端。例如,為了防止重複提交表單,我們需要在伺服器端儲存一個計數器。如果我們把這個計數器儲存在客戶端,那麼它起不到任何作用。

 

2. 簡單說一下瀏覽器本地儲存是怎樣的

在較高版本的瀏覽器中,js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage來取代globalStorage。

html5中的Web Storage包括了兩種儲存方式:sessionStorage和localStorage。

sessionStorage用於本地儲存一個會話(session)中的資料,這些資料只有在同一個會話中的頁面才能訪問並且當會話結束後資料也隨之銷燬。因此sessionStorage不是一種持久化的本地儲存,僅僅是會話級別的儲存。

而localStorage用於持久化的本地儲存,除非主動刪除資料,否則資料是永遠不會過期的。

 

3. web storage和cookie的區別

Web Storage的概念和cookie相似,區別是它是為了更大容量儲存設計的。Cookie的大小是受限的,並且每次你請求一個新的頁面的時候Cookie都會被髮送過去,這樣無形中浪費了頻寬,另外cookie還需要指定作用域,不可以跨域呼叫。

除此之外,Web Storage擁有setItem,getItem,removeItem,clear等方法,不像cookie需要前端開發者自己封裝setCookie,getCookie。

但是Cookie也是不可以或缺的:Cookie的作用是與伺服器進行互動,作為HTTP規範的一部分而存在 ,而Web Storage僅僅是為了在本地“儲存”資料而生

瀏覽器的支援除了IE7及以下不支援外,其他標準瀏覽器都完全支援(ie及FF需在web伺服器裡執行),值得一提的是IE總是辦好事,例如IE7、IE6中的UserData其實就是javascript本地儲存的解決方案。通過簡單的程式碼封裝可以統一到所有的瀏覽器都支援web storage。

localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem和removeItem等

 

4. display:none和visibility:hidden的區別?

display:none 隱藏對應的元素,在文件佈局中不再給它分配空間,它各邊的元素會合攏,就當他從來不存在。

visibility:hidden 隱藏對應的元素,但是在文件佈局中仍保留原來的空間。

 

5. CSS中 link 和@import 的區別是?

(1) link屬於HTML標籤,而@import是CSS提供的; 

(2) 頁面被載入的時,link會同時被載入,而@import引用的CSS會等到頁面被載入完再載入;

(3) import只在IE5以上才能識別,而link是HTML標籤,無相容問題; 

(4) link方式的樣式的權重高於@import的權重.

 

6. position的absolute與fixed共同點與不同點

A:共同點:

1.改變行內元素的呈現方式,display被置為block;

2.讓元素脫離普通流,不佔據空間;

3.預設會覆蓋到非定位元素上

 

B不同點:

absolute的”根元素“是可以設定的,而fixed的”根元素“固定為瀏覽器視窗。

當你滾動網頁,fixed元素與瀏覽器視窗之間的距離是不變的。

 

7. 介紹一下CSS的盒子模型?

1)盒模型:內容(content)、填充(padding)、邊界(margin)、 邊框(border)

 

2)有兩種, IE
盒子模型、標準 W3C 盒子模型;IE的content部分包含了border 和 padding;

 

 

8.CSS 選擇符有哪些?哪些屬性可以繼承?優先順序演算法如何計算? CSS3新增偽類有那些?

CSS 選擇符:

1.id選擇器(# myid)

2.類選擇器(.myclassname)

3.標籤選擇器(div, h1, p)

4.相鄰選擇器(h1 p)

5.子選擇器(ul > li)

6.後代選擇器(li a)

7.萬用字元選擇器( * )

8.屬性選擇器(a[rel = “external”])

9.偽類選擇器(a: hover, li:nth-child)

 

可繼承的樣式:

1.font-size

2.font-family

3.color

4.text-indent

 

不可繼承的樣式:

1.border

2.padding

3.margin

4.width

5.height

 

優先順序演算法:

1.優先順序就近原則,同權重情況下樣式定義最近者為準;

2.載入樣式以最後載入的定位為準;

3.!important>  id > class > tag  

4.important 比 內聯優先順序高,但內聯比 id
要高

 

CSS3新增偽類舉例:

p:first-of-type 選擇屬於其父元素的首個 <p>
元素的每個 <p> 元素。

p:last-of-type 選擇屬於其父元素的最後 <p>
元素的每個 <p> 元素。

p:only-of-type 選擇屬於其父元素唯一的 <p>
元素的每個 <p> 元素。

p:only-child   選擇屬於其父元素的唯一子元素的每個<p>
元素。

p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個 <p>
元素。

:enabled:disabled 控制表單控制元件的禁用狀態。

:checked       單選框或核取方塊被選中。

 

9. 列出display的值,說明他們的作用。position的值, relative和absolute分別是相對於誰進行定位的? 

display 的值的作用: 

1.block 象塊型別元素一樣顯示。

2.inline 預設值。象行內元素型別一樣顯示。

3.inline-block 象行內元素一樣顯示,但其內容象塊型別元素一樣顯示。

4.list-item 象塊型別元素一樣顯示,並新增樣式列表標記。

 

position 的值的定位區別:

1.absolute 生成絕對定位的元素,相對於 static
定位以外的第一個祖先元素進行定位。 

2.fixed 生成絕對定位的元素,相對於瀏覽器視窗進行定位(老IE不支援)。

3.relative 生成相對定位的元素,相對於其在普通流中的位置進行定位。 

4.static 預設值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right z-index
宣告)。

5.inherit 規定從父元素繼承 position
屬性的值。

 

10.CSS3有哪些新特性?

1. CSS3實現圓角(border-radius),陰影(box-shadow),

2. 對文字加特效(text-shadow、),線性漸變(gradient),旋轉(transform)

3. transform:rotate(9deg) scale(0.85,0.90)translate(0px,-30px) skew(-9deg,0deg);//
旋轉,縮放,定位,傾斜

4. 增加了更多的CSS選擇器  多背景rgba 

5. 在CSS3中唯一引入的偽元素是 ::selection.

6. 媒體查詢,多欄佈局

7. border-image

 

11.為什麼要初始化CSS樣式

因為瀏覽器的相容問題,不同瀏覽器對有些標籤的預設值是不同的,如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。

當然,初始化樣式會對SEO有一定的影響,但魚和熊掌不可兼得,但力求影響最小的情況下初始化。

*最簡單的初始化方法就是(不建議):

1

{padding: 0; margin: 0;}

淘寶的樣式初始化:

body,h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre,form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0;}

body,button, input, select, textarea { font:12px/1.5tahoma, arial,\5b8b\4f53; }

h1,h2, h3, h4, h5, h6{ font-size:100%; }

address,cite, dfn, em, var { font-style:normal; }

code,kbd, pre, samp { font-family:couriernew, courier, monospace;}

small{ font-size:12px;}

ul,ol { list-style:none; }

a{ text-decoration:none; }

a:hover{ text-decoration:underline; }

sup{ vertical-align:text-top; }

sub{ vertical-align:text-bottom;}

legend{ color:#000; }

fieldset,img { border:0; }

button,input, select, textarea { font-size:100%; }

table{ border-collapse:collapse; border-spacing:0; } 

 

12.對BFC規範的理解?

BFC,塊級格式化上下文,一個建立了新的BFC的盒子是獨立佈局的,盒子裡面的子元素的樣式不會影響到外面的元素。在同一個 BFC 中的兩個毗鄰的塊級盒在垂直方向(和佈局方向有關係)的 margin 會發生摺疊。

W3C CSS 2.1 規範中的一個概念,它決定了元素如何對其內容進行佈局,以及與其他元素的關係和相互作用。

13.解釋下 CSS sprites,以及你要如何在頁面或網站中使用它。

CSS Sprites 其實就是把網頁中一些背景圖片整合到一張圖片檔案中,再利用 CSS
的”background-image”,”background-repeat”,”background-position”的組合進行背景定位,background-position 可以用數字能精確的定位出背景圖片的位置。這樣可以減少很多圖片請求的開銷,因為請求耗時比較長;請求雖然可以併發,但是也有限制,一般瀏覽器都是6個。對於未來而言,就不需要這樣做了,因為有了 http2。

 

14. 說說你對語義化的理解?

1. 去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構

2. 有利於SEO:和搜尋引擎建立良好溝通,有助於爬蟲抓取更多的有效資訊:爬蟲依賴於標籤來確定上下文和各個關鍵字的權重;

3. 方便其他裝置解析(如螢幕閱讀器、盲人閱讀器、移動裝置)以意義的方式來渲染網頁;

4. 便於團隊開發和維護,語義化更具可讀性,是下一步吧網頁的重要動向,遵循W3C標準的團隊都遵循這個標準,可以減少差異化。

 

15. Doctype作用? 嚴格模式與混雜模式如何區分?它們有何意義?

1.<!DOCTYPE> 宣告位於文件中的最前面,處於 <html>
標籤之前。告知瀏覽器以何種模式來渲染文件。 

2. 嚴格模式的排版和 JS
運作模式是  以該瀏覽器支援的最高標準執行。

3. 在混雜模式中,頁面以寬鬆的向後相容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。

4. DOCTYPE不存在或格式不正確會導致文件以混雜模式呈現。 

 

16. 你知道多少種Doctype文件型別?

1. 該標籤可宣告三種 DTD
型別,分別表示嚴格版本、過渡版本以及基於框架的 HTML
文件。

2. HTML 4.01 規定了三種文件型別:Strict、Transitional
以及 Frameset。

3. XHTML 1.0 規定了三種 XML
文件型別:Strict、Transitional
以及 Frameset。

4. Standards (標準)模式(也就是嚴格呈現模式)用於呈現遵循最新標準的網頁,而 Quirks(包容)模式(也就是鬆散呈現模式或者相容模式)用於呈現為傳統瀏覽器而設計的網頁。

 

17. HTML與XHTML——二者有什麼區別

1. 所有的標記都必須要有一個相應的結束標記

2. 所有標籤的元素和屬性的名字都必須使用小寫

3. 所有的 XML
標記都必須合理巢狀

4. 所有的屬性必須用引號 “”
括起來

5. 把所有 <
和 & 特殊符號用編碼表示

6. 給所有屬性賦一個值

7. 不要在註釋內容中使用 “–“

8. 圖片必須有說明文字

 

 

18. html常見相容性問題?

1. png24位的圖片在iE6瀏覽器上出現背景

解決方案:做成PNG8,也可以引用一段指令碼處理.

2. 瀏覽器預設的margin和padding不同

解決方案:加一個全域性的 *{margin:0;padding:0;}
來統一。

3. IE6雙邊距bug:在IE6下,如果對元素設定了浮動,同時又設定了margin-left或margin-right,margin值會加倍。

1

#box{ float:left; width:10px; margin:0 0 0 10px;} 

這種情況之下IE會產生20px的距離

解決方案:在float的標籤樣式控制中加入 _display:inline; 將其轉化為行內屬性。( _ 這個符號只有ie6會識別)

4. 漸進識別的方式,從總體中逐漸排除區域性。 

首先,巧妙的使用“\9”這一標記,將IE遊覽器從所有情況中分離出來。 

接著,再次使用 ” ” 將IE8和IE7、IE6分離開來,這樣IE8已經獨立識別。

1

2

3

4

5

6

.bb{

    background-color:#f1ee18; /*所有識別*/

    .background-color:#00deff\9; /*IE6、7、8識別*/

     background-color:#a200ff; /*IE6、7識別*/

    _background-color:#1e0bd1; /*IE6識別*/ 

 

5.IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,也可以使用 getAttribute()
獲取自定義屬性;Firefox下,只能使用getAttribute()獲取自定義屬性

解決方法:統一通過getAttribute()獲取自定義屬性

6. IE下,event物件有 x、y 屬性,但是沒有 pageX、pageY屬性;Firefox下,event物件有 pageX、pageY 屬性,但是沒有 x、y 屬性

解決方法:(條件註釋)缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。

7. Chrome 中文介面下預設會將小於 12px
的文字強制按照 12px 顯示

解決方法:可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決

8. 超連結訪問過後 hover
樣式就不出現了,被點選訪問過的超連結樣式不在具有 hover 和 active 了

解決方法:改變CSS屬性的排列順序 L-V-H-A

1

2

3

4

a:link {}

a:visited {}

a:hover {}

a:active {}

 

9.怪異模式問題:漏寫 DTD
宣告,Firefox 仍然會按照標準模式來解析網頁,但在 IE 中會觸發怪異模式。為避免怪異模式給我們帶來不必要的麻煩,最好養成書寫 DTD 宣告的好習慣。現在可以使用[html5](http://www.w3.org/TR/html5/single-page.html)推薦的寫法:<!DOCTYPE html>

 

10. 上下margin重合問題:ie和ff都存在,相鄰的兩個div的margin-left和margin-right不會重合,但是margin-top和margin-bottom卻會發生重合。

解決方法:養成良好的程式碼編寫習慣,同時採用margin-top或者同時採用margin-bottom。

11. ie6對png圖片格式支援不好

解決方案:引用一段指令碼處理

 

19.解釋下浮動和它的工作原理?清楚浮動的技巧

浮動元素脫離文件流,不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

1. 使用空標籤清除浮動。

這種方法是在所有浮動標籤後面新增一個空標籤 定義cssclear:both.
弊端就是增加了無意義標籤。

2. 使用overflow。

給包含浮動元素的父標籤新增css屬性 overflow:auto; zoom:1; zoom:1用於相容IE6。

3. 使用after偽物件清除浮動。

該方法只適用於非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須為需要清除浮動元素的偽物件中設定 height:0,否則該元素會比實際高出若干畫素;

 

20.浮動元素引起的問題和解決辦法?

浮動元素引起的問題:

1. 父元素的高度無法被撐開,影響與父元素同級的元素

2. 與浮動元素同級的非浮動元素會跟隨其後

3. 若非第一個元素浮動,則該元素之前的元素也需要浮動,否則會影響頁面顯示的結構

解決方法:

使用 CSS 中的 clear:both; 屬性來清除元素的浮動可解決2、3問題,對於問題1,新增如下樣式,給父元素新增clearfix樣式:

1

2

.clearfix:after{content: “.”;display: block;height: 0;clear: both;visibility: hidden;}

.clearfix{display: inline-block;} /* for IE/Mac */

 

清除浮動的幾種方法:

1. 額外標籤法,<div style=”clear:both;”></div>(缺點:不過這個辦法會增加額外的標籤使HTML結構看起來不夠簡潔。)

2. 使用after偽元素

1

2

3

4

5

6

7

#parent:after{

    content:”.”;

    height:0;

    visibility:hidden;

    display:block;

    clear:both;

}

3. 浮動外部元素

4. 設定 overflow
為 hidden 或者 auto

21. IE 8以下版本的瀏覽器中的盒模型有什麼不同

IE8以下瀏覽器的盒模型中定義的元素的寬高包括內邊距和邊框

 

22. DOM操作——怎樣新增、移除、移動、複製、建立和查詢節點

1. 建立新節點

1

2

3

createDocumentFragment() // 建立一個DOM片段

createElement() // 建立一個具體的元素

createTextNode() // 建立一個文字節點

 

2. 新增、移除、替換、插入

1

2

3

4

appendChild()

removeChild()

replaceChild()

insertBefore() // 在已有的子節點前插入一個新的子節點

 

3. 查詢

1

2

3

getElementsByTagName() // 通過標籤名稱

getElementsByName() // 通過元素的Name屬性的值(IE容錯能力較強,會得到一個陣列,其中包括id等於name值的)

getElementById() // 通過元素Id,唯一性

 

23. html5有哪些新特性、移除了那些元素?如何處理HTML5新標籤的瀏覽器相容問題?如何區分 HTML 和 HTML5?

新特性:

HTML5 現在已經不是 SGML
的子集,主要是關於影象,位置,儲存,多工等功能的增加。

1. 拖拽釋放(Drag and drop) API 

2. 語義化更好的內容標籤(header,nav,footer,aside,article,section)

3. 音訊、視訊API(audio,video)

4. 畫布(Canvas) API

5. 地理(Geolocation) API

6. 本地離線儲存 localStorage
長期儲存資料,瀏覽器關閉後資料不丟失;

7.sessionStorage 的資料在瀏覽器關閉後自動刪除

8. 表單控制元件,calendar、date、time、email、url、search 

9. 新的技術webworker, websocket, Geolocation

 

移除的元素:

1. 純表現的元素:basefont,big,center,font, s,strike,tt,u;

2. 對可用性產生負面影響的元素:frame,frameset,noframes;

 

支援HTML5新標籤:

1. IE8/IE7/IE6支援通過 document.createElement
方法產生的標籤,可以利用這一特性讓這些瀏覽器支援 HTML5 新標籤,瀏覽器支援新標籤後,還需要新增標籤預設的樣式(當然最好的方式是直接使用成熟的框架、使用最多的是html5shiv框架):

1

2

3

<!–[if lt IE 9]> 

<script> src=”http://html5shiv.googlecode.com/svn/trunk/html5.js“</script> 

<![endif]–> 

如何區分: 

DOCTYPE宣告新增的結構元素、功能元素

 

24.iframe的優缺點

優點:

1. 解決載入緩慢的第三方內容如圖示和廣告等的載入問題

2. Securitysandbox

3. 並行載入指令碼

缺點:

1. iframe會阻塞主頁面的Onload事件

2. 即時內容為空,載入也需要時間

3. 沒有語意

 

25. 如何實現瀏覽器內多個標籤頁之間的通訊?

呼叫 localstorge、cookies 等本地儲存方式

 

26.webSocket 如何相容低瀏覽器?

Adobe Flash Socket 、ActiveX HTMLFile (IE)
、 基於 multipart 編碼傳送 XHR 、 基於長輪詢的 XHR

 

27.執行緒與程序的區別

1. 一個程式至少有一個程序,一個程序至少有一個執行緒

2. 執行緒的劃分尺度小於程序,使得多執行緒程式的併發性高

3. 另外,程序在執行過程中擁有獨立的記憶體單元,而多個執行緒共享記憶體,從而極大地提高了程式的執行效率

4. 執行緒在執行過程中與程序還是有區別的。每個獨立的執行緒有一個程式執行的入口、順序執行序列和程式的出口。但是執行緒不能夠獨立執行,必須依存在應用程式中,由應用程式提供多個執行緒執行控制 

5. 從邏輯角度來看,多執行緒的意義在於一個應用程式中,有多個執行部分可以同時執行。但作業系統並沒有將多個執行緒看做多個獨立的應用,來實現程序的排程和管理以及資源分配。這就是程序和執行緒的重要區別

 

28. 你如何對網站的檔案和資源進行優化?

期待的解決方案包括:

1. 檔案合併

2. 檔案最小化/檔案壓縮

3. 使用 CDN
託管

4. 快取的使用(多個域名來提供快取)

5. 其他

 

29. 請說出三種減少頁面載入時間的方法

1. 優化圖片 

2. 影象格式的選擇(GIF:提供的顏色較少,可用在一些對顏色要求不高的地方) 

3. 優化CSS(壓縮合並css,如margin-top, margin-left…) 

4. 網址後加斜槓(如www.campr.com/目錄,會判斷這個目錄是什麼檔案型別,或者是目錄。) 

5. 標明高度和寬度(如果瀏覽器沒有找到這兩個引數,它需要一邊下載圖片一邊計算大小,如果圖片很多,瀏覽器需要不斷地調整頁面。這不但影響速度,也影響瀏覽體驗。 

當瀏覽器知道了高度和寬度引數後,即使圖片暫時無法顯示,頁面上也會騰出圖片的空位,然後繼續載入後面的內容。從而載入時間快了,瀏覽體驗也更好了) 

6. 減少http請求(合併檔案,合併圖片)

 

30. 你都使用哪些工具來測試程式碼的效能?

1. Profiler

2. JSPerf(http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout)

3. Dromaeo

 

31. 什麼是 FOUC(無樣式內容閃爍)?你如何來避免 FOUC?

FOUC – Flash OfUnstyled Content
文件樣式閃爍

<styletype=”text/css” media=”all”>@import”../fouc.css”;</style> 

而引用CSS檔案的@import就是造成這個問題的罪魁禍首。IE會先載入整個HTML文件的DOM,然後再去匯入外部的CSS檔案,因此,在頁面DOM載入完成到CSS匯入完成中間會有一段時間頁面上的內容是沒有樣式的,這段時間的長短跟網速,電腦速度都有關係。

解決方法簡單的出奇,只要在<head>之間加入一個<link>或者<script>元素就可以了。

 

32. null和undefined的區別?

null是一個表示”無”的物件,轉為數值時為0

undefined是一個表示”無”的原始值,轉為數值時為NaN

 

當宣告的變數還未被初始化時,變數的預設值為undefined

null用來表示尚未存在的物件,常用來表示函式企圖返回一個不存在的物件

 

undefined表示 “缺少值”,就是此處應該有一個值,但是還沒有定義。典型用法是:

1. 變數被宣告瞭,但沒有賦值時,就等於 undefined

2. 呼叫函式時,應該提供的引數沒有提供,該引數等於 undefined

3. 物件沒有賦值的屬性,該屬性的值為 undefined

4. 函式沒有返回值時,預設返回 undefined

 

null表示“沒有物件”,即該處不應該有值。典型用法是:

1. 作為函式的引數,表示該函式的引數不是物件

2. 作為物件原型鏈的終點

 

33. new操作符具體幹了什麼呢?

1. 建立一個空物件,並且 this
變數引用該物件,同時還繼承了該函式的原型

2. 屬性和方法被加入到 this
引用的物件中

3. 新建立的物件由 this
所引用,並且最後隱式的返回 this

 

1

2

3

var obj  = {};

obj.__proto__ = Base.prototype;

Base.call(obj); 

 

34. 對JSON 的瞭解?

JSON(JavaScriptObject Notation)
是一種輕量級的資料交換格式。它是基於JavaScript的一個子集。資料格式簡單, 易於讀寫, 佔用頻寬小。

1

{“age”:”12″, “name”:”back”}

 

35. s延遲載入的方式有哪些?

1. defer和async

2. 動態建立DOM方式(建立script,插入到DOM中,載入完畢後callBack)

3. 按需非同步載入js

 

36. 如何解決跨域問題?

1. jsonp(jsonp
的原理是動態插入 script 標籤)

2.document.domain iframe

3. window.name、window.postMessage

4. 伺服器上設定代理頁面

 

37. documen.write和innerHTML 的區別

document.write 只能重繪整個頁面

innerHTML 可以重繪頁面的一部分

 

38. .call() 和.apply() 的作用?

動態改變某個類的某個方法的執行環境

 

39. 哪些操作會造成記憶體洩漏?

記憶體洩漏指任何物件在您不再擁有或需要它之後仍然存在。

垃圾回收器定期掃描物件,並計算引用了每個物件的其他物件的數量。如果一個物件的引用數量為 0(沒有其他物件引用過該物件),或對該物件的惟一引用是迴圈的,那麼該物件的記憶體即可回收。

1. setTimeout 的第一個引數使用字串而非函式的話,會引發記憶體洩漏。

2. 閉包

3. 控制檯日誌

4. 迴圈(在兩個物件彼此引用且彼此保留時,就會產生一個迴圈)

 

40.如何判斷當前指令碼執行在瀏覽器還是node環境中?

通過判斷 Global 物件是否為window,如果不為window,當前指令碼沒有執行在瀏覽器中

 

41. 什麼叫優雅降級和漸進增強?

1. 優雅降級:Web站點在所有新式瀏覽器中都能正常工作,如果使用者使用的是老式瀏覽器,則程式碼會檢查以確認它們是否能正常工作。由於IE獨特的盒模型佈局問題,針對不同版本的IE的hack實踐過優雅降級了,為那些無法支援功能的瀏覽器增加候選方案,使之在舊式瀏覽器上以某種形式降級體驗卻不至於完全失效。

 

2. 漸進增強:從被所有瀏覽器支援的基本功能開始,逐步地新增那些只有新式瀏覽器才支援的功能,向頁面增加無害於基礎瀏覽器的額外樣式和功能的。當瀏覽器支援時,它們會自動地呈現出來並發揮作用。

 

42.對Node的優點和缺點提出了自己的看法?

優點:

1. 因為Node是基於事件驅動和無阻塞的,所以非常適合處理併發請求,因此構建在Node上的代理伺服器相比其他技術實現(如Ruby)的伺服器表現要好得多。

2. 與Node代理伺服器互動的客戶端程式碼是由javascript語言編寫的,因此客戶端和伺服器端都用同一種語言編寫,這是非常美妙的事情。

 

缺點:

1. Node是一個相對新的開源專案,所以不太穩定,它總是一直在變。

2. 缺少足夠多的第三方庫支援。看起來,就像是Ruby/Rails當年的樣子(第三方庫現在已經很豐富了,所以這個缺點可以說不存在了)。

 

43. 對前端介面工程師這個職位是怎麼樣理解的?它的前景會怎麼樣?

前端是最貼近使用者的程式設計師,比後端、資料庫、產品經理、運營、安全都近。

1. 實現介面互動

2. 提升使用者體驗

3. 有了Node.js,前端可以實現服務端的一些事情

 

前景:

1. 前端是最貼近使用者的程式設計師,前端的能力就是能讓產品從 90分進化到 100 分,甚至更好

2. 參與專案,快速高質量完成實現效果圖,精確到1px;

3. 與團隊成員,UI設計,產品經理的溝通;

4. 做好的頁面結構,頁面重構和使用者體驗;

5. 處理hack,相容、寫出優美的程式碼格式;

6. 針對伺服器的優化、擁抱最新前端技術。

 

44. 你有哪些效能優化的方法?

1. 減少http請求次數:CSS Sprites, JS、CSS 原始碼壓縮、圖片大小控制合適;網頁 Gzip,CDN 託管,data 快取,圖片伺服器

2. 前端模板 JS 資料,減少由於HTML標籤導致的頻寬浪費,前端用變數儲存AJAX 請求結果,每次操作本地變數,不用請求,減少請求次數

3. 用innerHTML 代替 DOM 操作,減少 DOM 操作次數,優化 javascript 效能

4. 當需要設定的樣式很多時設定 className 而不是直接操作 style

5. 少用全域性變數、快取DOM節點查詢的結果。減少 IO 讀取操作

6. 避免使用CSS Expression(css表示式)又稱 Dynamic properties(動態屬性)

7. 圖片預載入,將樣式表放在頂部,將指令碼放在底部,加上時間戳

45.http狀態碼有那些?分別代表是什麼意思?

1. 100-199 用於指定客戶端應相應的某些動作

2. 200-299 用於表示請求成功

3. 300-399 用於已經移動的檔案並且常被包含在定位頭資訊中指定新的地址資訊

4. 400-499 用於指出客戶端的錯誤

    400:語義有誤,當前請求無法被伺服器理解

    401:當前請求需要使用者驗證

    403:伺服器已經理解請求,但是拒絕執行它

5. 500-599 用於支援伺服器錯誤

    503:服務不可用

 

46.一個頁面從輸入 URL 到頁面載入顯示完成,這個過程中都發生了什麼?

分為4個步驟:

1. 當傳送一個URL 請求時,不管這個 URL 是 Web 頁面的 URL 還是 Web 頁面上每個資源的URL,瀏覽器都會開啟一個執行緒來處理這個請求,同時在遠端 DNS 伺服器上啟動一個 DNS 查詢。這能使瀏覽器獲得請求對應的 IP 地址。

2. 瀏覽器與遠端Web 伺服器通過 TCP 三次握手協商來建立一個TCP/IP 連線。該握手包括一個同步報文,一個同步-應答報文和一個應答報文,這三個報文在 瀏覽器和伺服器之間傳遞。該握手首先由客戶端嘗試建立起通訊,而後伺服器應答並接受客戶端的請求,最後由客戶端發出該請求已經被接受的報文。

3. 一旦TCP/IP 連線建立,瀏覽器會通過該連線向遠端伺服器傳送 HTTP 的 GET 請求。遠端伺服器找到資源並使用 HTTP 響應返回該資源,值為 200 的 HTTP 響應狀態表示一個正確的響應。

4. 此時,Web 伺服器提供資源服務,客戶端開始下載資源。

 

請求返回後,便進入了我們關注的前端模組

簡單來說,瀏覽器會解析 HTML 生成 DOM Tree,其次會根據 CSS 生成 CSS Rule Tree,而 javascript 又可以根據 DOM API 操作 DOM

 

47. 平時如何管理你的專案?

1. 先期團隊必須確定好全域性樣式(globe.css),編碼模式(utf-8) 等

2. 編寫習慣必須一致(例如都是採用繼承式的寫法,單樣式都寫成一行)

3. 標註樣式編寫人,各模組都及時標註(標註關鍵樣式呼叫的地方)

4. 頁面進行標註(例如 頁面 模組 開始和結束)

5. CSS 跟 HTML 分資料夾並行存放,命名都得統一(例如 style.css)

6. JS 分資料夾存放 命名以該 JS 功能為準的英文翻譯

7. 圖片採用整合的images.png png8 格式檔案使用 儘量整合在一起使用方便將來的管理 

 

48. 說說最近最流行的一些東西吧?常去的哪些網站?

最流行的一些東西:

1. Node.js

2. Mongodb

3. npm

4. MVVM

5. MEAN

6. three.js

7. React

 

常去的網站:

1. 牛客網

2. Github

3. CSDN

 

49.javascript物件的幾種建立方式

1. 工廠模式

2. 建構函式模式

3. 原型模式

4. 混合建構函式和原型模式

5. 動態原型模式

6. 寄生建構函式模式

7. 穩妥建構函式模式

 

50.javascript繼承的 6 種方法

1. 原型鏈繼承

2. 借用建構函式繼承

3. 組合繼承(原型 借用構造)

4. 原型式繼承

5. 寄生式繼承

6. 寄生組合式繼承

 

51.ajax 的過程是怎樣的

1. 建立XMLHttpRequest物件,也就是建立一個非同步呼叫物件

2. 建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證資訊

3. 設定響應HTTP請求狀態變化的函式

4. 傳送HTTP請求

5. 獲取非同步呼叫返回的資料

6. 使用JavaScript和DOM實現區域性重新整理

 

52. 非同步載入和延遲載入

1. 非同步載入的方案: 動態插入 script 標籤

2. 通過 ajax去獲取 js 程式碼,然後通過 eval 執行

3. script 標籤上新增defer 或者 async 屬性

4. 建立並插入iframe,讓它非同步執行 js

5. 延遲載入:有些js 程式碼並不是頁面初始化的時候就立刻需要的,而稍後的某些情況才需要的

 

53. 前端的安全問題?

1. XSS

2. sql注入

3. CSRF:是跨站請求偽造,很明顯根據剛剛的解釋,他的核心也就是請求偽造,通過偽造身份提交POST和GET請求來進行跨域的攻擊

 

完成CSRF需要兩個步驟:

1. 登陸受信任的網站A,在本地生成 COOKIE

2. 在不登出A的情況下,或者本地 COOKIE 沒有過期的情況下,訪問危險網站B。

 

54.ie 各版本和 chrome 可以並行下載多少個資源

1. IE6 2 個併發

2. iE7 升級之後的 6個併發,之後版本也是 6 個

3. Firefox,chrome也是6個

 

55.javascript裡面的繼承怎麼實現,如何避免原型鏈上面的物件共享

用建構函式和原型鏈的混合模式去實現繼承,避免物件共享可以參考經典的extend()函式,很多前端框架都有封裝的,就是用一個空函式當做中間變數

 

56. grunt, YUI compressor 和 google clojure用來進行程式碼壓縮的用法。

grunt:

UglifyJS 是基於NodeJS 的 Javascript 語法解析/壓縮/格式化工具

官網:http://lisperator.net/uglifyjs/或者 https://github.com/mishoo/UglifyJS2

安裝:

1

$ npm install uglify-js -g

使用方法見官網demo

 

YUI compressor:

YUI Compressor 是一個用來壓縮JS 和 CSS 檔案的工具,採用Java開發。

使用方法:

1

2

3

4

// 壓縮JS

java -jar yuicompressor-2.4.2.jar –type js –charset utf-8 -v src.js > packed.js

// 壓縮CSS

java -jar yuicompressor-2.4.2.jar –type css –charset utf-8 -v src.css > packed.css

 

Google Closure Compiler:

官網:https://developers.google.com/closure/compiler/

使用方法:

1. 在命令列下使用一個google編譯好的java程式

2. 使用google提供的線上服務

3. 使用google提供的RESTful API

 

57. Flash、Ajax各自的優缺點,在使用中如何取捨?

Flash:

1. Flash適合處理多媒體、向量圖形、訪問機器

2. 對CSS、處理文字上不足,不容易被搜尋

 

Ajax:

1. Ajax對CSS、文字支援很好,支援搜尋

2. 多媒體、向量圖形、機器訪問不足

 

共同點:

1. 與伺服器的無重新整理傳遞訊息

2. 可以檢測使用者離線和線上狀態

2. 操作DOM

 

58. 請解釋一下 JavaScript 的同源策略。

概念:

同源策略是客戶端指令碼(尤其是Javascript)的重要的安全度量標準。它最早出自NetscapeNavigator2.0,其目的是防止某個文件或指令碼從多個不同源裝載。

這裡的同源策略指的是:協議,域名,埠相同,同源策略是一種安全協議,指一段指令碼只能讀取來自同一來源的視窗和文件的屬性。

 

為什麼要有同源限制:

我們舉例說明:比如一個黑客程式,他利用Iframe把真正的銀行登入頁面嵌到他的頁面上,當你使用真實的使用者名稱,密碼登入時,他的頁面就可以通過Javascript讀取到你的表單中input中的內容,這樣使用者名稱,密碼就輕鬆到手了。

 

59. 為什麼要有同源限制?

我們舉例說明:比如一個黑客程式,他利用Iframe把真正的銀行登入頁面嵌到他的頁面上,當你使用真實的使用者名稱,密碼登入時,他的頁面就可以通過Javascript讀取到你的表單中input中的內容,這樣使用者名稱,密碼就輕鬆到手了。

 

60. 什麼是 “use strict”; ? 使用它的好處和壞處分別是什麼?

ECMAscript 5新增了第二種執行模式:”嚴格模式”(strictmode)。顧名思義,這種模式使得Javascript在更嚴格的條件下執行。

 

設立”嚴格模式”的目的,主要有以下幾個:

1. 消除Javascript語法的一些不合理、不嚴謹之處,減少一些怪異行為;

2. 消除程式碼執行的一些不安全之處,保證程式碼執行的安全;

3. 提高編譯器效率,增加執行速度;

4. 為未來新版本的Javascript做好鋪墊。

注:經過測試IE6,7,8,9 均不支援嚴格模式。

 

缺點:

現在網站的JS 都會進行壓縮,一些檔案用了嚴格模式,而另一些沒有。這時這些本來是嚴格模式的檔案,被 merge 後,這個串就到了檔案的中間,不僅沒有指示嚴格模式,反而在壓縮後浪費了位元組。

 

61.GET和POST的區別,何時使用POST?

GET:一般用於資訊獲取,使用URL傳遞引數,對所傳送資訊的數量也有限制,一般在2000個字元

POST:一般用於修改伺服器上的資源,對所傳送的資訊沒有限制

 

GET方式需要使用Request.QueryString 來取得變數的值

POST方式通過Request.Form 來獲取變數的值

也就是說Get 是通過位址列來傳值,而 Post 是通過提交表單來傳值。

 

在以下情況中,請使用 POST 請求:

1. 無法使用快取檔案(更新伺服器上的檔案或資料庫)

2. 向伺服器傳送大量資料(POST 沒有資料量限制)

3. 傳送包含未知字元的使用者輸入時,POST 比 GET 更穩定也更可靠

 

62. 哪些地方會出現css阻塞,哪些地方會出現js阻塞?

js 的阻塞特性:所有瀏覽器在下載 JS 的時候,會阻止一切其他活動,比如其他資源的下載,內容的呈現等等。直到 JS 下載、解析、執行完畢後才開始繼續並行下載其他資源並呈現內容。為了提高使用者體驗,新一代瀏覽器都支援並行下載 JS,但是 JS 下載仍然會阻塞其它資源的下載(例如.圖片,css檔案等)。

由於瀏覽器為了防止出現 JS 修改 DOM 樹,需要重新構建DOM 樹的情況,所以就會阻塞其他的下載和呈現。

嵌入 JS 會阻塞所有內容的呈現,而外部 JS 只會阻塞其後內容的顯示,2 種方式都會阻塞其後資源的下載。也就是說外部樣式不會阻塞外部指令碼的載入,但會阻塞外部指令碼的執行。

 

CSS 怎麼會阻塞載入了?CSS 本來是可以並行下載的,在什麼情況下會出現阻塞載入了(在測試觀察中,IE6 下 CSS 都是阻塞載入)

當 CSS 後面跟著嵌入的 JS 的時候,該 CSS 就會出現阻塞後面資源下載的情況。而當把嵌入 JS 放到 CSS 前面,就不會出現阻塞的情況了。

根本原因:因為瀏覽器會維持 html 中 css 和 js 的順序,樣式表必須在嵌入的 JS 執行前先載入、解析完。而嵌入的 JS 會阻塞後面的資源載入,所以就會出現上面 CSS 阻塞下載的情況。

 

嵌入JS應該放在什麼位置?

1. 放在底部,雖然放在底部照樣會阻塞所有呈現,但不會阻塞資源下載。

2. 如果嵌入JS放在head中,請把嵌入JS放在CSS頭部。

3. 使用defer(只支援IE)

4. 不要在嵌入的JS中呼叫執行時間較長的函式,如果一定要用,可以用 setTimeout 來呼叫

 

Javascript無阻塞載入具體方式:

1. 將指令碼放在底部。<link>還是放在head中,用以保證在js載入前,能載入出正常顯示的頁面。<script>標籤放在</body>前。

2. 阻塞指令碼:由於每個<script>標籤下載時阻塞頁面解析過程,所以限制頁面的<script>總數也可以改善效能。適用於內聯指令碼和外部指令碼。

3. 非阻塞指令碼:等頁面完成載入後,再載入js程式碼。也就是,在 window.onload 事件發出後開始下載程式碼。

4. defer屬性:支援IE4和fierfox3.5更高版本瀏覽器

5. 動態指令碼元素:文件物件模型(DOM)允許你使用js動態建立HTML的幾乎全部文件內容。程式碼如下:

1

2

3

4

5

6

<script>

    var script=document.createElement(“script”);

    script.type=”text/javascript”;

    script.src=”file.js”;

    document.getElementsByTagName(“head”)[0].appendChild(script);

</script>

此技術的重點在於:無論在何處啟動下載,檔案額下載和執行都不會阻塞其他頁面處理過程,即使在head裡(除了用於下載檔案的 http 連結)。

 

63.eval是做什麼的?

1. 它的功能是把對應的字串解析成JS程式碼並執行

2. 應該避免使用eval,不安全,非常耗效能(2次,一次解析成js語句,一次執行)

 

64. 寫一個通用的事件偵聽器函式

// event(事件)工具集,來源:github.com/markyun

markyun.Event = {

    //頁面載入完成後

    readyEvent: function(fn) {

       if (fn==null) {

           fn=document;

       }

       var oldonload = window.onload;

       if (typeof window.onload != ‘function’) {

           window.onload = fn;

       } else {

           window.onload = function() {

               oldonload();

               fn();

           };

       }

    },

    //視能力分別使用dom0||dom2||IE方式 來繫結事件

    //引數: 操作的元素,事件名稱 ,事件處理程式

    addEvent: function(element, type, handler) {

       if (element.addEventListener) {

           //事件型別、需要執行的函式、是否捕捉

           element.addEventListener(type,handler, false);

       } else if (element.attachEvent) {

           element.attachEvent(‘on’ type, function(){

               handler.call(element);

           });

       } else {

           element[‘on’ type] = handler;

       }

    },

    //移除事件

    removeEvent: function(element, type, handler) {

       if (element.removeEnentListener) {

           element.removeEnentListener(type,handler, false);

       } else if (element.datachEvent) {

           element.detachEvent(‘on’ type, handler);

       } else {

           element[‘on’ type] = null;

       }

    }, 

    //阻止事件 (主要是事件冒泡,因為IE不支援事件捕獲)

    stopPropagation: function(ev) {

       if (ev.stopPropagation) {

           ev.stopPropagation();

       } else {

           ev.cancelBubble = true;

       }

    },

    //取消事件的預設行為

    preventDefault: function(event) {

       if (event.preventDefault) {

           event.preventDefault();

       } else {

           event.returnValue = false;

       }

    },

    //獲取事件目標

    getTarget: function(event) {

       return event.target || event.srcElement;

    },

    //獲取event物件的引用,取到事件的所有資訊,確保隨時能使用event;

    getEvent: function(e) {

       var ev = e || window.event;

       if (!ev) {

           var c = this.getEvent.caller;

           while (c) {

               ev = c.arguments[0];

               if (ev && Event ==ev.constructor) {

                   break;

               }

               c = c.caller;

           }

       }

       return ev;

    }

};

 

65.Node.js 的適用場景

1. 高併發

2. 聊天

3. 實時訊息推送   

 

66.JavaScript 原型,原型鏈 ? 有什麼特點?

1. 原型物件也是普通的物件,是物件一個自帶隱式的__proto__
屬性,原型也有可能有自己的原型,如果一個原型物件的原型不為 null 的話,我們就稱之為原型鏈

2. 原型鏈是由一些用來繼承和共享屬性的物件組成的(有限的)物件鏈

 

67. 怎麼重構頁面?

1. 編寫 CSS

2. 讓頁面結構更合理化,提升使用者體驗

3. 實現良好的頁面效果和提升效能

 

68.WEB應用從伺服器主動推送Data到客戶端有那些方式?

1. html5 websocket

2. WebSocket 通過 Flash

3. XHR長時間連線

4. XHR MultipartStreaming

5. 不可見的Iframe

6.<script>標籤的長時間連線(可跨域)

 

69. 事件、IE與火狐的事件機制有什麼區別? 如何阻止冒泡?

1. 我們在網頁中的某個操作(有的操作對應多個事件)。例如:當我們點選一個按鈕就會產生一個事件。是可以被 JavaScript
偵測到的行為

2. 事件處理機制:IE是事件冒泡、firefox同時支援兩種事件模型,也就是:捕獲型事件和冒泡型事件

3.ev.stopPropagation();

注意舊ie的方法:ev.cancelBubble = true;

 

70.Ajax 是什麼?Ajax 的互動模型?同步和非同步的區別?如何解決跨域問題?

Ajax 是什麼:

1. 通過非同步模式,提升了使用者體驗

2. 優化了瀏覽器和伺服器之間的傳輸,減少不必要的資料往返,減少了頻寬佔用

3. Ajax 在客戶端執行,承擔了一部分本來由伺服器承擔的工作,減少了大使用者量下的伺服器負載。

 

Ajax 的最大的特點:

1. Ajax可以實現動態不重新整理(區域性重新整理)

2. readyState 屬性狀態 有5個可取值: 0 = 未初始化,1 = 啟動, 2 = 傳送,3 = 接收,4 = 完成

 

Ajax 同步和非同步的區別:

1. 同步:提交請求 ->
等待伺服器處理 -> 處理完畢返回,這個期間客戶端瀏覽器不能幹任何事

2. 非同步:請求通過事件觸發 ->
伺服器處理(這是瀏覽器仍然可以作其他事情)-> 處理完畢

ajax.open方法中,第3個引數是設同步或者非同步。

 

Ajax 的缺點:

1. Ajax 不支援瀏覽器 back
按鈕

2. 安全問題 Ajax
暴露了與伺服器互動的細節

3. 對搜尋引擎的支援比較弱

4. 破壞了程式的異常機制

5. 不容易除錯

 

解決跨域問題:

1. jsonp

2. iframe

3. window.name、window.postMessage

4. 伺服器上設定代理頁面

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

71. js物件的深度克隆程式碼實現

function clone(Obj){

    varbuf;   

    if(Obj instanceof Array) {

       buf = [];  // 建立一個空的陣列

       var i = Obj.length;

       while (i–) {

           buf[i] = clone(Obj[i]);

       }

       return buf;

    } elseif (Obj instanceof Object){

       buf = {};  // 建立一個空物件

       for (var k in Obj) {  //
為這個物件新增新的屬性

           buf[k] = clone(Obj[k]);

       }

       return buf;

    }else{

       return Obj;

    }

}

 

72. 對網站重構的理解

網站重構:在不改變外部行為的前提下,簡化結構、新增可讀性,而在網站前端保持一致的行為。也就是說是在不改變 UI
的情況下,對網站進行優化,在擴充套件的同時保持一致的 UI。

 

對於傳統的網站來說重構通常是:

1. 表格(table)佈局改為 DIV CSS

2. 使網站前端相容於現代瀏覽器(針對於不合規範的CSS、如對 IE6 有效的)

3. 對於移動平臺的優化

4. 針對於 SEO
進行優化

5. 深層次的網站重構應該考慮的方面

6. 減少程式碼間的耦合

7. 讓程式碼保持彈性

8. 嚴格按規範編寫程式碼

9. 設計可擴充套件的API

10. 代替舊有的框架、語言(如VB)

11. 增強使用者體驗

12. 通常來說對於速度的優化也包含在重構中

13. 壓縮JS、CSS、image等前端資源(通常是由伺服器來解決)

14. 程式的效能優化(如資料讀寫)

15. 採用CDN來加速資源載入

16. 對於JS DOM的優化

17. HTTP伺服器的檔案快取

73. 如何獲取UA

<script> 

function whatBrowser(){  

    document.Browser.Name.value=navigator.appName; 

    document.Browser.Version.value=navigator.appVersion; 

    document.Browser.Code.value=navigator.appCodeName; 

    document.Browser.Agent.value=navigator.userAgent; 

}

</script>

 

74.js 陣列去重(沒答案)

75. HTTP狀態碼

100 Continue 繼續,一般在傳送post請求時,已傳送了http header之後服務端將返回此資訊,表示確認,之後傳送具體引數資訊

200 OK   正常返回資訊

201 Created 請求成功並且伺服器建立了新的資源

202 Accepted 伺服器已接受請求,但尚未處理

301 MovedPermanently  請求的網頁已永久移動到新位置

302 Found  臨時性重定向

303 See Other 臨時性重定向,且總是使用 GET
請求新的 URI

304 Not Modified 自從上次請求後,請求的網頁未修改過

400 Bad Request 伺服器無法理解請求的格式,客戶端不應當嘗試再次使用相同的內容發起請求

401 Unauthorized 請求未授權

403 Forbidden 禁止訪問

404 Not Found 找不到如何與 URI
相匹配的資源

500 InternalServer Error  最常見的伺服器端錯誤

503 ServiceUnavailable 伺服器端暫時無法處理請求(可能是過載或維護)

 

76.cache-control

網頁的快取是由HTTP訊息頭中的“Cache-control”來控制的,常見的取值有private、no-cache、max-age、must-revalidate等,預設為private。

Expires 頭部欄位提供一個日期和時間,響應在該日期和時間後被認為失效。允許客戶端在這個時間之前不去檢查(發請求),等同max-age的效果。但是如果同時存在,則被Cache-Control的max-age覆蓋。

Expires =”Expires” “:” HTTP-date

例如:

Expires: Thu, 01Dec 1994 16:00:00 GMT
(必須是GMT格式)

如果把它設定為-1,則表示立即過期

Expires 和 max-age
都可以用來指定文件的過期時間,但是二者有一些細微差別

1. Expires在HTTP/1.0中已經定義,Cache-Control:max-age在HTTP/1.1中才有定義,為了向下相容,僅使用max-age不夠

2. Expires指定一個絕對的過期時間(GMT格式),這麼做會導致至少2個問題:

   2.1客戶端和伺服器時間不同步導致Expires的配置出現問題。 

   2.2很容易在配置後忘記具體的過期時間,導致過期來臨出現浪湧現象

3. max-age 指定的是從文件被訪問後的存活時間,這個時間是個相對值(比如:3600s),相對的是文件第一次被請求時伺服器記錄的Request_time(請求時間)

4. Expires 指定的時間可以是相對檔案的最後訪問時間(Atime)或者修改時間(MTime),而max-age相對對的是文件的請求時間(Atime)

5. 如果值為no-cache,那麼每次都會訪問伺服器。如果值為max-age,則在過期之前不會重複訪問伺服器。

 

77. js 操作獲取和設定 cookie

// 建立cookie

functionsetCookie(name, value, expires, path, domain, secure) {

    varcookieText = encodeURIComponent(name)  ‘=’ encodeURIComponent(value);

    if(expires instanceof Date) {

       cookieText = ‘; expires=’ expires;}

    if(path) {

       cookieText = ‘; expires=’ expires;}

    if(domain) {

      cookieText = ‘; domain=’ domain;}

    if(secure) {

       cookieText = ‘; secure’;}

    document.cookie= cookieText;

}

// 獲取cookie

functiongetCookie(name) {

    varcookieName = encodeURIComponent(name)  ‘=’;

    varcookieStart = document.cookie.indexOf(cookieName);

    varcookieValue = null;

    if(cookieStart > -1) {

       var cookieEnd = document.cookie.indexOf(‘;’, cookieStart);

       if (cookieEnd == -1) {

           cookieEnd = document.cookie.length;

       }

       cookieValue =decodeURIComponent(document.cookie.substring(cookieStart cookieName.length,cookieEnd));

    }

    returncookieValue;

}

// 刪除cookie

functionunsetCookie(name) {

    document.cookie= name  “= ; expires=”  new Date(0);

}