總結(jié)前端問題

前端經(jīng)典面試題：

1、（前端面試題）https://zhuanlan.zhihu.com/p/84212558?from_voters_page=true
2尽楔、（前端網(wǎng)站）https://www.axihe.com/edu/ask.html

HTM（開發(fā)中）

3躯舔、(前端面試題) https://www.cnblogs.com/feng-mu/p/10530136.html

1、什么是盒模型

Margin(外邊距) - 清除邊框外的區(qū)域想括，外邊距是透明的。
Border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框。
Padding(內(nèi)邊距) - 清除內(nèi)容周圍的區(qū)域拆吆，內(nèi)邊距是透明的。
Content(內(nèi)容) - 盒子的內(nèi)容脂矫，顯示文本和圖像枣耀。

2、行內(nèi)庭再、塊元素捞奕、空元素分別舉例

行內(nèi)元素：
a, b, span, img, input, strong, select, label, em, button, textarea
塊級元素：
div, ul, li, dl, dt, dd, p, h1-h6, blockquote
空元素：
br, meta, hr, link, input, img

3、src和href的區(qū)別

概括：src用于替代這個元素（這個屬性是將資源嵌入到當(dāng)前文檔中元素所在的位置）拄轻，而href用于建立這個標(biāo)簽與外部資源之間的關(guān)系（引用外部資源）颅围。

4、html5為什么只需要寫<!

HTML4.01中的doctype需要對DTD進行引用哺眯，因為HTML4.01基于SGML谷浅。而HTML5不基于SGML，因此不需要對DTD進行引用奶卓，但是需要doctype來規(guī)范瀏覽器的行為一疯。其中，SGML是標(biāo)準(zhǔn)通用標(biāo)記語言夺姑，簡單的說墩邀，就是比XML,HTML更老的標(biāo)準(zhǔn)，這兩者都是由SGML發(fā)展而來的盏浙。但是眉睹，HTML5不是的。

HTML5大概可以用以下公式說明：HTML5 ≈ HTML + CSS 3 + JavaScript + API.

<DOCTYPE>聲明位于HTML文檔中的第一行废膘，處于<html>標(biāo)簽之前竹海。

主要作用是：告知瀏覽器的解析器用什么標(biāo)準(zhǔn)解析這個文檔。DOCTYPE不存在或者格式不正確都會導(dǎo)致文檔以怪異模式呈現(xiàn)

5丐黄、link和@import的區(qū)別

<link href="style.css" rel="stylesheet" />
link：瀏覽器知道這是個樣式表文件斋配，html的解析和渲染不會暫停闻牡，css文件的加載是同時進行的铛嘱，這不同于在style標(biāo)簽里面的內(nèi)置樣式。
import：添加的樣式是在頁面載入之后再加載猜旬，這可能會導(dǎo)致頁面因重新渲染而閃爍桂对。
兩者都是外部引用CSS的方式甩卓，但是存在一定的區(qū)別：

區(qū)別1：link是XHTML標(biāo)簽，除了加載CSS外蕉斜，還可以定義RSS等其他事務(wù)逾柿；@import屬于CSS范疇缀棍，只能加載CSS。

區(qū)別2：link引用CSS時鹿寻，在頁面載入時同時加載睦柴；@import需要頁面網(wǎng)頁完全載入以后加載诽凌。

區(qū)別3：link是XHTML標(biāo)簽毡熏，無兼容問題；@import是在CSS2.1提出的侣诵，低版本的瀏覽器不支持痢法。

區(qū)別4：link支持使用Javascript控制DOM去改變樣式；而@import不支持杜顺。

補充：@import最優(yōu)寫法
@import的寫法一般有下列幾種：

@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不識別
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不識別
@import url(style.css) //Windows NS4, Macintosh NS4不識別
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不識別
@import url("style.css") //Windows NS4, Macintosh NS4不識別
由上分析知道财搁，@import url(style.css) 和@import url("style.css")是最優(yōu)的選擇，兼容的瀏覽器最多躬络。從字節(jié)優(yōu)化的角度來看@import url(style.css)最值得推薦尖奔。

外部引用CSS中 link與@import的區(qū)別

這兩天剛寫完XHTML加載CSS的幾種方式，其中外部引用CSS分為兩種方式link和@import穷当。
本質(zhì)上提茁，這兩種方式都是為了加載CSS文件，但還是存在著細微的差別馁菜。
差別1：老祖宗的差別茴扁。link屬于XHTML標(biāo)簽，而@import完全是CSS提供的一種方式汪疮。
link標(biāo)簽除了可以加載CSS外峭火，還可以做很多其它的事情，比如定義RSS智嚷，定義rel連接屬性等卖丸，@import就只能加載CSS了。
差別2：加載順序的差別盏道。當(dāng)一個頁面被加載的時候（就是被瀏覽者瀏覽的時候）稍浆，link引用的CSS會同時被加載，而@import引用的CSS會等到頁面全部被下載完再被加載摇天。所以有時候瀏覽@import加載CSS的頁面時開始會沒有樣式（就是閃爍）粹湃，網(wǎng)速慢的時候還挺明顯（夢之都加載CSS的方式就是使用@import，我一邊下載一邊瀏覽夢之都網(wǎng)頁時泉坐，就會出現(xiàn)上述問題）为鳄。
差別3：兼容性的差別。由于@import是CSS2.1提出的所以老的瀏覽器不支持腕让，@import只有在IE5以上的才能識別孤钦，而link標(biāo)簽無此問題歧斟。
差別4：使用dom控制樣式時的差別。當(dāng)使用javascript控制dom去改變樣式的時候偏形，只能使用link標(biāo)簽静袖，因為@import不是dom可以控制的。

6俊扭、Doctype作用队橙，標(biāo)準(zhǔn)模式與兼容模式有什么區(qū)別

聲明文檔的解析類型(document.compatMode)，避免瀏覽器的怪異模式萨惑。

document.compatMode：
BackCompat：怪異模式捐康，瀏覽器使用自己的怪異模式解析渲染頁面。
CSS1Compat：標(biāo)準(zhǔn)模式庸蔼，瀏覽器使用W3C的標(biāo)準(zhǔn)解析渲染頁面解总。

7、至少用兩種方法寫兩列布局姐仅，左列定寬200px花枫，右側(cè)自適應(yīng)

首先我們假定頁面上已有下列元素：

<body >
    <div id="left" ></div>
    <div id="right"></div>    
</body>

方法一浮動布局 float+margin-left：

div{
    height:200px;
}
#left{
    float: left;
    width: 200px;
    background: blue;
}            
#right{
    margin-left: 200px;
    background: red;
}

方法二flex布局 display+flex：

body{
    display: flex;
    flex-flow: row;
}
#left{                
    width: 200px;
    background: blue;
}            
#right{
    flex: 1;
    background: red;
}

8、寫出HTML5新增的語義化標(biāo)簽

article:

即定義article(文章)

aside:

定義頁面之外的內(nèi)容（常用于側(cè)邊欄掏膏，需要注意的是：移除側(cè)邊欄（aside標(biāo)簽及其內(nèi)容）時不能影響網(wǎng)頁的主體結(jié)構(gòu)和布局）

audio:

定義聲音內(nèi)容(音頻)

各瀏覽器支持的音頻格式
音頻格式 chrome fireFox opear safari ie9
OGG 支持支持支持不支持不支持
MP3 支持不支持支持不支持支持
WAV 不支持支持不支持支持不支持

bdi:

定義文本的文本方向劳翰，使其脫離其周圍文本的方向設(shè)置。

canvas:

定義圖形

command：

定義命令按鈕

datalist：

定義datalist,標(biāo)簽被用來在為 <input> 元素提供"自動完成"的特性壤追。用戶能看到一個下拉列表磕道，里邊的選項是預(yù)先定義好的，將作為用戶的輸入數(shù)據(jù)行冰。請使用 <input> 元素的 list 屬性來綁定 <datalist> 元素

details:

規(guī)定 details 是否可見

embed:

定義外部交互內(nèi)容或插件

figcaption:

定義 figure 元素的標(biāo)題

figure：

定義媒介內(nèi)容的分組溺蕉，以及它們的標(biāo)題（常用于和figure配套實現(xiàn)圖文效果）

footer：

定義頁腳

header：

定義頭部

hgroup：

用來對標(biāo)題元素進行分組。當(dāng)標(biāo)題有多個層級（副標(biāo)題）時悼做，<hgroup> 元素被用來對一系列 <h1>-<h6>元素進行分組

keygen:

規(guī)定用于表單的密鑰對生成器字段疯特。當(dāng)提交表單時，私鑰存儲在本地肛走，公鑰發(fā)送到服務(wù)器

mark：

定義有記號的文本

meter：

定義預(yù)定義范圍內(nèi)的度量

nav:

標(biāo)簽定義導(dǎo)航鏈接的部分漓雅。并不是所有的 HTML 文檔都要使用到 <nav> 元素。<nav> 元素只是作為標(biāo)注一個導(dǎo)航鏈接的區(qū)域朽色。在不同設(shè)備上（手機或者PC）可以制定導(dǎo)航鏈接是否顯示邻吞，以適應(yīng)不同屏幕的需求

output:

標(biāo)簽作為計算結(jié)果輸出顯示(比如執(zhí)行腳本的輸出)

progress:

標(biāo)簽定義運行中的任務(wù)進度（進程）

rp：

定義若瀏覽器不支持 ruby 元素顯示的內(nèi)容

rt：

定義 ruby 注釋的解釋

ruby：

定義 ruby 注釋

section：

定義文檔的某個區(qū)域。比如章節(jié)葫男、頭部抱冷、底部或者文檔的其他區(qū)域

source:

定義媒介源

summary:

定義 details 元素的標(biāo)題

time:

定義日期/時間

track:

定義用在媒體播放器中的文本軌道

video:

定義視頻，支持三種格式Ogg梢褐、MPEG4旺遮、WebM

9赵讯、前端頁面由那三層構(gòu)成，分別是什么耿眉，作用是什么

Html (結(jié)構(gòu)) : 超文本標(biāo)記語言, 由 HTML 或 xhtml之類的標(biāo)記語言負(fù)責(zé)創(chuàng)建边翼。標(biāo)簽，也就是那些出現(xiàn)在尖括號里的單詞鸣剪，對網(wǎng)頁內(nèi)容的語義含義做出了描述组底，但這些標(biāo)簽不包含任何關(guān)于如何顯示有關(guān)內(nèi)容的信息。例如西傀，P標(biāo)簽表達了這樣一種語義：“這是一個文本段斤寇⊥把ⅲ”

Css (表現(xiàn)) : 層疊樣式表 , 由css負(fù)責(zé)創(chuàng)建拥褂。css對“如何顯示有關(guān)內(nèi)容”的問題做出了回答。

Js (行為) : 客戶端腳本語言 , 內(nèi)容應(yīng)該如何對事件做出反應(yīng)

10牙寞、請描述一下cookies饺鹃，sessionStorage和localStorage的區(qū)別

1.存儲大小
cookie數(shù)據(jù)大小不能超過4k。
sessionStorage和localStorage 雖然也有存儲大小的限制间雀，但比cookie大得多悔详，可以達到5M或更大。
2.有效時間
localStorage 存儲持久數(shù)據(jù)惹挟，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù)茄螃；
sessionStorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動刪除。
cookie 設(shè)置的cookie過期時間之前一直有效连锯，即使窗口或瀏覽器關(guān)閉

數(shù)據(jù)與服務(wù)器之間的交互方式
cookie的數(shù)據(jù)會自動的傳遞到服務(wù)器归苍，服務(wù)器端也可以寫cookie到客戶端
sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存运怖。

11拼弃、Sass 、 LESS 是什么摇展？大家為什么要使用他們

它們是什么吻氧？
它們是 CSS 預(yù)處理器。它是 CSS 上的一種抽象層咏连。它們是一種特殊的語法/語言編譯成 CSS盯孙。
例如 Less 是一種動態(tài)樣式語言. 將 CSS 賦予了動態(tài)語言的特性，如變量祟滴，繼承振惰，運算，函數(shù). Less 既可以在客戶端上運行 (支持 IE 6+, Webkit, Firefox)踱启，也可以在服務(wù)端運行 (借助 Node.js)报账。

