1. 程式人生 > >前端面試題總結:HTML5,JS,CSS3,相容性。

前端面試題總結:HTML5,JS,CSS3,相容性。



1、 請寫出至少20個HTML5標籤

複製程式碼
<article><aside>
<audio><video>
<canvas><datalist><command> <details><embed>
<figcaption><figure>
<footer><header><nav><section>
<hgroup><keygen>
<mark><time><summary>
複製程式碼

2、 簡述jpg。Gif。png-8.png-24的區別,分別使用場景

  gif、jpg、png格式的圖片在網站製作中的區別

  Gif格式特點:
1.透明性,Gif是一種布林透明型別,既它可以是全透明,也可以是全不透明,但是它並沒有半透明(alpha透明)。
2.動畫,Gif這種格式支援動畫。
3.無損耗性,Gif是一種無損耗的影象格式,這也意味著你可以對gif圖片做任何操作也不會使得影象質量產生損耗。
4.水平掃描,Gif是使用了一種叫作LZW的演算法進行壓縮的,當壓縮gif的過程中,畫素是由上到下水平壓縮的,這也意味著同等條件下,橫向的gif圖片比豎向的gif圖片更加小。例如500*10的圖片比10*500的圖片更加小
5.間隔漸進顯示,Gif支援可選擇性的間隔漸進顯示
  由以上特點看出只有

256種顏色的gif圖片不適合照片,但它適合對顏色要求不高的圖形(比如說圖示,圖表等),它並不是最優的選擇,我們會在後面中看到png是最優的選擇。
  Jpeg格式特點:
1.透明性,它並不支援透明。
2.動畫,它也不支援動畫。
3.損耗性,除了一些比如說旋轉(僅僅是90、180、270度旋轉),裁切,從標準型別到先進型別,編輯圖片的原資料之外,所有其它操作對jpeg影象的處理都會使得它的質量損失。所以我們在編輯過程一般用png作為過渡格式。
4.隔行漸進顯示,它支援隔行漸進顯示(但是ie瀏覽器並不支援這個屬性,但是ie會在整個影象資訊完全到達的時候顯示)。
  由上可以看出Jpeg是最適web上面的攝影圖片和數字照相機中。
Png格式特點:

1.型別,Png這種圖片格式包括了許多子類,但是在實踐中大致可以分為256色的png和全色的png,你完成可以用256色的png代替gif,用全色的png代替jpeg
2.透明性,Png是完全支援alpha透明的(透明,半透明,不透明),儘管有兩個怪異的現象在ie6(下面詳細討論)
3.動畫,它不支援動畫
PNG圖片格式現在包含三種類型:
1.PNG8256色PNG的別名
2.PNG24全色PNG的別名
3.PNG32全色PNG的別名
  基本上PNG32就是PNG24,但是附帶了全alpha通道。就是說每個畫素上不僅儲存了24位真色彩資訊還儲存了8位的alpha通道資訊,就如同GIF能儲存透明和不透明資訊一樣。當我們把圖片放到不太搭配的背景上的時候,透明PNG圖片的邊緣會顯示得更加平滑。
  當然,我也知道你的想法,“但是Photoshop也能生成帶透明通道的PNG圖片!”我也知道,它只是表面上這麼說是PNG24,讓我也產生困惑了。
  作為一個傷感的Fireworks倡導者,我只使用PNG32支援附帶alpha通道的真色彩圖片。不管怎樣,如果你習慣使用Photoshop,你就應該知道,Photoshop在“儲存為WEB格式”中只提供PNG8和PNG24兩種PNG格式。
  我敢肯定你經常會勾選“支援透明”選項,以獲得帶有透明度的PNG圖片,但是這樣你就獲取了一張PNG32圖片。——Photoshop只是覺得把PNG32這個名稱給隱藏掉了。奇怪吧?……
  對png8的誤解
Png8的在ie中的怪異表現:
  半透明的png8在ie6以下的瀏覽器顯示為全透明。
