文章目錄

- 1.什麼是盒模型
- - - 盒模型
    - W3C的标準盒模型
    - IE的盒模型
    - css如何設定兩種模型
- 2.行内元素有哪些？塊級元素有哪些？空(void)元素有那些？行内元素和塊級元素有什麼差別？
- 3.簡述src和href的差別
- 4.什麼是css Hack
- - - CSS Hack常見的有三種形式：
- 5.什麼叫優雅降級和漸進增強
- 6.px和em的差別
- 7.HTML5 為什麼隻寫
- 8.Http的狀态碼有哪些
- 9.一次完整的HTTP事務是怎麼一個過程
- 10.HTTPS是如何實作加密
- 11.浏覽器是如何渲染頁面的
- - - 浏覽器頁面渲染流程
    - - 1、解析文檔建構DOM樹
      - 2、建構渲染樹
      - 3、布局與繪制渲染樹
- 12.浏覽器的核心有哪些？分别有什麼代表的浏覽器
- 13.頁面導入時，使用link和@import有什麼差別
- 14.如何優化圖像，圖像格式的差別
- - - 優化圖像
    - 圖像格式差別
- 15.列舉你了解Html5. Css3 新特性
- - - 1.html5的新特性？(記住有九大子產品内容)
    - 2.CSS3中新添加的特性？（css3也有九大屬性）
- 16.可以通過哪些方法優化css3 animation渲染
- - 1、盡可能多的利用硬體能力，如使用3D變形來開啟GPU加速：
  - 2、盡可能少的使用box-shadows與gradients
- 17.列舉幾個前端性能方面的優化
- - - 網絡方面
    - 渲染和DOM操作方面
    - 資料方面
    - 總結
- 18.如何實作同一個浏覽器多個标簽頁之間的通信
- 19.浏覽器的存儲技術有哪些
- - cookie
  - sessionStorage
  - localStorage
Cookie，LocalStorage，SessionStorage
- - - 1、Cookie
    - 2、LocalStorage
    - 3、SessionStorage
- 20.css定位方式
- - - **static**
    - **relative**
    - **absolute**
    - **fixed**
- 21.盡可能多的寫出浏覽器相容性問題
- 22.垂直上下居中的方法
- - - 第一種方法（知道元素的寬和高）
    - 第二種方法（不知道元素的寬和高）
    - 第三種方法（不知道元素的寬和高）
    - 第四種方法（flex布局）
- 23.響應式布局原理
- 首先我們應該遵循移動優先原則：
- - **一、響應式布局**
  - **二、響應式内容**
- 25.清除浮動的方法
- - - 方式一:使用overflow屬性來清除浮動
    - 方式二:使用額外标簽法
  - 方法三:使用僞元素來清除浮動
  - 方法四:使用雙僞元素清除浮動
- 26.http協定和tcp協定
- - - 1、TCP連接配接
    - 2、HTTP連接配接
- 27.重新整理頁面，js請求一般會有哪些地方有緩存處理
- 28.如何對網站的檔案和資源進行優化
- 29.你對網頁标準和W3C重要性的了解
- 30.Http和https的差別
- - - **一、HTTP和HTTPS的基本概念**
    - **二、HTTP與HTTPS有什麼差別？**
    - HTTPS和HTTP的差別主要如下：

1.什麼是盒模型

盒模型

margin(外邊距)

- 清除邊框外的區域，外邊距是透明的。

border(邊框)

- 圍繞在内邊距和内容外的邊框。

padding(内邊距)

- 清除内容周圍的區域，内邊距是透明的。

content(内容)

- 盒子的内容，顯示文本和圖像。

W3C的标準盒模型

浏覽器、html、css面試題（一）Cookie，LocalStorage，SessionStorage

在标準的盒子模型中，width指content部分的寬度

IE的盒模型

浏覽器、html、css面試題（一）Cookie，LocalStorage，SessionStorage

在IE盒子模型中，width表示content+padding+border這三個部分的寬度

css如何設定兩種模型

這裡用到了CSS3 的屬性 box-sizing

/* 标準模型 */
box-sizing:content-box;

 /*IE模型*/
box-sizing:border-box;

2.行内元素有哪些？塊級元素有哪些？空(void)元素有那些？行内元素和塊級元素有什麼差別？

行内元素有： a b span img input select strong
塊級元素有： div ul ol li dl dt dd h1 h2 h3 h4…p
空元素： <br> <hr> <img> <input> <link> <meta>
行内元素不可以設定寬高，不獨占一行
塊級元素可以設定寬高，獨占一行

3.簡述src和href的差別

href是Hypertext Reference的縮寫，表示超文本引用。用來建立目前元素和文檔之間的連結。常用的有：link、a。例如：

<link href="reset.css" rel=”stylesheet“/>

浏覽器會識别該文檔為css文檔，并行下載下傳該文檔，并且不會停止對目前文檔的處理。這也是建議使用link，而不采用@import加載css的原因。

src是source的縮寫，src的内容是頁面必不可少的一部分，是引入。src指向的内容會嵌入到文檔中目前标簽所在的位置。常用的有：img、script、iframe。例如

<script src="script.js"></script>

當浏覽器解析到該元素時，會暫停浏覽器的渲染，知道該資源加載完畢。這也是将js腳本放在底部而不是頭部得原因。

簡而言之，src用于替換目前元素；href用于在目前文檔和引用資源之間建立聯系。

4.什麼是css Hack

CSS hack

是通過在CSS樣式中加入一些特殊的符号，讓不同的浏覽器識别不同的符号（什麼樣的浏覽器識别什麼樣的符号是有标準的，CSS hack就是讓你記住這個标準），以達到應用不同的CSS樣式的目的。

CSS hack

由于不同廠商的浏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的浏覽器的不同版本，如IE6和IE7，對CSS的解析認識不完全一樣，是以會導緻生成的頁面效果不一樣，得不到我們所需要的頁面效果。這個時候我們就需要針對不同的浏覽器去寫不同的CSS，讓它能夠同時相容不同的浏覽器，能在不同的浏覽器中也能得到我們想要的頁面效果。

簡單的說，CSS hack的目的就是使你的CSS代碼相容不同的浏覽器。當然，我們也可以反過來利用CSS hack為不同版本的浏覽器定制編寫不同的CSS效果。