有什么區(qū)別研底？
1、關(guān)于變量在Less和Sass中的唯一區(qū)別就是Less用@透罢，Sass用$
2榜晦、Less環(huán)境較Sass簡單：Sass的安裝需要安裝Ruby環(huán)境，Less基于JavaScript羽圃，是需要引入Less.js來處理代碼輸出css到瀏覽器乾胶，也可以在開發(fā)環(huán)節(jié)使用Less，然后編譯成css文件朽寞，直接放在項目中识窿。
3、從功能出發(fā)脑融，Sass較Less略強大一些
① sass有變量和作用域喻频。

$variable，like php肘迎；
｛$variable｝like ruby甥温；

變量有全局和局部之分，并且有優(yōu)先級妓布。
② sass有函數(shù)的概念姻蚓；
@function和@return以及函數(shù)參數(shù)（還有不定參）可以讓你像js開發(fā)那樣封裝你想要的邏輯。
-@mixin類似function但缺少像function的編程邏輯匣沼，更多的是提高css代碼段的復(fù)用性和模塊化狰挡，這個用的人也是最多的。
-ruby提供了非常豐富的內(nèi)置原生api释涛。
③ 進程控制：

條件：@if @else加叁；
循環(huán)遍歷：@for @each @while
繼承：@extend
引用：@import
④數(shù)據(jù)結(jié)構(gòu)：
-l i s t 類型 = 數(shù) 組； ? list類型=數(shù)組枢贿； -list類型=數(shù)組殉农；?map類型=object；
其余的也有string局荚、number超凳、function等類型
4、Less與Sass處理機制不一樣
前者是通過客戶端處理的耀态，后者是通過服務(wù)端處理轮傍，相比較之下前者解析會比后者慢一點
為什么要使用它們？
結(jié)構(gòu)清晰首装，便于擴展创夜。
可以方便地屏蔽瀏覽器私有語法差異。這個不用多說仙逻，封裝對瀏覽器語法差異的重復(fù)處理驰吓，減少無意義的機械勞動涧尿。
可以輕松實現(xiàn)多重繼承。
完全兼容 CSS 代碼檬贰，可以方便地應(yīng)用到老項目中姑廉。Less 只是在 CSS 語法上做了擴展，所以老的 CSS 代碼也可以與 Less 代碼一同編譯翁涤。

12桥言、css 優(yōu)先級算法如何計算？

CSS 選擇符：
1.id選擇器(# myid)
2.類選擇器(.myclassname)
3.標(biāo)簽選擇器(div, h1, p)
4.相鄰選擇器(h1 + p)
5.子選擇器(ul > li)
6.后代選擇器(li a)
7.通配符選擇器( * )
8.屬性選擇器(a[rel = "external"])
9.偽類選擇器(a: hover, li:nth-child)

可繼承的樣式：
1.font-size
2.font-family
3.color
4.text-indent

不可繼承的樣式：
1.border
2.padding
3.margin
4.width
5.height

優(yōu)先級算法：
1.優(yōu)先級就近原則葵礼，同權(quán)重情況下樣式定義最近者為準(zhǔn);
2.載入樣式以最后載入的定位為準(zhǔn);
3.!important >  id > class > tag  
4.important 比 內(nèi)聯(lián)優(yōu)先級高号阿，但內(nèi)聯(lián)比 id 要高

CSS3新增偽類舉例：
p:first-of-type 選擇屬于其父元素的首個 <p> 元素的每個 <p> 元素。
p:last-of-type  選擇屬于其父元素的最后 <p> 元素的每個 <p> 元素鸳粉。
p:only-of-type  選擇屬于其父元素唯一的 <p> 元素的每個 <p> 元素扔涧。
p:only-child    選擇屬于其父元素的唯一子元素的每個 <p> 元素。
p:nth-child(2)  選擇屬于其父元素的第二個子元素的每個 <p> 元素赁严。
:enabled :disabled 控制表單控件的禁用狀態(tài)扰柠。
:checked        單選框或復(fù)選框被選中。

13疼约、javascript的 typeof 返回哪些數(shù)據(jù)類型

undefined
string
boolean
number
symbol(ES6)
Object
Function

14、例舉 3 種強制類型轉(zhuǎn)換和 2 種隱式類型轉(zhuǎn)換

強制類型轉(zhuǎn)換
Number(參數(shù))把任何類型轉(zhuǎn)換成數(shù)值類型
parseInt（參數(shù)1蝙泼，參數(shù)2）將字符串轉(zhuǎn)換成整數(shù)
parseFloat()將字符串轉(zhuǎn)換成浮點數(shù)字
string(參數(shù))：可以將任何類型轉(zhuǎn)換成字符串
Boolean()可以將任何類型的值轉(zhuǎn)換成布爾值
隱式類型轉(zhuǎn)換
（1）- 四則運算
加法運算符+是雙目運算符程剥，只要其中一個是string類型脚猾，表達式的值便是一個String飞傀。
對于其他的四則運算，只有其中一個是Number類型沪摄，表達式的便是一個Number溪胶。
對于非法字符的情況通常會返回NaN:'1''a' // => NaN,這是因為parseInt(a)值為NaN搂擦，1NaN還是NaN
（2）- 判斷語句

判斷語句中的判斷條件需要是 Boolean類型，所以條件表達式會被隱式轉(zhuǎn)換為Boolean哗脖。其轉(zhuǎn)換規(guī)則則同Boolean的構(gòu)造函數(shù)瀑踢。比如:

var obj = {};if(obj){
      while(obj);
}

（3）.Native代碼調(diào)用
JavaScript宿主環(huán)境都會提供大量的對象，它們往往不少通過JavaScript來實現(xiàn)的才避。JavaScript給這些函數(shù)傳入的參數(shù)也會進行隱式轉(zhuǎn)換橱夭。例如BOM提供的alert方法接受String類型的參數(shù)：alert({a:1}); //=>[object Object]

15、數(shù)組方法 pop() push() unshift() shift()

pop()：刪除數(shù)組的最后一個元素桑逝，把數(shù)組的長度減1棘劣，并且返回它被刪除元素的值，如果數(shù)組變?yōu)榭绽愣簦瑒t該方法不改變數(shù)組茬暇，返回undefine值
push()：向數(shù)組末尾添加一個或者多個元素首昔，并返回新的長度（可以接收任意數(shù)量的參數(shù)，把它們逐個添加到數(shù)組的末尾糙俗，并返回修改后數(shù)組的長度）
shift():用于把數(shù)組的第一個元素從其中刪除沙廉，并返回被刪除的值。如果數(shù)組是空的臼节，shift()方法將不進行任何操作撬陵，返回undefined的值
unshift():方法是向數(shù)組的開頭添加一個或多個元素，并且返回新的長度

16网缝、window.onload 和 document ready 的區(qū)別

關(guān)于window.onload與$(document).ready()的差異性

window.onload是javascript原生的方法巨税，$(document).ready()是jquery提供的。

1. window.onload與$(document).ready()的對比

image

注：

$(window).load(function () {
});
// 等價于
window.onload = function () {
};

2.window.onload

該方法是在網(wǎng)頁中的所有元素粉臊、全部內(nèi)容（包括元素的所有關(guān)聯(lián)文件草添、窗口、框架扼仲、對象和圖像）完全加載到瀏覽器后才執(zhí)行远寸。
執(zhí)行該方法時可以訪問網(wǎng)頁中的任何元素。
onload事件一次只能保存對一個函數(shù)的引用屠凶，它會自動用后面的函數(shù)覆蓋前面的函數(shù)驰后。

3.$(document).ready()

使用該方法可以在DOM載入就緒時（頁面全部內(nèi)容加載前）就對其進行操縱并調(diào)用執(zhí)行它所綁定的函數(shù)。
通過該方法注冊的事件處理程序矗愧，在DOM完全就緒時就可以被調(diào)用灶芝。DOM元素可以被訪問，但是這些元素的關(guān)聯(lián)文件不一定下載完畢唉韭，比如：圖片夜涕。
每次調(diào)用$(document).ready()方法都會在現(xiàn)有的行為上追加新的行為，這些行為函數(shù)會根據(jù)注冊的順序依次執(zhí)行属愤。

17女器、”==”和“===”的不同

雙等：會自動轉(zhuǎn)換數(shù)據(jù)類型。
三等（全等）：不會轉(zhuǎn)換住诸；全等是先判斷左右兩邊的數(shù)據(jù)類型驾胆，如果數(shù)據(jù)類型不一致，則直接返回false只壳，之后才會進行兩邊值的判斷俏拱。

18、iframe的作用

嵌入式框架：可以把網(wǎng)頁的內(nèi)容和框架嵌入到網(wǎng)頁中

<iframe src='1.html'></iframe>

    iframe常用屬性:
    frameborder:是否顯示邊框
    height:作為一個普通元素高度
    width:作為一個普通元素寬度
    name:框架名稱
    scrolling:框架是否滾動
    src:內(nèi)框架的地址

優(yōu)點:重載頁面時不需要整個頁面進行重載吼句，只需要重載一個框架頁锅必，減少數(shù)據(jù)傳輸，增加網(wǎng)頁加載速度

缺點:代碼復(fù)雜，無法被搜索引擎查找搞隐，瀏覽器后退按鈕無效驹愚，增加http請求

19、png劣纲、jpg逢捺、gif 這些圖片格式解釋一下，分別什么時候用癞季。有沒有了解過webp劫瞳？

gif圖形交換格式，索引顏色格式绷柒，顏色少的情況下志于，產(chǎn)生的文件極小，支持背景透明废睦，動畫伺绽，圖形漸進，無損壓縮（適合線條嗜湃，圖標(biāo)等）奈应，缺點只有256種顏色
jpg支持上百萬種顏色，有損壓縮购披，壓縮比可達180：1杖挣，而且質(zhì)量受損不明顯，不支持圖形漸進與背景透明今瀑，不支持動畫
png為替代gif產(chǎn)生的程梦，位圖文件，支持透明橘荠，半透明，不透明郎逃。不支持動畫哥童，無損圖像格式。Png8簡單說是靜態(tài)gif褒翰，也只有256色贮懈，png24不透明，但不止256色优训。
webp谷歌開發(fā)的旨在加快圖片加載速度的圖片格式朵你，圖片壓縮體積是jpeg的2/3，有損壓縮揣非。高版本的W3C瀏覽器才支持抡医，google39+，safari7+

20、style標(biāo)簽寫在body后與body前有什么區(qū)別

寫在body后忌傻，由于js是從上到下一次解析大脉，會導(dǎo)致頁面閃爍

21、在網(wǎng)頁中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體水孩？為什么呢

偶數(shù)字號相對更容易和 web 設(shè)計的其他部分構(gòu)成比例關(guān)系

CSS（開發(fā)中）

22镰矿、未知寬高垂直水平居中
1、通過定位和transform屬性來實現(xiàn)

<div class="parent">
    <div class="children">實現(xiàn)未知寬高元素垂直居中的方法1：通過定位和transform來實現(xiàn)</div>
</div>
<style>
        .parent{
            width:100%;
            height:400px;
            background:#666;
            position:relative;
        }
        .children{
            position:absolute;
            top:50%;
            left:50%;
            background:red;
            transform:translate(-50%,-50%);
        }
    </style>

2俘种、通過flex實現(xiàn)

<div class="parent">
    <div class="children">實現(xiàn)未知寬高元素的水平垂直居中方法2:主要是利用flex布局來實現(xiàn)</div>
</div>
<style>
        .parent{
            width:100%;
            height:400px;
            background:#666;
            display:flex;
            align-items:center;
            justify-content:center;
        }
        .children{
            background:red;
        }
    </style>

3秤标、通過table屬性實現(xiàn)

<div class="parent">
    <div class="children">實現(xiàn)未知寬高元素垂直水平居中,主要原理是將父元素設(shè)置為table，子元素設(shè)置為table-cell宙刘，利用table屬性</div>