Alpha透明的全色PNG(png32)在ie6中會出現背景顏色(通常是灰色)。
  由上面可以總結:
  (a)全透明的png8可以在任一瀏覽器正常顯示(就像gif一樣)。半透明的png8在除了ie6及其以下的瀏覽器下錯誤的顯示成全透明,其它瀏覽器都能正常顯示半透明。這個bug並不需要特殊對待,因為在不支援半透明的瀏覽器下只是顯示為全透明,對使用者體驗影響不大,它反而是透明gif的加強版。
  (b)第二個bug沒有什麼好的方法解決,只能通過影響效能的方法AlphaImageLoader與需要加特殊標籤(VML)。
  因此得出結論就是:請使用PNG8。
Png8的軟體問題:
Photoshop只能匯出布林透明的PNG8。
Fireworks既能匯出布林透明的PNG8,也能匯出alpha透明的PNG8。

3、 能夠設定文字加粗的樣式屬性是什麼

字型加粗(font-weight)   

功能:用於設定字型筆劃的粗細。 

屬性值:正常度 - normal   

相對度 - bold, bolder, light, lighter   

漸變度 - 100, 200, 300, 400(相當於normal), 500, 600, 700(相當於 bold、 lighter、 bolder、以及數值100-900。   

語法為:h1 {font-weight: 屬性值}

4、 編寫一個佈局,頁面寬度自適應,最小寬度300px,左邊定寬35%,右邊定寬65%

複製程式碼
 1 <div class="container">
 2 <div class="left"></div>
 3 <div class="right"></div>
 4 </div>
 5 
 6 <style>
 7 .container {
 8     height: 600px;
 9     _width: 300px;
10     min-width: 300px;
11 }
12 .left {
13     width: 35%;
14     height: 100%;
15     background: #ff0;
16     float: left;
17 }
18 .right {
19     overflow: hidden;
20     width: 65%;
21     height: 100%;
22     background: #0f0;
23 }
24 </style>
複製程式碼

5、 談談對html5的瞭解

(1)、良好的移動性,以移動裝置為主。

(2)、響應式設計,以適應自動變化的螢幕尺寸

(3)、支援離線快取技術,webStorage本地快取

(4)、新增canvas,video,audio等新標籤元素。新特殊內容元素:article,footer,header,nav,section等,新的表單控制元件:calendar,date,time,email,url,search。

(5)、地理定位...

(6)、新增webSocket/webWork技術

6、 Js面向物件的幾種方式

(1)、物件的字面量 var obj = {}

(2)、建立例項物件 var obj = new Object();

(3)、建構函式模式 function fn(){} , new fn();

(4)、工廠模式:用一個函式,通過傳遞引數返回物件。function fn(params){var obj =new Object();obj.params = params; return obj;},fn(params);

(5)、原型模式:function clock(hour){} fn.prototype.hour = 0; new clock();

首先,每個函式都有一個prototype(原型)屬性,這個指標指向的就是clock.prototype物件。而這個原型物件在預設的時候有一個屬性constructor,指向clock,這個屬性可讀可寫。而當我們在例項化一個物件的時候,例項newClock除了具有建構函式定義的屬性和方法外(注意,只是建構函式中的),還有一個指向建構函式的原型的指標,ECMAScript管他叫[[prototype]],這樣例項化物件的時候,原型物件的方法並沒有在某個具體的例項中,因為原型沒有被例項。

7、前端頁面有哪三層構成,分別是什麼,作用是什麼

Css: 層疊樣式表 ,表現,  由css負責建立。css對“如何顯示有關內容”的問題做出了回答。

Html:超文字標記語言 ,結構,由 HTML 或 xhtml之類的標記語言負責建立。標籤,也就是那些出現在尖括號裡的單詞,對網頁內容的語義含義做出了描述,但這些標籤不包含任何關於如何顯示有關內容的資訊。例如,P標籤表達了這樣一種語義:“這是一個文字段。”

Js: 客戶端指令碼語言 ,行為, 內容應該如何對事件做出反應。

8、 如何對網站的檔案和資源進行優化

(1)、檔案合併(目的是減少http請求)

(2)、檔案壓縮 (目的是直接減少檔案下載的體積)

(3)、使用cdn託管資源

(4)、使用快取

(5)、gizp壓縮你的js和css檔案

(6)、meta標籤優化(title,description,keywords),heading標籤的優化,alt優化

(7)、反向連結,網站外連結優化。

9、 JQuery中有幾種型別的選擇器

(1)、層疊選擇器$(“form input”)
(2)、基本過濾選擇器:first:last:not()
(3)、內容過濾選擇器:odd:eq():animated
(4)、視覺化過濾選擇器:hidden:visible
(5)、屬性過濾選擇器:div[id]
(6)、子元素過濾選擇器:first-child:last-child:only:child
(7)、表單元素過濾選擇器:enabled:disabled:checked:selected
(8)、id,類,型別,元素...

10、說幾條javasprit的基本規範

(1)、不要在同一行宣告多個變數。
(2)、請使用 ===/!==來比較true/false或者數值
(3)、使用物件字面量替代new Array這種形式
(4)、不要使用全域性函式。
(5)、Switch語句必須帶有default分支
(6)、函式不應該有時候有返回值,有時候沒有返回值。
(7)、For迴圈必須使用大括號
(8)、If語句必須使用大括號
(9)、for-in迴圈中的變數 應該使用var關鍵字明確限定作用域,從而避免作用域汙染。

11、 Html5中本地儲存概念是什麼,有什麼優點

cookie是網站為了標示使用者身份而儲存在使用者本地終端(Client Side)上的資料(通常經過加密)。

cookie資料始終在同源的http請求中攜帶(即使不需要),記會在瀏覽器和伺服器間來回傳遞。

sessionStorage和localStorage不會自動把資料發給伺服器,僅在本地儲存。

儲存大小

    cookie資料大小不能超過4k。

    sessionStorage和localStorage 雖然也有儲存大小的限制,但比cookie大得多,可以達到5M或更大。

有期時間

    localStorage    儲存持久資料,瀏覽器關閉後資料不丟失除非主動刪除資料;

    sessionStorage  資料在當前瀏覽器視窗關閉後自動刪除。

    cookie          設定的cookie過期時間之前一直有效,即使視窗或瀏覽器關閉

12、什麼是ajax和json,它們的優缺點

ajax的全稱:Asynchronous Javascript And XML。

非同步傳輸+js+xml。

所謂非同步,在這裡簡單地解釋就是:向伺服器傳送請求的時候,我們不必等待結果,而是可以同時做其他的事情,等到有了結果它自己會根據設定進行後續操作,與此同時,頁面是不會發生整頁重新整理的,提高了使用者體驗。

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

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

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

(4)傳送HTTP請求

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

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

13、 你知道那些針對jQuery的優化方法

基於Class的選擇性的效能相對於Id選擇器開銷很大,因為需遍歷所有DOM元素。

頻繁操作的DOM,先快取起來再操作。用Jquery的鏈式呼叫更好。

比如:var str=$("a").attr("href");

for (var i = size; i < arr.length; i++) {}

for 迴圈每一次迴圈都查找了陣列 (arr) 的.length 屬性,在開始迴圈的時候設定一個變數來儲存這個數字,可以讓迴圈跑得更快:

for (var i = size, length = arr.length; i < length; i++) {}

14、編寫一個方法求一個字串的位元組長度,假設:一個英文字元佔用一個位元組,一箇中文字元佔用兩個位元組

複製程式碼
 1 function num(str) {
 2     var num1 = str.length;
 3     var num2 = 0;
 4     for (var i = 0; i < str.length; i++) {
 5         if (str.charCodeAt(i) >= 10000) {
 6             num2++;
 7         }
 8     }
 9     console.log(num1 + num2)
10 }
複製程式碼

15、簡述ECMASCRIPT6的新特性

1.增加塊作用域

2.增加let const

3.解構賦值

4.函式引數擴充套件 (函式引數可以使用預設值、不定引數以及拓展引數)

5.增加class類的支援

6.增加箭頭函式

7.增加模組和模組載入(ES6中開始支援原生模組化啦)

8.math, number, string, array, object增加新的API

16、Apply和call方法的異同

相同點:兩個方法產生的作用是完全一樣的,第一個引數都是物件;

不同點:

call()方法引數將依次傳遞給借用的方法作引數,即fn.call(thisobj, arg1,arg2,arg3...argn),有n個引數

apply()方法第一個引數是物件,第二個引數是陣列fn.apply(thisobj,arg),此處的arg是一個數組,只有兩個引數

 17、 為什麼利用多個域名來提供網站資源會更有效?

(1)、突破瀏覽器的併發限制(瀏覽器同一域名最大的併發請求數量為6個,ie6為2個)
(2)、節約cookie頻寬
(3)、CDN快取更方便
(4)、防止不必要的安全問題(尤其是cookie的隔離尤為重要)
(5)、節約主機域名連線數,優化頁面響應速度

18、身為以為web前端工程師,你肯定知道現在最流行的前端技術吧,有那些?

Vuejs2.0/Angular2.0/React Native /es6//Nodejs

http2

gulp/webpack

19、 你如何從瀏覽器的URL中獲取引數資訊

瀏覽器宿主環境中,有一個location物件,同時這個物件也是window物件和document物件的屬性。

location物件中提供了與當前視窗載入的文件有關的的資訊,即URL資訊。

 https://www.baidu.com/api/sousu?search=baidu&id=123#2

location.href: 完整URL

location.protocol: 返回協議(https:)

location.host: 返回伺服器名稱和埠號(www.baidu.com

location.hostname: 返回伺服器名稱(www.baidu.com

location.port:返回伺服器埠號(http預設80,https預設443)

location.pathname:返回URL中的目錄和檔名(api/sousu)

location.search:返回查詢字串(?search=baidu&id=123#2)

location.hash:返回hash值(#2)

20、 請戳出ie6/7下特有的cssbug

(1)、li邊距“無故” 增加

設定ul的顯示形式為*display:inline-block;即可,前面加*是隻 針對IE6/IE7有效

(2)、IE6 不支援min-height屬性,但它卻認為height就是最小高度

使用ie6不支援但其餘瀏覽器支援的屬性!important。

(3)、Overflow:

在IE6/7中,overflow無法正確的隱藏有相對定位position:relative;的子元素。解決方法就是給外包容器.wrap加上position:relative;。

(4)、border:none 在IE6不起作用: 寫成border:0 就可以了,

(5)、100%高度

在IE6下,如果要給元素定義100%高度,必須要明確定義它的父級元素的高度,如果你需要給元素定義滿屏的高度,就得先給html和body定義 height:100%;。

(6)、雙邊距 Bug

當元素浮動時,IE6會錯誤的的把浮動方式的margin值雙倍計算,給float的元素新增一個display:inline

(7)、躲貓貓bug

些定義了:hover的連結,當滑鼠移到那些連結上時,在IE6下就會觸發躲貓貓。
1.在(那個未浮動的)內容之後新增一個<span style=”clear: both;”></span>
2.觸發包含了這些連結的容器的hasLayout,一個簡單的方法就是給其定義height:1%;

(8)、IE6 絕對定位的元素1px 間距bug

當絕對定位的父元素或寬度為奇數時,bottom和right會多出現1px,

解決方案,針對IE6進行hack處理

***如果感覺有一點點收穫得話,請幫忙點下推薦!!!

1、 請寫出至少20個HTML5標籤

複製程式碼
<article><aside>
<audio><video>
<canvas><datalist><command> <details><embed>
<figcaption><figure>
<footer><header><nav><section>
<hgroup><keygen>
<mark><time><summary>
複製程式碼

2、 簡述jpg。Gif。png-8.png-24的區別,分別使用場景

  gif、jpg、png格式的圖片在網站製作中的區別

  Gif格式特點:
1.透明性,Gif是一種布林透明型別,既它可以是全透明,也可以是全不透明,但是它並沒有半透明(alpha透明)。
2.動畫,Gif這種格式支援動畫。
3.無損耗性,Gif是一種無損耗的影象格式,這也意味著你可以對gif圖片做任何操作也不會使得影象質量產生損耗。
4.水平掃描,Gif是使用了一種叫作LZW的演算法進行壓縮的,當壓縮gif的過程中,畫素是由上到下水平壓縮的,這也意味著同等條件下,橫向的gif圖片比豎向的gif圖片更加小。例如500*10的圖片比10*500的圖片更加小
5.間隔漸進顯示,Gif支援可選擇性的間隔漸進顯示
  由以上特點看出只有256種顏色的gif圖片不適合照片,但它適合對顏色要求不高的圖形(比如說圖示,圖表等),它並不是最優的選擇,我們會在後面中看到png是最優的選擇。
  Jpeg格式特點:
1.透明性,它並不支援透明。
2.動畫,它也不支援動畫。
3.損耗性,除了一些比如說旋轉(僅僅是90、180、270度旋轉),裁切,從標準型別到先進型別,編輯圖片的原資料之外,所有其它操作對jpeg影象的處理都會使得它的質量損失。所以我們在編輯過程一般用png作為過渡格式。
4.隔行漸進顯示,它支援隔行漸進顯示(但是ie瀏覽器並不支援這個屬性,但是ie會在整個影象資訊完全到達的時候顯示)。
  由上可以看出Jpeg是最適web上面的攝影圖片和數字照相機中。
Png格式特點:
1.型別,Png這種圖片格式包括了許多子類,但是在實踐中大致可以分為256色的png和全色的png,你完成可以用256色的png代替gif,用全色的png代替jpeg
2.透明性,Png是完全支援alpha透明的(透明,半透明,不透明),儘管有兩個怪異的現象在ie6(下面詳細討論)
3.動畫,它不支援動畫
PNG圖片格式現在包含三種類型:
1.PNG8256色PNG的別名
2.PNG24全色PNG的別名
3.PNG32全色PNG的別名
  基本上PNG32就是PNG24,但是附帶了全alpha通道。就是說每個畫素上不僅儲存了24位真色彩資訊還儲存了8位的alpha通道資訊,就如同GIF能儲存透明和不透明資訊一樣。當我們把圖片放到不太搭配的背景上的時候,透明PNG圖片的邊緣會顯示得更加平滑。
  當然,我也知道你的想法,“但是Photoshop也能生成帶透明通道的PNG圖片!”我也知道,它只是表面上這麼說是PNG24,讓我也產生困惑了。
  作為一個傷感的Fireworks倡導者,我只使用PNG32支援附帶alpha通道的真色彩圖片。不管怎樣,如果你習慣使用Photoshop,你就應該知道,Photoshop在“儲存為WEB格式”中只提供PNG8和PNG24兩種PNG格式。
  我敢肯定你經常會勾選“支援透明”選項,以獲得帶有透明度的PNG圖片,但是這樣你就獲取了一張PNG32圖片。——Photoshop只是覺得把PNG32這個名稱給隱藏掉了。奇怪吧?……
  對png8的誤解
Png8的在ie中的怪異表現:
  半透明的png8在ie6以下的瀏覽器顯示為全透明。
Alpha透明的全色PNG(png32)在ie6中會出現背景顏色(通常是灰色)。
  由上面可以總結:
  (a)全透明的png8可以在任一瀏覽器正常顯示(就像gif一樣)。半透明的png8在除了ie6及其以下的瀏覽器下錯誤的顯示成全透明,其它瀏覽器都能正常顯示半透明。這個bug並不需要特殊對待,因為在不支援半透明的瀏覽器下只是顯示為全透明,對使用者體驗影響不大,它反而是透明gif的加強版。
  (b)第二個bug沒有什麼好的方法解決,只能通過影響效能的方法AlphaImageLoader與需要加特殊標籤(VML)。
  因此得出結論就是:請使用PNG8。
Png8的軟體問題:
Photoshop只能匯出布林透明的PNG8。
Fireworks既能匯出布林透明的PNG8,也能匯出alpha透明的PNG8。

3、 能夠設定文字加粗的樣式屬性是什麼

字型加粗(font-weight)   

功能:用於設定字型筆劃的粗細。 

屬性值:正常度 - normal   

相對度 - bold, bolder, light, lighter   

漸變度 - 100, 200, 300, 400(相當於normal), 500, 600, 700(相當於 bold、 lighter、 bolder、以及數值100-900。   

語法為:h1 {font-weight: 屬性值}

4、 編寫一個佈局,頁面寬度自適應,最小寬度300px,左邊定寬35%,右邊定寬65%

複製程式碼
 1 <div class="container">
 2 <div class="left"></div>
 3 <div class="right"></div>
 4 </div>
 5 
 6 <style>
 7 .container {
 8     height: 600px;
 9     _width: 300px;
10     min-width: 300px;
11 }
12 .left {
13     width: 35%;
14     height: 100%;
15     background: #ff0;
16     float: left;
17 }
18 .right {
19     overflow: hidden;
20     width: 65%;
21     height: 100%;
22     background: #0f0;
23 }
24 </style>
複製程式碼

5、 談談對html5的瞭解

(1)、良好的移動性,以移動裝置為主。

(2)、響應式設計,以適應自動變化的螢幕尺寸

(3)、支援離線快取技術,webStorage本地快取

(4)、新增canvas,video,audio等新標籤元素。新特殊內容元素:article,footer,header,nav,section等,新的表單控制元件:calendar,date,time,email,url,search。

(5)、地理定位...

(6)、新增webSocket/webWork技術

6、 Js面向物件的幾種方式

(1)、物件的字面量 var obj = {}

(2)、建立例項物件 var obj = new Object();

(3)、建構函式模式 function fn(){} , new fn();

(4)、工廠模式:用一個函式,通過傳遞引數返回物件。function fn(params){var obj =new Object();obj.params = params; return obj;},fn(params);

(5)、原型模式:function clock(hour){} fn.prototype.hour = 0; new clock();

首先,每個函式都有一個prototype(原型)屬性,這個指標指向的就是clock.prototype物件。而這個原型物件在預設的時候有一個屬性constructor,指向clock,這個屬性可讀可寫。而當我們在例項化一個物件的時候,例項newClock除了具有建構函式定義的屬性和方法外(注意,只是建構函式中的),還有一個指向建構函式的原型的指標,ECMAScript管他叫[[prototype]],這樣例項化物件的時候,原型物件的方法並沒有在某個具體的例項中,因為原型沒有被例項。

7、前端頁面有哪三層構成,分別是什麼,作用是什麼

Css: 層疊樣式表 ,表現,  由css負責建立。css對“如何顯示有關內容”的問題做出了回答。

Html:超文字標記語言 ,結構,由 HTML 或 xhtml之類的標記語言負責建立。標籤,也就是那些出現在尖括號裡的單詞,對網頁內容的語義含義做出了描述,但這些標籤不包含任何關於如何顯示有關內容的資訊。例如,P標籤表達了這樣一種語義:“這是一個文字段。”

Js: 客戶端指令碼語言 ,行為, 內容應該如何對事件做出反應。

8、 如何對網站的檔案和資源進行優化

(1)、檔案合併(目的是減少http請求)

(2)、檔案壓縮 (目的是直接減少檔案下載的體積)

(3)、使用cdn託管資源

(4)、使用快取

(5)、gizp壓縮你的js和css檔案

(6)、meta標籤優化(title,description,keywords),heading標籤的優化,alt優化

(7)、反向連結,網站外連結優化。

9、 JQuery中有幾種型別的選擇器

(1)、層疊選擇器$(“form input”)
(2)、基本過濾選擇器:first:last:not()
(3)、內容過濾選擇器:odd:eq():animated
(4)、視覺化過濾選擇器:hidden:visible
(5)、屬性過濾選擇器:div[id]
(6)、子元素過濾選擇器:first-child:last-child:only:child
(7)、表單元素過濾選擇器:enabled:disabled:checked:selected
(8)、id,類,型別,元素...

10、說幾條javasprit的基本規範

(1)、不要在同一行宣告多個變數。
(2)、請使用 ===/!==來比較true/false或者數值
(3)、使用物件字面量替代new Array這種形式
(4)、不要使用全域性函式。
(5)、Switch語句必須帶有default分支
(6)、函式不應該有時候有返回值,有時候沒有返回值。
(7)、For迴圈必須使用大括號
(8)、If語句必須使用大括號
(9)、for-in迴圈中的變數 應該使用var關鍵字明確限定作用域,從而避免作用域汙染。

11、 Html5中本地儲存概念是什麼,有什麼優點

cookie是網站為了標示使用者身份而儲存在使用者本地終端(Client Side)上的資料(通常經過加密)。

cookie資料始終在同源的http請求中攜帶(即使不需要),記會在瀏覽器和伺服器間來回傳遞。

sessionStorage和localStorage不會自動把資料發給伺服器,僅在本地儲存。

儲存大小

    cookie資料大小不能超過4k。

    sessionStorage和localStorage 雖然也有儲存大小的限制,但比cookie大得多,可以達到5M或更大。

有期時間

    localStorage    儲存持久資料,瀏覽器關閉後資料不丟失除非主動刪除資料;

    sessionStorage  資料在當前瀏覽器視窗關閉後自動刪除。

    cookie          設定的cookie過期時間之前一直有效,即使視窗或瀏覽器關閉

12、什麼是ajax和json,它們的優缺點

ajax的全稱:Asynchronous Javascript And XML。

相關推薦

端面試題總結HTML5JSCSS3相容性

1、 請寫出至少20個HTML5標籤 <article><aside> <audio><video> <canvas><datalist><command> <details&g

端面試題總結二(js原型繼承)

his pro 一個 spa 文章 UNC 引用 nts 知識點 今天這篇文章整理了JS原型和繼承的一些知識點,面試的時候 基!本!都!會!問!還不快認真閱讀下文,看看你還有哪些知識點需要掌握吧~ 1.原型鏈 基本思想:利用原型讓一個引用類型繼承另外一個引用類型的屬性

js端面試題總結及答案

轉載https://yeaseonzhang.github.io/ “金三銀四,金九銀十”,用來形容求職最好的幾個月。但是隨著行業的飽和,初中級前端er就業形勢不容樂觀。 行業狀態不可控,我們能做的當然只是讓自己變得更加具有競爭力。 今年自己也用了幾個月的時間來準備筆記面試,鞏固基礎

JS端面試題-總結01

大家都知道在面試的時候,很多前端的必須要問的就是js的問題,最近我們公司也有很多這樣的面試,我提了一些個問題,還有我面試的時候面試官面試我的問題彙總,也有百度的別人的,希望對那些剛進入這個行業的有一些幫助!!! 1.javascript的typeof返回哪些資料型別 object number functio

端面試題總結--1 JS

妹子就要找工作了,所以時候要研究一下面試題,總結一下,查缺補漏。 所以要開始搜刮各種的面試題做練習啦~~ 1.JS中DOM節點操作,新增,刪除,插入,查詢,建立,複製節點 //1.建立節點 document.create

web端面試題系列(二)

html name 價值 編程 oct rom repeat 清除 frame 1、列舉你工作中遇到的IE6 BUG,談談解決方案 a.雙倍邊距bug: 例如:當給父元素內第一個浮動元素設置margin-left或margin-right的時候,margin屬性會加倍,

web端面試題總結

1、javascript主要的資料型別:String、Number、boolean、Object、Null、Undefined 2、css盒子模型屬性包括:margin、border、padding、content 3、DOCTYPE 不存在或格式不正確會導致文件以混雜模式呈現 4、TCP是&

web 端面試題 總結

你如何理解HTML結構的語意化? 1、去掉或樣式丟失的時候能讓頁面呈現清晰的結構。 2、螢幕閱讀器(如果訪客有視障)會完全根據你的標記來"讀"你的網頁。 3、PDA、手機等裝置可能無法像普通電腦的瀏覽器一樣來渲染網頁(通常是因為這些裝置對CSS的支援較弱)。 4、搜尋引擎

2018web端面試題總結

以下內容純屬個人隨筆記錄,不喜勿噴,歡迎指教 web面試題 css面試 一、css盒模型 css中的盒子模型包括IE盒子模型和標準的W3C盒子模型。border-sizing: border-box, inherit, content-box標準盒子模型: 左右border+左右padding+con

2018端面試題總結2

HTML5的離線儲存有幾種方式? 1.本地儲存localstorage 儲存方式: 以鍵值對(key-value)的方式儲存,永久儲存,永不失效,除非手動刪除。(每個域名5M) 儲存內容:陣列,圖片,json,樣式,指令碼… 2.本地儲存sessionstorage HT

web端面試題總結筆記——JavaScript部分

js中的變數型別 值型別和引用型別 值型別 undefined string number boolean 引用型別 object: ​ {} ​ [] ​ null ​ function 強制型別轉換 字串

web端面試題總結筆記——開發環境

關於開發環境 IDE webstorm:大牛 逼格 大咖 sublime:普通 低調 vscode:文藝小清新 atom:文藝小清新 外掛外掛外掛快捷鍵快捷鍵快捷鍵!!! Git 網路Git伺服器如 coding.net git

2018 vue端面試題總結

1、active-class是哪個元件的屬性?巢狀路由怎麼定義? 答:vue-router模組的router-link元件。   2、怎麼定義vue-router的動態路由?怎麼獲取傳過來的動態引數?  答:在router目錄下的index.js檔案中,對path屬性加上/

2018年 年底web端面試題總結(附帶答案)

javascript:  JavaScript中如何檢測一個變數是一個String型別?請寫出函式實現 typeof(obj) === "string" typeof obj === "string" obj.constructor === String 請用js去除字串空格? 方法一:使

2016年全面端面試題總結

非同步載入的方式有哪些? (1) defer,只支援IE (2) async: (3) 建立script,插入到DOM中,載入完畢後callBack documen.write和 innerHTML的區別 document.write只能重繪整個頁面

2019年Web端面試題總結

Web前端在近幾年是越來越火熱了,很多人看到了前端的高薪資,更看到了前端行業的發展前景,所以紛紛投入到學習前端技術學習中來。下面給大家總結整理2019年Web前端經典面試題,助力大家找到更好的工作,走向高薪前端之路。 1、CSS,JS程式碼壓縮,以及程式碼CDN託管,圖片整合。 (1

端面試題總結(轉載)

在瀏覽器解析事件的時候,有兩種觸發方式,一種叫做Bubbling(冒泡),另外一種叫做Capturing(捕獲)。由上圖可以看出來,冒泡的方式效果就是當一個DOM元素的某事件例如click事件被fire時,依次它的父元素的click事件也被fire(觸發),一直傳遞到最頂層的body元素為止。而捕獲的觸發方式

端面試題】經典的前端面試20題實用、易用、好用

1、JavaScript中如何檢測一個變數是一個String型別?請寫出函式實現 function isString(obj){ return typeof(obj) === "string"? true: false; } 2、請用js去除字串空格? 方法一:

端面試題總結 HTTP\瀏覽器篇 (一)

cookie和session的機制是什麼?有什麼區別? 會話(Session)跟蹤是Web程式中常用的技術,用來跟蹤使用者的整個會話,它可以彌補http協議無狀態的不足。常用的會話跟蹤技術是cookie與session。cookie通過在客戶端記錄資訊確定使用

端面試題總結

第一部分:基礎知識 1:跨域請求資源的方法     proxy代理:proxy代理用於將請求傳送給後臺伺服器,通過伺服器來發送請求,然後將請求的結果傳遞給前端。     CORS:一般需要後端人員在處理請求資料的時候,新增允許跨域的相關操作。如下:         re