CSS Hack常見的有三種形式：

CSS屬性Hack、CSS選擇符Hack以及IE條件注釋Hack， Hack主要針對IE浏覽器。

1、屬性級Hack：比如IE6能識别下劃線“

”和星号“

”，IE7能識别星号“

”，但不能識别下劃線”

”，而firefox兩個都不能認識。

2、選擇符級Hack：比如IE6能識别

*html .class{}

，IE7能識别

*+html .class{}

或者

*:first-child+html .class{}

。

3、IE條件注釋Hack：IE條件注釋是微軟IE5開始就提供的一種非标準邏輯語句。比如針對所有IE：

<!-[if IE]><!-您的代碼-><![endif]>

，針對IE6及以下版本：

<!-[if it IE 7]><!-您的代碼-><![endif]->

，這類Hack不僅對CSS生效，對寫在判斷語句裡面的所有代碼都會生效。

PS：條件注釋隻有在IE浏覽器下才能執行，這個代碼在非IE浏覽下被當做注釋視而不見。可以通過IE條件注釋載入不同的CSS、JS、HTML和伺服器代碼等。

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

漸進增強（Progressive Enhancement）：

一開始就針對低版本浏覽器進行建構頁面，完成基本的功能，然後再針對進階浏覽器進行效果、互動、追加功能達到更好的體驗。

優雅降級（Graceful Degradation）：

一開始就建構站點的完整功能，然後針對浏覽器測試和修複。比如一開始使用 CSS3 的特性建構了一個應用，然後逐漸針對各大浏覽器進行 hack 使其可以在低版本浏覽器上正常浏覽。

6.px和em的差別

px像素（Pixel）

相對長度機關。像素px是相對于

顯示器螢幕分辨率

而言的。

是相對長度機關。相對于目前對象内文本的字型尺寸,

多了解父級設定font-size的尺寸

。如目前對行内文本的字型尺寸未被人為設定，則相對于浏覽器的預設字型尺寸。

7.HTML5 為什麼隻寫

html5不基于SGML,是以不需要對DTD進行引用，但是需要doctype來規範浏覽器的行為（讓浏覽器按照他們應該的方式來運作）

而HTML4.01基于SGML，是以需要對DTD進行引用，才能告知浏覽器文檔所使用的文檔類型。

8.Http的狀态碼有哪些

一、臨時響應

100——客戶必須繼續送出請求

101——客戶要求伺服器根據請求轉換HTTP協定版本

二、成功

200——伺服器成功傳回網頁

201——提示知道新檔案的URL

202——接受和處理、但處理未完成

203——傳回資訊不确定或不完整

204——請求收到，但傳回資訊為空

205——伺服器完成了請求，使用者代理必須複位目前已經浏覽過的檔案

206——伺服器已經完成了部分使用者的GET請求

三、重定向

300——請求的資源可在多處得到

301——删除請求資料

302——在其他位址發現了請求資料

303——建議客戶通路其他URL或通路方式

304——用戶端已經執行了GET，但檔案未變化

305——請求的資源必須從伺服器指定的位址得到

306——前一版本HTTP中使用的代碼，現行版本中不再使用

307——申明請求的資源臨時性删除

四、請求錯誤

400——錯誤請求，如文法錯誤

401——請求授權失敗

402——保留有效ChargeTo頭響應

403——請求不允許

404——請求的網頁不存在

405——使用者在Request-Line字段定義的方法不允許

406——根據使用者發送的Accept拖，請求資源不可通路

407——類似401，使用者必須首先在代理伺服器上得到授權

408——用戶端沒有在使用者指定的餓時間内完成請求

409——對目前資源狀态，請求不能完成

410——伺服器上不再有此資源且無進一步的參考位址

411——伺服器拒絕使用者定義的Content-Length屬性請求

412——一個或多個請求頭字段在目前請求中錯誤

413——請求的資源大于伺服器允許的大小

414——請求的資源URL長于伺服器允許的長度

415——請求資源不支援請求項目格式

416——請求中包含Range請求頭字段，在目前請求資源範圍内沒有range訓示值，請求也不包含If-Range請求頭字段

417——伺服器不滿足請求Expect頭字段指定的期望值，如果是代理伺服器，可能是下一級伺服器不能滿足請求

五、伺服器錯誤

500——伺服器産生内部錯誤

501——伺服器不支援請求的函數

502——伺服器暫時不可用，有時是為了防止發生系統過載

503——伺服器逾時過載或暫停維修

504——關口過載，伺服器使用另一個關口或服務來響應使用者，等待時間設定值較長

505——伺服器不支援或拒絕支請求頭中指定的HTTP版本

9.一次完整的HTTP事務是怎麼一個過程

1、域名解析

2、發起TCP的三次握手

3、建立TCP連接配接後發起http請求

4、伺服器端響應http請求，浏覽器得到html碼

5、浏覽器解析html代碼，并請求html代碼中的資源

6、浏覽器對頁面進行渲染并呈現給客戶

10.HTTPS是如何實作加密

HTTPS在傳輸資料之前需要用戶端（浏覽器）與服務端（網站）之間進行一次握手，在握手過程中将确立雙方加密傳輸資料的密碼資訊。TLS/SSL協定不僅僅是一套加密傳輸的協定，更是一件經過藝術家精心設計的藝術品，TLS/SSL中使用了非對稱加密，對稱加密以及HASH算法。

11.浏覽器是如何渲染頁面的

浏覽器頁面渲染流程

浏覽器從HTTP伺服器擷取html文檔，到呈現頁面給使用者，會經過以下幾個步驟：

1、解析文檔建構DOM樹

浏覽器的解析内容可以分為三個部分：

HTML/XHTML/SVG：解析這三種檔案後，會生成DOM樹（DOM Tree）

CSS：解析樣式表，生成CSS規則樹（CSS Rule Tree）

JavaScript：解析腳本，通過DOM API和CSSOM API操作DOM Tree和CSS Rule Tree，與使用者進行互動。

以上三類檔案的執行順序會根據其在文檔中的位置及其标簽屬性的不同而有異同，具體在後文進行讨論。

2、建構渲染樹

