1.什么是盒模型

盒模型

margin(外邊距)- 清除邊框外的區域，外邊距是透明的，
border(邊框)- 圍繞在內邊距和內容外的邊框，
padding(內邊距)- 清除內容周圍的區域，內邊距是透明的，
content(內容)- 盒子的內容，顯示文本和影像，

W3C的標準盒模型

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

IE的盒模型

在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是相對于顯示幕螢屏解析度而言的，

em

是相對長度單位，相對于當前物件內文本的字體尺寸,多理解父級設定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往往都是頁面的性能殺手，尤其是在一個元素同時都使用了它們.
盡可能的讓影片元素不在檔案流中，以減少重排

position: fixed;position: absolute;

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

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

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

網路方面

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

1. 減少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等圖片格式，減少矢量圖、高清圖等的使用，這樣子的做法不僅可以加快網頁顯示，也能減少流量的損耗，

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

1. 快取：可以通過以下幾個方面來描述：
   • DNS快取
   • CDN部署與快取
   • http快取

由于瀏覽器會在DNS決議步驟中消耗一定的時間，所以，對于一些高訪問量網站來說，做好DNS的快取作業，就會一定程度上提升網站效率，CDN快取，CDN作為靜態資源檔案的分發網路，本身就已經提升了，網站靜態資源的獲取速度，加快網站的加載速度，同時也給靜態資源做好快取作業，有效的利用已快取的靜態資源，加快獲取速度，http快取，也是給資源設定快取時間，防止在有效的快取時間內對資源進行重復的下載，從而提升整體網頁的加載速度，

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

1. 移動端優化：使用以下幾種方式來加快移動端網路方面的優化：
   • 使用長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不同
  解決辦法：

   body,h1,h2,h3,ul,li,input,div,span,a,form …… { margin:0; padding:0; }
  

• 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）、固定首列，剩余列橫向滾動

thead {float:left;}  　tbody {display:block;width:auto;overflow-x:auto;}

二、回應式內容

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協議安全，