</div>
<style>
        .parent{
            display:table;
            width:100%;
            height:400px;
            background:#666;
        }
        .children{
            display:table-cell;
            vertical-align:middle;
            text-align:center;
            background:red;
        }
    </style>

23苍姜、都知道哪些CSS Hack

https://www.cnblogs.com/mumble/p/4576489.html

24、box-sizing常用的屬性及分別有什么用

盒模型：
1荐类、content-box 標(biāo)準(zhǔn)盒模型
2怖现、border-box 怪異盒模型
3、inherit 是否繼承父元素

25玉罐、position有幾種取值屈嗤？每種取值相對于誰來進行定位

position的值， relative和absolute分別是相對于誰進行定位的

absolute :生成絕對定位的元素吊输，相對于最近一級的定位不是 static 的父元素來進行定位饶号。
fixed （老IE不支持）生成絕對定位的元素，通常相對于瀏覽器窗口或 frame 進行定位季蚂。
relative 生成相對定位的元素茫船，相對于其在普通流中的位置進行定位。
static 默認(rèn)值扭屁。沒有定位算谈，元素出現(xiàn)在正常的流中
sticky 生成粘性定位的元素，容器的位置根據(jù)正常文檔流計算得出

26料滥、CSS選擇器有哪些然眼？哪些屬性可以繼承？

css繼承特性主要是指文本方面的繼承葵腹，盒模型相關(guān)的屬性基本沒有繼承特性高每。
不可繼承的：
display、margin践宴、border鲸匿、padding、background阻肩、height带欢、min-height、max-height、width洪囤、min-width徒坡、max-width、overflow瘤缩、position喇完、top、bottom剥啤、left锦溪、right、z-index府怯、float刻诊、clear、 table-layout牺丙、vertical-align则涯、page-break-after、page-bread-before和unicode-bidi冲簿。
所有元素可繼承的：
visibility和cursor
終極塊級元素可繼承的：
text-indent和text-align
內(nèi)聯(lián)元素可繼承的：
letter-spacing粟判、word-spacing、white-space峦剔、line-height档礁、color、font吝沫、font-family呻澜、font-size、font-style惨险、font-variant羹幸、font-weight、text-decoration辫愉、text-transform睹欲、direction
列表元素可繼承的：
list-style、list-style-type一屋、list-style-position、list-style-image

27袋哼、移動端分辨率適配

https://blog.csdn.net/azhenplus/article/details/52798888

28冀墨、PC常見兼容問題

https://blog.csdn.net/weixin_34007886/article/details/88827990

29、display:none和visibility:hidden的區(qū)別

1涛贯、visibility具有繼承性诽嘉，給父元素設(shè)置visibility:hidden;子元素也會繼承這個屬性。但是如果重新給子元素設(shè)置visibility: visible,則子元素又會顯示出來。這個和display: none有著質(zhì)的區(qū)別

2虫腋、visibility: hidden不會影響計數(shù)器的計數(shù)骄酗，如圖所示，visibility: hidden雖然讓一個元素不見了悦冀，但是其計數(shù)器仍在運行趋翻。這和display: none完全不一樣
3、CSS3的transition支持visibility屬性盒蟆，但是并不支持display踏烙，由于transition可以延遲執(zhí)行，因此可以配合visibility使用純css實現(xiàn)hover延時顯示效果历等。提高用戶體驗讨惩。

30、瀏覽器中的回流和重繪是什么寒屯，分別在什么情況下觸發(fā)

重繪：當(dāng)前元素的樣式(背景顏色荐捻、字體顏色等)發(fā)生改變的時候，我們只需要把改變的元素重新的渲染一下即可寡夹，重繪對瀏覽器的性能影響較小处面，所以一般不考慮∫觯　　發(fā)生重繪的情形：改變?nèi)萜鞯耐庥^風(fēng)格等鸳君，比如background：black等。改變外觀患蹂，不改變布局或颊，不影響其他的dom。
回流：是指瀏覽器為了重新渲染部分或者全部的文檔而重新計算文檔中元素的位置和幾何構(gòu)造的過程传于〈烟簦　　因為回流可能導(dǎo)致整個dom樹的重新構(gòu)造，所以是性能的一大殺手　　一個元素的回流導(dǎo)致了其所有子元素以及DOM中緊隨其后的祖先元素的隨后的回流.
https://juejin.cn/post/6844903673500270600

32沼溜、px平挑、em、rem的區(qū)別

https://www.runoob.com/w3cnote/px-em-rem-different.html

33系草、清除浮動的方式有哪些通熄，比較好的是哪種

（1）父級div定義height。
（2）結(jié)尾處加空div標(biāo)簽clear:both找都。
（3）父級div定義偽類:after和zoom唇辨。（比較好）
（4）父級div定義overflow:hidden。
（5）父級div定義overflow:auto能耻。
（6）父級div也浮動赏枚，需要定義寬度亡驰。
（7）父級div定義display:table。
（8）結(jié)尾處加br標(biāo)簽clear:both饿幅。

34凡辱、簡述 readyonly 與 disabled 的區(qū)別

readyonly
1淌山，只針對input(text/password)和textarea有效勋又，
2没炒，不可編輯缔俄，但是是可以復(fù)制个粱。
disabled
1蝎宇，對于所有的表單元素有效畏妖，
2绩聘，完全不可編輯亲澡，并且是不能復(fù)制的钦扭。
表單元素在使用了disabled后，當(dāng)我們將表單以POST或GET的方式提交的話床绪，這個元素的值不會被傳遞出去客情，而readonly會將該值傳遞出去

36、你做的頁面在哪些流覽器測試過癞己？這些瀏覽器的內(nèi)核分別是什么?

https://zhuanlan.zhihu.com/p/30236218

37膀斋、為什么要初始化樣式

1.瀏覽器差異

不同瀏覽器對有些標(biāo)簽的默認(rèn)值是不同的，如果沒對css初始化會出現(xiàn)瀏覽器之間的頁面顯示差異

2.提高編碼質(zhì)量

如果不初始化痹雅，整個頁面做完會很糟糕仰担，重復(fù)的css樣式很多
初始化代碼：https://www.cnblogs.com/miluluyo/p/11152926.html

38、Doctype 的作用绩社？嚴(yán)格模式與混雜模式的區(qū)別摔蓝？

一、HTML中Doctype的作用：
<!DOCTYPE>聲明叫做文件類型定義（DTD）愉耙，聲明的作用為了告訴瀏覽器該文件的類型贮尉。讓瀏覽器解析器知道應(yīng)該用哪個規(guī)范來解析文檔。<!DOCTYPE>聲明必須在 HTML 文檔的第一行朴沿，這并不是一個 HTML 標(biāo)簽猜谚。DTD（文檔類型定義）是一組機器可讀的規(guī)則，他們定義 XML 或 HTML 的特定版本中允許有什么赌渣，不允許有什么魏铅。在解析網(wǎng)頁時，瀏覽器將使用這些規(guī)則檢查頁面的有效性并且采取相應(yīng)的措施坚芜。瀏覽器通過分析頁面的 DOCTYPE 聲明來了解要使用哪個 DTD 沦零，由此知道要使用 HTML 的哪個版本。
二货岭、嚴(yán)格模式和混雜模式的區(qū)別：
首先路操，嚴(yán)格模式（又稱標(biāo)準(zhǔn)模式，Standards模式）和混雜模式（Quirk模式）都是指瀏覽器的呈現(xiàn)模式千贯，要與Doctype的兩種風(fēng)格區(qū)別開來（嚴(yán)格（ strict ）和過渡（ transitional ）屯仗，過渡 DOCTYPE 的目的是幫助開發(fā)人員從老版本遷移到新版本）。
嚴(yán)格模式：又稱標(biāo)準(zhǔn)模式搔谴，是指瀏覽器按照 W3C 標(biāo)準(zhǔn)解析代碼魁袜，呈現(xiàn)頁面
混雜模式：又稱怪異模式或兼容模式，是指瀏覽器用自己的方式解析代碼敦第，即使用一種比較寬松的向后兼容的方式來顯示頁面
而瀏覽器究竟是使用嚴(yán)格模式還是混雜模式呈現(xiàn)頁面與網(wǎng)頁中的 DTD （文件類型定義）直接相關(guān)峰弹。
對于 HTML 4.01 文檔，
包含嚴(yán)格 DTD 的 DOCTYPE 常常導(dǎo)致頁面以標(biāo)準(zhǔn)模式呈現(xiàn)芜果。
包含過度 DTD 和 URI 的 DOCTYPE 也導(dǎo)致頁面以標(biāo)準(zhǔn)模式呈現(xiàn)鞠呈。
但是有過度 DTD 而沒有 URI 會導(dǎo)致頁面以混雜模式呈現(xiàn)。
DOCTYPE 不存在或形式不正確會導(dǎo)致 HTML 和 XHTML 文檔以混雜模式呈現(xiàn)右钾。
對于HTML5文檔蚁吝，
HTML5 沒有 DTD ，因此也就沒有嚴(yán)格模式與混雜模式的區(qū)別舀射，HTML5 有相對寬松的語法窘茁，實現(xiàn)時，已經(jīng)盡可能大的實現(xiàn)了向后兼容脆烟。（ HTML5 沒有嚴(yán)格和混雜之分）

39山林、瀏覽器的內(nèi)核分別是什么?經(jīng)常遇到的瀏覽器的兼容性有哪些？原因邢羔，解決方法是什么驼抹，常用 hack 的技巧？

1张抄、滾動條

document.documentElement.scrollTop||document.body.scrollTop

2砂蔽、獲取樣式兼容

function getStyle(dom, styleName){ return dom.currentStyle? dom.currentStyle[styleName] :getComputedStyle(dom)[styleName];}

3、網(wǎng)頁可視區(qū)兼容

window.innerHeight || document.documentElement.clientHeight window.innerWidth || document.documentElement.clientWidth

4署惯、事件對象兼容

e  = e || window.event;

5左驾、阻止事件冒泡兼容

event.stopPropagation? event.stopPropagation():event.cancelBubble=true;

6、事件目標(biāo)對象兼容

var src = event.target || event.srcElement;

7极谊、阻止默認(rèn)行為兼容

evt.preventDefault?evt.preventDefault():evt.returnValue=false;

42诡右、CSS3 有哪些新特性？

CSS3實現(xiàn)圓角（border-radius）轻猖，陰影（box-shadow）帆吻，
對文字加特效（text-shadow、）咙边，線性漸變（gradient）猜煮，旋轉(zhuǎn)（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉(zhuǎn),縮放,定位,傾斜
增加了更多的CSS選擇器多背景 rgba
在CSS3中唯一引入的偽元素是 ::selection.
媒體查詢次员，多欄布局
border-image

43、html5 有哪些新特性王带、移除了那些元素淑蔚？如何處理 HTML5 新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5愕撰？

新特性：

拖拽釋放(Drag and drop) API
語義化更好的內(nèi)容標(biāo)簽（header,nav,footer,aside,article,section）
音頻刹衫、視頻API(audio,video)
畫布(Canvas) API
地理(Geolocation) API
本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失搞挣；
sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除
表單控件带迟，calendar、date囱桨、time仓犬、email、url蝇摸、search
新的技術(shù)webworker, websocket, Geolocation

移除的元素：

純表現(xiàn)的元素：basefont婶肩，big，center貌夕，font, s律歼，strike，tt啡专，u险毁；
對可用性產(chǎn)生負(fù)面影響的元素：frame，frameset们童，noframes畔况；

支持HTML5新標(biāo)簽：

IE8/IE7/IE6支持通過 document.createElement 方法產(chǎn)生的標(biāo)簽，可以利用這一特性讓這些瀏覽器支持 HTML5 新標(biāo)簽慧库，瀏覽器支持新標(biāo)簽后跷跪，還需要添加標(biāo)簽?zāi)J(rèn)的樣式（當(dāng)然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架）：

1
2
3
4
5

如何區(qū)分：

在文檔類型聲明上
2.在結(jié)構(gòu)語義上

44齐板、CSS3 新增偽類有那些吵瞻？

