CSS

? ? 1.盒模型

? ? ? ? ? ? ? ? 用來裝頁面上的元素的矩形區(qū)域。

? ? ????????????box-sizing: border-box , padding-box, content-box

? ? ????????????標(biāo)準(zhǔn)盒子模型的盒子寬度：左右border+左右padding+width

? ? ????????????IE盒子模型的盒子寬度：width

???????????? ? padding-box ：寬度：左右padding+width

? ? 2.畫一條 0.5px 的線

? ? ? ? ? ? （1）采用transform:scaleY(0.5)

????????????????????height:1px;

? ????????????????? transform:scaleY(0.5);

????????????????? ? background-color:#000;

? ? ? ? ? ? (2) 采用linear-gradient的方式

? ? ? ? ? ? ? ? ? ? ?height:1px;

????????????????????background:linear-gradient(0deg,?#fff,?#000);

? ? ? ? ?（3）采用box-shadow

? ??????????????????height:1px;

? ? ? ? ? ? ? ? ? ? background: none;

? ? ? ? ? ? ? ? ? ? box-shadow:0 0.5px 0 #000;

? ? ? ? ? （4）采用meta viewport的方式

? ? ? ? ? <meta name="viewport" content="width=device-width,initial-sacle=0.5">

3.link標(biāo)簽和import標(biāo)簽的區(qū)別

? ? ? ? ? ? link屬于html標(biāo)簽，而@import是css提供的

? ? ? ? ? ? 頁面被加載時(shí)，link會(huì)被同時(shí)加載，而@import引用的css會(huì)等到頁面加載結(jié)束后加載

? ? ? ? ? ? link是html標(biāo)簽，因此沒有兼容性，而@import是只有IE5以上才能識(shí)別

? ? ? ? ? ? link方式樣式權(quán)重高于@import的

4.transition 和animation的區(qū)別

? ? ? ? ? ? transition：需要觸發(fā)一個(gè)事件才能改變屬性? 2幀 from……to

? ? ? ? ? ? animation：不需要觸發(fā)任何事件的情況下才會(huì)隨時(shí)間改變屬性值一幀一幀

5.Flex布局

? ? ? ? ? ? 彈性布局：

? ? ? ? ? ? 容器屬性：

? ? ? ? ? ? ?flex-direction：決定主軸的方向

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? row | row-reverse| column |column-reverse；

? ? ? ? ? ? ?flex-wrap：決定換行規(guī)則

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?nowrap| wrap| wrap-reverse

? ? ? ? ? ? ? flex-flow: 屬性是 flex-direction 和 flex-wrap 屬性的復(fù)合屬性。

? ??????????????????????????flex-flow:?flex-direction?flex-wrap|initial|inherit;

? ? ? ? ? ? ? justify-content:水平對(duì)齊方式

? ? ? ? ? ? ? align-items：垂直對(duì)齊方式

? ? ? ? ? ? ? ? 元素屬性：

? ? ? ? ? ? ? ? order、flex-grow、flex-shrink、flex-basis、flex 默認(rèn)0 1 auto、align-self

6.圣杯布局&雙飛翼布局&flex布局&絕對(duì)定位布局

? ??????????四種布局方式

7.BFC

BFC

　BFC(Block formatting context)直譯為"塊級(jí)格式化上下文"。它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與，它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個(gè)區(qū)域外部毫不相干。

　BFC布局規(guī)則：

內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置。

Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊

每個(gè)元素的margin box的左邊，與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。

BFC的區(qū)域不會(huì)與float box重疊。

BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。

計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算

哪些元素會(huì)生成BFC?

根元素

float屬性不為none

position為absolute或fixed

display為inline-block, table-cell, table-caption, flex, inline-flex

overflow不為visible

8.垂直居中的方法

（1）margin：auto

? ? ? ? .container{
? ? ? ? ? ? ? ? width:400px; height:400px; position:relative; border:1px solid #000}

? ? ? ? ?.innner{

? ? ? ? ? ? ? ? position:absolute;margin:auto;top:0;right:0;bottom:0;left:0;background-color:#000}

(2)margin 負(fù)值法

? ? ? ? .container{

? ? ? ? ? ? ? ? width:400px; height:400px;position:relative;}

? ? ? ? .inner{

? ? ? ? ? ? ? ? width:200px;height:200px;position:absolute;top:calc(50%-100px);left:calc(50%-100px);}

或? ? ? ?.inner{

? ??????????????? width:200px;height:200px;position:absolute;top:50%;left:50%; transform:translate(-50%,-50%)}

(3)table-cell

? ? ? ? .container{

? ? ? ? ? ? ? ?width:400px; height:400px;display:table-cell;vertical-align:middle;}

(4)flex

? ? ? ? ?.container{

? ? ? ? ? ? ? ??width:400px; height:400px;display:flex;justify-content:center;align-items:center}

9. js動(dòng)畫和css3動(dòng)畫的差異性

渲染線程分別為main thread 和 compositor thread。如果css動(dòng)畫只改變transform和opacity，這時(shí)整個(gè)CSS動(dòng)畫得以在compositor thread完成（而js動(dòng)畫會(huì)在main thread執(zhí)行，然后出發(fā)compositor thread進(jìn)行下一步操作），如果改變transform和opacity是不會(huì)layout或者paint的。

JS動(dòng)畫

缺點(diǎn)：JavaScript在瀏覽器的主線程中運(yùn)行，而其中還有很多其他需要運(yùn)行的JavaScript、樣式計(jì)算、布局、繪制等對(duì)其干擾。這也就導(dǎo)致了線程可能出現(xiàn)阻塞，從而造成丟幀的情況。

優(yōu)點(diǎn)：JavaScript的動(dòng)畫與CSS預(yù)先定義好的動(dòng)畫不同，可以在其動(dòng)畫過程中對(duì)其進(jìn)行控制：開始、暫停、回放、中止、取消都是可以做到的。而且一些動(dòng)畫效果，比如視差滾動(dòng)效果，只有JavaScript能夠完成。

CSS動(dòng)畫

缺點(diǎn)：缺乏強(qiáng)大的控制能力。而且很難以有意義的方式結(jié)合到一起，使得動(dòng)畫變得復(fù)雜且易于出問題。

優(yōu)點(diǎn)：瀏覽器可以對(duì)動(dòng)畫進(jìn)行優(yōu)化。它必要時(shí)可以創(chuàng)建圖層，然后在主線程之外運(yùn)行。

動(dòng)畫區(qū)別

10.塊級(jí)元素和行內(nèi)元素

塊級(jí)元素：獨(dú)占一行，并且自動(dòng)填滿父元素，可以設(shè)置margin和padding以及高度和寬度

<pre>預(yù)格式化文本<ul>無序列表<ol>有序列表<table>表格<form>表單<fieldset>表單元素分組

<output>表單輸出<header>頁頭<footer>頁尾<section>分區(qū)或節(jié)<atrical>文章內(nèi)容<aside>側(cè)邊欄

<address>聯(lián)系方式信息<audio>音頻<video>視頻<blockquote>塊引用<canvas>繪制圖形

<dd>定義列表中定義條目描述<dl>定義列表<figure>圖文信息組<figcaption>圖文信息組標(biāo)題

行內(nèi)元素：不會(huì)獨(dú)占一行，width和height會(huì)失效，并且在垂直方向的padding和margin會(huì)失效

<span>行內(nèi)容器<a>定義錨<b>定義粗體<i>定義斜體<abbr>定義縮寫<acronym>定義取得首字母縮寫

<cite>定義引用<big>定義大號(hào)文本<small>定義小號(hào)文本<br>定義折行<dfn>定義項(xiàng)目<em>著重閱讀

<strong>定義加強(qiáng)<img>定義圖片<map>定義圖像映射<script>定義腳本<sub>定義下標(biāo)文本<sup>定義上標(biāo)文本

<button>定義按鈕<input> 定義輸入框<label>定義界面中項(xiàng)目的標(biāo)題

11.單行、多行元素的文本省略號(hào)

單行：

overflow:hidden

white-space:nowrap

text-overflow:ellipsis

多行：

display:-webkit-box

-webkit-box-orient:vertial

-webkit-line-clamp:3

overflow:hidden

text-overflow: ellipsis;

12.visibility:hidden,opacity:0,display:none

opacity:0 該元素隱藏起來了，但不會(huì)改變頁面布局，并且，如果該元素已經(jīng)綁定一些事件，如果click事件，那么點(diǎn)擊該區(qū)域，也能觸發(fā)點(diǎn)擊事件

visibility:hidden,該元素隱藏起來，并不會(huì)改變頁面布局，但是不會(huì)觸發(fā)該元素的綁定事件

display:none 把元素隱藏起來，并且會(huì)改變頁面布局，可以理解為將該元素刪除掉一樣

13.外邊距重疊問題

邊界重疊是指兩個(gè)或多個(gè)盒子(可能相鄰也可能嵌套)的相鄰邊界(其間沒有任何非空內(nèi)容、補(bǔ)白、邊框)重合在一起而形成一個(gè)單一邊界。

防止外邊距重疊解決方案：

外層元素padding代替

內(nèi)層元素透明邊框 border:1px solid transparent;

內(nèi)層元素絕對(duì)定位 postion:absolute:

外層元素 overflow:hidden;

內(nèi)層元素加float:left;或display:inline-block;

內(nèi)層元素padding:1px;

14. 什么是CSS hack

? ? ? ?由于不同廠商的流覽器或某瀏覽器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），對(duì)CSS的支持、解析不一樣，導(dǎo)致在不同瀏覽器的環(huán)境中呈現(xiàn)出不一致的頁面展現(xiàn)效果。這時(shí)，我們?yōu)榱双@得統(tǒng)一的頁面效果，就需要針對(duì)不同的瀏覽器或不同版本寫特定的CSS樣式，我們把這個(gè)針對(duì)不同的瀏覽器/不同版本寫相應(yīng)的CSS code的過程，叫做CSS hack!

史上最全的CSS hack方式一覽

15.什么叫優(yōu)雅降級(jí)與漸進(jìn)增強(qiáng)

.transition { /*漸進(jìn)增強(qiáng)寫法*/

-webkit-transition: all .5s;

-moz-transition: all .5s;

-o-transition: all .5s;

transition: all .5s;}

.transition{/*優(yōu)雅降級(jí)寫法*/

transition: all .5s;

-o-transition: all .5s;

-moz-transition: all .5s;

-webkit-transition: all .5s;}

漸進(jìn)增強(qiáng)（progressive enhancement）：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。（從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能，向頁面添加無害于基礎(chǔ)瀏覽器的額外樣式和功能。當(dāng)瀏覽器支持時(shí)，它們會(huì)自動(dòng)地呈現(xiàn)出來并發(fā)揮作用。）

優(yōu)雅降級(jí)（graceful degradation）：一開始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。（Web站點(diǎn)在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會(huì)檢查以確認(rèn)它們是否能正常工作。由于IE獨(dú)特的盒模型布局問題，針對(duì)不同版本的IE的hack實(shí)踐過優(yōu)雅降級(jí)了，為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級(jí)體驗(yàn)卻不至于完全失效。）

區(qū)別：優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗(yàn)的供給，而漸進(jìn)增強(qiáng)則是從一個(gè)非?；A(chǔ)的、能夠起作用的版本開始，并不斷擴(kuò)充，以適應(yīng)未來環(huán)境的需要。

16. px、em、rem和%的區(qū)別

px是固定長度單位，不隨其它元素的變化而變化

em和%是相對(duì)于父級(jí)元素的單位，會(huì)隨父級(jí)元素的屬性（font-size或其它屬性）變化而變化

rem是相對(duì)于根目錄（HTML元素）的，所有它會(huì)隨HTML元素的屬性（font-size）變化而變化

px和%用的比較廣泛一些，可以充當(dāng)更多屬性的單位，而em和rem是字體大小的單位，用于充當(dāng)font-size屬性的單位

一般來說：1em = 1rem = 100% = 16 px

17.css預(yù)處理器比較less和sass

三者區(qū)別

18.可以通過哪些方法優(yōu)化css3 animation渲染

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

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

19. 如何清除浮動(dòng)？

（1）使用偽元素

.clearfix::after {

? content:'';

? display: block;

? clear: both;

}

（2）添加一個(gè)空div，利用css提高的clear:both清除浮動(dòng)，讓父級(jí)div能自動(dòng)獲取到高度

????????.clearfloat{clear:both}

（3）父級(jí)div手動(dòng)定義height，就解決了父級(jí)div無法自動(dòng)獲取到高度的問題

（4）必須定義width或zoom:1，同時(shí)不能定義height，使用overflow:hidden時(shí)，瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度

（5）必須定義width或zoom:1，同時(shí)不能定義height，使用overflow:auto時(shí)，瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度

（6）父級(jí)div也一起浮動(dòng)

（7）將div屬性變成表格 display：table

（8）父級(jí)div定義zoom:1來解決IE浮動(dòng)問題，結(jié)尾處加br標(biāo)簽clear:both

20.觸發(fā)重布局的屬性?、觸發(fā)重繪的屬性

觸發(fā)重排的屬性：

盒子模型相關(guān)屬性會(huì)觸發(fā)重布局：

* width* height* padding* margin* display* border-width* border* min-height

定位屬性及浮動(dòng)也會(huì)觸發(fā)重布局：

* top* bottom* left* right* position* float* clear

改變節(jié)點(diǎn)內(nèi)部文字結(jié)構(gòu)也會(huì)觸發(fā)重布局：

* text-align* overflow-y* font-weight* overflow* font-family* line-height* vertival-align* white-space* font-size

觸發(fā)重繪的屬性：

* color* border-style* border-radius* visibility* text-decoration* background* background-image

* background-position* background-repeat* background-size* outline-color* outline* outline-style* outline-width* box-shadow

21.?響應(yīng)式布局原理

所謂的響應(yīng)式布局，就是設(shè)計(jì)一個(gè)網(wǎng)站的時(shí)候，讓它滿足能同時(shí)適應(yīng)不同的端口，而不用對(duì)不同端口設(shè)計(jì)不同的網(wǎng)頁。

實(shí)現(xiàn)方式：采用百分比自適應(yīng)布局

1.原生代碼實(shí)現(xiàn)? ??? 用原生代碼實(shí)現(xiàn)的根本在于媒體查詢@media的設(shè)置。

??? @media screen 可以查詢當(dāng)前瀏覽器的尺寸，因此可采用該方法對(duì)同一個(gè)頁面設(shè)置不同的CSS樣式，來滿足不同分辨率要求。

??? 舉例如下：

???? @media screen and (min-width:1000px){...}????????????? 對(duì)應(yīng)PC端頁面

???? @media screen and (max-width:1000px) and (min-width:768px) {...}??????? 對(duì)應(yīng)平板端頁面

???? @media screen and (max-width:768px){...}?????????? 對(duì)應(yīng)手機(jī)端頁面

2.采用bootstrap框架布局

?bootstrap框架布局完成的頁面，是自動(dòng)對(duì)應(yīng)的自適應(yīng)效果

? <div class="col-md-6 col-sm-6 col-xs-12">

3.react vue等框架柵格均能實(shí)現(xiàn)自適應(yīng)效果，實(shí)現(xiàn)響應(yīng)式布局。

HTML

1.HTML5 為什么只寫<!DOCTYPE HTML>

HTML 4.01 中的 doctype 需要對(duì) DTD 進(jìn)行引用，因?yàn)?HTML 4.01 基于 SGML。

而 HTML 5 不基于 SGML，因此不需要對(duì) DTD 進(jìn)行引用，但是需要 doctype 來規(guī)范瀏覽器的行為。

其中，SGML是標(biāo)準(zhǔn)通用標(biāo)記語言,簡單的說，就是比HTML,XML更老的標(biāo)準(zhǔn)，這兩者都是由SGML發(fā)展而來的。

BUT，HTML5不是的。

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

詳細(xì)介紹

瀏覽器、網(wǎng)絡(luò)Http

1. 簡述src和href的區(qū)別

src用于替換當(dāng)前元素，是source的縮寫，指向外部資源的位置，指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置；在請(qǐng)求src資源時(shí)會(huì)將其指向的資源下載并應(yīng)用到文檔內(nèi)，例如js腳本，img圖片和frame等元素。

href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系，是Hypertext?Reference的縮寫，指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點(diǎn)）或當(dāng)前文檔（鏈接）之間的鏈接。

2. Http的狀態(tài)碼有哪些

類別? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 原因短語

1XX Informational（信息性狀態(tài)碼）接受的請(qǐng)求正在處理

2XX Success（成功狀態(tài)碼）請(qǐng)求正常處理完畢

3XX Redirection（重定向狀態(tài)碼）需要進(jìn)行附加操作以完成請(qǐng)求

4XX Client Error（客戶端錯(cuò)誤狀態(tài)碼）服務(wù)器無法處理請(qǐng)求

5XX Server Error（服務(wù)器錯(cuò)誤狀態(tài)碼）服務(wù)器處理請(qǐng)求出錯(cuò)

1、200 OK：請(qǐng)求已正常處理。

2、204(無內(nèi)容)服務(wù)器成功處理了請(qǐng)求，但沒有返回任何內(nèi)容。

3、206(部分內(nèi)容)服務(wù)器成功處理了部分?GET?請(qǐng)求。

4、301(永久移動(dòng))請(qǐng)求的網(wǎng)頁已永久移動(dòng)到新位置。服務(wù)器返回此響應(yīng)(對(duì)?GET?或?HEAD?請(qǐng)求的響應(yīng))時(shí)，會(huì)自動(dòng)將請(qǐng)求者轉(zhuǎn)到新位置。您應(yīng)使用此代碼告訴某個(gè)網(wǎng)頁或網(wǎng)站已永久移動(dòng)到新位置。

5、302(臨時(shí)移動(dòng))服務(wù)器目前從不同位置的網(wǎng)頁響應(yīng)請(qǐng)求，但請(qǐng)求者應(yīng)繼續(xù)使用原有位置來響應(yīng)以后的請(qǐng)求。此代碼與響應(yīng)?GET?和?HEAD?請(qǐng)求的?301?代碼類似，會(huì)自動(dòng)將請(qǐng)求者轉(zhuǎn)到不同的位置，但您不應(yīng)使用此代碼來告訴某個(gè)網(wǎng)頁或網(wǎng)站已經(jīng)移動(dòng)，因?yàn)?Googlebot?會(huì)繼續(xù)抓取原有位置并編制索引。