解析文檔完成後，浏覽器引擎會将 CSS Rule Tree 附着到DOM Tree 上，并根據DOM Tree 和 CSS Rule Tree構造 Rendering Tree（渲染樹）。此處需要注意：

Render Tree和DOM Tree的差別在于，類似Head或display：node之類的東西不會放在渲染樹中；

将CSS Rule Tree比對到DOM Tree需要解析CSS的選擇器，為了提高該過程的性能，DOM樹應該盡量小，CSS Selector應該盡量使用id和class，避免過度層疊。

3、布局與繪制渲染樹

解析position, overflow, z-index等等屬性，計算每一個渲染樹節點的位置和大小，此過程被稱為reflow。最後調用作業系統的Native GUI API完成繪制（repain）。

注意：

渲染樹的節點，在Gecko中稱為frame，而在webkit中稱為renderer；

reflow和repaint是兩個不同的概念，其差別會在後文進行探讨。

12.浏覽器的核心有哪些？分别有什麼代表的浏覽器

1、Trident核心：代表作品是IE

2、Gecko核心：代表作品是Firefox，即火狐浏覽器。

3、Webkit核心：代表作品是Safari Chromewebkit、曾經的Chrome，是開源的項目。

4、Presto核心：代表作品是Opera ，Presto是由Opera Software開發的浏覽器排版引擎，它是世界公認最快的渲染速度的引擎。在13年之後，Opera宣布加入谷歌陣營，棄用了 Presto

5、Blink核心：由Google和Opera Software開發的浏覽器排版引擎，2013年4月釋出。現在Chrome核心是Blink。谷歌還開發了自己的JS引擎，V8，使JS運作速度極大地提高了

13.頁面導入時，使用link和@import有什麼差別

1.ink屬于XHTML标簽，除了加載CSS外，還能用于定義RSS, 定義rel連接配接屬性等作用；而@import是CSS提供的，隻能用于加載CSS;
2.頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
3.import是CSS2.1 提出的，隻在IE5以上才能被識别，而link是XHTML标簽，無相容問題;

14.如何優化圖像，圖像格式的差別

優化圖像

1、不用圖檔，盡量用css3代替。比如說要實作修飾效果，如半透明、邊框、圓角、陰影、漸變等，在目前主流浏覽器中都可以用CSS達成。

2、使用矢量圖SVG替代位圖。對于絕大多數圖案、圖示等，矢量圖更小，且可縮放而無需生成多套圖。現在主流浏覽器都支援SVG了，是以可放心使用！

3.、使用恰當的圖檔格式。我們常見的圖檔格式有JPEG、GIF、PNG。

基本上，内容圖檔多為照片之類的，适用于JPEG。

而修飾圖檔通常更适合用無損壓縮的PNG。

GIF基本上除了GIF動畫外不要使用。且動畫的話，也更建議用video元素和視訊格式，或用SVG動畫取代。

4、按照HTTP協定設定合理的緩存。

5、使用字型圖示webfont、CSS Sprites等。

6、用CSS或JavaScript實作預加載。

7、WebP圖檔格式能給前端帶來的優化。WebP支援無損、有損壓縮，動态、靜态圖檔，壓縮比率優于GIF、JPEG、JPEG2000、PG等格式，非常适合用于網絡等圖檔傳輸。

圖像格式差別

矢量圖：圖示字型，如 font-awesome；svg

位圖：gif,jpg(jpeg),png

差別：

　　1、gif:是是一種無損，8位圖檔格式。具有支援動畫，索引透明，壓縮等特性。适用于做色彩簡單(色調少)的圖檔，如logo,各種小圖示icons等。

　　2、JPEG格式是一種大小與品質相平衡的壓縮圖檔格式。适用于允許輕微失真的色彩豐富的照片，不适合做色彩簡單(色調少)的圖檔，如logo,各種小圖示icons等。

　　3、png:PNG可以細分為三種格式:PNG8，PNG24，PNG32。後面的數字代表這種PNG格式最多可以索引和存儲的顔色值。

關于透明：PNG8支援索引透明和alpha透明;PNG24不支援透明;而PNG32在24位的PNG基礎上增加了8位（256階）的alpha通道透明;

優缺點：

1、能在保證最不失真的情況下盡可能壓縮圖像檔案的大小。

2、對于需要高保真的較複雜的圖像，PNG雖然能無損壓縮，但圖檔檔案較大，不适合應用在Web頁面上。

15.列舉你了解Html5. Css3 新特性

1.html5的新特性？(記住有九大子產品内容)

添加了video，radio标簽
添加了canvas畫布和svg,渲染矢量圖檔
添加了一些列語義化标簽header,footer,main,section,aside,nav等
input的type值新添加了很多屬性（email，url，number，range，Date pickers (date, month, week, time, datetime, datetime-local)，search，color）
添加了地理位置定位功能 Geolocation API
添加了web存儲功能，localStorage和sessionStorage
使用 HTML5，通過建立 cache manifest 檔案，可以輕松地建立 web 應用的離線版本
web worker 是運作在背景的 JavaScript，獨立于其他腳本，不會影響頁面的性能。您可以繼續做任何願意做的事情：點選、選取内容等等，而此時 web worker 在背景運作。
服務端事件推送（EventSource 對象用于接收伺服器發送事件通知），所有主流浏覽器均支援伺服器發送事件，除了 Internet Explorer

2.CSS3中新添加的特性？（css3也有九大屬性）

媒體查詢（可以查詢裝置的實體像素然後進行自适應操作）
transform，transition，translate,scale,skelw，rotate等相關動畫效果
box-shadow,text-shadow等特效
CSS3 @font-face 規則,設計師可以引入任意的字型了
CSS3 @keyframes 規則，可以自己建立一些動畫等
2D、3D轉換
添加了border-radius，border-image等屬性
CSS3 建立多列（column-count規定文本可以以幾列的方式布局）
CSS3 使用者界面（resize，box-sizing，outline-offset）

16.可以通過哪些方法優化css3 animation渲染

1、盡可能多的利用硬體能力，如使用3D變形來開啟GPU加速：

-webkit\-transform: translate3d(0,0,0);
  -moz\-transform: translate3d(0,0,0);
  -ms\-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);

