1散休、簡(jiǎn)述瀏覽器的渲染過程媒楼，DOM 樹和渲染樹的區(qū)別？

瀏覽器的渲染過程：
解析 HTML 構(gòu)建 DOM(DOM 樹)戚丸，并行請(qǐng)求 css/image/js 
CSS 文件下載完成划址，開始構(gòu)建 CSSOM(CSS 樹)
CSSOM 構(gòu)建結(jié)束后，和 DOM 一起生成 Render Tree(渲染樹)
布局(Layout)：計(jì)算出每個(gè)節(jié)點(diǎn)在屏幕中的位置
顯示(Painting)：通過顯卡把頁面畫到屏幕上

DOM 樹 和 渲染樹 的區(qū)別：
1限府、dom 樹夺颤，css 樹合并成成渲染樹（render 樹）
2、DOM 樹與 HTML 標(biāo)簽一一對(duì)應(yīng)胁勺，包括 head 和隱藏元素3世澜、渲染樹不包括 head 和隱藏元素，大段文本的每一個(gè)行都是獨(dú)立節(jié)點(diǎn)署穗，每一個(gè)節(jié)點(diǎn)都有對(duì)應(yīng)的css 屬性

2寥裂、簡(jiǎn)單說一下頁面重繪和重排嵌洼，如何最小化重繪和重排

瀏覽器渲染引擎工作時(shí)，會(huì)先解析HTML然后生成DOM樹封恰，與此同時(shí)咱台，渲染引擎也會(huì)用CSS解析器解析CSS文檔構(gòu)建CSSOM樹。接下來俭驮，DOM樹和CSSOM樹關(guān)聯(lián)起來構(gòu)成渲染樹（RenderTree）然后瀏覽器按照渲染樹進(jìn)行布局（Layout），最后一步通過繪制顯示出整個(gè)頁面春贸。

重繪和重排的區(qū)別：
重繪：一個(gè)元素外觀發(fā)生改變混萝，但沒有改變布局，重新把元素繪制出來的過程萍恕。
重排：當(dāng)dom的變化影響元素的幾何信息（元素的位置和尺寸大幸萼帧），瀏覽器需要重新計(jì)算元素的幾何屬性允粤，將其安放在界面的正確的位置崭倘。這個(gè)過程叫重排。
單單改變?cè)氐耐庥^类垫，肯定不會(huì)引起網(wǎng)頁重新生成布局司光，但當(dāng)瀏覽器完成重排之后，將會(huì)重新繪制受到此次重排影響的部分悉患。比如改變?cè)馗叨炔屑遥@個(gè)元素乃至周邊dom都需要重新繪制。

即：重繪不一定導(dǎo)致重排售躁，但重排一定會(huì)導(dǎo)致重繪坞淮。重排對(duì)性能的消耗要更多一些

觸發(fā)重排的方法：
改變?cè)氐奈恢茫桓淖冊(cè)氐某叽缗憬荩热邕吘嗷鼐剑畛洌吙蚴行洌瑢挾确戎保叨鹊龋?br> 頁面初始渲染，這是開銷最大的一次重排凌盯；改變?cè)氐淖煮w大懈斗恪；
改變?yōu)g覽器窗口大小驰怎，比如resize事件發(fā)生時(shí)阐滩；改變?cè)貎?nèi)容，字體數(shù)量县忌，圖片大械嗬啤继效；
激活css偽類；設(shè)置style屬性的值装获，因?yàn)樵O(shè)置style屬性會(huì)改變結(jié)點(diǎn)樣式瑞信，就會(huì)觸發(fā)重排。查詢某些屬性穴豫、或者調(diào)用某些計(jì)算方法:offsetwidth凡简，offheight。

避免重排的方法是樣式集中改變精肃；使用absolute或fixed脫離文檔流秤涩；使用gpu加速，transform司抱。