6、303 See Other：資源的URI已更新，你是否能臨時(shí)按新的URI訪問。該狀態(tài)碼表示由于請(qǐng)求對(duì)應(yīng)的資源存在著另一個(gè)URL，應(yīng)使用GET方法定向獲取請(qǐng)求的資源。303狀態(tài)碼和302狀態(tài)碼有著相同的功能，但303狀態(tài)碼明確表示客戶端應(yīng)當(dāng)采用GET方法獲取資源，這點(diǎn)與302狀態(tài)碼有區(qū)別。

當(dāng)301,302,303響應(yīng)狀態(tài)碼返回時(shí)，幾乎所有的瀏覽器都會(huì)把POST改成GET，并刪除請(qǐng)求報(bào)文內(nèi)的主體，之后請(qǐng)求會(huì)自動(dòng)再次發(fā)送。

7.304(未修改)自從上次請(qǐng)求后，請(qǐng)求的網(wǎng)頁未修改過。服務(wù)器返回此響應(yīng)時(shí)，不會(huì)返回網(wǎng)頁內(nèi)容。

如果網(wǎng)頁自請(qǐng)求者上次請(qǐng)求后再也沒有更改過，您應(yīng)將服務(wù)器配置為返回此響應(yīng)(稱為?If-Modified-Since HTTP?標(biāo)頭)。服務(wù)器可以告訴?Googlebot?自從上次抓取后網(wǎng)頁沒有變更，進(jìn)而節(jié)省帶寬和開銷。