一個元素通過translate3d右移500px的動畫流暢度會明顯優于使用left屬性；

原因：

CSS動畫屬性會觸發整個頁面的重排relayout、重繪repaint、重組recomposite

Paint通常是其中最花費性能的，盡可能避免使用觸發paint的CSS動畫屬性，這也是為什麼我們推薦在CSS動畫中使用webkit-transform: translateX(3em)的方案代替使用left: 3em，因為left會額外觸發layout與paint，而webkit-transform隻觸發整個頁面composite（這也是為什麼推薦在CSS動畫中使用webkit-transform: translateX(500px)的方案代替使用left: 500px）；

如動畫過程有閃爍（通常發生在動畫開始的時候），可以嘗試下面的Hack：

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden; 
 -webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;

2、盡可能少的使用box-shadows與gradients

box-shadows與gradients往往都是頁面的性能殺手，尤其是在一個元素同時都使用了它們.

盡可能的讓動畫元素不在文檔流中，以減少重排

我們一起來看下CSS3動畫其中一些屬性性能消耗圖：

浏覽器、html、css面試題（一）Cookie，LocalStorage，SessionStorage

性能消耗圖，由此可見最受歡飲和性能最好的莫過于transform和opacity了。

17.列舉幾個前端性能方面的優化

網絡方面

web應用，總是會有一部分的時間浪費在網絡連接配接和資源下載下傳方面。往往建立一次網絡連接配接是需要時間成本的。而且浏覽器同一時間所發送的網絡請求數是有限的。是以，這個層面的優化可以從「減少請求數目」開始：

減少http請求

：在YUI35規則中也有提到，主要是優化js、css和圖檔資源三個方面，因為html是沒有辦法避免的。是以，我們可以做一下的幾項操作：
- 合并js檔案
- 合并css檔案
- 雪碧圖的使用(css sprite)
- 使用base64表示簡單的圖檔

上述四個方法，前面兩者我們可以使用webpack之類的打包工具進行打包；雪碧圖的話，也有專門的制作工具；圖檔的編碼是使用base64的，是以，對于一些簡單的圖檔，例如空白圖等，可以使用base64直接寫入html中。

回到之前網絡層面的問題，除了減少請求數量來加快網絡加載速度，往往整個資源的體積也是，平時我們會關注的方面。

\2. 減小資源體積：可以通過以下幾個方面進行實施：

*   gzip壓縮
*   js混淆
*   css壓縮
*   圖檔壓縮

gzip壓縮主要是針對html檔案來說的，它可以将html中重複的部分進行一個打包，多次複用的過程。js的混淆可以有簡單的壓縮(将空白字元删除)、醜化(醜化的方法，就是将一些變量縮小)、或者可以使用php對js進行混淆加密。css壓縮，就是進行簡單的壓縮。圖檔的壓縮，主要也是減小體積，在不影響觀感的前提下，盡量壓縮圖檔，使用png等圖檔格式，減少矢量圖、高清圖等的使用。這樣子的做法不僅可以加快網頁顯示，也能減少流量的損耗。

除了以上兩部分的操作之外，在網絡層面我們還需要做好緩存工作。真正的性能優化來說，緩存是效率最高的一種，往往縮短的加載時間也是最大的。

緩存：可以通過以下幾個方面來描述：
- DNS緩存
- CDN部署與緩存
- http緩存

由于浏覽器會在DNS解析步驟中消耗一定的時間，是以，對于一些高通路量網站來說，做好DNS的緩存工作，就會一定程度上提升網站效率。CDN緩存，CDN作為靜态資源檔案的分發網絡，本身就已經提升了，網站靜态資源的擷取速度，加快網站的加載速度，同時也給靜态資源做好緩存工作，有效的利用已緩存的靜态資源，加快擷取速度。http緩存，也是給資源設定緩存時間，防止在有效的緩存時間内對資源進行重複的下載下傳，進而提升整體網頁的加載速度。

其實，網絡層面的優化還有很多，特别是針對于移動端頁面來說。衆所周知，移動端對于網絡的敏感度更加的高，除了目前的4G和WIFI之外，其他的移動端網絡相當于弱網環境，在這種環境下，資源的緩存利用是相當重要的。而且，減少http的請求次數，也是至關重要的，移動端弱網環境下，對于http請求的時間也會增加。是以，我們可以看一下我們在移動端網絡方面可以做的優化：

移動端優化：使用以下幾種方式來加快移動端網絡方面的優化：
- 使用長cache，減少重定向
- 首屏優化，保證首屏加載資料小于14kb
- 不濫用web字型

「使用長cache」，可以使得移動端的部分資源設定長期緩存，這樣可以保證資源不用向伺服器發送請求，來比較資源是否更新，進而避免304的情況。304重定向，在PC端或許并不會影響網頁的加載速度，但是，在移動端網絡不穩定的前提下，多一次請求，就多了一部分加載時間。「首屏優化」，對于移動端來說是至關重要的。2s時間是使用者的最佳體驗，一旦超出這個時間，将會導緻使用者的流失。是以，針對移動端的網絡情況，不可能在這麼短時間内加載完成所有的網頁資源，是以我們必須保證首屏中的内容被優先顯示出來，而且基于TCP的慢啟動和擁塞控制，第一個14kb的資料是非常重要的，是以需要保證首部加載資料能夠小于14kb。「不濫用web字型」，web字型的好處就是，可以代替某些圖檔資源，但是，在移動端過多的web字型的使用，會導緻頁面資源加載的繁重，是以，慎用web字型

渲染和DOM操作方面

優化網頁渲染：

css的檔案放在頭部，js檔案放在尾部或者異步
盡量避免內聯樣式

DOM操作優化：

避免在document上直接進行頻繁的DOM操作
使用classname代替大量的内聯樣式修改
對于複雜的UI元素，設定position為absolute或fixed
盡量使用css動畫
使用requestAnimationFrame代替setInterval操作
适當使用canvas
盡量減少css表達式的使用
使用事件代理

操作細節注意：

避免圖檔或者frame使用空src
在css屬性為0時，去掉機關
禁止圖像縮放
正确的css字首的使用
移除空的css規則
對于css中可繼承的屬性，如font-size，盡量使用繼承，少一點設定
縮短css選擇器，多使用僞元素等幫助定位

