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提供的
? ? ? ? ? ? 頁面被加載時睁蕾，link會被同時加載，而@import引用的css會等到頁面加載結(jié)束后加載
? ? ? ? ? ? link是html標(biāo)簽债朵，因此沒有兼容性子眶，而@import是只有IE5以上才能識別
? ? ? ? ? ? link方式樣式權(quán)重高于@import的
4.transition 和animation的區(qū)別
? ? ? ? ? ? transition：需要觸發(fā)一個事件才能改變屬性? 2幀 from……to
? ? ? ? ? ? animation：不需要觸發(fā)任何事件的情況下才會隨時間改變屬性值 一幀一幀
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:水平對齊方式
? ? ? ? ? ? ? align-items：垂直對齊方式
? ? ? ? ? ? ? ? 元素屬性：
? ? ? ? ? ? ? ? order臭杰、flex-grow、flex-shrink谚中、flex-basis渴杆、flex 默認(rèn)0 1 auto、align-self
6.圣杯布局&雙飛翼布局&flex布局&絕對定位布局
? ??????????四種布局方式
7.BFC
BFC(Block formatting context)直譯為"塊級格式化上下文"宪塔。它是一個獨立的渲染區(qū)域磁奖，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局某筐，并且與這個區(qū)域外部毫不相干比搭。
BFC布局規(guī)則：
內(nèi)部的Box會在垂直方向，一個接一個地放置南誊。
Box垂直方向的距離由margin決定身诺。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊
每個元素的margin box的左邊蜜托， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)霉赡。即使存在浮動也是如此橄务。
BFC的區(qū)域不會與float box重疊。
BFC就是頁面上的一個隔離的獨立容器穴亏，容器里面的子元素不會影響到外面的元素蜂挪。反之也如此。
計算BFC的高度時嗓化，浮動元素也參與計算
哪些元素會生成BFC?
根元素
float屬性不為none
position為absolute或fixed
display為inline-block, table-cell, table-caption, flex, inline-flex
overflow不為visible
8.垂直居中的方法
<div class="container"> <div class="innner"></div></div>
（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動畫和css3動畫的差異性
渲染線程分別為main thread 和 compositor thread棠涮。如果css動畫只改變transform和opacity，這時整個CSS動畫得以在compositor thread完成（而js動畫會在main thread執(zhí)行蟆湖，然后出發(fā)compositor thread進(jìn)行下一步操作）， 如果改變transform和opacity是不會layout或者paint的玻粪。
JS動畫
缺點：JavaScript在瀏覽器的主線程中運行隅津，而其中還有很多其他需要運行的JavaScript、樣式計算劲室、布局伦仍、繪制等對其干擾。這也就導(dǎo)致了線程可能出現(xiàn)阻塞很洋，從而造成丟幀的情況充蓝。
優(yōu)點：JavaScript的動畫與CSS預(yù)先定義好的動畫不同，可以在其動畫過程中對其進(jìn)行控制：開始喉磁、暫停谓苟、回放、中止协怒、取消都是可以做到的涝焙。而且一些動畫效果，比如視差滾動效果孕暇，只有JavaScript能夠完成仑撞。
CSS動畫
缺點：缺乏強(qiáng)大的控制能力。而且很難以有意義的方式結(jié)合到一起妖滔，使得動畫變得復(fù)雜且易于出問題隧哮。
優(yōu)點：瀏覽器可以對動畫進(jìn)行優(yōu)化。它必要時可以創(chuàng)建圖層座舍，然后在主線程之外運行沮翔。
10.塊級元素和行內(nèi)元素
塊級元素：獨占一行，并且自動填滿父元素曲秉，可以設(shè)置margin和padding以及高度和寬度
<div>? ? <h1>~<h6>? ?<p>段落? ? <hr>
<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)元素：不會獨占一行鉴竭，width和height會失效歧譬，并且在垂直方向的padding和margin會失效
<span>行內(nèi)容器<a>定義錨<b>定義粗體<i>定義斜體<abbr>定義縮寫<acronym>定義取得首字母縮寫
<cite>定義引用<big>定義大號文本<small>定義小號文本<br>定義折行<dfn>定義項目<em>著重閱讀
<strong>定義加強(qiáng)<img>定義圖片<map>定義圖像映射<script>定義腳本<sub>定義下標(biāo)文本<sup>定義上標(biāo)文本
<button>定義按鈕<input> 定義輸入框<label>定義界面中項目的標(biāo)題
11.單行、多行元素的文本省略號
單行：
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 該元素隱藏起來了搏存，但不會改變頁面布局瑰步，并且，如果該元素已經(jīng)綁定一些事件璧眠，如果click事件缩焦，那么點擊該區(qū)域，也能觸發(fā)點擊事件
visibility:hidden,該元素隱藏起來责静，并不會改變頁面布局袁滥，但是不會觸發(fā)該元素的綁定事件
display:none 把元素隱藏起來，并且會改變頁面布局灾螃，可以理解為將該元素刪除掉一樣
13.外邊距重疊問題
邊界重疊是指兩個或多個盒子(可能相鄰也可能嵌套)的相鄰邊界(其間沒有任何非空內(nèi)容题翻、補白、邊框)重合在一起而形成一個單一邊界腰鬼。
防止外邊距重疊解決方案：
外層元素padding代替
內(nèi)層元素透明邊框 border:1px solid transparent;
內(nèi)層元素絕對定位 postion:absolute:
外層元素 overflow:hidden;
內(nèi)層元素 加float:left;或display:inline-block;
內(nèi)層元素padding:1px;
14. 什么是CSS hack
? ? ? ?由于不同廠商的流覽器或某瀏覽器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等）嵌赠，對CSS的支持、解析不一樣熄赡，導(dǎo)致在不同瀏覽器的環(huán)境中呈現(xiàn)出不一致的頁面展現(xiàn)效果姜挺。這時，我們?yōu)榱双@得統(tǒng)一的頁面效果彼硫，就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式炊豪，我們把這個針對不同的瀏覽器/不同版本寫相應(yīng)的CSS code的過程，叫做CSS hack!
15.什么叫優(yōu)雅降級與漸進(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)雅降級寫法*/
transition: all .5s;
-o-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;}
漸進(jìn)增強(qiáng)（progressive enhancement）：針對低版本瀏覽器進(jìn)行構(gòu)建頁面拧篮，保證最基本的功能词渤，然后再針對高級瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗串绩。（從被所有瀏覽器支持的基本功能開始掖肋，逐步地添加那些只有新式瀏覽器才支持的功能，向頁面添加無害于基礎(chǔ)瀏覽器的額外樣式和功能赏参。當(dāng)瀏覽器支持時志笼，它們會自動地呈現(xiàn)出來并發(fā)揮作用。）
優(yōu)雅降級（graceful degradation）：一開始就構(gòu)建完整的功能把篓，然后再針對低版本瀏覽器進(jìn)行兼容纫溃。（Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器韧掩，則代碼會檢查以確認(rèn)它們是否能正常工作紊浩。由于IE獨特的盒模型布局問題，針對不同版本的IE的hack實踐過優(yōu)雅降級了，為那些無法支持功能的瀏覽器增加候選方案坊谁，使之在舊式瀏覽器上以某種形式降級體驗卻不至于完全失效费彼。）
區(qū)別：優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給口芍，而漸進(jìn)增強(qiáng)則是從一個非彻坎基礎(chǔ)的、能夠起作用的版本開始鬓椭，并不斷擴(kuò)充颠猴，以適應(yīng)未來環(huán)境的需要。
16. px小染、em翘瓮、rem和%的區(qū)別
px是固定長度單位，不隨其它元素的變化而變化
em和%是相對于父級元素的單位裤翩，會隨父級元素的屬性（font-size或其它屬性）變化而變化
rem是相對于根目錄（HTML元素）的资盅，所有它會隨HTML元素的屬性（font-size）變化而變化
px和%用的比較廣泛一些，可以充當(dāng)更多屬性的單位踊赠，而em和rem是字體大小的單位呵扛，用于充當(dāng)font-size屬性的單位
一般來說：1em = 1rem = 100% = 16 px
17.css預(yù)處理器比較less和sass
18.可以通過哪些方法優(yōu)化css3 animation渲染
1、盡可能多的利用硬件能力臼疫，如使用3D變形來開啟GPU加速：
2择份、盡可能少的使用box-shadows與gradients
19. 如何清除浮動扣孟？
（1）使用偽元素
.clearfix::after {
? content:'';
? display: block;
? clear: both;
}
（2）添加一個空div烫堤，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度
????????.clearfloat{clear:both}
（3）父級div手動定義height凤价，就解決了父級div無法自動獲取到高度的問題
（4）必須定義width或zoom:1鸽斟，同時不能定義height，使用overflow:hidden時利诺，瀏覽器會自動檢查浮動區(qū)域的高度
（5）必須定義width或zoom:1富蓄，同時不能定義height，使用overflow:auto時慢逾，瀏覽器會自動檢查浮動區(qū)域的高度
（6）父級div也一起浮動
（7）將div屬性變成表格 display：table
（8）父級div定義zoom:1來解決IE浮動問題立倍，結(jié)尾處加br標(biāo)簽clear:both
20.觸發(fā)重布局的屬性?、觸發(fā)重繪的屬性
觸發(fā)重排的屬性：
盒子模型相關(guān)屬性會觸發(fā)重布局：
* width* height* padding* margin* display* border-width* border* min-height
定位屬性及浮動也會觸發(fā)重布局：
* top* bottom* left* right* position* float* clear
改變節(jié)點內(nèi)部文字結(jié)構(gòu)也會觸發(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è)計一個網(wǎng)站的時候口注，讓它滿足能同時適應(yīng)不同的端口，而不用對不同端口設(shè)計不同的網(wǎng)頁君珠。
實現(xiàn)方式：采用百分比自適應(yīng)布局
1.原生代碼實現(xiàn)? ??? 用原生代碼實現(xiàn)的根本在于媒體查詢@media的設(shè)置寝志。
??? @media screen 可以查詢當(dāng)前瀏覽器的尺寸，因此可采用該方法對同一個頁面設(shè)置不同的CSS樣式，來滿足不同分辨率要求材部。
??? 舉例如下：
???? @media screen and (min-width:1000px){...}????????????? 對應(yīng)PC端頁面
???? @media screen and (max-width:1000px) and (min-width:768px) {...}??????? 對應(yīng)平板端頁面
???? @media screen and (max-width:768px){...}?????????? 對應(yīng)手機(jī)端頁面
2.采用bootstrap框架布局
?bootstrap框架布局完成的頁面毫缆，是自動對應(yīng)的自適應(yīng)效果
? <div class="col-md-6 col-sm-6 col-xs-12">
3.react vue等框架柵格均能實現(xiàn)自適應(yīng)效果，實現(xiàn)響應(yīng)式布局乐导。
HTML
1.HTML5 為什么只寫<!DOCTYPE HTML>
HTML 4.01 中的 doctype 需要對 DTD 進(jìn)行引用苦丁，因為 HTML 4.01 基于 SGML。
而 HTML 5 不基于 SGML兽叮，因此不需要對 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 新特性
瀏覽器规丽、網(wǎng)絡(luò)Http
1. 簡述src和href的區(qū)別
src用于替換當(dāng)前元素蒲牧，是source的縮寫，指向外部資源的位置赌莺，指向的內(nèi)容將會嵌入到文檔中當(dāng)前標(biāo)簽所在位置冰抢；在請求src資源時會將其指向的資源下載并應(yīng)用到文檔內(nèi)，例如js腳本艘狭，img圖片和frame等元素挎扰。
href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系，是Hypertext?Reference的縮寫巢音，指向網(wǎng)絡(luò)資源所在位置遵倦，建立和當(dāng)前元素（錨點）或當(dāng)前文檔（鏈接）之間的鏈接。
2. Http的狀態(tài)碼有哪些
類別? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 原因短語
1XX Informational（信息性狀態(tài)碼） 接受的請求正在處理
2XX Success（成功狀態(tài)碼） 請求正常處理完畢
3XX Redirection（重定向狀態(tài)碼） 需要進(jìn)行附加操作以完成請求
4XX Client Error（客戶端錯誤狀態(tài)碼） 服務(wù)器無法處理請求
5XX Server Error（服務(wù)器錯誤狀態(tài)碼） 服務(wù)器處理請求出錯
1官撼、200 OK：請求已正常處理梧躺。
2、204(無內(nèi)容)服務(wù)器成功處理了請求傲绣，但沒有返回任何內(nèi)容掠哥。
3、206(部分內(nèi)容)服務(wù)器成功處理了部分?GET?請求秃诵。
4续搀、301(永久移動)請求的網(wǎng)頁已永久移動到新位置。服務(wù)器返回此響應(yīng)(對?GET?或?HEAD?請求的響應(yīng))時顷链，會自動將請求者轉(zhuǎn)到新位置目代。您應(yīng)使用此代碼告訴某個網(wǎng)頁或網(wǎng)站已永久移動到新位置屈梁。
5、302(臨時移動)服務(wù)器目前從不同位置的網(wǎng)頁響應(yīng)請求榛了，但請求者應(yīng)繼續(xù)使用原有位置來響應(yīng)以后的請求在讶。此代碼與響應(yīng)?GET?和?HEAD?請求的?301?代碼類似，會自動將請求者轉(zhuǎn)到不同的位置霜大，但您不應(yīng)使用此代碼來告訴某個網(wǎng)頁或網(wǎng)站已經(jīng)移動构哺，因為?Googlebot?會繼續(xù)抓取原有位置并編制索引。
6战坤、303 See Other：資源的URI已更新曙强，你是否能臨時按新的URI訪問。該狀態(tài)碼表示由于請求對應(yīng)的資源存在著另一個URL途茫，應(yīng)使用GET方法定向獲取請求的資源碟嘴。303狀態(tài)碼和302狀態(tài)碼有著相同的功能，但303狀態(tài)碼明確表示客戶端應(yīng)當(dāng)采用GET方法獲取資源囊卜，這點與302狀態(tài)碼有區(qū)別娜扇。
當(dāng)301,302,303響應(yīng)狀態(tài)碼返回時，幾乎所有的瀏覽器都會把POST改成GET栅组，并刪除請求報文內(nèi)的主體雀瓢，之后請求會自動再次發(fā)送。
7.304(未修改)自從上次請求后玉掸，請求的網(wǎng)頁未修改過刃麸。服務(wù)器返回此響應(yīng)時，不會返回網(wǎng)頁內(nèi)容司浪。
如果網(wǎng)頁自請求者上次請求后再也沒有更改過泊业，您應(yīng)將服務(wù)器配置為返回此響應(yīng)(稱為?If-Modified-Since HTTP?標(biāo)頭)。服務(wù)器可以告訴?Googlebot?自從上次抓取后網(wǎng)頁沒有變更断傲，進(jìn)而節(jié)省帶寬和開銷脱吱。
8智政、307 Temporary Redirect：臨時重定向认罩。與302有相同的含義。
9续捂、400 Bad Request：服務(wù)器端無法理解客戶端發(fā)送的請求垦垂，請求報文中可能存在語法錯誤。
10牙瓢、401(未授權(quán))請求要求身份驗證劫拗。對于登錄后請求的網(wǎng)頁，服務(wù)器可能返回此響應(yīng)矾克。
11页慷、403(禁止)服務(wù)器拒絕請求。不允許訪問那個資源。該狀態(tài)碼表明對請求資源的訪問被服務(wù)器拒絕了酒繁。（權(quán)限滓彰，未授權(quán)IP等）
12、404(未找到)服務(wù)器找不到請求的網(wǎng)頁州袒。例如揭绑，對于服務(wù)器上不存在的網(wǎng)頁經(jīng)常會返回此代碼。
13郎哭、500(服務(wù)器內(nèi)部錯誤)服務(wù)器遇到錯誤他匪，無法完成請求。
14夸研、503(服務(wù)不可用)服務(wù)器目前無法使用(由于超載或停機(jī)維護(hù))邦蜜。通常，這只是暫時狀態(tài)亥至。
3.一次完整的HTTP事務(wù)是怎么一個過程
域名解析 --> 發(fā)起TCP的3次握手 --> 建立TCP連接后發(fā)起http請求 --> 服務(wù)器響應(yīng)http請求畦徘，瀏覽器得到html代碼 --> 瀏覽器解析html代碼，并請求html代碼中的資源（如js抬闯、css井辆、圖片等） --> 瀏覽器對頁面進(jìn)行渲染呈現(xiàn)給用戶
從用戶輸入瀏覽器輸入url到頁面最后呈現(xiàn) 有哪些過程？
用戶輸入URL地址
瀏覽器解析URL解析出主機(jī)名
瀏覽器將主機(jī)名轉(zhuǎn)換成服務(wù)器ip地址（瀏覽器先查找本地DNS緩存列表 沒有的話 再向瀏覽器默認(rèn)的DNS服務(wù)器發(fā)送查詢請求 同時緩存）
瀏覽器將端口號從URL中解析出來
5.瀏覽器建立一條與目標(biāo)Web服務(wù)器的TCP連接（三次握手）
6.瀏覽器向服務(wù)器發(fā)送一條HTTP請求報文
7.服務(wù)器向瀏覽器返回一條HTTP響應(yīng)報文
8.關(guān)閉連接 瀏覽器解析文檔
如果文檔中有資源 重復(fù)5 6 7 8 動作 直至資源全部加載完畢
4. HTTPS是如何實現(xiàn)加密
https的SSL加密是在傳輸層實現(xiàn)的溶握。
客戶使用https url訪問服務(wù)器杯缺，則要求web服務(wù)器建立ssl連接
web服務(wù)器接受客戶端的請求后，會將網(wǎng)站的證書（證書包含了公鑰）睡榆，返回給客戶端
客戶端和web服務(wù)器端開始協(xié)商SSL連接的安全等級萍肆，也就是加密等級，建立會話密鑰胀屿，然后通過網(wǎng)站的公鑰來加密會話密鑰塘揣，并傳送給網(wǎng)站
web服務(wù)器通過自己的私鑰解密出會話密鑰
web服務(wù)器通過會話密鑰加密與客戶端之間的通信
5.tcp三次握手，一句話概括
客戶端和服務(wù)端都需要直到各自可收發(fā)宿崭，因此需要三次握手
6.瀏覽器是如何渲染頁面的
大概可以劃分成以下幾個步驟：
（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é)點信息計算（Layout）
（5）repaint(重繪)：根據(jù)計算好的信息繪制整個頁面（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代替疑务。 比如說要實現(xiàn)修飾效果沾凄，如半透明、邊框知允、圓角搭独、陰影、漸變等，在當(dāng)前主流瀏覽器中都可以用CSS達(dá)成。
2搞疗、 使用矢量圖SVG替代位圖。對于絕大多數(shù)圖案配椭、圖標(biāo)等，矢量圖更小雹姊，且可縮放而無需生成多套圖」筛祝現(xiàn)在主流瀏覽器都支持SVG了，所以可放心使用吱雏！
3.敦姻、使用恰當(dāng)?shù)膱D片格式。我們常見的圖片格式有JPEG歧杏、GIF镰惦、PNG。
基本上犬绒，內(nèi)容圖片多為照片之類的旺入，適用于JPEG。
而修飾圖片通常更適合用無損壓縮的PNG凯力。
GIF基本上除了GIF動畫外不要使用茵瘾。且動畫的話，也更建議用video元素和視頻格式咐鹤，或用SVG動畫取代拗秘。
4、按照HTTP協(xié)議設(shè)置合理的緩存祈惶。
5雕旨、使用字體圖標(biāo)webfont、CSS Sprites等行瑞。
6奸腺、用CSS或JavaScript實現(xiàn)預(yù)加載餐禁。
7血久、WebP圖片格式能給前端帶來的優(yōu)化。
? WebP支持無損帮非、有損壓縮氧吐，動態(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位圖片格式谜慌。
? ? ? 具有支持動畫然想，索引透明，壓縮等特性欣范。適用于做色彩簡單(色調(diào)少)的圖片变泄，如logo,各種小圖標(biāo)icons等。
2恼琼、JPEG格式是一種大小與質(zhì)量相平衡的壓縮圖片格式妨蛹。適用于允許輕微失真的色彩豐富的照片，
? ? ? 不適? 合做色彩簡單(色調(diào)少)的圖片晴竞，如logo,各種小圖標(biāo)icons等滑燃。
3、png:PNG可以細(xì)分為三種格式:PNG8颓鲜，PNG24表窘，PNG32。后面的數(shù)字代表這種PNG格式最多可以索引和存儲的顏色值甜滨。
關(guān)于透明：PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基礎(chǔ)上增加了8位（256階）的alpha通道透明;
優(yōu)缺點：
1乐严、能在保證最不失真的情況下盡可能壓縮圖像文件的大小。
2衣摩、對于需要高保真的較復(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)開始測試并使用WebP格式简僧。
在質(zhì)量相同的情況下，WebP格式圖像的體積要比JPEG格式圖像小40%雕欺。
9.列舉幾個前端性能方面的優(yōu)化
? ? ? ? 全面介紹：https://juejin.im/post/59e1bbc9f265da430f311fb1
10.如何實現(xiàn)同一個瀏覽器多個標(biāo)簽頁之間的通信
? ? ? ?詳細(xì)介紹：瀏覽器多個標(biāo)簽頁之間的通信
11.瀏覽器的存儲技術(shù)有哪些
? cookie：放在http請求頭中岛马，伴隨數(shù)據(jù)傳輸而傳輸，數(shù)據(jù)傳輸大小有限制屠列，有過期時間
? localstorage：存儲在本地蛛枚，不會伴隨數(shù)據(jù)傳輸，生命周期為永久
? sessionstorage：瀏覽器中脸哀，瀏覽器關(guān)閉則消失蹦浦，即使在同源瀏覽器中也不能共享
? userdata：ie中用于瀏覽器存儲技術(shù)
? globalstorage：ff中用于瀏覽器存儲
12.盡可能多的寫出瀏覽器兼容性問題
13.css定位方式
position 屬性值的含義：
static
元素框正常生成。塊級元素生成一個矩形框撞蜂，作為文檔流的一部分盲镶，行內(nèi)元素則會創(chuàng)建一個或多個行框，置于其父元素中蝌诡。
relative
元素框偏移某個距離溉贿。元素仍保持其未定位前的形狀，它原本所占的空間仍保留浦旱。
absolute
元素框從文檔流完全刪除宇色，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊颁湖。元素原先在正常文檔流中所占的空間會關(guān)閉宣蠕，就好像元素原來不存在一樣。元素定位后生成一個塊級框甥捺，而不論原來它在正常流中生成何種類型的框抢蚀。
fixed
元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute，不過其包含塊是視窗本身镰禾。
14.?http協(xié)議和tcp協(xié)議
? ? ? TCP協(xié)議對應(yīng)于傳輸層皿曲，而HTTP協(xié)議對應(yīng)于應(yīng)用層，從本質(zhì)上來說吴侦，二者沒有可比性屋休。Http協(xié)議是建立在TCP協(xié)議基礎(chǔ)之上的，當(dāng)瀏覽器需要從服務(wù)器獲取網(wǎng)頁數(shù)據(jù)的時候备韧，會發(fā)出一次Http請求劫樟。Http會通過TCP建立起一個到服務(wù)器的連接通道。簡單地說，當(dāng)一個網(wǎng)頁打開完成后毅哗，客戶端和服務(wù)器之間用于傳輸HTTP數(shù)據(jù)的TCP連接不會關(guān)閉听怕，如果客戶端再次訪問這個服務(wù)器上的網(wǎng)頁捧挺，會繼續(xù)使用這一條已經(jīng)建立的連接Keep-Alive不會永久保持連接虑绵，它有一個保持時間，可以在不同的服務(wù)器軟件（如Apache）中設(shè)定這個時間闽烙。Http是無狀態(tài)的短連接翅睛，而TCP是有狀態(tài)的長連接。
15.刷新頁面黑竞，js請求一般會有哪些地方有緩存處理
DNS緩存：短時間內(nèi)多次訪問某個網(wǎng)站捕发，在限定時間內(nèi)，不用多次訪問DNS服務(wù)器很魂。
CDN緩存：內(nèi)容分發(fā)網(wǎng)絡(luò)?
瀏覽器緩存：瀏覽器在用戶磁盤上扎酷，對最新請求過的文檔進(jìn)行了存儲。
服務(wù)器緩存：將需要頻繁訪問的Web頁面和對象保存在離用戶更近的系統(tǒng)中遏匆，當(dāng)再次訪問這些對象的時候加快了速度法挨。
16.如何對網(wǎng)站的文件和資源進(jìn)行優(yōu)化
1.文件合并（目的是減少http請求）
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.配置實體標(biāo)簽ETag胖替。
14.使用AJAX緩存研儒，讓網(wǎng)站內(nèi)容分批加載，局部更新独令。
17.你對網(wǎng)頁標(biāo)準(zhǔn)和W3C重要性的理解
網(wǎng)頁標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)都是為了能讓web發(fā)展的更“健康”端朵，開發(fā)者遵循統(tǒng)一的標(biāo)準(zhǔn)，降低開發(fā)難度燃箭，開發(fā)成本冲呢，SEO也會更好做，也不會因為濫用代碼導(dǎo)致各種BUG招狸、安全問題敬拓，最終提高網(wǎng)站易用性邻薯。
看到別人總結(jié)4篇面試題也挺好，等著看完他的 再總結(jié)一些缺失的……