引起重排的幾個(gè)原因
頁面初始渲染筐眷，這是開銷最大的一次重排
添加/刪除可見的DOM元素
改變?cè)匚恢?br> 改變?cè)爻叽纾热邕吘嘞澳⑻畛湓纫ァ⑦吙颉挾群透叨鹊?br> 改變?cè)貎?nèi)容资溃，比如文字?jǐn)?shù)量武翎，圖片大小元素字體大小等
改變?yōu)g覽器窗口尺寸，比如resize事件發(fā)生時(shí)
激活CSS偽類（例如：:hover）
設(shè)置 style 屬性的值肉拓，因?yàn)橥ㄟ^設(shè)置style屬性改變結(jié)點(diǎn)樣式的話后频，每一次設(shè)置都會(huì)觸發(fā)一次reflow
查詢某些屬性或調(diào)用某些計(jì)算方法：offsetWidth、offsetHeight等暖途。原理是一樣的卑惜，都為求一個(gè)“即時(shí)性”和“準(zhǔn)確性”。
重排影響的范圍

全局范圍：從根節(jié)點(diǎn)html開始對(duì)整個(gè)渲染樹進(jìn)行重新布局驻售。
局部范圍：對(duì)渲染樹的某部分或某一個(gè)渲染對(duì)象進(jìn)行重新布局
把一個(gè)dom的寬高之類的幾何信息定死露久，然后在dom內(nèi)部觸發(fā)重排，就只會(huì)重新渲染該dom內(nèi)部的元素欺栗，而不會(huì)影響到外界毫痕。(例如position為absolut和fixed)

