1. 什么是防抖准潭，什么是截流攘乒？
在前端開發(fā)中，有一部分用戶行為會頻繁的觸發(fā)事件惋鹅，而對于DOM操作则酝、資源加載等耗費性能的處理，很可能會導(dǎo)致卡頓闰集，甚至瀏覽器的崩潰沽讹。防抖和節(jié)流就是為了解決這一類的問題。
防抖：
將幾次操作合并為一次操作進(jìn)行武鲁。設(shè)置一個計時器爽雄，規(guī)定在延遲時間后觸發(fā)函數(shù)，但是在延遲時間內(nèi)如果再次觸發(fā)沐鼠，就會取消之前的計時器挚瘟。如此，只有最后一次操作能觸發(fā)饲梭。
例如回到頂部這一情景乘盖，代碼如如果在200ms內(nèi)沒有再次觸發(fā)滾動事件，那么就執(zhí)行函數(shù)憔涉；
如果在200ms內(nèi)再次觸發(fā)滾動事件订框，那么當(dāng)前的計時取消，重新開始計時兜叨。
function debounce(fn,delay){
let timer = null;
return function() {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, arguments);
}, delay);
}
}
function showTop () {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('滾動條位置：' + scrollTop);
}
window.onscroll = debounce(showTop,200) ;
截流：
將多次執(zhí)行變成每隔一段時間執(zhí)行穿扳。
function flowFun(fn,delay) {
let canRun = true;
return function () {
if (!canRun)
return;
canRun = false; // 立即設(shè)置為false
setTimeout(() => { // 將外部傳入的函數(shù)的執(zhí)行放在setTimeout中
fn.apply(this, arguments);
// 在setTimeout執(zhí)行完畢后再把標(biāo)記設(shè)置為true，表示可以執(zhí)行下一次循環(huán)
canRun = true;
}, delay);
};
}
function sayHi(e) {
console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize',flowFun(sayHi,200));
區(qū)別：防抖動和節(jié)流本質(zhì)是不一樣的国旷。防抖動是將多次執(zhí)行變?yōu)樽詈笠淮螆?zhí)行矛物，節(jié)流是將多次執(zhí)行變成每隔一段時間執(zhí)行。假設(shè)一個用戶一直觸發(fā)這個函數(shù)跪但，且每次觸發(fā)函數(shù)的間隔小于wait履羞，防抖的情況下只會調(diào)用一次，而節(jié)流的 情況會每隔一定時間（參數(shù)wait）調(diào)用函數(shù)特漩。
2. 請描述頁面從加載到渲染的全過程吧雹。每一個步驟可以分別做哪些優(yōu)化？
步驟：
- 輸入網(wǎng)址url涂身；
- 瀏覽器獲取url雄卷，通過DNS解析獲得網(wǎng)址的對應(yīng)IP地址。首先先去各個緩存當(dāng)中看看有沒有DNS緩存蛤售，如果有則直接顯示丁鹉，不需要重新發(fā)送HTTP請求妒潭，如果沒有，進(jìn)行下一步揣钦；
- 通過DNS解析獲得網(wǎng)址對應(yīng)的IP地址雳灾；
- 瀏覽器與服務(wù)器通過TCP三次握手協(xié)商來建立一個TCP連接；
- 瀏覽器向服務(wù)器發(fā)送一個HTTP請求報文冯凹；
- 服務(wù)器處理請求并返回一個HTTP響應(yīng)報文谎亩；
- 瀏覽器收到響應(yīng)，解析HTML宇姚、CSS匈庭、JS等文件；
- 構(gòu)建DOM樹浑劳，瀏覽器繪制頁面阱持。
前端方面的優(yōu)化可以在最后兩步進(jìn)行優(yōu)化。一是盡量簡化css文件魔熏，如果樣式不是特別多的話可以寫內(nèi)聯(lián)樣式衷咽，減少css文件下載；或者使用打包工具蒜绽。
二是避免head標(biāo)簽中的css和js阻塞渲染镶骗，導(dǎo)致頁面空白，所以可以把scrip標(biāo)簽放道body之后滓窍。
三是盡量js減少dom操作卖词，比如用事件代理將子節(jié)點的事件綁定在父節(jié)點上。
四是html的文檔結(jié)構(gòu)層級盡量少吏夯，減少回流和重繪的壓力。
五是可以用按需加載的方案加載圖片即横。
3. 瀏覽器是怎么繪制頁面的噪生？
- 解析html樹構(gòu)建DOM樹，在構(gòu)建dom樹的同時东囚，瀏覽器還會構(gòu)建一個CSSOM跺嗽。當(dāng)遇到css文件時，先加載css文件页藻，然后構(gòu)建CSSOM桨嫁，但是會阻塞render樹的構(gòu)建。如果將css文件放在底部份帐，render樹在之前就已經(jīng)構(gòu)建完了璃吧，因此用戶可能會看到無樣式的頁面或者閃屏。
- 渲染樹（render樹） 渲染樹又dom樹和CSSOM構(gòu)成废境，但并不是必須等dom樹及CSSOM加載完成后才開始合并構(gòu)建render樹畜挨，三者的構(gòu)建并無先后條件筒繁，亦非完全獨立，因此會形成一邊加載巴元，一邊解析毡咏，一邊渲染的現(xiàn)象。構(gòu)建render樹逮刨，根據(jù)render樹計算每個可見元素的布局呕缭，并輸出到繪制流程上，將像素渲染到屏幕上修己。
- 布局render樹 有了render樹恢总，瀏覽器已經(jīng)能知道網(wǎng)頁中有哪些節(jié)點，各個節(jié)點的css定義以及他們的從屬關(guān)系箩退，從而去計算出每個節(jié)點在屏幕中的位置离熏。
- 繪制 繪制包括重繪和回流兩個過程。
4. 什么是重繪戴涝，什么是回流滋戳？區(qū)別是什么？
當(dāng)render tree中的一部分（或全部）因為元素的規(guī)模尺寸啥刻、布局奸鸯、隱藏等改變需要重新構(gòu)建，這就稱為回流可帽。每個頁面至少回流一次娄涩，也就是在頁面第一次加載的時候∮掣回流的時候瀏覽器會使渲染樹中受到影響的部分失效蓄拣，并重新構(gòu)造這部分渲染樹，完成回流后努隙，瀏覽器會重新繪制受影響的部分到屏幕中球恤，該過程成為重繪。
render tree中的一些元素需要更新屬性荸镊，這些屬性只影響元素的外觀咽斧，風(fēng)格，而不會影響布局躬存，比如背景色的改變张惹，這便稱之為重繪。
區(qū)別在于岭洲，回流必然引起重繪较沪，重繪不一定引起回流擂达，比如只有顏色改變的時候歉铝。當(dāng)頁面的布局和幾何屬性改變的時候才需要回流，比如添加或刪除元素碑诉，元素位置改變，元素尺寸改變侥锦，內(nèi)容改變进栽。
5. ssr
服務(wù)器端渲染。服務(wù)器端讀取index.html恭垦，在發(fā)送給客戶端之前快毛，在服務(wù)端已經(jīng)把index.html 渲染處理了。
多數(shù)網(wǎng)站既有服務(wù)端渲染又有客戶端渲染番挺。
為什么需要服務(wù)器端渲染：
使用服務(wù)器端渲染唠帝，搜索引擎爬蟲抓取工具可以直接查看完全渲染的頁面，有利于SEO搜索引擎優(yōu)化玄柏。