p:first-of-type 選擇屬于其父元素的首個元素

p:last-of-type 選擇屬于其父元素的最后元素

p:only-of-type 選擇屬于其父元素唯一的元素

p:only-child 選擇屬于其父元素的唯一子元素

p:nth-child(2) 選擇屬于其父元素的第二個子元素

:enabled :disabled 表單控件的禁用狀態(tài)。

:checked 單選框或復(fù)選框被選中甘磨。

45橡羞、rgba()和opacity的透明效果有什么區(qū)別

1.opacity 是屬性，rgba()是函數(shù)济舆，計算之后是個屬性值卿泽；
2.opacity 作用于元素和元素的內(nèi)容，內(nèi)容會繼承元素的透明度滋觉，取值0-1签夭；
3.rgba() 一般作為背景色 background-color 或者顏色 color 的屬性值齐邦，透明度由其中的 alpha 值生效，取值0-1覆致；

擴展：
1.transparent 也是透明侄旬，是個屬性值，顏色值煌妈，跟#000是一類，不過它是關(guān)鍵字來描述宣羊。

46璧诵、知道css有個content屬性嗎？有什么用仇冯？有什么應(yīng)用之宿？

css有一個屬性叫做content。content只能使用在:after和:before之中苛坚。它用于在元素之前或者元素之后加上一些內(nèi)容content屬性早在CSS2.1的時候就被
引入了比被，可以使用:before以及:after偽元素生成內(nèi)容。此特性目前已被大部分的瀏覽器支持段落注釋泼舱。但是目在CSS 3 Generated Content工作草案中等缀，
content屬性添加了更多的特征，例如：插入以及移除文檔內(nèi)容的能力娇昙，以創(chuàng)建腳注尺迂，結(jié)語，及前還沒有瀏覽器支持content的擴展功能冒掌。
2.知識剖析:before和:after的作用就是在指定的元素內(nèi)容（而不是元素本身）之前或者之后插入一個包含content屬性指定內(nèi)容的行內(nèi)元素需要注意的是如
果沒有content屬性噪裕，偽類元素將沒有任何作用。但是可以指定content為空股毫，插入的內(nèi)容默認(rèn)是一個行內(nèi)元素膳音，并且在HTML源代碼中無法看到，這就是
為什么稱之為偽類元素的理由铃诬，所以也就無法通過DOM對其進行操作祭陷。偽類元素也會像其他子元素一樣正常繼承父元素的一些CSS屬性，比如字體等

50氧急、解釋css sprites,如何使用颗胡？

https://m.html.cn/qa/css3/13363.html

51、用純css創(chuàng)建一個三角形的原理是什么吩坝？

1.采用的是均分原理

非常有意思的是盒子都是一個矩形或正方形毒姨，從形狀的中心，向4個角上下左右劃分4個部

這里寫圖片描述

2.代碼的實現(xiàn)

第一步保證元素是塊級元素

第二步設(shè)置元素的邊框

第三步不需要顯示的邊框使用透明色

.square{  
     width:0;  
     height:0;  
     margin:0 auto;  
     border:6px solid transparent;  
     border-top: 6px solid red;  
 }  
第二種寫法：
.square{  
     width:0;  
     height:0;  
     margin:0 auto;  
     border-width:6px;
     border-color:red transparent transparent transparent;
     border-style:solid dashed dashed dashed;//為了兼容IE6钉寝，把沒有的邊框都設(shè)置為虛線
 }

效果如下：

這里寫圖片描述

52弧呐、一個滿屏品字布局如何設(shè)計

53闸迷、CSS屬性overflow屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會如何處理

參數(shù)是scroll時候，必會出現(xiàn)滾動條俘枫。
參數(shù)是auto時候腥沽，子元素內(nèi)容大于父元素時出現(xiàn)滾動條。
參數(shù)是visible時候鸠蚪，溢出的內(nèi)容出現(xiàn)在父元素之外今阳。
參數(shù)是hidden時候，溢出隱藏茅信。
默認(rèn)為visible

54盾舌、請解釋一下CSS3的flexbox（彈性盒布局模型）,以及適用場景

http://www.reibang.com/p/0db2e9eb10f0

55、瀏覽器是怎樣解析CSS選擇器的

CSS選擇器的解析是從右向左解析的蘸鲸。若從左向右的匹配妖谴，發(fā)現(xiàn)不符合規(guī)則，需要進行回溯酌摇，會損失很多性能膝舅。若從右向左匹配，先找到所有的最右節(jié)點窑多，對于每一個節(jié)點仍稀，向上尋找其父節(jié)點直到找到根元素或滿足條件的匹配規(guī)則，則結(jié)束這個分支的遍歷怯伊。兩種匹配規(guī)則的性能差別很大琳轿，是因為從右向左的匹配在第一步就篩選掉了大量的不符合條件的最右節(jié)點（葉子節(jié)點），而從左向右的匹配規(guī)則的性能都浪費在了失敗的查找上面耿芹。
而在 CSS 解析完畢后崭篡，需要將解析的結(jié)果與 DOM Tree 的內(nèi)容一起進行分析建立一棵 Render Tree，最終用來進行繪圖吧秕。在建立 Render Tree 時（WebKit 中的「Attachment」過程）琉闪，瀏覽器就要為每個 DOM Tree 中的元素根據(jù) CSS 的解析結(jié)果（Style Rules）來確定生成怎樣的 Render Tree。

56砸彬、PC常見兼容問題匯總

移動端：

① 安卓瀏覽器看背景圖片颠毙，有些設(shè)備會模糊，原因是手機的分辨率太小

解決方案：用2X圖片來代替img標(biāo)簽砂碉，然后background-size: contain

② 防止手機中頁面放大或縮兄邸：在meta中設(shè)置viewport user-scalable = no

③ 上下拉滾動條卡頓： overflow-scrolling: touch;

④ 禁止復(fù)制選中文本： user-select: none;

⑤ 長時間按住頁面出現(xiàn)閃退：-webkit-touch-callout: none;

⑥ 動畫定義3D硬件加速： transform: translate 3d(0,0,0);

⑦ formate-detection 啟動或禁止自動識別頁面中的電話號碼，content = "yes/no"

⑧ a標(biāo)簽添加tel是撥號功能

⑨ 安卓手機的圓角失效： background-clip: padding-box;

⑩ 手機端300ms延遲： fastclick

① 橫平時字體加粗不一致： text-size-adjust: 100%;

PC端：

① rgba不支持IE8 用opacity屬性代替rgba設(shè)置透明度

② 圖片加a標(biāo)簽在IE9中出現(xiàn)邊框解決方案： img{border: none;}

③ IE6不支持display: inline-block 設(shè)置為： display: inline

④ position : fixed 不支持IE5/IE6

⑤ IE6增蹭，F(xiàn)irfox中滴某，width = width + padding + border

⑥ min-height比兼容IE6/IE7

57、絕對定位和相對定位區(qū)別

https://zhidao.baidu.com/question/101820574.html

58、position跟display霎奢、overflow户誓、float這些特性相互疊加后會怎么樣

display屬性規(guī)定元素應(yīng)該生成的框的類型；position屬性規(guī)定元素的定位類型幕侠；float屬性是一種布局方式帝美，定義元素在哪個方向浮動。
類似于優(yōu)先級機制：position：absolute/fixed優(yōu)先級最高晤硕，有他們在時悼潭，float不起作用，display值需要調(diào)整舞箍。float 或者absolute定位的元素女责，只能是塊元素或表格。

59创译、上下margin重合的問題

60、設(shè)置元素浮動后墙基，該元素的display值是多少

display: block

61软族、::before 和 :after中雙冒號和單冒號有什么區(qū)別？解釋一下這2個偽元素的作用

在 CSS 中偽類一直用 : 表示残制，如 :hover, :active 等
偽元素在CSS1中已存在立砸，當(dāng)時語法是用 : 表示，如 :before 和 :after
后來在CSS3中修訂初茶，偽元素用 :: 表示颗祝，如 ::before 和 ::after，以此區(qū)分偽元素和偽類
由于低版本IE對雙冒號不兼容恼布，開發(fā)者為了兼容性各瀏覽器螺戳，繼續(xù)使使用 :after 這種老語法表示偽元素
綜上所述：::before 是 CSS3 中寫偽元素的新語法； :after 是 CSS1 中存在的折汞、兼容IE的老語法

62倔幼、 li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法爽待？

上圖：

image.png

引起這種空白間隔的原因：

瀏覽器的默認(rèn)行為是把inline元素間的空白字符（空格換行tab）渲染成一個空格，也就是我們上面的代碼<li>換行后會產(chǎn)生換行字符，而它會變成一個空格御雕，當(dāng)然空格就占用一個字符的寬度灌具。

解決方案：

方法一：既然是因為<li>換行導(dǎo)致的，那就可以將<li>代碼全部寫在一排何什，消除空格组哩，但是不美觀如下:

<div class="wrap">
<h3>li標(biāo)簽空白測試</h3>
<ul>
<li class="part1"></li><li class="part2"></li><li class="part3"></li><li class="part4"></li>
</ul>
</div>

方法二：我們?yōu)榱舜a美觀以及方便修改，很多時候我們不可能將<li>全部寫在一排，那怎么辦禁炒？既然是空格占一個字符的寬度而咆，那我們索性就將<ul>內(nèi)的字符尺寸直接設(shè)為0，將下面樣式放入樣式表幕袱，問題解決暴备。

.wrap ul{font-size:0px;}

但隨著而來的就是<ul>中的其他文字就不見了，因為其尺寸被設(shè)為0px了们豌，我們只好將<li>標(biāo)簽重新設(shè)定字符尺寸涯捻。

方法三：本來以為方法二能夠完全解決問題，但經(jīng)測試望迎，將li父級標(biāo)簽字符設(shè)置為0在Safari瀏覽器依然出現(xiàn)間隔空白障癌；既然設(shè)置字符大小為0不行，那咱就將間隔消除了辩尊，將下面代碼替換方法二的代碼涛浙，目前測試完美解決。同樣隨來而來的問題是li內(nèi)的字符間隔也被設(shè)置了摄欲，我們需要將li內(nèi)的字符間隔設(shè)為默認(rèn)轿亮。

.wrap ul{letter-spacing: -5px;}

之后記得設(shè)置li內(nèi)字符間隔

.wrap ul li{letter-spacing: normal;}

63、簡述優(yōu)雅降級和漸進增強

漸進增強 progressive enhancement：針對低版本瀏覽器進行構(gòu)建頁面胸墙，保證最基本的功能我注，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗迟隅。

優(yōu)雅降級 graceful degradation：一開始就構(gòu)建完整的功能但骨，然后再針對低版本瀏覽器進行兼容。

區(qū)別：優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始智袭，并試圖減少用戶體驗的供給奔缠，而漸進增強則是從一個非常基礎(chǔ)的补履，能夠起作用的版本開始添坊，并不斷擴充，以適應(yīng)未來環(huán)境的需要箫锤。降級（功能衰減）意味著往回看贬蛙；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶谚攒。

“優(yōu)雅降級”觀點

“優(yōu)雅降級”觀點認(rèn)為應(yīng)該針對那些最高級阳准、最完善的瀏覽器來設(shè)計網(wǎng)站。而將那些被認(rèn)為“過時”或有功能缺失的瀏覽器下的測試工作安排在開發(fā)周期的最后階段馏臭，并把測試對象限定為主流瀏覽器（如 IE野蝇、Mozilla 等）的前一個版本讼稚。

在這種設(shè)計范例下，舊版的瀏覽器被認(rèn)為僅能提供“簡陋卻無妨 (poor, but passable)” 的瀏覽體驗绕沈。你可以做一些小的調(diào)整來適應(yīng)某個特定的瀏覽器锐想。但由于它們并非我們所關(guān)注的焦點，因此除了修復(fù)較大的錯誤之外乍狐，其它的差異將被直接忽略赠摇。

“漸進增強”觀點

“漸進增強”觀點則認(rèn)為應(yīng)關(guān)注于內(nèi)容本身。