8、307 Temporary Redirect：臨時(shí)重定向。與302有相同的含義。

9、400 Bad Request：服務(wù)器端無法理解客戶端發(fā)送的請(qǐng)求，請(qǐng)求報(bào)文中可能存在語法錯(cuò)誤。

10、401(未授權(quán))請(qǐng)求要求身份驗(yàn)證。對(duì)于登錄后請(qǐng)求的網(wǎng)頁，服務(wù)器可能返回此響應(yīng)。

11、403(禁止)服務(wù)器拒絕請(qǐng)求。不允許訪問那個(gè)資源。該狀態(tài)碼表明對(duì)請(qǐng)求資源的訪問被服務(wù)器拒絕了。（權(quán)限，未授權(quán)IP等）

12、404(未找到)服務(wù)器找不到請(qǐng)求的網(wǎng)頁。例如，對(duì)于服務(wù)器上不存在的網(wǎng)頁經(jīng)常會(huì)返回此代碼。

13、500(服務(wù)器內(nèi)部錯(cuò)誤)服務(wù)器遇到錯(cuò)誤，無法完成請(qǐng)求。

14、503(服務(wù)不可用)服務(wù)器目前無法使用(由于超載或停機(jī)維護(hù))。通常，這只是暫時(shí)狀態(tài)。

