那些年面過的坑，都在這里了～

本文轉載自查看原文 2018-10-25 19:35 1009 面試/ css/ javascript技術干貨/ 前端/ html/ 性能/ javascript

本文由@IT·平頭哥聯盟-首席填坑官∙蘇南分享，公眾號：honeyBadger8,首席填坑官∙蘇南的專欄,梅斌的專欄

前言

　　前段時間面試(包括阿里巴巴的電話面試)，遇到過一些面試題，且面試中出現機率較高的提問/筆試，有些答的不是很好掛掉了，今天終於有時間整理出來分享給大家，希望對大家面試有所幫助，都能輕松拿offer。

主要分三部分：html、css、js；react/vue等都歸類於js,內容來源於面試過程中遇到的、在復習過程中看到認為值得加深鞏固、群友交流分享的；如有理解的錯誤或不足之處，歡迎留言糾錯、斧正，這里是@IT·平頭哥聯盟，我是首席填坑官∙蘇南(South·Su) ^_～

　　本文由@IT·平頭哥聯盟-首席填坑官∙蘇南分享，公眾號：honeyBadger8,君自故鄉來，應知故鄉事。來日綺窗前，寒梅着花未？——唐·王維

HTML

1、什么是盒子模型？

　　有些面試官會問你對盒子模型的理解，在我們平時看到的網頁中，內部的每一個標簽元素它都是有幾個部分構成的：內容(content)、外邊距(margin)、內邊距(padding)、邊框(border)，四個部分組成，當你說完這些面試官是不會滿意這個答案的，因為還有一個重點（IE盒模型和標准盒模型的區別）———IE盒模型的content包括border、padding

本文由@IT·平頭哥聯盟-首席填坑官∙蘇南分享,首席填坑官∙蘇南的專欄,梅斌的專欄

2、頁面導入樣式時有幾種方法，它們之間有區別？

link標簽引入，也是當下用的最多的一種方式，它屬於XHTML標簽，除了能加載css外，還能定義rel、type、media等屬性;
@import引入，@import是CSS提供的，只能用於加載CSS;
style 嵌入方式引入，減少頁面請求(優點)，但只會對當前頁面有效，無法復用、會導致代碼冗余，不利於項目維護(缺點)，此方式一般只會項目主站首頁使用（騰訊、淘寶、網易、搜狐）等大型網站主頁，之前有看到過都是這種方式，但后來有些也舍棄了

小結：link頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載,且link是XHTML標簽，無兼容問題; link支持動態js去控制DOM節點去改變樣式，而@import不支持，

3、簡單講述一下塊元素、內聯元素、空元素有哪些，它們之間的區別？

行內元素有：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不會自動把數據發給服務器，僅在本地保存。
大小： 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它們的區別？

absolute：絕對定位，元素會相對於值不為 static 的第一個父元素進行定位(會一直往父級節點查找)，且它是脫離正常文檔流、不占位的;
fixed:同樣是絕對定位，但元素會相對於瀏覽器窗口進行定位，而不是父節點的position (IE9以下不支持);
relative:相對定位，元素相對於自身正常位置進行定位,屬於正常文檔流;static: position的默認值，也就是沒有定位，當元素設置該屬性后（ top、bottom、left、right、z-index ）等屬性將失效;
inherit:貌似沒用過，查了一下文檔“規定從父元素繼承 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>

本文由@IT·平頭哥聯盟-首席填坑官∙蘇南分享，公眾號：honeyBadger8

4、什么是外邊距合並,項目中是否有遇到過?

有，外邊距合並指的是，當兩個垂直元素的都設置有margin外邊距相遇時，它們將形成一個外邊距。合並后的外邊距的高度等於兩個發生合並的外邊距的值中的較大那個。

5、:before 和 :after兩偽元素，平時都是使用雙冒號還是單冒號？有什么區別？以及它們的作用：

單冒號(:)用於CSS3偽類，雙冒號(::)用於CSS3偽元素。（偽元素由雙冒號和偽元素名稱組成） ;
雙冒號是在當前規范中引入的，用於區分偽類和偽元素。不過瀏覽器需要同時支持舊的已經存在的偽元素寫法，比如: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:'';
    }
}

display:none與visibility:hidden兩者的區別？

display:none在頁面中是不占位置的，而visibility:hidden保留原來的位置后;
display：none顯示/隱藏頁面會產生回流和重繪的問題，visibility則不會 ——重繪/回流請看JS部分第七題;

Javascript