內(nèi)容是我們建立網(wǎng)站的誘因浅蚪。有的網(wǎng)站展示它藕帜，有的則收集它，有的尋求惜傲，有的操作洽故，還有的網(wǎng)站甚至?xí)陨系姆N種，但相同點是它們?nèi)忌婕暗絻?nèi)容盗誊。這使得“漸進增強”成為一種更為合理的設(shè)計范例时甚。這也是它立即被 Yahoo! 所采納并用以構(gòu)建其“分級式瀏覽器支持 (Graded Browser Support)”策略的原因所在。

那么問題來了」猓現(xiàn)在產(chǎn)品經(jīng)理看到IE6,7,8網(wǎng)頁效果相對高版本現(xiàn)代瀏覽器少了很多圓角撞秋，陰影（CSS3），要求兼容（使用圖片背景嚣鄙，放棄CSS3），你會如何說服他串结？

JavaScript

64哑子、簡述同步和異步的區(qū)別

同步：

同步的思想是：所有的操作都做完，才返回給用戶肌割。這樣用戶在線等待的時間太長卧蜓，給用戶一種卡死了的感覺（就是系統(tǒng)遷移中，點擊了遷移把敞，界面就不動了弥奸，但是程序還在執(zhí)行，卡死了的感覺）奋早。這種情況下盛霎，用戶不能關(guān)閉界面，如果關(guān)閉了耽装，即遷移程序就中斷了愤炸。

異步：

將用戶請求放入消息隊列，并反饋給用戶掉奄，系統(tǒng)遷移程序已經(jīng)啟動规个，你可以關(guān)閉瀏覽器了。然后程序再慢慢地去寫入數(shù)據(jù)庫去。這就是異步诞仓。但是用戶沒有卡死的感覺缤苫，會告訴你，你的請求系統(tǒng)已經(jīng)響應(yīng)了墅拭。你可以關(guān)閉界面了活玲。

同步和異步本身是相對的

同步就相當(dāng)于是當(dāng)客戶端發(fā)送請求給服務(wù)端，在等待服務(wù)端響應(yīng)的請求時帜矾，客戶端不做其他的事情翼虫。當(dāng)服務(wù)端做完了才返回到客戶端。這樣的話客戶端需要一直等待屡萤。用戶使用起來會有不友好珍剑。

異步就是，當(dāng)客戶端發(fā)送給服務(wù)端請求時死陆，在等待服務(wù)端響應(yīng)的時候招拙，客戶端可以做其他的事情，這樣節(jié)約了時間措译，提高了效率别凤。

存在就有其道理異步雖然好但是有些問題是要用同步用來解決，比如有些東西我們需要的是拿到返回的數(shù)據(jù)在進行操作的领虹。這些是異步所無法解決的规哪。

65、怎樣添加塌衰、移除诉稍、復(fù)制、創(chuàng)建最疆、查找節(jié)點

(1)創(chuàng)建新節(jié)點
　　createDocumentFragment() //創(chuàng)建一個DOM片段
　　createElement() //創(chuàng)建一個具體的元素
　　createTextNode() //創(chuàng)建一個文本節(jié)點
(2) 添加杯巨、移除、替換努酸、插入
　　appendChild()
　　removeChild()
　　redplaceChild()
　　insertBefore() //在已有的子節(jié)點前插入一個新的子節(jié)點
(3) 查找
　　getElementsByTagName() //通過標(biāo)簽名稱
　　getElementsByName() //通過元素的Name屬性的值(IE容錯能力較強會得到一個數(shù)組服爷，其中包括id等于name值的)
　　getElementById() //通過元素Id，唯一性

66获诈、實現(xiàn)一個函數(shù)clone

什么是值類型仍源、引用類型?
JavaScript中的原始類型：Undefined、Null舔涎、Boolean镜会、Number 和 String。

另外,根據(jù)變量值傳遞的方式,我們又可以將數(shù)據(jù)區(qū)分為“值類型”和“引用類型”.

值類型：將一個值類型變量賦給另一個值類型變量時终抽，將復(fù)制包含的值

JavaScript中原始類型都屬于值類型(string, number, boolean, null, undefined).

引用類型：對象（Object）戳表、數(shù)組（Array）桶至、函數(shù)（Function）

在傳遞和賦值時, 數(shù)據(jù)將自身的引用(又叫“地址”、“指針”)給對方.

注意項：

1：對于基本數(shù)據(jù)類型和引用數(shù)據(jù)類型在內(nèi)存中存放的是值還是指針這一區(qū)別是否清楚

2：判斷一個變量是什么類型的

3：遞歸算法的設(shè)計

Object.prototype.clone = function(){  //給對象原型添加一個clone函數(shù)

        var o = this.constructor === Array ? [] : {}; //判斷傳入的對象是數(shù)組類型的對象匾旭，還是其它類型的對象

        for(var e in this){

                o[e] =  typeof this[e]  === "object" ? this[e].clone() : this[e]; //判斷傳入的值是否為對象镣屹，是的話再調(diào)用自身clone（），否則直接賦值

        }

        return o;

}

67价涝、數(shù)組去重

https://www.jb51.net/article/118657.htm
https://www.cnblogs.com/hanyudanei/p/9496757.html

68女蜈、在JavaScript中什么是偽數(shù)組？如何將偽數(shù)組轉(zhuǎn)化為標(biāo)準(zhǔn)數(shù)組

1：什么是偽數(shù)組
偽數(shù)組是一個含有l(wèi)ength屬性的json對象色瘩，
它是按照索引的方式存儲數(shù)據(jù)伪窖，
它并不具有數(shù)組的一些方法，只能能通過Array.prototype.slice轉(zhuǎn)換為真正的數(shù)組居兆，并且?guī)в衛(wèi)ength屬性的對象覆山。

    var obj = {0:'a',1:'b',length:2}; // 偽數(shù)組
    var arr = Array.prototype.slice.call(obj); // 轉(zhuǎn)化為數(shù)組    
    console.log(arr);  // 返回["a","b"]

2：它和數(shù)組的關(guān)系
都是模擬集合
3：為什么會有偽數(shù)組
在日常開發(fā)中，有許多的對象是由偽數(shù)組組成泥栖，比如函數(shù)內(nèi)arguments對象簇宽，還有像調(diào)用getElementsByTagName,document.childNodes之類的，它們都返回NodeList對象都屬于偽數(shù)組.
第一個借用數(shù)組的slice方法

var a ={
        0:'t',
        1:'a',
        2:'r',
        length:3
    }
    let b=Array.prototype.slice.call(a);
    console.log(b)

第二個ES6新增的一個方法

  var a ={
        0:'t',
        1:'a',
        2:'s',
        length:3
      }

      let b=Array.from(a)
      console.log(b)

第三個原型

 var a ={
        0:'t',
        1:'a',
        2:'rr',
        length:3
      }
a.__proto__ = Array.prototype
console.log(a)
將對象轉(zhuǎn)換為數(shù)組

var obj = {
            a: 1,
            b: 2,
            c: 3
        };
var newObj=Object.entries(obj);
console.log(newObj)

69吧享、JavaScript中callee和caller的作用

https://www.cnblogs.com/zhihaospace/p/12258900.html

70魏割、簡述cookie、sessionStorage钢颂、localStorage的區(qū)別

https://www.cnblogs.com/pengc/p/8714475.html

71钞它、jQuery的事件委托on、live殊鞭、delegate之間有什么區(qū)別

首先什么是事件委派须揣？
事件委派（委托）：
事件委托就是利用冒泡的原理，把事件加到父元素或祖先元素上钱豁，觸發(fā)執(zhí)行效果。
當(dāng)頁面同步加載時疯汁，會添加事件牲尺。有時數(shù)據(jù)是由異步加載，同步無法給不存在（剛開始）的元素添加事件幌蚊。此時我們可以在一開始就存在的父元素上添加事件谤碳，再通過父元素在觸發(fā)時找子元素。

事件委托優(yōu)點
提高JavaScript性能溢豆。事件委托可以顯著的提高事件的處理速度蜒简，減少內(nèi)存的占用。

Jquery的事件委派寫法：

    $(父元素).on('click','子元素選擇器',function(){
            //代碼塊
     });

區(qū)別在哪里漩仙？

live 把事件委托交給了document（根節(jié)點）搓茬，document 向下去尋找符合條件的元素（）犹赖，不用等待document加載結(jié)束也可以生效。
delegate可指定事件委托對象卷仑，相比于live性能更優(yōu)峻村，直接鎖定指定選擇器；
on事件委托對象選填锡凝，如果不填粘昨，即給對象自身注冊事件，填了作用和delegate一致窜锯。
band只能給調(diào)用它的時候已經(jīng)存在的元素綁定事件张肾，不能給未來新增的元素綁定事件，存在局限性锚扎。

在jQuery 1.7中 .bind()吞瞪、.live()和.delegate() 統(tǒng)一用on代替，解決混亂問題工秩。

$(elems).on(events, selector, data, fn);
$(elems).off(events, selector, fn);//解除事件

72尸饺、如何理解閉包，有何作用助币，使用場景

http://www.reibang.com/p/5600f173387d

73浪听、跨域請求資源的方式有哪些

1、什么是跨域眉菱？

由于瀏覽器同源策略迹栓，凡是發(fā)送請求url的協(xié)議、域名俭缓、端口三者之間任意一個與當(dāng)前頁面地址不同即為跨域克伊。存在跨域的情況：

網(wǎng)絡(luò)協(xié)議不同，如http協(xié)議訪問https協(xié)議华坦。
端口不同愿吹，如80端口訪問8080端口。
域名不同惜姐，如qianduanblog.com訪問baidu.com犁跪。
子域名不同，如abc.qianduanblog.com訪問def.qianduanblog.com歹袁。
域名和域名對應(yīng)ip,如www.a.com訪問20.205.28.90.

2坷衍、跨域請求資源的方法：

(1)、porxy代理

定義和用法：proxy代理用于將請求發(fā)送給后臺服務(wù)器条舔，通過服務(wù)器來發(fā)送請求枫耳，然后將請求的結(jié)果傳遞給前端。

實現(xiàn)方法：通過nginx代理孟抗；

注意點：1迁杨、如果你代理的是https協(xié)議的請求钻心，那么你的proxy首先需要信任該證書（尤其是自定義證書）或者忽略證書檢查，否則你的請求無法成功仑最。

(2)扔役、CORS 【Cross-Origin Resource Sharing】

定義和用法：是現(xiàn)代瀏覽器支持跨域資源請求的一種最常用的方式。

使用方法：一般需要后端人員在處理請求數(shù)據(jù)的時候警医，添加允許跨域的相關(guān)操作亿胸。如下：