3.一次完整的HTTP事務(wù)是怎么一個(gè)過程

域名解析 --> 發(fā)起TCP的3次握手 --> 建立TCP連接后發(fā)起http請(qǐng)求 --> 服務(wù)器響應(yīng)http請(qǐng)求，瀏覽器得到html代碼 --> 瀏覽器解析html代碼，并請(qǐng)求html代碼中的資源（如js、css、圖片等） --> 瀏覽器對(duì)頁面進(jìn)行渲染呈現(xiàn)給用戶

詳細(xì)解釋

從用戶輸入瀏覽器輸入url到頁面最后呈現(xiàn) 有哪些過程？

用戶輸入U(xiǎn)RL地址

瀏覽器解析URL解析出主機(jī)名

瀏覽器將主機(jī)名轉(zhuǎn)換成服務(wù)器ip地址（瀏覽器先查找本地DNS緩存列表沒有的話再向?yàn)g覽器默認(rèn)的DNS服務(wù)器發(fā)送查詢請(qǐng)求同時(shí)緩存）

瀏覽器將端口號(hào)從URL中解析出來

5.瀏覽器建立一條與目標(biāo)Web服務(wù)器的TCP連接（三次握手）

6.瀏覽器向服務(wù)器發(fā)送一條HTTP請(qǐng)求報(bào)文

