資訊專欄INFORMATION COLUMN
摘要：前言前段時(shí)間面試包括阿里巴巴的電話面試，遇到過一些面試題，且面試中出現(xiàn)機(jī)率較高的提問筆試，有些答的不是很好掛掉了，今天終于有時(shí)間整理出來分享給大家，希望對(duì)大家面試有所幫助，都能輕松拿。
前言
前段時(shí)間面試(包括阿里巴巴的電話面試)，遇到過一些面試題，且面試中出現(xiàn)機(jī)率較高的提問/筆試，有些答的不是很好掛掉了，今天終于有時(shí)間整理出來分享給大家，希望對(duì)大家面試有所幫助，都能輕松拿offer。
主要分三部分：html、css、js；react/vue等都?xì)w類于js,內(nèi)容來源于面試過程中遇到的、在復(fù)習(xí)過程中看到認(rèn)為值得加深鞏固、群友交流分享的；如有理解的錯(cuò)誤或不足之處，歡迎留言糾錯(cuò)、斧正，這里是@IT·平頭哥聯(lián)盟，我是首席填坑官?蘇南(South·Su) ^_^～HTML
有些面試官會(huì)問你對(duì)盒子模型的理解，在我們平時(shí)看到的網(wǎng)頁(yè)中，內(nèi)部的每一個(gè)標(biāo)簽元素它都是有幾個(gè)部分構(gòu)成的：內(nèi)容(content)、外邊距(margin)、內(nèi)邊距(padding)、邊框(border)，四個(gè)部分組成，當(dāng)你說完這些面試官是不會(huì)滿意這個(gè)答案的，因?yàn)檫€有一個(gè)重點(diǎn)（IE盒模型和標(biāo)準(zhǔn)盒模型的區(qū)別）———IE盒模型的content包括border、padding
link標(biāo)簽引入，也是當(dāng)下用的最多的一種方式，它屬于XHTML標(biāo)簽，除了能加載css外，還能定義rel、type、media等屬性;
@import引入，@import是CSS提供的，只能用于加載CSS;
style?嵌入方式引入，減少頁(yè)面請(qǐng)求(優(yōu)點(diǎn))，但只會(huì)對(duì)當(dāng)前頁(yè)面有效，無法復(fù)用、會(huì)導(dǎo)致代碼冗余，不利于項(xiàng)目維護(hù)(缺點(diǎn))，此方式一般只會(huì)項(xiàng)目主站首頁(yè)使用（騰訊、淘寶、網(wǎng)易、搜狐）等大型網(wǎng)站主頁(yè)，之前有看到過都是這種方式，但后來有些也舍棄了?
小結(jié)：link頁(yè)面被加載的時(shí)，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁(yè)面被加載完再加載,且link是XHTML標(biāo)簽，無兼容問題; link支持動(dòng)態(tài)js去控制DOM節(jié)點(diǎn)去改變樣式，而@import不支持，
行內(nèi)元素有：a、b、span、img、input、select、textarea、em、img、strong（強(qiáng)調(diào)的語氣）;
塊級(jí)元素有：ul、ol、li、dl、dt、dd、h1、h2、h3、h4…p、section、div、form等;
空元素： input type="hidden"/>、br>、hr>、link>、meta>;?
小結(jié)：塊元素總是獨(dú)占一行，margin對(duì)內(nèi)聯(lián)元素上下不起作用;?
cookie是網(wǎng)站為了標(biāo)示用戶身份而儲(chǔ)存在用戶本地終端上的數(shù)據(jù)（通常經(jīng)過加密），cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶，記會(huì)在瀏覽器和服務(wù)器間來回傳遞。?
sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。
大小： cookie數(shù)據(jù)大小不能超過4k,sessionStorage和localStorage 雖然也有存儲(chǔ)大小的限制，但比cookie大得多，可以達(dá)到5M或更大。
時(shí)效：localStorage 存儲(chǔ)持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非用戶主動(dòng)刪除數(shù)據(jù)或清除瀏覽器/應(yīng)用緩存；sessionStorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動(dòng)刪除。
cookie 設(shè)置的cookie過期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉部分面試官可能還會(huì)再深入一些：
1)、如何讓cookie瀏覽器關(guān)閉就失效？——不對(duì)cookie設(shè)置任何正、負(fù)或0時(shí)間的即可;
2)、sessionStorage在瀏覽器多窗口之間 (同域)數(shù)據(jù)是否互通共享? ——不會(huì)，都是獨(dú)立的，localStorage會(huì)共享;
3)、能讓localStorage也跟cookie一樣設(shè)置過期時(shí)間？答案是可以的，在存儲(chǔ)數(shù)據(jù)時(shí)，也存儲(chǔ)一個(gè)時(shí)間戳，get數(shù)據(jù)之前，先拿當(dāng)前時(shí)間跟你之前存儲(chǔ)的時(shí)間戳做比較?詳細(xì)可看我之前寫的另一篇分享（小程序項(xiàng)目總結(jié) ）。
語義化是指根據(jù)內(nèi)容的類型，選擇合適的標(biāo)簽（代碼語義化）,即用正確的標(biāo)簽做正確的事情;?html語義化讓頁(yè)面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，有助于瀏覽器、搜索引擎解析對(duì)內(nèi)容的抓取;?語義化的HTML在沒有CSS的情況下也能呈現(xiàn)較好的內(nèi)容結(jié)構(gòu)與代碼結(jié)構(gòu);?搜索引擎的爬蟲也依賴于HTML標(biāo)記來確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于SEO;
CSSabsolute：絕對(duì)定位，元素會(huì)相對(duì)于值不為 static 的第一個(gè)父元素進(jìn)行定位(會(huì)一直往父級(jí)節(jié)點(diǎn)查找)，且它是脫離正常文檔流、不占位的;
fixed:同樣是絕對(duì)定位，但元素會(huì)相對(duì)于瀏覽器窗口進(jìn)行定位，而不是父節(jié)點(diǎn)的position (IE9以下不支持);
relative:相對(duì)定位，元素相對(duì)于自身正常位置進(jìn)行定位,屬于正常文檔流;static: position的默認(rèn)值，也就是沒有定位，當(dāng)元素設(shè)置該屬性后（ top、bottom、left、right、z-index ）等屬性將失效;?
inherit:貌似沒用過，查了一下文檔“規(guī)定從父元素繼承 position 屬性的值”;
水平垂直居中 —— 方式一
水平垂直居中 —— 方式二
水平垂直居中 —— 方式三，（新舊伸縮盒兼容）
有，外邊距合并指的是，當(dāng)兩個(gè)垂直元素的都設(shè)置有margin外邊距相遇時(shí)，它們將形成一個(gè)外邊距。 合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的值中的較大那個(gè)。
單冒號(hào)(:)用于CSS3偽類，雙冒號(hào)(::)用于CSS3偽元素。（偽元素由雙冒號(hào)和偽元素名稱組成）?;
雙冒號(hào)是在當(dāng)前規(guī)范中引入的，用于區(qū)分偽類和偽元素。不過瀏覽器需要同時(shí)支持舊的已經(jīng)存在的偽元素寫法，比如:first-line、:first-letter、:before、:after等，
而新的在CSS3中引入的偽元素則不允許再支持舊的單冒號(hào)的寫法;
想讓插入的內(nèi)容出現(xiàn)在其它內(nèi)容前，使用::before，之后則使用::after；?在代碼順序上，::after生成的內(nèi)容也比::before生成的內(nèi)容靠后。
如果按堆棧視角，::after生成的內(nèi)容會(huì)在::before生成的內(nèi)容之上;?
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: #fff;//設(shè)置成元素原本的顏色
background-image: none;
color: rgb(0, 0, 0);
}
//方法2：由(licongwen )補(bǔ)充
input:-webkit-autofill {
-webkit-box-shadow: 0px 0 3px 100px #ccc inset; //背景色
}
用圖片：如果是展示的內(nèi)容基本是固定不變的話，可以直接切圖兼容性也完美(不到萬不得已，不建議);
找UI設(shè)計(jì)師溝通：為了兼容各大主流瀏覽器，避免后期設(shè)計(jì)師來找你撕逼，主動(dòng)找TA溝通，講明原因 ————注意語氣，好好說話不要激動(dòng)，更不能攜刀相逼;
CSS3：css3的樣式transform: scale(0.7)，scale有縮放功能;
又去找chrome復(fù)習(xí)了一下，說是 “display:table;display: table-cell;” 可以做到，沒用過。
devicePixelRatio:它是window對(duì)象中有一個(gè)devicePixelRatio屬性，設(shè)備物理像素和設(shè)備獨(dú)立像素的比例，也就是 devicePixelRatio = 物理像素 / 獨(dú)立像素;這種方式好麻煩，js檢測(cè)，再給元素添加類名控制，難維護(hù);
切圖：直接.5px的切圖，這種方式太low，建議還是別用了，特別難維護(hù)，高清屏就糊了,更重要的是被同行看到會(huì)覺得你們很渣渣～;
image背景：css3的background-image:linear-gradient，缺點(diǎn)就是：樣式多，遇到圓角這個(gè)方案就杯劇了;?box-shadow:網(wǎng)上看到說使用box-shadow模擬邊框，box-shadow: inset 0px -1px 1px -1px #06c;沒用過，不過多評(píng)論，建議自己百度;
偽類縮放：現(xiàn)在用的比較多的方式之一 :after 1px然后transform: scale(0.5);基本能滿足所有場(chǎng)景，對(duì)于圓角的處理也很方便;
貼上3、5兩方案代碼，也是目前公司一直在用的(預(yù)處理SCSS)：
//3、css3的background-image 本文由@IT·平頭哥聯(lián)盟-首席填坑官?蘇南分享
@mixin border($top:1, $right:1, $bottom:1, $left:1, $color:#ebebf0) {
background-image:linear-gradient(180deg, $color, $color 50%, transparent 50%),
linear-gradient(90deg, $color, $color 50%, transparent 50%),
linear-gradient(0deg, $color, $color 50%, transparent 50%),
linear-gradient(90deg, $color, $color 50%, transparent 50%);
background-size: 100% $top + px, $right + px 100%, 100% $bottom + px, $left + px 100%;
background-repeat: no-repeat;
background-position: top, right top, bottom, left top ;
}
@mixin borderTop($top:1, $color:#ebebf0) {
@include border($top, 0, 0, 0, $color);
}
@mixin borderRight($right:1, $color:#ebebf0) {
@include border(0, $right, 0, 0, $color);
}
@mixin borderBottom($bottom:1, $color:#ebebf0) {
@include border(0, 0, $bottom, 0, $color);
}
@mixin borderLeft($left:1, $color:#ebebf0) {
@include border(0, 0, 0, $left, $color);
}
@mixin borderColor($color:#ebebf0) {
@include border(1, 1, 1, 1, $color);
}
//5、css3的transform:scale 本文由平頭哥聯(lián)盟-首席填坑官?蘇南分享
@mixin borderRadius($width:1,$style:solid,$color:#ebebf0,$radius:2px) {
position:relative;
&:after{
left:0px;
top:0px;
right:-100%;
bottom:-100%;
border-radius:$radius;
border-style: $style;
border-color: $color;
border-width: $width+ px;
position:absolute;
display:block;
transform:scale(0.5);
-webkit-transform:scale(0.5);
transform-origin:0 0;
-webkit-transform-origin:0 0;
content:"";
}
}
display:none在頁(yè)面中是不占位置的，而visibility:hidden保留原來的位置后;
display：none顯示/隱藏 頁(yè)面會(huì)產(chǎn)生回流和重繪的問題，visibility則不會(huì) ——重繪/回流請(qǐng)看JS部分第七題;
Javascript//本文由@IT·平頭哥聯(lián)盟-首席填坑官?蘇南分享,如有錯(cuò)誤，歡迎留言
function b(){
var a=1;
};
function b(){
var a=1;
return ()=>{
a++;
return a;
}
};
let c = b();
c(); //2
c(); //3
c(); //4
ECMAScript 標(biāo)準(zhǔn)定義有7種數(shù)據(jù)類型：??
Boolean
Null
Undefined
Number
String
Symbol?:（ECMAScript 6 新定義 ，Symbol 生成一個(gè)全局唯一、表示獨(dú)一無二的值）?
Object?:（Array、Function、Object）
//方法1:
var separator=(num)=>{
if(!num){
return "0.00";
};
let str = parseFloat(num).toFixed(2);
return str && str
.toString()
.replace(/(d)(?=(d{3})+.)/g, function($0, $1) {
return $1 + ",";
});
}
separator(386485473.88) //"386,485,473.88"
//方法2：
(386485473.88).toLocaleString("en-US") // "386,485,473.88" 由 (sRect)補(bǔ)充
遍歷數(shù)組時(shí)的異同： for循環(huán) 數(shù)組下標(biāo)的typeof類型:number, for in 循環(huán)數(shù)組下標(biāo)的typeof類型:string;