[

復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

<pre style="margin: 0px; padding: 0px; overflow: auto; overflow-wrap: break-word; font-family: &quot;Courier New&quot; !important; font-size: 12px !important; white-space: pre-wrap;">res.writeHead(200, {
    "Content-Type": "text/html; charset=UTF-8",
    "Access-Control-Allow-Origin":'http://localhost',
    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
    'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'
});</pre>

[

復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

(3)、jsonp

定義和用法：通過動態(tài)插入一個script標(biāo)簽预皇。瀏覽器對script的資源引用沒有同源限制侈玄，同時資源加載到頁面后會立即執(zhí)行（沒有阻塞的情況下）。

特點：通過情況下吟温，通過動態(tài)創(chuàng)建script來讀取他域的動態(tài)資源序仙，獲取的數(shù)據(jù)一般為json格式。

實例如下：

[

復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

<pre style="margin: 0px; padding: 0px; overflow: auto; overflow-wrap: break-word; font-family: &quot;Courier New&quot; !important; font-size: 12px !important; white-space: pre-wrap;"><script>
    function testjsonp(data) {
       console.log(data.name); // 獲取返回的結(jié)果
    }
</script>
<script>
    var _script = document.createElement('script');
    _script.type = "text/javascript";
    _script.src = "http://localhost:8888/jsonp?callback=testjsonp";
    document.head.appendChild(_script);
</script></pre>

[

復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

缺點：

1鲁豪、這種方式無法發(fā)送post請求（這里）

2潘悼、另外要確定jsonp的請求是否失敗并不容易，大多數(shù)框架的實現(xiàn)都是結(jié)合超時時間來判定爬橡。

74治唤、談?wù)劺厥諜C制及內(nèi)存管理

http://www.reibang.com/p/b75a1159e943

75、描述一次完整的http請求過程

https://blog.csdn.net/yy19890521/article/details/80770950

76糙申、http狀態(tài)碼有哪些

一宾添、什么是HTTP狀態(tài)碼？

當(dāng)用戶在瀏覽網(wǎng)頁的時候柜裸，瀏覽器會返回一個htttp狀態(tài)碼缕陕，主要是用來響應(yīng)瀏覽器的請求。

二疙挺、常見的HTTP狀態(tài)碼有哪些扛邑？

200 OK

　　　　請求正常處理完畢

204 No Content

請求成功處理，沒有實體的主體返回

301 Moved Permanently
　　　　永久重定向铐然，資源已永久分配新URI

302 Found
　　　　臨時重定向蔬崩，資源已臨時分配新URI

400 Bad Request

請求報文語法錯誤或參數(shù)錯誤

401 Unauthorized

要通過HTTP認(rèn)證，或認(rèn)證失敗

403 Forbidden

請求資源被拒絕

404 Not Found
　　　　無法找到請求資源（服務(wù)器無理由拒絕）

500 Internal Server Error
　　　　服務(wù)器故障或Web應(yīng)用故障

503 Service Unavailable
　　　　服務(wù)器超負(fù)載或停機維護

狀態(tài)碼如圖：

image

77锦爵、如何優(yōu)化圖像，圖像格式的區(qū)別

1奥裸、不用圖片险掀，盡量用css3代替举反。比如說要實現(xiàn)修飾效果挂签，如半透明、邊框、圓角叛复、陰影、漸變等瑟由，在當(dāng)前主流瀏覽器中都可以用CSS達成奸笤。

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可以細分為三種格式: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頁面上理逊。

78橡伞、瀏覽器是如何渲染頁面的

http://www.reibang.com/p/b7b7a5904223

79、寫一個function晋被，清除字符串前后的空格

function trim(str) {
    if (str && typeof str === "string") {
        return str.replace(/(^\s*)|(\s*)$/g,""); //去除前后空白符
    }
}

82兑徘、移動端點擊事件延遲300ms，原因是什么羡洛，如何解決

https://zhuanlan.zhihu.com/p/69522350

85挂脑、封裝一個函數(shù)，參數(shù)是定時器的時間，.then執(zhí)行回調(diào)函數(shù)

function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

86最域、請盡可能詳盡的解釋ajax的工作原理，以及跨域

第一步：創(chuàng)建ajax對象（XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)）

第二步：判斷數(shù)據(jù)傳輸方式(GET/POST)

第三步：打開鏈接 open()

第四步：發(fā)送 send()

當(dāng)ajax對象完成第四步（onreadystatechange）數(shù)據(jù)接收完成锈麸，判斷http響應(yīng)狀態(tài)（status）200-300之間或者304（緩存）執(zhí)行回調(diào)函數(shù)

注意：檢測XMLHttpRequest對象的readyState屬性镀脂，該屬性表示請求／響應(yīng)過程的當(dāng)前活動階段，屬性值如下：

0：未初始化忘伞。尚未調(diào)用open()方法

1：啟動薄翅。已經(jīng)調(diào)用open()方法，但尚未調(diào)用send()方法

2：發(fā)送氓奈。已經(jīng)調(diào)用send()方法翘魄，但尚未接收到響應(yīng)

3：接收。已經(jīng)接收到部分響應(yīng)數(shù)據(jù)

4: 完成舀奶。已經(jīng)接收到全部響應(yīng)數(shù)據(jù)暑竟，而且已經(jīng)可以在客戶端使用了（如果寫原生的js ajax請求需要等到 readyState==4的時候再做處理）其他的js庫已經(jīng)做好處理了

87、alert(undefined == null)彈出什么

true
https://www.cnblogs.com/thiaoqueen/p/6904398.html
88育勺、typeof和instanceof相同點與不同點

前言:typeof用于檢測數(shù)據(jù)類型,不必細說,只歸納一下易混淆的概念.

1.對于對象但荤、數(shù)組、null 返回的值是 object 涧至。比如typeof(window)腹躁，typeof(document)，typeof(null)返回的值都是object南蓬。
2.對于函數(shù)類型纺非，返回的值是 function。比如：typeof(eval)赘方，typeof(Date)返回的值都是function烧颖。

// var a = null;
// alert(typeof(a))
//  alert(typeof(Date));            // function(Date使用前需要實例化的原因)
//  alert(typeof(null));            // object
//  alert(typeof(undefined))        // undefined
//  alert(typeof(NaN))              // number
//  alert(typeof(NaN == undefined)) // boolean
//  alert(typeof(NaN == NaN))       // boolean
//  var str = '123abc'
//  alert(typeof(str++))            // number
//  alert(str)                      // NaN

比較typeof與instanceof

相同點：

JavaScript 中 typeof 和 instanceof 常用來判斷一個變量是否為空，或者是什么類型的蒜焊。

不同點:

typeof:
1.返回值是一個字符串倒信，用來說明變量的數(shù)據(jù)類型。
2.typeof 一般只能返回如下幾個結(jié)果： number, boolean, string, function, object, undefined泳梆。

 if (typeof a != "undefined") {
   console.log("ok");

 } eles {
    console.log("not ok");
}
//下面的代碼是錯誤的
// if (a) //因為如果 a 不存在（ 未聲明） 則會出錯鳖悠。
// if (a) {
//     console.log("ok");

// } else {
//     console.log('cc');

// }

| 對于 Array, Null 等特殊對象使用 typeof 一律返回 object，這正是 typeof 的局限性优妙。 |

instanceof:
1.返回值為布爾值;
2. instanceof 用于判斷一個變量是否屬于某個對象的實例乘综。

// var a = new Array();
// alert(a instanceof Array); // true
// alert(a instanceof Object) // true
//如上， 會返回 true套硼， 同時 alert(a instanceof Object) 也會返回 true;
// 這是因為 Array 是 object 的子類卡辰。
// alert(b instanceof Array) // b is not defined

// function Test() {};
// var a = new test();
// alert(a instanceof test) // true

89、JavaScript中如何檢測一個變量是String類型，寫出具體實現(xiàn)函數(shù)

方法1九妈、

function isString(obj){
    return typeof(obj) === "string"? true: false;
    // returntypeof obj === "string"? true: false;
}

方法2反砌、

function isString(obj){
    return obj.constructor === String? true: false;
}

方法3、

function isString(obj){
     return Object.prototype.toString.call(obj) === "[object String]" ? true : false;
}
// 如：
var isstring = isString('xiaoming');
console.log(isstring);  // true

90萌朱、JavaScript實現(xiàn)二分法查找

var arr = [1,2,3,4,5,6];
function getIndex1(arr,key){
            var low = 0;
            var high = arr.length-1;
            while(low<=high){
                var mid = Math.floor((low+high)/2);
                if(key===arr[mid]){
                    return mid;
                }else if(key>arr[mid]){
                    low = mid+1;
                }else{
                    height = mid-1;
                }
            }
            return -1;
}
console.log(getIndex1(arr,5));//4

思想：從數(shù)組中開始查找宴树，如果該元素是要搜索的目標(biāo)元素，則循環(huán)結(jié)束晶疼，如果不是繼續(xù)下一步酒贬，如果目標(biāo)元素大于或者小于中間元素，則在數(shù)組大于或者小于中間元素的那一半?yún)^(qū)域進行查找翠霍，進而重復(fù)上面操作锭吨。如果數(shù)組是空的，則找不到該目標(biāo)元素寒匙。

91零如、"aaaasdserdsfssa"中出現(xiàn)次數(shù)最多的字符及個數(shù)

 8             var s="aaaabbbbssssssss";
 9             var fres={};  //用來記錄所有的字符的出現(xiàn)頻次
10             var mostFreqChar=''; //用來記錄最大頻次的字符
11             for(var i=0;i<s.length;i++){
12                 var char=s[i];
13                 if(!fres[char]){
14                     fres[char]=0;
15                 }
16 
17                 fres[char]++;            
18                 if(mostFreqChar==''||fres[char]>fres[mostFreqChar]){
19                     mostFreqChar=char;
20                 }
21 
22             }
23             console.log(mostFreqChar);
24             console.log(fres[mostFreqChar]);

92、談?wù)勀闼私獾腤eb攻擊技術(shù)

(1）XSS（Cross-Site Scripting锄弱，跨站腳本攻擊）：指通過存在安全漏洞的Web網(wǎng)站注冊用戶的瀏覽器內(nèi)運行非法的HTML標(biāo)簽或者JavaScript進行的一種攻擊埠况。

（2）SQL注入攻擊

（3）CSRF（Cross-Site Request Forgeries，跨站點請求偽造）：指攻擊者通過設(shè)置好的陷阱棵癣，強制對已完成的認(rèn)證用戶進行非預(yù)期的個人信息或設(shè)定信息等某些狀態(tài)更新辕翰。

93、描述DOM事件代理（委托）的原理

https://www.cnblogs.com/wp-js/p/7609539.html

94狈谊、使用代碼實現(xiàn)喜命，原型繼承，面向?qū)ο?/h3>
https://www.liaoxuefeng.com/wiki/1022910821149312/1023021997355072

98河劝、如何解決回調(diào)地獄

https://blog.csdn.net/mangxi8200/article/details/81273848
https://www.cnblogs.com/web-chuanfa/p/11146589.html

100壁榕、IOS和安卓常見兼容問題

https://blog.csdn.net/zhangzixue_/article/details/91812725

102、第一個人10歲赎瞎，第二個比第一個大2歲牌里，依次遞推，請用遞歸編寫一個方法务甥，可以計算出第8個人多大牡辽？（JS編寫）

function fn(n) {
  if (n === 1) {
    return 10;
  }
  return fn(n - 1) + 2;
}
console.log(fn(8));
// 24

108馁害、call、apply蹂匹、bind方法的作用分別是什么蜗细？有什么區(qū)別？

1怒详、他們?nèi)齻€都能改變this的指向,第一個參數(shù)都是this指向的對象。bind的this指向不可被改變踪区。
2昆烁、call、apply可以看作是某個對象中的方法缎岗，通過調(diào)用對象中方法的形式間接調(diào)用函數(shù)静尼。也可以理解為讓函數(shù)在指定的對象下執(zhí)行，他們屬于立即執(zhí)行传泊。
call與apply不同的地方是參數(shù)不同鼠渺，call()在第一個參數(shù)之后的后續(xù)所有參數(shù)就是傳入該函數(shù)的值。
apply() 只有兩個參數(shù)眷细，this指向的對象拦盹，第二個是數(shù)組，這個數(shù)組就是該函數(shù)的參數(shù)溪椎。
3普舆、bind可以理解為創(chuàng)建一個新的函數(shù)，調(diào)用才會執(zhí)行校读，在第一個參數(shù)this指向的對象沼侣，之后的后續(xù)所有的參數(shù)都是傳入該函數(shù)的值。

call舉例：

var obj = {x: 1}
function foo() {console.log(this.x)}
foo.call(obj)       //打印結(jié)果： 1

apply舉例：

var obj = {};
function foo(a, b, c) {
 console.log(b);
}
foo.call(obj, 1, 2, 3)   //打印結(jié)果： 2;

bind舉例：

var module = {
    x:42,
    getX:function(){
    return this.x;
  }
 }
var unboundGetX = module.getX;
console.log(unboundGetX());  //undefined

var boundGetX = unboundGetX.bind(module);
console.log(boundGetX());  //42

bind的this指向不可被改變歉秫，用call蛾洛、apply也不行：

var obj = {
    z: 1
};
var obj1 = {
    z: 2
};

function fn(x, y) {
    console.log(x + y + this.z);
};
// call與apply
fn.call(obj, 2, 3); //6
fn.apply(obj, [2, 3]); //6