7.服務(wù)器向?yàn)g覽器返回一條HTTP響應(yīng)報(bào)文

8.關(guān)閉連接瀏覽器解析文檔

如果文檔中有資源重復(fù)5 6 7 8 動(dòng)作直至資源全部加載完畢

4. HTTPS是如何實(shí)現(xiàn)加密

https的SSL加密是在傳輸層實(shí)現(xiàn)的。

客戶使用https url訪問服務(wù)器，則要求web服務(wù)器建立ssl連接

web服務(wù)器接受客戶端的請(qǐng)求后，會(huì)將網(wǎng)站的證書（證書包含了公鑰），返回給客戶端

客戶端和web服務(wù)器端開始協(xié)商SSL連接的安全等級(jí)，也就是加密等級(jí)，建立會(huì)話密鑰，然后通過網(wǎng)站的公鑰來加密會(huì)話密鑰，并傳送給網(wǎng)站

web服務(wù)器通過自己的私鑰解密出會(huì)話密鑰

web服務(wù)器通過會(huì)話密鑰加密與客戶端之間的通信

5.tcp三次握手，一句話概括

客戶端和服務(wù)端都需要直到各自可收發(fā)，因此需要三次握手

6.瀏覽器是如何渲染頁面的

大概可以劃分成以下幾個(gè)步驟：