如何最小化重繪(repaint)和回流(reflow)?
(1)需要要對(duì)元素進(jìn)行復(fù)雜的操作時(shí)，可以先隱藏(display:"none")迟几，操作完成后再顯示
(2)需要?jiǎng)?chuàng)建多個(gè) DOM 節(jié)點(diǎn)時(shí)消请，使用 DocumentFragment 創(chuàng)建完后一次性的加入 document
(3)緩存 Layout 屬性值，如：var left = elem.offsetLeft; 這樣类腮，多次使用 left 只產(chǎn)生一次回流
(4)盡量避免用 table 布局（table 元素一旦觸發(fā)回流就會(huì)導(dǎo)致 table 里所有的其它元素回流）
(5)避免使用 css 表達(dá)式(expression)臊泰，因?yàn)槊看握{(diào)用都會(huì)重新計(jì)算值（包括加載頁面）
(6)盡量使用 css 屬性簡(jiǎn)寫，如：用 border 代替 border-width, border-style, border-color
(7)批量修改元素樣式：elem.className 和 elem.style.cssText 代替 elem.style.xxx

3蚜枢、CSS 的盒模型缸逃？

盒子模型分為兩種: 
第一種是 W3C 標(biāo)準(zhǔn)的盒子模型（標(biāo)準(zhǔn)盒模型）
第二種 IE 標(biāo)準(zhǔn)的盒子模型（怪異盒模型）
標(biāo)準(zhǔn)盒模型與怪異盒模型的表現(xiàn)效果的區(qū)別之處：
1针饥、標(biāo)準(zhǔn)盒模型中 
width 指的是內(nèi)容區(qū)域 content 的寬度
height 指的是內(nèi)容區(qū)域 content 的高度
標(biāo)準(zhǔn)盒模型下盒子的大小 = content + border + padding + margin
2、怪異盒模型中
width 指的是內(nèi)容需频、邊框丁眼、內(nèi)邊距總的寬度（content + border + padding）；
height 指的是內(nèi)容昭殉、邊框苞七、內(nèi)邊距總的高度
怪異盒模型下盒子的大小=width（content + border + padding） + margin；

除此之外挪丢，我們還可以通過屬性 box-sizing 來設(shè)置盒子模型的解析模式
可以為 box-sizing 賦兩個(gè)值：
content-box：默認(rèn)值莽鸭，border 和 padding 不算到 width 范圍內(nèi)，可以理解為是 W3c 的
標(biāo)準(zhǔn)模型(default)吃靠。總寬=width+padding+border+margin
border-box：border 和 padding 劃歸到 width 范圍內(nèi)足淆，可以理解為是 IE 的怪異盒 模
型巢块，總寬=width+margin

4、CSS的引入方式有哪些巧号？有什么區(qū)別族奢？

方式一：內(nèi)聯(lián)樣式
內(nèi)聯(lián)樣式也叫行內(nèi)樣式，指的是直接在HTML標(biāo)簽中的 style 屬性中添加 css丹鸿。
方式二：嵌入樣式
嵌入樣式指的是在HTML頭部中的 style 標(biāo)簽中寫入CSS代碼越走。
方式三：鏈接樣式
鏈接方式指的是使用HTML頭部的標(biāo)簽引入外部的 CSS 文件。
方式四：導(dǎo)入樣式
導(dǎo)入樣式指的是使用 CSS 規(guī)則引入外部 CSS 文件靠欢。
使用link和@import區(qū)別：
1廊敌、從屬關(guān)系的區(qū)別：link屬于HTML標(biāo)簽，而@import是CSS提供的語法規(guī)則门怪，link除了加載CSS骡澈，還可以定義RSS，定義rel連接屬性等掷空；@import就只能加載CSS肋殴。

2、加載順序的區(qū)別：link引入的樣式在頁面加載的同時(shí)加載坦弟；@import引入的樣式需等頁面加載完成后再加載护锤。

3、兼容性區(qū)別：link是HTML標(biāo)簽酿傍，所以沒有兼容性問題烙懦；@import不兼容IE5以下。

4拧粪、DOM可控性區(qū)別：link可以通過js操作DOM 動(dòng)態(tài)引入樣式修陡；由于DOM方法是基于文檔的沧侥，無法使用@import方式插入樣式。

5魄鸦、用過哪些css動(dòng)畫屬性宴杀？都是干啥用的？簡(jiǎn)單實(shí)現(xiàn)一個(gè)無限旋轉(zhuǎn)動(dòng)畫

animation 主要包含6個(gè)屬性拾因，具體含義如下：
animation-name 規(guī)定需要綁定到選擇器的 keyframe 名稱旺罢。
animation-duration 規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間，以秒或毫秒計(jì)绢记。
animation-timing-function 規(guī)定動(dòng)畫的速度曲線扁达。
animation-delay 規(guī)定在動(dòng)畫開始之前的延遲，默認(rèn)值為0蠢熄。
animation-iteration-count 規(guī)定動(dòng)畫應(yīng)該播放的次數(shù)跪解，默認(rèn)值為1。
animation-direction 規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫签孔，默認(rèn)值是正向
animation-fill-mode : none | forwards | backwards | both;規(guī)定動(dòng)畫在播放之前或之后叉讥，其動(dòng)畫效果是否可見
animation-play-state: paused|running  規(guī)定動(dòng)畫正在運(yùn)行還是暫停。

transition 屬性是一個(gè)簡(jiǎn)寫屬性饥追，用于設(shè)置四個(gè)過渡屬性：
transition-property 規(guī)定設(shè)置過渡效果的 CSS 屬性的名稱图仓。
transition-duration 規(guī)定完成過渡效果需要多少秒或毫秒兴使。
transition-timing-function 規(guī)定速度效果的速度曲線七扰。
transition-delay 定義過渡效果何時(shí)開始璃谨。

@keyframes donghua{
      0%:{
           transform:rorate(0deg);
      }
      100%:{
          transform:rorate(360deg);
       }
}
#app{
    width:100px;
    height:100px;
    margin:100px auto;
    background-color:pink;
    anamation:donghua 2s linear 0.2s infinite;
}

6者铜、BFC的布局規(guī)則有滑？

1涣脚、內(nèi)部的Box會(huì)在垂直方向拌禾，一個(gè)接一個(gè)地放置太援。
2幅骄、Box垂直方向的距離由margin決定狸臣。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊（按照最大margin值設(shè)置）
3、每個(gè)元素的margin box的左邊昌执， 與包含塊border box的左邊相接觸
4烛亦、BFC的區(qū)域不會(huì)與float box重疊。
5懂拾、BFC就是頁面上的一個(gè)隔離的獨(dú)立容器煤禽，容器里面的子元素不會(huì)影響到外面的元素。
6岖赋、計(jì)算BFC的高度時(shí)檬果，浮動(dòng)元素也參與計(jì)算
哪些元素或?qū)傩阅苡|發(fā)BFC
1、根元素(html)
2、float屬性不為none
3选脊、position為absolute或fixed
4杭抠、display為inline-block, table-cell, table-caption, flex, inline-flex
5、overflow不為visible
BFC的應(yīng)用
1恳啥、自適應(yīng)兩欄布局
2偏灿、清除內(nèi)部浮動(dòng)
3、防止margin上下重疊