var bound = fn.bind(obj, 2);
bound(3); //6
//嘗試修改bind返回函數(shù)的this
bound.call(obj1, 3); //6

110、線程與進程的區(qū)別

https://blog.csdn.net/ThinkWon/article/details/102021274

111雁芙、哪些常見操作會造成內(nèi)存泄漏

http://www.reibang.com/p/763ba9562864

112轧膘、你知道哪些項目優(yōu)化方法

https://zhuanlan.zhihu.com/p/147958620

113、json的了解

json在js中是對象和數(shù)組兔甘，常用的json就是將json轉(zhuǎn)換成字符串扶供，字符串轉(zhuǎn)換成對象，目的就是替換掉麻煩的xml裂明，數(shù)據(jù)格式簡單椿浓，便于讀寫太援，也是一種輕量級的數(shù)據(jù)交換格式

114、new操作符具體干了什么

https://www.cnblogs.com/psxiao/p/11545217.html

115扳碍、null和undefined的區(qū)別

https://www.cnblogs.com/shengmo/p/8671803.html

116提岔、eval是做什么的

https://blog.csdn.net/qq_41696819/article/details/81909662

117、構(gòu)造函數(shù)Fn原型對象笋敞、實例對象碱蒙、三者之間的區(qū)別

https://www.cnblogs.com/liyusmile/p/8820443.html

118、瀏覽器的同源策略

https://www.cnblogs.com/laixiangran/p/9064769.html

119夯巷、JavaScript 是一門什么樣的語言赛惩，它有哪些特點

https://blog.csdn.net/xuehangongzi/article/details/82927057

121、window.location.search() 返回的是什么

https://www.cnblogs.com/lgx5/p/7898647.html

122趁餐、window.location.reload() 作用

https://www.cnblogs.com/yiguozhi/p/5531002.html

123喷兼、例舉 3 種強制類型轉(zhuǎn)換和 2 種隱式類型轉(zhuǎn)換

強制類型轉(zhuǎn)換：
（parseInt，parseFloat后雷，Number）
隱式類型轉(zhuǎn)換：
==之間發(fā)生的隱式類型轉(zhuǎn)換季惯；
+*/-操作符的隱式類型轉(zhuǎn)換；
輯運算符 || &&臀突；
一元運算符 + - !

125勉抓、簡述創(chuàng)建函數(shù)的幾種方式

https://www.cnblogs.com/quehai/p/10825680.html

126、iframe 的優(yōu)缺點

https://blog.csdn.net/zhouziyu2011/article/details/58593362

127候学、請你談?wù)?Cookie 的弊端

https://www.cnblogs.com/wade1220/p/7182620.html

130藕筋、解釋 jsonp 的原理，以及為什么不是真正的 ajax

https://blog.csdn.net/qq_36772866/article/details/83042524

131梳码、為什么不能定義 1px 左右的 div 容器

http://blog.sina.com.cn/s/blog_7049db830101m0ec.html

135念逞、什么是三元表達式？“三元”表示什么意思边翁？

https://www.cnblogs.com/wade1220/p/7182693.html

137翎承、列出 3 條以上 ff 和 IE 的腳本兼容問題

https://www.cnblogs.com/luckyXcc/p/5750671.html

140、原生 JS 的 window.onload 與 Jquery 的$(document).ready(function(){}) 有什么不同符匾？如何用原生 JS 實現(xiàn) Jq 的 ready 方法叨咖？

https://www.cnblogs.com/zhaosijia----1234/p/10457325.html

143、javascript 代碼中的"use strict";是什么意思 ? 使用它區(qū)別是什么啊胶？

https://www.iwellen.com/?p=470

144甸各、如何判斷一個對象是否屬于某個類？

https://blog.csdn.net/qq_38211541/article/details/106674955

146焰坪、視差滾動效果

https://www.cnblogs.com/JoannaQ/archive/2013/02/08/2909111.html

147趣倾、談?wù)勀K化開發(fā)

https://blog.csdn.net/lxcao/article/details/52774825

148、IE某饰、chrome時間格式化兼容儒恋。

https://blog.csdn.net/weixin_42716945/article/details/107484038
149善绎、js宏任務(wù)、微任務(wù)诫尽。
http://www.reibang.com/p/47adfd3c2dd7

ECMAScript6（開發(fā)中）

150禀酱、var、let牧嫉、const區(qū)別

https://blog.csdn.net/unionz/article/details/80032048

Vue

151剂跟、對MVC 、MVVM酣藻、MVP的理解

https://blog.csdn.net/napolunyishi/article/details/22722345

152曹洽、v-if、v-show區(qū)別

https://my.oschina.net/u/4194652/blog/3134431

153辽剧、組件通信

https://segmentfault.com/a/1190000019208626

154送淆、組件生命周期

https://www.cnblogs.com/qidh/p/11431998.html

155、分別簡述computed和watch的使用場景

https://www.cnblogs.com/dream111/p/13499020.html

156抖仅、項目構(gòu)建中，如何提取公共資源

https://juejin.cn/post/6875512935662551047

157砖第、簡述Vuex工作流程

http://www.reibang.com/p/1480837790f9

158撤卢、Vue-router傳參及區(qū)別

https://blog.csdn.net/mf_717714/article/details/81945218

159、v-on可以監(jiān)聽多個方法嗎

https://www.cnblogs.com/gitByLegend/p/10835516.html

160梧兼、$nextTick的使用

http://www.reibang.com/p/aa21e186649d

161放吩、vue組件中data為什么必須是一個函數(shù)

https://blog.csdn.net/nanzhuhe/article/details/105014418

162、vue事件對象的使用

https://www.cnblogs.com/gitByLegend/p/10836922.html

163羽杰、vue-router響應(yīng)路由參數(shù)的變化

https://blog.csdn.net/lanseguhui/article/details/90181503

164、vue-router導(dǎo)航守衛(wèi)（鉤子函數(shù)）

https://www.cnblogs.com/lhl66/p/9195787.html

166、vue-router的兩種模式

https://www.jb51.net/article/162223.htm

167纠炮、vue-router路由模式為history今豆，導(dǎo)致的問題

https://www.cnblogs.com/xyyt/p/7718867.html

168、keep-alive組件的作用

http://www.reibang.com/p/e565cfef48e7?from=singlemessage

169颜骤、漸進式框架的理解

https://blog.csdn.net/qq_37600506/article/details/107211439

170唧喉、詳述虛擬DOM中的diff算法

https://blog.csdn.net/qq_45149256/article/details/112129339

171、Vue中雙向數(shù)據(jù)綁定是如何實現(xiàn)的

https://www.cnblogs.com/zhenfei-jiang/p/7542900.html

172忍抽、Vuex中如何異步修改狀態(tài)

http://www.reibang.com/p/a9f3fb2f7426/

173八孝、單頁面應(yīng)用和多頁面應(yīng)用區(qū)別及優(yōu)缺點

https://www.chazidian.com/fudao/news876216/

174、vue中過濾器有什么作用

https://segmentfault.com/a/1190000038639200

175鸠项、v-if和v-for的優(yōu)先級

https://www.cnblogs.com/qdwds/p/11706932.html

176干跛、vue中key值得作用

http://www.reibang.com/p/0044532e4a93

177、vue提供了幾種腳手架模板

https://blog.csdn.net/weixin_43392489/article/details/112558406

178祟绊、assets和static的區(qū)別

https://zhidao.baidu.com/question/1695323777204338508.html

179楼入、常見的幾種MVVM的實現(xiàn)方式

https://zhuanlan.zhihu.com/p/24475845

180哥捕、組件樣式屬性 scoped 問題及解決方法

https://www.cnblogs.com/goloving/p/9119265.html

182、vue常用的修飾符

https://www.cnblogs.com/lgnblog/p/12750071.html

184浅辙、數(shù)組更新檢測

https://www.cnblogs.com/lyx183/p/10087233.html

185扭弧、對象更新檢測

https://blog.csdn.net/a4561614/article/details/81083940

186、自定義指令詳解

https://blog.csdn.net/liuqz2009/article/details/103863870

187记舆、自定義過濾器詳解

https://www.cnblogs.com/lily1010/p/5837399.html

188鸽捻、 $route和$ router的區(qū)別

https://blog.csdn.net/benben513624/article/details/86657492

189、Vue兩個核心點

https://blog.csdn.net/weixin_42619706/article/details/96157767

190泽腮、Vue計算屬性computed

https://blog.csdn.net/Healer_JJJ/article/details/77756369

191御蒲、computed和methods區(qū)別

https://blog.csdn.net/ly_yanbo/article/details/88664408

192、watch監(jiān)聽詳解

https://www.cnblogs.com/meiyanstar/p/14047456.html

193诊赊、computed和watch區(qū)別

http://www.reibang.com/p/6b8543e60a5b

194厚满、vue和jQuery的區(qū)別

https://blog.csdn.net/weixin_41490593/article/details/90203673

195、組件第一次加載會觸發(fā)那幾個鉤子（生命周期函數(shù)）

https://blog.csdn.net/hfdxmz_3/article/details/106541396

196碧磅、vue-loader是什么碘箍？用途有哪些？

https://blog.csdn.net/m0_45070460/article/details/107504016

197鲸郊、Vuex中actions和mutations的區(qū)別

https://blog.csdn.net/csj41352/article/details/104822949/

198丰榴、v-model是什么

https://zhidao.baidu.com/question/2146191930078855228.html

199、ajax請求應(yīng)該寫在組件的created中還是vuex的actions中

https://blog.csdn.net/weixin_39628498/article/details/111739371

200秆撮、vue.cli項目中src目錄每個文件夾和文件的用法

201四濒、active-class 是哪個組件的屬性？嵌套路由怎么定義

https://blog.csdn.net/weixin_44486539/article/details/103074917

202职辨、vue-router 是什么?它有哪些組件

https://blog.csdn.net/nanzhuhe/article/details/105010054

203盗蟆、不用 vuex 會帶來什么問題

https://developer.aliyun.com/ask/273181

204、hash模式和history模式的實現(xiàn)

https://blog.csdn.net/weixin_46124214/article/details/106118142

206舒裤、Vue-cli打包命令是什么喳资？打包后會導(dǎo)致路徑問題，應(yīng)該在哪里修改

https://www.cnblogs.com/dream111/p/13519941.html

207腾供、開發(fā)中遇到的問題

https://blog.csdn.net/songlf521/article/details/56899857

210骨饿、跨組件雙向數(shù)據(jù)綁定

https://www.cnblogs.com/dream111/p/13519962.html

211、delete和Vue.delete刪除數(shù)組的區(qū)別

http://www.reibang.com/p/ed1e1ea2c5be

212台腥、SPA首屏加載慢如何解決

https://blog.csdn.net/qq_33896101/article/details/85060396

213宏赘、Vue-router跳轉(zhuǎn)和location.href有什么區(qū)別

https://www.it610.com/article/1289225546940620800.htm

214、SPA改為MPA

https://zhuanlan.zhihu.com/p/147299715

215黎侈、Vue中的slot是什么

https://blog.csdn.net/weixin_41646716/article/details/80450873

216察署、你們vue項目是打包了一個js文件，一個css文件峻汉，還是有多個文件

根據(jù)vue-cli腳手架規(guī)范贴汪，一個js文件脐往，一個CSS文件。

217扳埂、vue的雙向綁定的原理业簿，和angular的對比

https://www.jb51.net/article/97971.htm

218、Vue2中注冊在router-link上事件無效解決方法

http://www.reibang.com/p/adc6a358993b

219阳懂、在IE與火狐上點擊失效（路由不跳轉(zhuǎn)）問題

https://www.cnblogs.com/knuzy/p/9842310.html

220梅尤、Vue中跨域

https://www.cnblogs.com/lihaohua/p/12372267.html

221、axios post請求問題

http://www.reibang.com/p/961a4c97e057?from=singlemessage

222岩调、SPA 路由history模式上線后刷新404

https://blog.csdn.net/weixin_43845090/article/details/108923073

ajax

223巷燥、Ajax 是什么? 如何創(chuàng)建一個 Ajax？

https://blog.csdn.net/weixin_42581969/article/details/83513055