（1）解析HTML文件，構(gòu)建 DOM Tree

（2）解析CSS，構(gòu)建 CSSOM Tree(CSS規(guī)則樹)

（3）將 DOM Tree 和 CSSOM Tree合并，構(gòu)建Render tree(渲染樹)

（4）reflow(重排)：根據(jù)Render tree進(jìn)行節(jié)點(diǎn)信息計(jì)算（Layout）

（5）repaint(重繪)：根據(jù)計(jì)算好的信息繪制整個(gè)頁面（Painting）

7.瀏覽器的內(nèi)核有哪些？分別有什么代表的瀏覽器

IE:trident內(nèi)核

Firefox：gecko內(nèi)核

safari：webkit內(nèi)核

opera：以前是presto內(nèi)核，現(xiàn)在改用google chrome的Blink內(nèi)核

Chrome：Blink（基于webkit，google與opera software共同開發(fā)）

8.如何優(yōu)化圖像，圖像格式的區(qū)別

優(yōu)化圖像：

1、不用圖片，盡量用css3代替。比如說要實(shí)現(xiàn)修飾效果，如半透明、邊框、圓角、陰影、漸變等，在當(dāng)前主流瀏覽器中都可以用CSS達(dá)成。

2、使用矢量圖SVG替代位圖。對(duì)于絕大多數(shù)圖案、圖標(biāo)等，矢量圖更小，且可縮放而無需生成多套圖?，F(xiàn)在主流瀏覽器都支持SVG了，所以可放心使用！