移動端優化：

長清單滾動優化
函數防抖和函數節流
使用touchstart、touchend代替click
HTML的viewport設定
開啟GPU渲染加速

資料方面

圖檔加載處理：

圖檔預加載
圖檔懶加載
首屏加載時進度條的顯示

異步請求的優化：

使用正常的json資料格式進行互動
部分常用資料的緩存
資料埋點和統計

總結

本篇文章就前端性能這個話題做了一個總結。或許，并不全面，但是都是一些平時開發中會被經常用到的知識。希望有心者能夠去親身的嘗試一下這些方面的優化。本篇的概述了一下幾個知識點：

網絡層面的優化
資料層面的優化
DOM操作與渲染層面的優化

18.如何實作同一個浏覽器多個标簽頁之間的通信

一：websocket通訊

全雙工(full-duplex)通信自然可以實作多個标簽頁之間的通信

二：定時器setInterval+cookie

在頁面A設定一個使用 setInterval 定時器不斷重新整理，檢查 Cookies 的值是否發生變化，如果變化就進行重新整理的操作。

三：使用localstorage

localstorage是浏覽器多個标簽共用的存儲空間，是以可以用來實作多标簽之間的通信(ps：session是會話級的存儲空間，每個标簽頁都是單獨的）。

直接在window對象上添加監聽即可：

window.onstorage = (e) => {console.log(e)}
// 或者這樣
window.addEventListener('storage', (e) => console.log(e))

四：html5浏覽器的新特性SharedWorker

普通的webworker直接使用new Worker()即可建立，這種webworker是目前頁面專有的。然後還有種共享worker(SharedWorker)，這種是可以多個标簽頁、iframe共同使用的。

SharedWorker可以被多個window共同使用，但必須保證這些标簽頁都是同源的(相同的協定，主機和端口号)

19.浏覽器的存儲技術有哪些

cookie

cookie會随着每次HTTP請求頭資訊一起發送，無形中增加了網絡流量，另外，cookie能存儲的資料容量有限，根據浏覽器類型不同而不同，IE6大約隻能存儲2K。

sessionStorage

使用于Firefox2+的火狐浏覽器，用這種方式存儲的資料僅視窗級别有效，同一個視窗（或者Tab）頁面重新整理或者跳轉，都能擷取到本地存儲的資料，當新開視窗或者頁面時，原來的資料就失效了。

缺點：IE不支援、不能實作資料的持久儲存。

localStorage

localStorage是Web Storage網際網路存儲規範中的一部分，現在在Firefox 3.5、Safari 4和IE8中得到支援。

缺點：低版本浏覽器不支援。

Cookie，LocalStorage，SessionStorage

1、Cookie

cookie是什麼：cookie是指存儲在使用者本地終端上的資料，同時它是與具體的web頁面或者站點相關的。cookie資料會自動在web浏覽器和web伺服器之間傳輸，也就是說HTTP請求發送時，會把儲存在該請求域名下的所有cookie值發送給web伺服器，是以伺服器端腳本是可以讀、寫存儲在用戶端的cookie的操作。

cookie的有效期：cookie預設情況下的有效期是很短暫的，一旦使用者關閉浏覽器，cookie儲存的資料就會丢失。如果想要延長cookie的有效期，可以通過設定HTTP頭資訊中的cache-control屬性的max-age值，或者修改HTTP頭資訊中的expires屬性的值來延長有效期。

cookie的作用域：它是通過文檔源和文檔路徑來确定的。該作用域通過cookie的path和domain屬性也是可配置的。預設情況下，cookie和建立它的web頁面有關，并對該頁面以及和該頁面同目錄或者子目錄的其他頁面可見。有時候，你可能希望讓整個網站都能夠使用cookie的值，而不管是哪個頁面建立它。要滿足這樣的需求可以設定cookie的路徑(設定cookie的path屬性)。cookie的作用域預設由文檔源限制。但是，有的大型網站想要子域之間能夠互相共享cookie。

cookie的數目和大小的限制：每個web伺服器(域名)儲存的cookie數不能超過50個，每個cookie儲存的資料不能超過4KB，如果超過了4KB（IE6大約隻能存儲2K），伺服器會處理不了。

cookie的優點：能用于和伺服器端通信；當cookie快要過期時，可以重新設定而不是删除。

cookie的缺點：它會随着http頭資訊一起發送，增加了網絡流量（文檔傳輸的負載）；它隻能儲存少量的資料；它隻能儲存字元串；有潛在的安全問題。

另外，自從有了Web Storage API(Local and Session Storage)，cookie就不被推薦用于存儲資料了~

2、LocalStorage

localStorage是什麼：在HTML5中，新加入了一個localStorage特性，這個特性主要是用來作為本地存儲來使用的，解決了cookie存儲空間不足的問題(cookie中每條cookie的存儲空間為4k)，localStorage中一般浏覽器支援的是5M大小，這個在不同的浏覽器中localStorage會有所不同。

localStorage的優點：

1）localStorage拓展了cookie的4K限制；

2）localStorage會可以将第一次請求的資料直接存儲到本地，這個相當于一個5M大小的針對于前端頁面的資料庫，相比于cookie可以節約帶寬，但是這個卻是隻有在高版本的浏覽器中才支援的；

3）localStorage 方法存儲的資料沒有時間限制。第二天、第二周或下一年之後，資料依然可用。

localStorage的缺點：

1）浏覽器的大小不統一，并且在IE8以上的IE版本才支援localStorage這個屬性；

2）目前所有的浏覽器中都會把localStorage的值類型限定為string類型，這個在對我們日常比較常見的JSON對象類型需要一些轉換；

3）localStorage在浏覽器的隐私模式下面是不可讀取的；

4）localStorage本質上是對字元串的讀取，如果存儲内容多的話會消耗記憶體空間，會導緻頁面變卡；

5）localStorage不能被爬蟲抓取到。

3、SessionStorage

sessionStorage與localStorage的唯一一點差別就是localStorage屬于永久性存儲，而sessionStorage屬于當會話結束的時候，sessionStorage中的鍵值對就會被清空。

20.css定位方式

position 屬性值的含義：

static

元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行内元素則會建立一個或多個行框，置于其父元素中。

relative

元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。

absolute

元素框從文檔流完全删除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像元素原來不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

fixed

元素框的表現類似于将 position 設定為 absolute，不過其包含塊是視窗本身。

21.盡可能多的寫出浏覽器相容性問題

1，不同浏覽器的标簽預設的margin和padding不同

解決辦法：
2，塊屬性标簽float後，又有橫行的margin情況下，在IE6顯示margin比設定的大

解決方案：在float的标簽樣式控制中加入 display:inline;将其轉化為行内屬性
3，設定較小高度标簽（一般小于10px），在IE6，IE7，遨遊中高度超出自己設定高度

解決方案：給超出高度的标簽設定overflow:hidden;或者設定行高line-height 小于你設定的高度。
4，清除浮動：

解決方案：萬能公式在float的父元素上使用

.abc:after {clear:both;content:’.’;display:block;width: 0;height: 0;visibility:hidden;}

5，IE浮動邊緣産生的雙倍距離

#box {
    float:left;
    width:100px;
    margin:0 0 0 100px; //這種情況之下IE會産生200px的距離
    display:inline; //使浮動忽略
}