1、請將下列b函數進行修改，保證每次調用a都能+1（考閉包）:

//本文由@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種數據類型：

Boolean
Null
Undefined
Number
String
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 循環它們之間的區別？

遍歷數組時的異同： for循環數組下標的typeof類型:number, for in 循環數組下標的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循環無法用於循環對象，獲取不到obj.length; for in 循環遍歷對象的屬性時，原型鏈上的所有屬性都將被訪問，解決方案：使用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>首席填坑官∙蘇南的專欄,梅斌的專欄</td><td>優秀</td></tr>
		<tr><td>我們是@IT·平頭哥聯盟</td><td>，我是首席填坑官</td><td>蘇南</td><td>前端開發</td><td>優秀</td></tr>
		<tr><td>我們是@IT·平頭哥聯盟</td><td>，我是首席填坑官</td><td>蘇南</td><td>首席填坑官∙蘇南的專欄,梅斌的專欄</td><td>優秀</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把一串字符串去重(能統計出字符重復次數更佳)，列出你的思路（兩種以上）：

<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·平頭哥聯盟-首席填坑官∙蘇南分享  只能過濾，不會統計

	//方案二：
	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();//排序能減少一次循環
		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、項目上線前，你們做過哪些性能優化：

圖片預加載，css樣式表放在頂部且link鏈式引入，javascript放在底部body結束標簽前;
使用dns-prefetch對項目中用到的域名進行 DNS 預解析，減少 DNS 查詢，如： ;
減少http請求次數:圖片靜態資源使用CDN托管;
API接口數據設置緩存，CSS Sprites/SVG Sprites(如有疑惑：該如何以正確的姿勢插入SVG Sprites? 這篇說的很詳細), JS、CSS源碼壓縮、圖片大小控制合適，使用iconfont(+ 字體圖標)或SVG，它們比圖片更小更清晰，網頁Gzip壓縮;
減少DOM操作次數，優化javascript性能;
減少 DOM 元素數量，合理利用:after、:before等偽類;
避免重定向、圖片懶加載;前后端分離開發，資源按需加載，最好能做到首屏直出(即服務端渲染);
避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性) ;
多域名分發划分內容到不同域名，解決瀏覽器域名請求並發數問題，同時也解決了請求默認攜帶的cookie問題;
盡量減少 iframe 使用，它會阻塞主頁面的渲染; 對所有資源壓縮 JavaScript 、 CSS 、字體、圖片等，甚至html;
只想到這些，歡迎補充……

8、你對重繪、重排的理解？

首先網頁數次渲染生成時，這個可稱為重排;
修改DOM、樣式表、用戶事件或行為（鼠標懸停、頁面滾動、輸入框鍵入文字、改變窗口大小等等）這些都會導致頁面重新渲染，那么重新渲染，就需要重新生成布局和重新繪制節點，前者叫做"重排"，后者"重繪";
減少或集中對頁面的操作，即多次操作集中在一起執行;
總之可以簡單總結為：重繪不一定會重排，但重排必然為會重繪。
更詳細的可以看阮老師分析

8、有用過`promise`嗎？請寫出下列代碼的執行結果，並寫出你的理解思路：

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是單線程執行，那么代碼的執行就有先后;
有先后，那就要有規則(排隊)，不然就亂套了，那么如何分先后呢？大體分兩種：同步、異步;
同步很好理解，就不用多說了(我就是老大,你們都要給我讓路);
異步(定時器[setTimeout ，setInterval]、事件、ajax、promise等)，說到異步又要細分宏任務、微任務兩種機制，
宏任務：js異步執行過程中遇到宏任務，就先執行宏任務，將宏任務加入執行的隊列(event queue),然后再去執行微任務;
微任務：js異步執行過程中遇到微任務，也會將任務加入執行的隊列(event queue)，但是注意這兩個queue身份是不一樣的，不是你先進來，就你先出去的（就像宮里的皇上選妃侍寢一樣，不是你先進宮(或先來排隊)就先寵幸的），真執行的時候是先微任務里拿對應回調函數，然后才輪到宏任務的隊列回調執行的;
理解了這個順序，那上面的結果也就不難懂了。

說細步驟如下：
setTimeout 是異步，不會立即執行，加入執行隊列;
new Promise 會立即執行輸出 2、3，而在2、3之間執行了resolve 也就是微任務;
再到console.log(5)了，輸出5;
然后異步里的微任務先出，那就得到4;
最后執行宏任務 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 

