本文由@IT·平頭哥聯盟-首席填坑官?蘇南 分享
前言
前段時間面試(包括阿里巴巴的電話面試)桂塞，遇到過一些面試題凹蜂，且面試中出現機率較高的提問/筆試，有些答的不是很好掛掉了阁危，今天終于有時間整理出來分享給大家玛痊，希望對大家面試有所幫助，都能輕松拿offer狂打。
!> 主要分三部分：html擂煞、css、js趴乡；react/vue等都歸類于js,內容來源于面試過程中遇到的对省、在復習過程中看到認為值得加深鞏固蝗拿、群友交流分享的；如有理解的錯誤或不足之處蒿涎，歡迎留言糾錯哀托、斧正，這里是@IT·平頭哥聯盟劳秋，我是首席填坑官?蘇南(South·Su) _～
魯迅說:世上本無路,只是走的人多了,也就成了路仓手； 分享我們的點滴 盡綿薄之力 助他人成長
HTML
1、什么是盒子模型玻淑？
有些面試官會問你對盒子模型的理解嗽冒，在我們平時看到的網頁中，內部的每一個標簽元素它都是有幾個部分構成的：內容(content)补履、外邊距(margin)添坊、內邊距(padding)、邊框(border)箫锤，四個部分組成贬蛙，當你說完這些面試官是不會滿意這個答案的，因為還有一個重點（IE盒模型和標準盒模型的區(qū)別）———IE盒模型的content包括border谚攒、padding
首席填坑官?蘇南的專欄
2速客、頁面導入樣式時有幾種方法，它們之間有區(qū)別五鲫？
-
link標簽引入溺职，也是當下用的最多的一種方式，它屬于XHTML標簽位喂，除了能加載css外浪耘，還能定義rel、type塑崖、media等屬性; -
@import引入七冲，@import是CSS提供的，只能用于加載CSS; -
style嵌入方式引入规婆，減少頁面請求(優(yōu)點)澜躺，但只會對當前頁面有效，無法復用抒蚜、會導致代碼冗余掘鄙，不利于項目維護(缺點)，此方式一般只會項目主站首頁使用（騰訊嗡髓、淘寶操漠、網易、搜狐）等大型網站主頁饿这，之前有看到過都是這種方式浊伙，但后來有些也舍棄了
小結：
link頁面被加載的時撞秋，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載,且link是XHTML標簽嚣鄙，無兼容問題; link支持動態(tài)js去控制DOM節(jié)點去改變樣式吻贿，而@import不支持，
3哑子、簡單講述一下塊元素廓八、內聯元素、空元素有哪些赵抢，它們之間的區(qū)別？
- 行內元素有：a声功、b烦却、span、img先巴、input其爵、select、textarea伸蚯、em摩渺、img、strong（強調的語氣）;
- 塊級元素有：ul剂邮、ol摇幻、li、dl挥萌、dt绰姻、dd、h1引瀑、h2狂芋、h3、h4…p憨栽、section帜矾、div、form等;
- 空元素： input type="hidden"/>屑柔、br>屡萤、hr>、link>掸宛、meta>;
小結：塊元素總是獨占一行灭衷，margin對內聯元素上下不起作用;
4、說說 cookies旁涤，sessionStorage 翔曲、 localStorage 你對它們的理解迫像？
- cookie是網站為了標示用戶身份而儲存在用戶本地終端上的數據（通常經過加密），cookie數據始終在同源的http請求中攜帶瞳遍，記會在瀏覽器和服務器間來回傳遞闻妓。
- sessionStorage和localStorage不會自動把數據發(fā)給服務器，僅在本地保存掠械。
- 大杏衫隆： cookie數據大小不能超過4k,sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多猾蒂，可以達到5M或更大均唉。
- 時效：
localStorage存儲持久數據，瀏覽器關閉后數據不丟失除非用戶主動刪除數據或清除瀏覽器/應用緩存肚菠；sessionStorage數據在當前瀏覽器窗口關閉后自動刪除舔箭。 -
cookie設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉部分面試官可能還會再深入一些：
1)蚊逢、如何讓cookie瀏覽器關閉就失效层扶？——不對cookie設置任何正、負或0時間的即可;
2)烙荷、sessionStorage在瀏覽器多窗口之間 (同域)數據是否互通共享? ——不會镜会，都是獨立的，localStorage會共享;
3)终抽、能讓localStorage也跟cookie一樣設置過期時間戳表？答案是可以的，在存儲數據時昼伴，也存儲一個時間戳扒袖，get數據之前，先拿當前時間跟你之前存儲的時間戳做比較 詳細可看我之前寫的另一篇分享（小程序項目總結 ）亩码。
5季率、簡述一下你對HTML語義化的理解 ？
語義化是指根據內容的類型描沟，選擇合適的標簽（代碼語義化）,即用正確的標簽做正確的事情; html語義化讓頁面的內容結構化飒泻，結構更清晰，有助于瀏覽器吏廉、搜索引擎解析對內容的抓取; 語義化的HTML在沒有CSS的情況下也能呈現較好的內容結構與代碼結構; 搜索引擎的爬蟲也依賴于HTML標記來確定上下文和各個關鍵字的權重泞遗，利于SEO;
CSS
1、position的static席覆、relative史辙、absolute、fixed它們的區(qū)別？
-
absolute：絕對定位聊倔，元素會相對于值不為 static 的第一個父元素進行定位(會一直往父級節(jié)點查找)晦毙，且它是脫離正常文檔流、不占位的; -
fixed:同樣是絕對定位耙蔑，但元素會相對于瀏覽器窗口進行定位见妒，而不是父節(jié)點的position (IE9以下不支持); -
relative:相對定位，元素相對于自身正常位置進行定位,屬于正常文檔流;static: position的默認值甸陌，也就是沒有定位须揣，當元素設置該屬性后（ top、bottom钱豁、left耻卡、right、z-index ）等屬性將失效; -
inherit:貌似沒用過牲尺，查了一下文檔“規(guī)定從父元素繼承 position 屬性的值”;
2卵酪、如何讓一個元素垂直/水平（垂直水平）都居中，請列出你能想到的幾種方式秸谢？
- 水平垂直居中 —— 方式一
<div class="div-demo">首席填坑官?蘇南的專欄</div>
<style>
.div-demo{
width:100px;
height:100px;
background-color:#06c;
margin: auto;
position:absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>
- 水平垂直居中 —— 方式二
<style>
.div-demo{
width:100px;
height:100px;
background-color:#06c;
margin: auto;
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
}
</style>
- 水平垂直居中 —— 方式三，（新舊伸縮盒兼容）
<body class="container">
<div class="div-demo"></div>
<style>
html,body{
height:100%;
}
.container{
display: box;
display: -webkit-box;
display: flex;
display: -webkit-flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
.div-demo{
width:100px;
height:100px;
background-color:#06c;
}
</style>
</body>
3霹肝、項目中有用純CSS樣式寫過 三角形icon嗎估蹄？
<body class="container">
<div class="div-angles">首席填坑官?蘇南的專欄</div>
<div class="div-angles right"></div>
<div class="div-angles bottom"></div>
<div class="div-angles left"></div>
<style>
html,body{
height:100%;
}
.container{
display: box;
display: -webkit-box;
display: flex;
display: -webkit-flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
.div-angles{
width: 0;
height: 0;
border-style: solid;
border-width:30px;
width:0px;
height:0px;
border-color: transparent transparent #06c transparent;
}
.right{
border-color: transparent transparent transparent #06c ;
}
.bottom{
border-color: #06c transparent transparent ;
}
.left{
border-color: transparent #06c transparent transparent;
}
</style>
</body>
歡迎您加入我們，一起分享您過往的成長點滴沫换，寫下您的心靈歷程
4臭蚁、什么是外邊距合并,項目中是否有遇到過?
- 有，外邊距合并指的是讯赏，當兩個垂直元素的都設置有margin外邊距相遇時垮兑，它們將形成一個外邊距。 合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的值中的較大那個漱挎。
5系枪、:before 和 :after兩偽元素，平時都是使用雙冒號還是單冒號磕谅？有什么區(qū)別私爷？以及它們的作用：
- 單冒號(:)用于CSS3偽類，雙冒號(::)用于CSS3偽元素膊夹。（偽元素由雙冒號和偽元素名稱組成） ;
- 雙冒號是在當前規(guī)范中引入的衬浑，用于區(qū)分偽類和偽元素。不過瀏覽器需要同時支持舊的已經存在的偽元素寫法放刨，比如:first-line工秩、:first-letter、:before、:after等助币，
而新的在CSS3中引入的偽元素則不允許再支持舊的單冒號的寫法; - 想讓插入的內容出現在其它內容前浪听，使用
::before，之后則使用::after奠支； 在代碼順序上馋辈，::after生成的內容也比::before生成的內容靠后。
如果按堆棧視角倍谜，::after生成的內容會在::before生成的內容之上;
6迈螟、Chrome、Safari等瀏覽器尔崔，當表單提交用戶選擇記住密碼后答毫，下次自動填充表單的背景變成黃色，影響了視覺體驗是否可以修改季春？
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: #fff;//設置成元素原本的顏色
background-image: none;
color: rgb(0, 0, 0);
}
//方法2：由(licongwen )補充洗搂，首席填坑官?蘇南的專欄
input:-webkit-autofill {
-webkit-box-shadow: 0px 0 3px 100px #ccc inset; //背景色
}
7、瀏覽器的最小字體為12px载弄，如果還想再小耘拇，該怎么做？
- 用圖片：如果是展示的內容基本是固定不變的話宇攻，可以直接切圖兼容性也完美(不到萬不得已惫叛，不建議);
- 找UI設計師溝通：為了兼容各大主流瀏覽器，避免后期設計師來找你撕逼逞刷，主動找TA溝通嘉涌，講明原因 ————注意語氣，好好說話不要激動夸浅，更不能攜刀相逼;
- CSS3：css3的樣式transform: scale(0.7)仑最，scale有縮放功能;
- 又去找chrome復習了一下，說是 “display:table;display: table-cell;” 可以做到帆喇，沒用過警医。
8、移動端的邊框0.5px,你有幾種方式實現坯钦？
- devicePixelRatio:它是window對象中有一個devicePixelRatio屬性法严，設備物理像素和設備獨立像素的比例，也就是 devicePixelRatio = 物理像素 / 獨立像素;這種方式好麻煩葫笼，js檢測深啤，再給元素添加類名控制，難維護;
- 切圖：直接.5px的切圖路星，這種方式太low溯街，建議還是別用了诱桂，特別難維護，高清屏就糊了,更重要的是被同行看到會覺得你們很渣渣～;
- image背景：css3的background-image:
linear-gradient呈昔，缺點就是：樣式多挥等，遇到圓角這個方案就杯劇了; box-shadow:網上看到說使用box-shadow模擬邊框，box-shadow: inset 0px -1px 1px -1px #06c;沒用過堤尾，不過多評論肝劲，建議自己百度; - 偽類縮放：現在用的比較多的方式之一 :after 1px然后transform: scale(0.5);基本能滿足所有場景，對于圓角的處理也很方便;
貼上3郭宝、5兩方案代碼辞槐，也是目前公司一直在用的(預處理SCSS)：
//3、css3的background-image 本文由@IT·平頭哥聯盟-首席填坑官?蘇南分享
@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 本文由@IT·平頭哥聯盟-首席填坑官?蘇南分享
@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:'';
}
}
8榄檬、display:none與visibility:hidden兩者的區(qū)別？
- display:none在頁面中是不占位置的衔统，而visibility:hidden保留原來的位置后;
- display：none顯示/隱藏 頁面會產生回流和重繪的問題鹿榜，visibility則不會 ——
重繪/回流請看JS部分第七題;
9、CSS樣式優(yōu)先級排序如何計算的锦爵？
- 同權重: 內聯樣式表（標簽內部）> 嵌入樣式表（當前文件中）> 外部樣式表（外部文件中）舱殿。
- !important > id > class > tag
- important 比 內聯優(yōu)先級高
10、li與li之間有看不見的空白間隔是什么原因引起的险掀？你是怎么解決的沪袭？
- 行框的排列會受到中間空白（回車\空格）等的影響，因為空格也屬于字符,這些空白也會被應用樣式迷郑，占據空間枝恋，所以會有間隔创倔，把字符大小設為0嗡害，就沒有空格了畦攘。
Javascript
1霸妹、請將下列b函數進行修改知押，保證每次調用a都能+1（考閉包）:
//本文由IT@IT·平頭哥聯盟-首席填坑官?蘇南分享,如有錯誤叹螟，歡迎留言
function b(){
var a=1;
};
function b(){
var a=1;
return ()=>{
a++;
return a;
}
};
let c = b();
c(); //2
c(); //3
c(); //4
####### 2、js有哪些基本數據類型：
ECMAScript 標準定義有7種數據類型：
BooleanNullUndefinedNumberString-
Symbol:（ECMAScript 6 新定義 台盯，Symbol 生成一個全局唯一罢绽、表示獨一無二的值） -
Object:（Array、Function静盅、Object）
3良价、用js將 386485473.88 轉換為 386,485,473.88（千位分割符）：
//方法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)補充
4、js的 for 跟for in 循環(huán)它們之間的區(qū)別？
- 遍歷數組時的異同：
for循環(huán) 數組下標的typeof類型:number, for in 循環(huán)數組下標的typeof類型:string;
var southSu = ['蘇南','深圳','18','男'];
for(var i=0;i<southSu.length;i++){
console.log(typeof i); //number
console.log(southSu[i]);// 蘇南 , 深圳 , 18 , 男
}
var arr = ['蘇南','深圳','18','男','帥氣',"@IT·平頭哥聯盟-首席填坑官"];
for(var k in arr){
console.log(typeof k);//string
console.log(arr[k]);// 蘇南 , 深圳 , 18 , 男 , 帥氣,@IT·平頭哥聯盟-首席填坑官
}
- 遍歷對象時的異同：
for循環(huán) 無法用于循環(huán)對象明垢，獲取不到obj.length; for in 循環(huán)遍歷對象的屬性時蚣常，原型鏈上的所有屬性都將被訪問，解決方案：使用hasOwnProperty方法過濾或Object.keys會返回自身可枚舉屬性組成的數組
Object.prototype.test = '原型鏈上的屬性,本文由@IT·平頭哥聯盟-首席填坑官?蘇南分享';
var southSu = {name:'蘇南',address:'深圳',age:18,sex:'男',height:176};
for(var i=0;i<southSu.length;i++){
console.log(typeof i); //空
console.log(southSu[i]);//空
}
for(var k in southSu){
console.log(typeof k);//string
console.log(southSu[k]);// 蘇南 , 深圳 , 18 , 男 , 176 ,本文由@IT·平頭哥聯盟-首席填坑官?蘇南分享
}
5痊银、給table表格中的每個td綁定事件抵蚊，td數量為1000+谣妻，寫一下你的思路(事件委托題)：
<body class="container">
<table id="table">
<tr><td>我們是@IT·平頭哥聯盟</td><td>惧财，我是首席填坑官</td><td>蘇南</td><td>前端開發(fā)</td><td>優(yōu)秀</td></tr>
<tr><td>我們是@IT·平頭哥聯盟</td><td>，我是首席填坑官</td><td>蘇南</td><td>前端開發(fā)</td><td>優(yōu)秀</td></tr>
<tr><td>我們是@IT·平頭哥聯盟</td><td>操骡，我是首席填坑官</td><td>蘇南</td><td>前端開發(fā)</td><td>優(yōu)秀</td></tr>
…………
</table>
<script>
let table =document.querySelector("#table");
table.addEventListener("click",(e)=>{
let {nodeName} = e.target;
if(nodeName.toUpperCase() === "TD"){
console.log(e.target);//<td>N</td>
}
},false);
</script>
</body>
6鬓照、js把一串字符串去重(能統(tǒng)計出字符重復次數更佳)熔酷，列出你的思路（兩種以上）：
<script>
let str = "12qwe345671dsfa233dsf9876ds243dsaljhkjfzxcxzvdsf本文由@IT·平頭哥聯盟-首席填坑官?蘇南分享";
let array = str.split("");
//方案一：
array = [...new Set(array)].join("");
array = ((a)=>[...new Set(a)])(array).join("");
console.log(array);//12qwe34567dsfa98ljhkzxcv本文由@IT·平頭哥聯盟-首席填坑官?蘇南分享 只能過濾，不會統(tǒng)計
//方案二：
function unique (arr) {
const seen = new Map()
return (arr.filter((a) => !seen.has(a) && seen.set(a, 1))).join("");
}
console.log(unique(array)) // 12qwe34567dsfa98ljhkzxcv本文由@IT·平頭哥聯盟-首席填坑官?蘇南分享
//方案三：
function unique (arr) {
let arrs=[];
var news_arr = arr.sort();//排序能減少一次循環(huán)
for(var i=0;i<news_arr.length;i++){
if(news_arr[i] == news_arr[i+1] && news_arr[i]!= news_arr[i-1] ){
arrs.push(arr[i]);
};
};
return arrs.join("");
}
console.log(unique(array)) // 12qwe34567dsfa98ljhkzxcv本文由@IT·平頭哥聯盟-首席填坑官?蘇南分享
//方案四：
function unique (arr) {
let obj={};
for(var i=0;i<arr.length;i++){
let key = arr[i];
if(!obj[key] ){
obj[key]=1;
}else{
obj[key]+=1;
}
};
return obj;
}
console.log(unique(array)) // object 對應每個key以及它重復的次數
</script>
7豺裆、項目上線前拒秘，你們做過哪些性能優(yōu)化：
- 圖片預加載，css樣式表放在頂部且link鏈式引入臭猜，javascript放在底部body結束標簽前;
- 使用dns-prefetch對項目中用到的域名進行 DNS 預解析躺酒，減少 DNS 查詢，如： <link rel="dns-prefetch" />;
- 減少http請求次數:圖片靜態(tài)資源使用CDN托管;
- API接口數據設置緩存蔑歌，CSS Sprites/SVG Sprites(如有疑惑：該如何以正確的姿勢插入SVG Sprites? 這篇說的很詳細), JS羹应、CSS源碼壓縮、圖片大小控制合適次屠，使用iconfont(+ 字體圖標)或SVG园匹，它們比圖片更小更清晰，網頁Gzip壓縮;
- 減少DOM操作次數劫灶，優(yōu)化javascript性能;
- 減少 DOM 元素數量裸违，合理利用:after、:before等偽類;
- 避免重定向本昏、圖片懶加載;前后端分離開發(fā)供汛，資源按需加載，最好能做到首屏直出(即服務端渲染);
- 避免使用CSS Expression（css表達式)又稱Dynamic properties(動態(tài)屬性) ;
- 多域名分發(fā)劃分內容到不同域名涌穆，解決瀏覽器域名請求并發(fā)數問題怔昨，同時也解決了請求默認攜帶的cookie問題;
- 盡量減少 iframe 使用，它會阻塞主頁面的渲染; 對所有資源壓縮 JavaScript 宿稀、 CSS 趁舀、字體、圖片等祝沸，甚至html;
- 只想到這些矮烹，歡迎補充……
8巡蘸、你對重繪、重排的理解擂送？
- 首先網頁數次渲染生成時悦荒，這個可稱為重排;
- 修改DOM、樣式表嘹吨、用戶事件或行為（鼠標懸停搬味、頁面滾動、輸入框鍵入文字蟀拷、改變窗口大小等等）這些都會導致頁面重新渲染碰纬，那么重新渲染，就需要重新生成布局和重新繪制節(jié)點问芬，前者叫做"重排"悦析，后者"重繪";
- 減少或集中對頁面的操作，即多次操作集中在一起執(zhí)行;
- 總之可以簡單總結為：重繪不一定會重排此衅，但重排必然為會重繪强戴。
- 更詳細的可以看阮老師分析
8、有用過promise嗎挡鞍？請寫出下列代碼的執(zhí)行結果骑歹，并寫出你的理解思路：
setTimeout(()=>{
console.log(1);
}, 0);
new Promise((resolve)=>{
console.log(2);
for(var i = 1; i < 200; i++){
i = 198 && resolve();
}
console.log(3);
}).then(()=>{
console.log(4);
});
console.log(5);
// 結果：2、3墨微、5道媚、4、1;
- 首先要講一下翘县，js是單線程執(zhí)行最域，那么代碼的執(zhí)行就有先后;
- 有先后，那就要有規(guī)則(排隊)锈麸，不然就亂套了镀脂，那么如何分先后呢？大體分兩種：同步掐隐、異步;
- 同步很好理解狗热，就不用多說了(我就是老大,你們都要給我讓路);
- 異步(定時器[setTimeout 钞馁，setInterval]虑省、事件、ajax僧凰、promise等)探颈，說到異步又要細分宏任務、微任務兩種機制训措，
-
宏任務：js異步執(zhí)行過程中遇到宏任務伪节，就先執(zhí)行宏任務光羞，將宏任務加入執(zhí)行的隊列(event queue),然后再去執(zhí)行微任務; -
微任務：js異步執(zhí)行過程中遇到微任務，也會將任務加入執(zhí)行的隊列(event queue)怀大，但是注意這兩個queue身份是不一樣的纱兑，不是你先進來，就你先出去的（就像宮里的皇上選妃侍寢一樣化借，不是你先進宮(或先來排隊)就先寵幸的 ）潜慎，真執(zhí)行的時候是先微任務里拿對應回調函數，然后才輪到宏任務的隊列回調執(zhí)行的; - 理解了這個順序蓖康，那上面的結果也就不難懂了铐炫。
說細步驟如下：
setTimeout 是異步，不會立即執(zhí)行蒜焊，加入執(zhí)行隊列;
new Promise 會立即執(zhí)行 輸出 2倒信、3，而在2泳梆、3之間執(zhí)行了resolve 也就是微任務;
再到console.log(5)了鳖悠，輸出5;
然后異步里的微任務先出，那就得到4;
最后執(zhí)行宏任務 setTimeout 輸出 1;
如有錯誤歡迎糾正优妙！
9竞穷、new SouthSu() 在這個過程中都做了些什么？
function SouthSu(){
this.name = "蘇南";
this.age = 18;
this.address = "深圳";
this.address = "首席填坑官";
};
let South = new SouthSu();
console.log(South,South.__proto__ === SouthSu.prototype) //true
執(zhí)行過程：
創(chuàng)建一個空的對象
let p1 = new Object();
設置原型鏈
p1.__proto__ = SouthSu.prototype;
讓 構造函數 的this 指向 p1 這個空對象
let funCall = SouthSu.call(p1);
處理 構造函數 的返回值：判斷SouthSu的返回值類型鳞溉，如果是值類型則返回obj瘾带，如果是引用類型，就返回這個引用類型的對象;
10熟菲、工作中如果讓你使用js實現一個持續(xù)的動畫看政，你會怎么做(比如轉盤抽獎)？抄罕？
- js來實現動畫允蚣，第一時間想到的就是定時器(setTimeout、setInterval);
- 后面想起來js有個 window.requestAnimationFrame 呆贿，當時只是說了記得有這么一個API嚷兔，具體的細節(jié)沒能答上，面試官直言想聽的就是這個API的使用做入，好吧是我準備的不夠充分冒晰，希望其他同學不再犯同樣錯誤;
window.requestAnimationFrame()方法告訴瀏覽器您希望執(zhí)行動畫并請求瀏覽器在下一次重繪之前調用指定的函數來更新動畫。該方法使用一個回調函數作為參數竟块，這個回調函數會在瀏覽器重繪之前調用,回調的次數通常是每秒60次壶运，是大多數瀏覽器通常匹配 W3C 所建議的刷新頻率。在大多數瀏覽器里浪秘，當運行在后臺標簽頁或者隱藏的<iframe>里時蒋情，requestAnimationFrame() 會暫停調用以提升性能和電池壽命埠况。
小結：以往項目開發(fā)中大數人可能都是第一時間選擇JS定時器
setInterval或者setTimeout來控制的動畫每隔一段時間刷新元素的狀態(tài)，來達到自己所想要的動畫效果棵癣，但是這種方式并不能準確地控制動畫幀率辕翰，因為這是開發(fā)者主動要求瀏覽器去繪制，它這可能會因為動畫控制的時間狈谊、繪制的頻率金蜀、瀏覽器的特性等而導致丟幀的問題;requestAnimationFrame是瀏覽器什么時候要開始繪制了瀏覽器它自己知道，通過requestAnimationFrame告訴我們的畴，這樣就不會出現重復繪制丟失的問題渊抄。
//一個持續(xù)旋轉的正方形，
<div class="angle-div"></div>
<script>
let timer = null;
let Deg = 0;
let distance = 360;
var _requestAnimationFrame_ = window.requestAnimationFrame || window.webkitRequestAnimationFrame;//本文由@IT·平頭哥聯盟-首席填坑官?蘇南分享
let angleDiv = document.querySelector(".angle-div");
cancelAnimationFrame(timer);
let fn = ()=>{
if(Deg < distance){
Deg++;
}else{
Deg=0;
};
angleDiv.style.transform = `rotateZ(${Deg}deg) translateZ(0)`;
angleDiv.style.WebkitTransform = `rotateZ(${Deg}deg) translateZ(0)`;
timer = _requestAnimationFrame_(fn);
}
timer = _requestAnimationFrame_(fn);
</script>
`蜜獾`(huan),綽號 `平頭哥` 被稱為最無所畏懼的動物
11丧裁、如何設置http緩存护桦？
1)、Expires
-
Expires的值為服務端返回的到期時間煎娇，響應時告訴瀏覽器可以直接從瀏覽器緩存中讀取無需再次請求二庵。
缺點：返回的是服務端的時間，比較的時間是客戶端的時間缓呛，如果時間不一致有可能出現錯誤催享。
2)、Cache-Control
-
Cache-Control可設置的字段有： -
private：客戶端可以緩存 -
public：客戶端和代理服務器都可以緩存 -
max-age=xxx：緩存內容在xxx秒后失效 -
no-cache：需要用另一種緩存策略來驗證緩存(ETag,Last-Modified) -
no-store：不進行緩存 -
Last-Modified：瀏覽器請求獲得文件后哟绊，服務器返回該文件的最后修改時間Last-Modified因妙，下一次請求會帶上If-Modified-Since標識，如果If-Modified-Since等于服務器的文件修改時間票髓，則表示文件沒有修改攀涵，返回304狀態(tài)碼，瀏覽器從瀏覽器緩存中讀取文件洽沟。如果If-Modified-Since小于服務端的文件修改時間以故，則瀏覽器會重新發(fā)送請求獲取文件，返回狀態(tài)碼200裆操。 -
ETag：服務器文件的一個唯一標識怒详，例如對文件內容取md5值作為ETag的字段返回給瀏覽器。當文件變化時ETag的值也會發(fā)生變化踪区。下次請求會帶上If-None-Match即瀏覽器保留的ETag值昆烁，如果發(fā)送了變化，則文件被修改朽缴，需要重新請求善玫，返回200狀態(tài)碼水援。反之瀏覽器就從緩存中讀取文件密强，返回304狀態(tài)碼茅郎。
總結:——幾者之間的關系
- 當
Cache-Control設置為max-age=xx并且同事設置Expires時，Cache-Control的優(yōu)先級更高- 當
ETag和Last-Modified同時存在時或渤，服務器先會檢查ETag系冗，然后再檢查Last-Modified，最終決定返回304還是200- 該題由 本文由@IT·平頭哥聯盟-成員(
ZodiacSyndicate)補充
12薪鹦、隨機打亂一個數組
- 思路：從數組的最后一項開始掌敬，隨機選擇前面的一個元素進行交換，然后一步步往前交換
//該題由 本文由@IT·平頭哥聯盟-成員(ZodiacSyndicate )補充
const shuffle = arr => {
let end = arr.length - 1
while(end) { // 當end為0時不需要交換
const index = Math.floor(Math.random() * (end + 1))
[arr[index], arr[end]] = [arr[end], arr[index]]
end -= 1
}
return arr
}
13池磁、用React實現一個顯示鼠標位置的高階組件
//該題由 本文由@IT·平頭哥聯盟-成員(ZodiacSyndicate )補充
const mousePosition = Component => class extends React.Component {
state = {
x: 0,
y: 0,
}
handleMouseMove = e => {
this.setState({
x: e.clientX,
y: e.clientY
})
}
render() {
const { x, y } = this.state
return (
<>
<div onMouseMove={this.handleMouseMove}>
<Component {...this.props} />
</div>
<span>x: {x}</span>
<span>y: {y}</span>
</>
)
}
}
文本將持續(xù)更新奔害，整理收集自己/群友的面經分享給大家，如果覺得不錯那就請關注下方的 公眾號地熄，有驚喜哦华临。
寶劍鋒從磨礪出，梅花香自苦寒來端考，做有溫度的攻城獅雅潭，公眾號：honeyBadger8
作者：首席填坑官?蘇南
交流群：912594095，公眾號：honeyBadger8
本文原創(chuàng)却特，著作權歸作者所有扶供。商業(yè)轉載請聯系@IT·平頭哥聯盟獲得授權，非商業(yè)轉載請注明原鏈接及出處裂明。