6，透明度

IE：filter：alpha（opacity = 10）;
FF：不透明度：0.6;
FF：-moz-opacity：0.10;
最好兩個都寫，并将透明度屬性放在下面

7，最小高度最小高度的實作（相容IE6，IE7，FF）

#mrjin {
    background:#ccc;
     min-height:100px;
    height:auto !important;
    height:100px;
    overflow:visible;
    }

8，.IE6下在使用margin:0 auto;無法使其居中**

解決辦法：為其父容器設定text-align:center;
9，被點選過後的超連結不再具有hover和active屬性

解決辦法:按lvha的順序書寫css樣

“:link”: a标簽還未被通路的狀态；

“:visited”: a标簽已被通路過的狀态；

“:hover”: 滑鼠懸停在a标簽上的狀态；

“:active”: a标簽被滑鼠按着時的狀态；
10, IE6下無法設定1px的行高**，原因是由其預設行高引起的

解決辦法：為期設定**overflow:hidden;*或者*line-height:1px;

22.垂直上下居中的方法

第一種方法（知道元素的寬和高）

div.box{
    weight:200px;
    height:400px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-100px;
    margin-top:-200px;
 }

第二種方法（不知道元素的寬和高）

div.box{
    weight:200px;
    height:400px;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

第三種方法（不知道元素的寬和高）

.main{
      width: 400px;
      height: 400px;
      background-color: #aaa;
      display: table;/*父元素設定表格屬性*/
      text-align: center;
}
  .main span{
      display: table-cell;/*img設定成表格元素屬性*/
      vertical-align: middle;/*兩個display設定後這個屬性就起作用*/
    }

第四種方法（flex布局）

　父級元素：
{ 
   display:flex;
   flex-direction:row;
   justify-content:center;
   align-items:center;
} 
　子級元素：{flex:1}

23.響應式布局原理

首先我們應該遵循移動優先原則：

互動和設計應以移動端為主，PC則作為移動端的一個擴充；

一個頁面需要相容不同終端，那麼有兩個關鍵點是我們需要去做到響應式的：響應式布局和響應式内容（圖檔、多媒體）。

一、響應式布局

1、Meta标簽定義

使用 viewport meta 标簽在手機浏覽器上控制布局

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">

通過快捷方式打開時全屏顯示

<meta name="apple-mobile-web-app-capable" content="yes">

隐藏狀态欄

<meta name="apple-mobile-web-app-status-bar-style" content="blank">

iPhone會将看起來像電話号碼的數字添加電話連接配接，應當關閉

<meta name="format-detection" content="telephone=no">

2、使用Media Queries适配對應樣式

常用于布局的CSS Media Queries有以下幾種：

裝置類型(media type):

all所有裝置；

　　screen 電腦顯示器；

　　print列印用紙或列印預覽視圖；

　　handheld便攜裝置；

　　tv電視機類型的裝置；

　　speech語意和音頻盒成器；

　　braille盲人用點字法觸覺回饋裝置；

　　embossed盲文列印機；

　　projection各種投影裝置；

　　tty使用固定密度字母栅格的媒介，比如電傳打字機和終端。

裝置特性(media feature):

width浏覽器寬度；

height浏覽器高度；

device-width裝置螢幕分辨率的寬度值；

device-height裝置螢幕分辨率的高度值；

orientation浏覽器視窗的方向縱向還是橫向，當視窗的高度值大于等于寬度時該特性值為portrait，否則為landscape；

aspect-ratio比例值，浏覽器的縱橫比；

device-aspect-ratio比例值，螢幕的縱橫比。

/* for 240 px width screen */  
　　@media only screen and (max-device-width:240px){  
　　 selector{ ... }  
　　}  
　　/* for 320px width screen */  
　　@media only screen and (min-device-width:241px) and (max-device-width:320px){  
　　 selector{ ... }  
　　}  
　　/* for 480 px width screen */  
　　@media only screen (min-device-width:321px)and (max-device-width:480px){  
 　　selector{ ... }  
　　}

3、表格(table)的響應式處理

那麼對于表格(table)的響應式處理該是怎樣的呢？我們該如何突破Table的局限性呢？接下來我們來了解以下的幾種針對表格響應式處理的方法：

（1）、隐藏不重要資料列

@media only screen and (max-width: 800px) {  
 　　table td:nth-child(2),  
 　　table th:nth-child(2) {display: none;}  
　　}  
　　@media only screen and (max-width: 640px) {  
 　　table td:nth-child(4),  
　　 table th:nth-child(4),  
 　　table td:nth-child(7),  
　　 table th:nth-child(7),  
 　　table td:nth-child(8),  
　　 th:nth-child(8){display: none;}  
　　}

（2）、多列橫向變2列縱向

實作方法：定位隐藏，變塊元素，并綁定對應列名，然後用僞元素的content:attr(data-th)實作：

（3）、固定首列，剩餘列橫向滾動

二、響應式内容

1、響應式圖檔

帶寬是手機終端的硬傷，如果我們隻是頁面布局做了響應式處理，在我們用手機通路時，請求的圖檔還是PC上的大圖；檔案體積大，消耗流量多，請求延時長，是以導緻的問題也是不可估量的。那麼我們就得把圖檔也處理成響應式的根據終端類型尺寸分辨率來适配出合理的圖形。

處理原理：浏覽器擷取使用者終端的螢幕尺寸、分辨率邏輯處理後輸出适應的圖檔，如螢幕分辨率320*480，那麼我們比對給它的是寬度應小于320px的圖檔。如果終端螢幕的DPI(device pixels)DPI詳解值很高，也就是高清屏，那麼我們就得輸出2倍分辨率的圖形(寬:640px)；以保證在高清屏下圖形的清晰度。各種移動終端的螢幕參數可通過http://screensiz.es/phone查詢。

2、高分辨率(DPI)下的響應式處理

3、高分辨率下的1px border

25.清除浮動的方法

方式一:使用overflow屬性來清除浮動

.ovh{
    overflow:hidden;
}

先找到浮動盒子的父元素，再在父元素中添加一個屬性：overflow:hidden,就是清除這個父元素中的子元素浮動對頁面的影響.

注意：一般情況下也不會使用這種方式，因為overflow:hidden有一個特點，離開了這個元素所在的區域以後會被隐藏（overflow:hidden會将超出的部分隐藏起來）.

方式二:使用額外标簽法

.clear{
　　clear:both;
}

在浮動的盒子之下再放一個标簽，在這個标簽中使用clear:both，來清除浮動對頁面的影響.

a.内部标簽：會将這個浮動盒子的父盒子高度重新撐開.

b.外部标簽：會将這個浮動盒子的影響清除，但是不會撐開父盒子.

注意：一般情況下不會使用這一種方式來清除浮動。因為這種清除浮動的方式會增加頁面的标簽，造成結構的混亂.

方法三:使用僞元素來清除浮動

.clearfix:after{
    content:"";//設定内容為空
    height:0;//高度為0
    line-height:0;//行高為0
    display:block;//将文本轉為塊級元素
    visibility:hidden;//将元素隐藏
    clear:both//清除浮動
}
.clearfix{  
　　zoom:1;為了相容IE
}

方法四:使用雙僞元素清除浮動

.clearfix:before,.clearfix:after {
    content: "";
    display: block;
    clear: both;
}
.clearfix {
     zoom: 1;
}

26.http協定和tcp協定

TCP協定對應于傳輸層，而Http協定對應于應用層，從本質上講，二者沒有可比性，Http協定是建立在TCP協定之上的，當浏覽器需要從伺服器擷取網頁資料的時候，會發出一次Http請求。Http會通過tcp建立起一個到伺服器的連接配接通道，當本次請求需要的資料完畢後,Http會立即将TCP連接配接斷開，這個過程是很短的。是以Http連接配接是一種短連接配接，是一種無狀态的連接配接。

所謂的無狀态，就是指浏覽器每次向伺服器發起請求的時候，不是通過一個連接配接，而是每次都建立一個新的連接配接。如果是一個連接配接的的話，伺服器程序中就能保持住這個連接配接并并且在記憶體中記住一些資訊狀态。而每次請求結束後，連接配接就關閉，相關的内容就釋放了，是以記不住任何狀态，成為無狀态連接配接。

1、TCP連接配接

手機能夠使用聯網功能是因為手機底層實作了TCP/IP協定，可以使手機終端通過無線網絡建立TCP連接配接。TCP協定可以對上層網絡提供接口，使上層網絡資料的傳輸建立在“無差别”的網絡之上。

建立起一個TCP連接配接需要經過“三次握手”：

第一次握手：用戶端發送syn包(syn=j)到伺服器，并進入SYN_SEND狀态，等待伺服器确認；
第二次握手：伺服器收到syn包，必須确認客戶的SYN（ack=j+1），同時自己也發送一個SYN包（syn=k），即SYN+ACK包，此時伺服器進入SYN_RECV狀态；
第三次握手：用戶端收到伺服器的SYN＋ACK包，向伺服器發送确認包ACK(ack=k+1)，此包發送完畢，用戶端和伺服器進入ESTABLISHED狀态，完成三次握手。

握手過程中傳送的包裡不包含資料，三次握手完畢後，用戶端與伺服器才正式開始傳送資料。理想狀态下，TCP連接配接一旦建立，在通信雙方中的任何一方主動關閉連接之前，TCP 連接配接都将被一直保持下去。斷開連接配接時伺服器和用戶端均可以主動發起斷開TCP連接配接的請求，斷開過程需要經過“四次握手”（過程就不細寫了，就是伺服器和用戶端互動，最終确定斷開）

2、HTTP連接配接

HTTP協定即超文本傳送協定(Hypertext Transfer Protocol )，是Web聯網的基礎，也是手機聯網常用的協定之一，HTTP協定是建立在TCP協定之上的一種應用。

HTTP連接配接最顯著的特點是用戶端發送的每次請求都需要伺服器回送響應，在請求結束後，會主動釋放連接配接。從建立連接配接到關閉連接配接的過程稱為“一次連接配接”。

1）在HTTP 1.0中，用戶端的每次請求都要求建立一次單獨的連接配接，在處理完本次請求後，就自動釋放連接配接。
2）在HTTP 1.1中則可以在一次連接配接中處理多個請求，并且多個請求可以重疊進行，不需要等待一個請求結束後再發送下一個請求。

由于HTTP在每次請求結束後都會主動釋放連接配接，是以HTTP連接配接是一種“短連接配接”，要保持用戶端程式的線上狀态，需要不斷地向伺服器發起連接配接請求。通常的做法是即時不需要獲得任何資料，用戶端也保持每隔一段固定的時間向伺服器發送一次“保持連接配接”的請求，伺服器在收到該請求後對用戶端進行回複，表明知道客戶端“線上”。若伺服器長時間無法收到用戶端的請求，則認為用戶端“下線”，若用戶端長時間無法收到伺服器的回複，則認為網絡已經斷開。

27.重新整理頁面，js請求一般會有哪些地方有緩存處理

DNS緩存：短時間内多次通路某個網站，在限定時間内，不用多次通路DNS伺服器。
CDN緩存：内容分發網絡（人們可以在就近的代售點取火車票了，不用非得到火車站去排隊）
浏覽器緩存：浏覽器在使用者磁盤上，對最新請求過的文檔進行了存儲。
伺服器緩存：将需要頻繁通路的Web頁面和對象儲存在離使用者更近的系統中，當再次通路這些對象的時候加快了速度。

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

1.檔案合并（目的是減少http請求）：使用css sprites合并圖檔，一個網站經常使用小圖示和小圖檔進行美化，但是很遺憾這些小圖檔占用了大量的HTTP請求，是以可以采用sprites的方式把所有的圖檔合并成一張圖檔，可以通過相關工具線上合并，也可以在ps中合并。
2.使用CDN（内容分發網絡）加速，降低通信距離。
3.緩存的使用，添加Expire/Cache-Control頭。
4.啟用Gzip壓縮檔案。
5.将css放在頁面最上面。
6.将script放在頁面最下面。
7.避免在css中使用表達式。
8.将css, js都放在外部檔案中。
9.減少DNS查詢。
10.檔案壓縮：最小化css, js，減小檔案體積。
11.避免重定向。
12.移除重複腳本。
13.配置實體标簽ETag。
14.使用AJAX緩存，讓網站内容分批加載，局部更新。

29.你對網頁标準和W3C重要性的了解

網頁标準和标準制定機構都是為了能讓web發展的更健康，開發者遵循統一的标準，降低開發難度，開發成本，SEO也會更好做，也不會因為濫用代碼導緻各種bug、安全問題，最終提高網站易用性。

30.Http和https的差別

一、HTTP和HTTPS的基本概念

HTTP：是網際網路上應用最為廣泛的一種網絡協定，是一個用戶端和伺服器端請求和應答的标準（TCP），用于從WWW伺服器傳輸超文本到本地浏覽器的傳輸協定，它可以使浏覽器更加高效，使網絡傳輸減少。

HTTPS：是以安全為目标的HTTP通道，簡單講是HTTP的安全版，即HTTP下加入SSL層，HTTPS的安全基礎是SSL，是以加密的詳細内容就需要SSL。

HTTPS協定的主要作用可以分為兩種：一種是建立一個資訊安全通道，來保證資料傳輸的安全；另一種就是确認網站的真實性。

二、HTTP與HTTPS有什麼差別？

HTTP協定傳輸的資料都是未加密的，也就是明文的，是以使用HTTP協定傳輸隐私資訊非常不安全，為了保證這些隐私資料能加密傳輸，于是網景公司設計了SSL（Secure Sockets Layer）協定用于對HTTP協定傳輸的資料進行加密，進而就誕生了HTTPS。

簡單來說，HTTPS協定是由SSL+HTTP協定建構的可進行加密傳輸、身份認證的網絡協定，要比http協定安全。

HTTPS和HTTP的差別主要如下：

1、https協定需要到ca申請證書，一般免費證書較少，因而需要一定費用。
2、http是超文本傳輸協定，資訊是明文傳輸，https則是具有安全性的ssl加密傳輸協定。
3、http和https使用的是完全不同的連接配接方式，用的端口也不一樣，前者是80，後者是443。
4、http的連接配接很簡單，是無狀态的；HTTPS協定是由SSL+HTTP協定建構的可進行加密傳輸、身份認證的網絡協定，比http協定安全。

浏覽器、html、css面試題（一）Cookie，LocalStorage，SessionStorage

文章目錄

1.什麼是盒模型

盒模型

W3C的标準盒模型

IE的盒模型

css如何設定兩種模型

2.行内元素有哪些？塊級元素有哪些？ 空(void)元素有那些？行内元素和塊級元素有什麼差別？

3.簡述src和href的差別

4.什麼是css Hack

CSS Hack常見的有三種形式：

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

6.px和em的差別

7.HTML5 為什麼隻寫

8.Http的狀态碼有哪些

9.一次完整的HTTP事務是怎麼一個過程

10.HTTPS是如何實作加密

11.浏覽器是如何渲染頁面的

浏覽器頁面渲染流程

1、解析文檔建構DOM樹

2、建構渲染樹

3、布局與繪制渲染樹

12.浏覽器的核心有哪些？分别有什麼代表的浏覽器

13.頁面導入時，使用link和@import有什麼差別

14.如何優化圖像，圖像格式的差別

優化圖像

圖像格式差別

15.列舉你了解Html5. Css3 新特性

1.html5的新特性？(記住有九大子產品内容)

2.CSS3中新添加的特性？（css3也有九大屬性）

16.可以通過哪些方法優化css3 animation渲染

1、盡可能多的利用硬體能力，如使用3D變形來開啟GPU加速：

2、盡可能少的使用box-shadows與gradients

17.列舉幾個前端性能方面的優化

網絡方面

渲染和DOM操作方面

資料方面

總結

18.如何實作同一個浏覽器多個标簽頁之間的通信

19.浏覽器的存儲技術有哪些

cookie

sessionStorage

localStorage

Cookie，LocalStorage，SessionStorage

1、Cookie

2、LocalStorage

3、SessionStorage

20.css定位方式

static

relative

absolute

fixed

21.盡可能多的寫出浏覽器相容性問題

22.垂直上下居中的方法

第一種方法（知道元素的寬和高）

第二種方法（不知道元素的寬和高）

第三種方法（不知道元素的寬和高）

第四種方法（flex布局）

23.響應式布局原理

首先我們應該遵循移動優先原則：

一、響應式布局

二、響應式内容

25.清除浮動的方法

方式一:使用overflow屬性來清除浮動

方式二:使用額外标簽法

方法三:使用僞元素來清除浮動

方法四:使用雙僞元素清除浮動

26.http協定和tcp協定

1、TCP連接配接

2、HTTP連接配接

27.重新整理頁面，js請求一般會有哪些地方有緩存處理

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

29.你對網頁标準和W3C重要性的了解

30.Http和https的差別

一、HTTP和HTTPS的基本概念

二、HTTP與HTTPS有什麼差別？

HTTPS和HTTP的差別主要如下：

繼續閱讀

2.行内元素有哪些？塊級元素有哪些？空(void)元素有那些？行内元素和塊級元素有什麼差別？