7钝的、什么是防抖和節(jié)流翁垂？有什么區(qū)別？

防抖和節(jié)流本質(zhì)是不一樣的硝桩。防抖是將多次執(zhí)行變?yōu)樽詈笠淮螆?zhí)行沿猜，節(jié)流是將多次執(zhí)行變成每隔一段時(shí)間執(zhí)行。

防抖(debounce):

防抖觸發(fā)高頻率事件時(shí)n秒后只會(huì)執(zhí)行一次,如果n秒內(nèi)再次觸發(fā),則會(huì)重新計(jì)算碗脊。

概述:每次觸發(fā)時(shí)都會(huì)取消之前的延時(shí)調(diào)用啼肩。

節(jié)流(thorttle):

高頻事件觸發(fā),每次觸發(fā)事件時(shí)設(shè)置一個(gè)延遲調(diào)用方法，并且取消之前的延時(shí)調(diào)用方法衙伶。

概述:每次觸發(fā)事件時(shí)都會(huì)判斷是否等待執(zhí)行的延時(shí)函數(shù)疟游。

區(qū)別:降低回調(diào)執(zhí)行頻率,節(jié)省計(jì)算資源。

函數(shù)防抖一定時(shí)間連續(xù)觸發(fā)的事件,只在最后執(zhí)行一次,而函數(shù)節(jié)流一段時(shí)間內(nèi)只執(zhí)行一次痕支。
function debounce_A(fn, delay) {
    let timer = null;

    // 真正執(zhí)行的函數(shù)
    const _debounce = function () {
        if (timer) {
            // 取消上一次的定時(shí)器
            clearTimeout(timer);
        }

        timer = setTimeout(function () {
            fn();
        }, delay);
    };

    return _debounce;
}

8、img iframe script 來發(fā)送跨域請(qǐng)求有什么優(yōu)缺點(diǎn)蛮原？

圖片
優(yōu)點(diǎn)：可以訪問任何url卧须，一般用來進(jìn)行點(diǎn)擊追蹤，做頁面分析常用的方法
缺點(diǎn)：不能訪問響應(yīng)文本儒陨，只能監(jiān)聽是否響應(yīng)

script（JsonP）
優(yōu)點(diǎn)：可以直接返回json格式的數(shù)據(jù)
缺點(diǎn)：只接受GET請(qǐng)求方式

frame
優(yōu)點(diǎn)：跨域完畢之后DOM操作和互相之間的JavaScript調(diào)用都是沒有問題的
缺點(diǎn)：1.若結(jié)果要以URL參數(shù)傳遞花嘶，這就意味著在結(jié)果數(shù)據(jù)量很大的時(shí)候需要分割傳遞，麻煩蹦漠。2.還有一個(gè)是iframe本身帶來的椭员，母頁面和iframe本身的交互本身就有安全性限制。

9笛园、setTimeout隘击、Promise、Async/Await 的區(qū)別研铆？

1埋同、JS是單線程語言，包括同步任務(wù)棵红、異步任務(wù)凶赁，異步任務(wù)又包括宏觀任務(wù)和微觀任務(wù)

2、執(zhí)行順序：同步任務(wù)——>微觀任務(wù)——>宏觀任務(wù)

3、宏觀任務(wù)的方法有：script(整體代碼)虱肄、setTimeout致板、setInterval、I/O咏窿、UI交互事件斟或、postMessage、MessageChannel翰灾、setImmediate(Node.js 環(huán)境)

4缕粹、微觀任務(wù)的方法有：Promise.then、MutaionObserver纸淮、process.nextTick(Node.js 環(huán)境)平斩，async/await實(shí)際上是promise+generator的語法糖，也就是promise咽块，也就是微觀任務(wù)

10绘面、什么是事件流？

一侈沪、事件流的定義


頁面觸發(fā)一個(gè)事件時(shí)揭璃，會(huì)按照一定的順序來響應(yīng)事件，事件的響應(yīng)過程為事件流
事件流就是亭罪，事件傳播的過程瘦馍。

DOM中完整的事件流包括了三個(gè)階段：事件捕獲階段、目標(biāo)階段和事件冒泡階段