執行過程：
創建一個空的對象
 let p1 = new Object();


設置原型鏈
	p1.__proto__ = SouthSu.prototype;

讓 構造函數 的this 指向 p1 這個空對象

	let funCall = SouthSu.call(p1);

處理 構造函數 的返回值：判斷SouthSu的返回值類型，如果是值類型則返回obj，如果是引用類型，就返回這個引用類型的對象;

10、工作中如果讓你使用js實現一個持續的動畫，你會怎么做(比如轉盤抽獎)？？

js來實現動畫，第一時間想到的就是定時器(setTimeout、setInterval);
后面想起來js有個 window.requestAnimationFrame ，當時只是說了記得有這么一個API，具體的細節沒能答上，面試官直言想聽的就是這個API的使用，好吧是我准備的不夠充分，希望其他同學不再犯同樣錯誤;

window.requestAnimationFrame() 方法告訴瀏覽器您希望執行動畫並請求瀏覽器在下一次重繪之前調用指定的函數來更新動畫。該方法使用一個回調函數作為參數，這個回調函數會在瀏覽器重繪之前調用,回調的次數通常是每秒60次，是大多數瀏覽器通常匹配 W3C 所建議的刷新頻率。在大多數瀏覽器里，當運行在后台標簽頁或者隱藏的<iframe> 里時，requestAnimationFrame() 會暫停調用以提升性能和電池壽命。

小結：以往項目開發中大數人可能都是第一時間選擇JS定時器setInterval 或者setTimeout 來控制的動畫每隔一段時間刷新元素的狀態，來達到自己所想要的動畫效果，但是這種方式並不能准確地控制動畫幀率，因為這是開發者主動要求瀏覽器去繪制，它這可能會因為動畫控制的時間、繪制的頻率、瀏覽器的特性等而導致丟幀的問題; requestAnimationFrame 是瀏覽器什么時候要開始繪制了瀏覽器它自己知道，通過requestAnimationFrame告訴我們，這樣就不會出現重復繪制丟失的問題。

//一個持續旋轉的正方形，
<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>

本文由@IT·平頭哥聯盟-首席填坑官∙蘇南分享,首席填坑官∙蘇南的專欄,梅斌的專欄

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狀態碼，瀏覽器從瀏覽器緩存中讀取文件。如果If-Modified-Since小於服務端的文件修改時間，則瀏覽器會重新發送請求獲取文件，返回狀態碼200。
ETag：服務器文件的一個唯一標識，例如對文件內容取md5值作為ETag的字段返回給瀏覽器。當文件變化時ETag的值也會發生變化。下次請求會帶上If-None-Match即瀏覽器保留的ETag值，如果發送了變化，則文件被修改，需要重新請求，返回200狀態碼。反之瀏覽器就從緩存中讀取文件，返回304狀態碼。

總結:——幾者之間的關系

當Cache-Control設置為max-age=xx並且同事設置Expires時，Cache-Control的優先級更高

當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>
      </>
    )
  }
}

文本將持續更新，整理收集自己/群友的面經分享給大家，覺得不錯記得 Star、Star、Watch 哦，感謝！

寶劍鋒從磨礪出，梅花香自苦寒來，做有溫度的攻城獅，公眾號：honeyBadger8,首席填坑官∙蘇南的專欄,梅斌的專欄

猜您還喜歡：

做完小程序項目、老板給我加了6k薪資～
面試踩過的坑，都在這里了～
你應該做的前端性能優化之總結大全！
手把手教你如何繪制一輛會跑車
 如何用CSS3畫出懂你的3D魔方？
SVG Sprites Icon的使用技巧
 immutability因React官方出鏡之使用總結分享！

作者：首席填坑官∙蘇南

鏈接：https://blog.csdn.net/weixin_43254766/article/details/83119712

交流群：912594095，公眾號：honeyBadger8

本文原創，著作權歸作者所有。商業轉載請聯系@IT·平頭哥聯盟獲得授權，非商業轉載請注明鏈接及出處。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Spring 事務的那些坑，都在這里了！關於哈希的一切，都在這里了！ MySQL 5.7.30 的安裝/升級（所有可能的坑都在這里） NSURLSession 所有的都在這里(二) NSURLSession 所有的都在這里(一) 微信小程序訂閱消息，我踩過的坑都在這里了！你需要掌握的有關.NET DateTime類型的知識點和坑位都在這里關於BI，你想知道的都在這里你想了解的 HTTPS 都在這里關於Monkey的一切都在這里