224号枕、同步和異步的區(qū)別?

https://zhidao.baidu.com/question/580743379.html

225缰揪、如何解決跨域問題?

https://zhuanlan.zhihu.com/p/141977678?from_voters_page=true

226、頁面編碼和被請求的資源編碼如果不一致如何處理葱淳？

https://www.cnblogs.com/Yanss/p/11726989.html

227钝腺、簡述 ajax 的過程

https://www.cnblogs.com/babywin/p/6485280.html

228、闡述一下異步加載

https://www.cnblogs.com/rik28/p/5950190.html

229赞厕、GET 和 POST 的區(qū)別艳狐，何時使用 POST？

https://www.cnblogs.com/webmc/p/11103919.html

232坑傅、ajax 的缺點

https://www.cnblogs.com/yelp/p/3725664.html

第一節(jié)：布局
第二節(jié)：盒模型&BFC
第三節(jié)：DOM事件
第四節(jié)：HTTP協(xié)議

移動端

237僵驰、點透

https://blog.csdn.net/jiang7701037/article/details/98617031

238喷斋、1px問題

http://www.reibang.com/p/3a262758abcf

239唁毒、圖片在安卓上，有些設(shè)備會模糊

https://www.softwhy.com/article-1663-1.html

240星爪、防止手機中頁面放大和縮小

https://www.cnblogs.com/tianma3798/p/5056808.html

241浆西、上下拉動滾動條時卡頓、慢

https://www.cnblogs.com/xiaoqi2018/p/10708081.html

242顽腾、iphone及ipad下輸入框默認(rèn)內(nèi)陰影

https://blog.csdn.net/tang242424/article/details/79738797

243近零、webkit mask兼容處理

https://www.cnblogs.com/thinline/p/8051534.html

244、click的300ms延遲問題

https://blog.csdn.net/aa_lalala/article/details/81450461

混合開發(fā)
- h5開發(fā)完一版本抄肖，然后分別給到IOS和安卓久信，其實就是把h5的代碼嵌入到IOS和安卓的盒子里
原生開發(fā)
- 分別針對IOS和安卓和h5各自開發(fā)一版本

2020-7-28總結(jié)題：

245、原型繼承漓摩，實現(xiàn)map循環(huán)裙士。

https://www.cnblogs.com/wxyblog/p/11276971.html
JS繼承分類：
https://www.cnblogs.com/humin/p/4556820.html

246、vue原理管毙。

https://segmentfault.com/a/1190000016434836

247腿椎、react原理桌硫。

https://zhuanlan.zhihu.com/p/45091185

248、http1啃炸、2.

https://www.cnblogs.com/gxw123/p/13288957.html?utm_source=tuicool

250铆隘、promise特性

https://www.cnblogs.com/jokeryf/p/12084154.html

253、http緩存原理

http://www.361way.com/http-cache/5611.html

254南用、es6膀钠、es5事件、方法

https://blog.csdn.net/qq_52151772/article/details/109479534

255训枢、算法

260托修、動畫transform transition新特性

https://www.cnblogs.com/bobodeboke/p/6252869.html

261、h5新特性

https://zhidao.baidu.com/question/1695503938291479148.html

262恒界、new 的時候做了什么睦刃，new倆次做了什么。

https://www.cnblogs.com/faith3/p/6209741.html

138十酣、寫一個函數(shù)可以計算 sum(5,0,-5);輸出 0; sum(1,2,3,4);輸出 10;

https://github.com/kpdecker/jsdiff#api

vue常見面試題
https://zhuanlan.zhihu.com/p/92407628

測試

最后編輯于：2021.06.28 12:00:56

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末涩拙，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子耸采，更是在濱河造成了極大的恐慌兴泥，老刑警劉巖，帶你破解...
沈念sama閱讀 219,589評論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件虾宇，死亡現(xiàn)場離奇詭異搓彻，居然都是意外死亡，警方通過查閱死者的電腦和手機嘱朽，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,615評論 3贊 396
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門旭贬，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人搪泳，你說我怎么就攤上這事稀轨。” “怎么了岸军？”我有些...
開封第一講書人閱讀 165,933評論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵奋刽，是天一觀的道長。經(jīng)常有香客問我艰赞，道長佣谐，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 58,976評論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任方妖，我火速辦了婚禮狭魂，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己趁蕊，他們只是感情好坞生，可當(dāng)我...
茶點故事閱讀 67,999評論 6贊 393
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著掷伙，像睡著了一般是己。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上任柜，一...
開封第一講書人閱讀 51,775評論 1贊 307
城市分裂傳說
那天卒废，我揣著相機與錄音，去河邊找鬼宙地。笑死摔认，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的宅粥。我是一名探鬼主播参袱，決...
沈念sama閱讀 40,474評論 3贊 420
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼秽梅！你這毒婦竟也來了抹蚀？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 39,359評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤企垦，失蹤者是張志新（化名）和其女友劉穎环壤，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體钞诡，經(jīng)...
沈念sama閱讀 45,854評論 1贊 317
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡郑现，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 38,007評論 3贊 338
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了荧降。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片接箫。...
茶點故事閱讀 40,146評論 1贊 351
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖誊抛，靈堂內(nèi)的尸體忽然破棺而出列牺，到底是詐尸還是另有隱情整陌，我是刑警寧澤拗窃，帶...
沈念sama閱讀 35,826評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站泌辫，受9級特大地震影響随夸，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜震放，卻給世界環(huán)境...
茶點故事閱讀 41,484評論 3贊 331
男人毒藥：我在死后第九天來索命
文/蒙蒙一宾毒、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧殿遂，春花似錦诈铛、人聲如沸乙各。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,029評論 0贊 22
一樁弒父案幢竹，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽耳峦。三九已至，卻和暖如春焕毫，著一層夾襖步出監(jiān)牢的瞬間蹲坷，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,153評論 1贊 272
情欲美人皮
我被黑心中介騙來泰國打工邑飒，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留循签，地道東北人。一個月前我還...
沈念sama閱讀 48,420評論 3贊 373
代替公主和親
正文我出身青樓疙咸，卻偏偏與公主長得像县匠，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子撒轮，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 45,107評論 2贊 356

總結(jié)前端問題

前端經(jīng)典面試題：

HTM（開發(fā)中）

1、什么是盒模型

2、行內(nèi)庭再、塊元素捞奕、空元素分別舉例

3、src和href的區(qū)別

概括：src用于替代這個元素（這個屬性是將資源嵌入到當(dāng)前文檔中元素所在的位置）拄轻，而href用于建立這個標(biāo)簽與外部資源之間的關(guān)系（引用外部資源）颅围。

4、html5為什么只需要寫<!

HTML5大概可以用以下公式說明：HTML5 ≈ HTML + CSS 3 + JavaScript + API.

5丐黄、link和@import的區(qū)別

6俊扭、Doctype作用队橙，標(biāo)準(zhǔn)模式與兼容模式有什么區(qū)別

7、至少用兩種方法寫兩列布局姐仅，左列定寬200px花枫，右側(cè)自適應(yīng)

8、寫出HTML5新增的語義化標(biāo)簽

9赵讯、前端頁面由那三層構(gòu)成，分別是什么耿眉，作用是什么

10牙寞、請描述一下cookies饺鹃，sessionStorage和localStorage的區(qū)別

11拼弃、Sass 、 LESS 是什么摇展？大家為什么要使用他們

12桥言、css 優(yōu)先級算法如何計算？

13疼约、javascript的 typeof 返回哪些數(shù)據(jù)類型

14、例舉 3 種強制類型轉(zhuǎn)換和 2 種隱式類型轉(zhuǎn)換

15、數(shù)組方法 pop() push() unshift() shift()

16网缝、window.onload 和 document ready 的區(qū)別

關(guān)于window.onload與$(document).ready()的差異性

1. window.onload與$(document).ready()的對比

2.window.onload

3.$(document).ready()

17女器、”==”和“===”的不同

18、iframe的作用

19、png劣纲、jpg逢捺、gif 這些圖片格式解釋一下，分別什么時候用癞季。有沒有了解過webp劫瞳？

20、style標(biāo)簽寫在body后與body前有什么區(qū)別

21、在網(wǎng)頁中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體水孩？為什么呢

CSS（開發(fā)中）

23苍姜、都知道哪些CSS Hack

24、box-sizing常用的屬性及分別有什么用

25玉罐、position有幾種取值屈嗤？每種取值相對于誰來進行定位

26料滥、CSS選擇器有哪些然眼？哪些屬性可以繼承？

27袋哼、移動端分辨率適配

28冀墨、PC常見兼容問題

29、display:none和visibility:hidden的區(qū)別

30、瀏覽器中的回流和重繪是什么寒屯，分別在什么情況下觸發(fā)

32沼溜、px平挑、em、rem的區(qū)別

33系草、清除浮動的方式有哪些通熄，比較好的是哪種

34凡辱、簡述 readyonly 與 disabled 的區(qū)別

36、你做的頁面在哪些流覽器測試過癞己？這些瀏覽器的內(nèi)核分別是什么?

37膀斋、為什么要初始化樣式

38、Doctype 的作用绩社？嚴(yán)格模式與混雜模式的區(qū)別摔蓝？

39山林、瀏覽器的內(nèi)核分別是什么?經(jīng)常遇到的瀏覽器的兼容性有哪些？原因邢羔，解決 方法是什么驼抹，常用 hack 的技巧 ？

1张抄、滾動條

2砂蔽、獲取樣式兼容

3、網(wǎng)頁可視區(qū)兼容

4署惯、事件對象兼容

5左驾、阻止事件冒泡兼容

6、事件目標(biāo)對象兼容

7极谊、阻止默認(rèn)行為兼容

42诡右、CSS3 有哪些新特性？

43、html5 有哪些新特性王带、移除了那些元素淑蔚？如何處理 HTML5 新標(biāo)簽的瀏覽器兼 容問題？如何區(qū)分 HTML 和 HTML5愕撰？

44齐板、CSS3 新增偽類有那些吵瞻？

45橡羞、rgba()和opacity的透明效果有什么區(qū)別

46璧诵、知道css有個content屬性嗎？有什么用仇冯？有什么應(yīng)用之宿？

50氧急、解釋css sprites,如何使用颗胡？

51、用純css創(chuàng)建一個三角形的原理是什么吩坝？

52弧呐、一個滿屏品字布局如何設(shè)計

53闸迷、CSS屬性overflow屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會如何處理

54盾舌、請解釋一下CSS3的flexbox（彈性盒布局模型）,以及適用場景

55、瀏覽器是怎樣解析CSS選擇器的

56砸彬、PC常見兼容問題匯總

57、絕對定位和相對定位區(qū)別

58、position跟display霎奢、overflow户誓、float這些特性相互疊加后會怎么樣

59创译、上下margin重合的問題

60、設(shè)置元素浮動后墙基，該元素的display值是多少

61软族、::before 和 :after中雙冒號和單冒號有什么區(qū)別？解釋一下這2個偽元素的作用

62倔幼、 li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法爽待？

引起這種空白間隔的原因：

解決方案：

63、簡述優(yōu)雅降級和漸進增強

JavaScript

64哑子、簡述同步和異步的區(qū)別

65、怎樣添加塌衰、移除诉稍、復(fù)制、創(chuàng)建最疆、查找節(jié)點

66获诈、實現(xiàn)一個函數(shù)clone

67价涝、數(shù)組去重

68女蜈、在JavaScript中什么是偽數(shù)組？如何將偽數(shù)組轉(zhuǎn)化為標(biāo)準(zhǔn)數(shù)組

39山林、瀏覽器的內(nèi)核分別是什么?經(jīng)常遇到的瀏覽器的兼容性有哪些？原因邢羔，解決方法是什么驼抹，常用 hack 的技巧？

43、html5 有哪些新特性王带、移除了那些元素淑蔚？如何處理 HTML5 新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5愕撰？

94狈谊、使用代碼實現(xiàn)喜命，原型繼承，面向?qū)ο?/h3>
https://www.liaoxuefeng.com/wiki/1022910821149312/1023021997355072