3.、使用恰當(dāng)?shù)膱D片格式。我們常見的圖片格式有JPEG、GIF、PNG。

基本上，內(nèi)容圖片多為照片之類的，適用于JPEG。

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

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

4、按照HTTP協(xié)議設(shè)置合理的緩存。

5、使用字體圖標(biāo)webfont、CSS Sprites等。

6、用CSS或JavaScript實(shí)現(xiàn)預(yù)加載。

7、WebP圖片格式能給前端帶來的優(yōu)化。

? WebP支持無損、有損壓縮，動(dòng)態(tài)、靜態(tài)圖片，壓縮比率優(yōu)于GIF、JPEG、JPEG2000、PG等格式，非常適合用于網(wǎng)絡(luò)等圖片傳輸。

圖像格式的區(qū)別：

矢量圖：圖標(biāo)字體，如 font-awesome；svg 位圖：gif,jpg(jpeg),png

區(qū)別：

　　1、gif:是是一種無損，8位圖片格式。

? ? ? 具有支持動(dòng)畫，索引透明，壓縮等特性。適用于做色彩簡單(色調(diào)少)的圖片，如logo,各種小圖標(biāo)icons等。

　　2、JPEG格式是一種大小與質(zhì)量相平衡的壓縮圖片格式。適用于允許輕微失真的色彩豐富的照片，

? ? ? 不適? 合做色彩簡單(色調(diào)少)的圖片，如logo,各種小圖標(biāo)icons等。

　　3、png:PNG可以細(xì)分為三種格式:PNG8，PNG24，PNG32。后面的數(shù)字代表這種PNG格式最多可以索引和存儲(chǔ)的顏色值。

關(guān)于透明：PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基礎(chǔ)上增加了8位（256階）的alpha通道透明;

優(yōu)缺點(diǎn)：

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

　　2、對(duì)于需要高保真的較復(fù)雜的圖像，PNG雖然能無損壓縮，但圖片文件較大，不適合應(yīng)用在Web頁面上。

png-8，png-24，jpeg，gif，svg。

WebP格式，谷歌（google）開發(fā)的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，并能節(jié)省大量的服務(wù)器帶寬資源和數(shù)據(jù)空間。Facebook Ebay等知名網(wǎng)站已經(jīng)開始測(cè)試并使用WebP格式。

在質(zhì)量相同的情況下，WebP格式圖像的體積要比JPEG格式圖像小40%。

9.列舉幾個(gè)前端性能方面的優(yōu)化

? ? ? ? 全面介紹：https://juejin.im/post/59e1bbc9f265da430f311fb1

10.如何實(shí)現(xiàn)同一個(gè)瀏覽器多個(gè)標(biāo)簽頁之間的通信

? ? ? ?詳細(xì)介紹：瀏覽器多個(gè)標(biāo)簽頁之間的通信

11.瀏覽器的存儲(chǔ)技術(shù)有哪些

? cookie：放在http請(qǐng)求頭中，伴隨數(shù)據(jù)傳輸而傳輸，數(shù)據(jù)傳輸大小有限制，有過期時(shí)間

? localstorage：存儲(chǔ)在本地，不會(huì)伴隨數(shù)據(jù)傳輸，生命周期為永久

? sessionstorage：瀏覽器中，瀏覽器關(guān)閉則消失，即使在同源瀏覽器中也不能共享

? userdata：ie中用于瀏覽器存儲(chǔ)技術(shù)

? globalstorage：ff中用于瀏覽器存儲(chǔ)

12.盡可能多的寫出瀏覽器兼容性問題

詳細(xì)

13.css定位方式

position 屬性值的含義：

static

元素框正常生成。塊級(jí)元素生成一個(gè)矩形框，作為文檔流的一部分，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框，置于其父元素中。

relative

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

absolute

元素框從文檔流完全刪除，并相對(duì)于其包含塊定位。包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像元素原來不存在一樣。元素定位后生成一個(gè)塊級(jí)框，而不論原來它在正常流中生成何種類型的框。

fixed

元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute，不過其包含塊是視窗本身。

14.?http協(xié)議和tcp協(xié)議

? ? ? TCP協(xié)議對(duì)應(yīng)于傳輸層，而HTTP協(xié)議對(duì)應(yīng)于應(yīng)用層，從本質(zhì)上來說，二者沒有可比性。Http協(xié)議是建立在TCP協(xié)議基礎(chǔ)之上的，當(dāng)瀏覽器需要從服務(wù)器獲取網(wǎng)頁數(shù)據(jù)的時(shí)候，會(huì)發(fā)出一次Http請(qǐng)求。Http會(huì)通過TCP建立起一個(gè)到服務(wù)器的連接通道。簡單地說，當(dāng)一個(gè)網(wǎng)頁打開完成后，客戶端和服務(wù)器之間用于傳輸HTTP數(shù)據(jù)的TCP連接不會(huì)關(guān)閉，如果客戶端再次訪問這個(gè)服務(wù)器上的網(wǎng)頁，會(huì)繼續(xù)使用這一條已經(jīng)建立的連接Keep-Alive不會(huì)永久保持連接，它有一個(gè)保持時(shí)間，可以在不同的服務(wù)器軟件（如Apache）中設(shè)定這個(gè)時(shí)間。Http是無狀態(tài)的短連接，而TCP是有狀態(tài)的長連接。

15.刷新頁面，js請(qǐng)求一般會(huì)有哪些地方有緩存處理

DNS緩存：短時(shí)間內(nèi)多次訪問某個(gè)網(wǎng)站，在限定時(shí)間內(nèi)，不用多次訪問DNS服務(wù)器。

CDN緩存：內(nèi)容分發(fā)網(wǎng)絡(luò)?

瀏覽器緩存：瀏覽器在用戶磁盤上，對(duì)最新請(qǐng)求過的文檔進(jìn)行了存儲(chǔ)。

服務(wù)器緩存：將需要頻繁訪問的Web頁面和對(duì)象保存在離用戶更近的系統(tǒng)中，當(dāng)再次訪問這些對(duì)象的時(shí)候加快了速度。

16.如何對(duì)網(wǎng)站的文件和資源進(jìn)行優(yōu)化

1.文件合并（目的是減少http請(qǐng)求）

2.使用CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）加速，降低通信距離

3.緩存的使用，添加Expire/Cache-Control頭。

4.啟用Gzip壓縮文件。

5.將css放在頁面最上面。

6.將script放在頁面最下面。

7.避免在css中使用表達(dá)式。

8.將css, js都放在外部文件中。

9.減少DNS查詢。

10.文件壓縮：最小化css, js，減小文件體積。

11.避免重定向。

12.移除重復(fù)腳本。

13.配置實(shí)體標(biāo)簽ETag。

14.使用AJAX緩存，讓網(wǎng)站內(nèi)容分批加載，局部更新。