1、简述浏览器的渲染过程，DOM 树和渲染树的区别？
浏览器的渲染过程：
解析 HTML 构建 DOM(DOM 树)，并行请求 css/image/js
CSS 文件下载完成，开始构建 CSSOM(CSS 树)
CSSOM 构建结束后，和 DOM 一起生成 Render Tree(渲染树)
布局(Layout)：计算出每个节点在屏幕中的位置
显示(Painting)：通过显卡把页面画到屏幕上
DOM 树 和 渲染树 的区别：
1、dom 树，css 树合并成成渲染树（render 树）
2、DOM 树与 HTML 标签一一对应，包括 head 和隐藏元素3、渲染树不包括 head 和隐藏元素，大段文本的每一个行都是独立节点，每一个节点都有对应的css 属性
2、简单说一下页面重绘和重排，如何最小化重绘和重排
浏览器渲染引擎工作时，会先解析HTML然后生成DOM树，与此同时，渲染引擎也会用CSS解析器解析CSS文档构建CSSOM树。接下来，DOM树和CSSOM树关联起来构成渲染树（RenderTree）然后浏览器按照渲染树进行布局（Layout），最后一步通过绘制显示出整个页面。
重绘和重排的区别：
重绘：一个元素外观发生改变，但没有改变布局，重新把元素绘制出来的过程。
重排：当dom的变化影响元素的几何信息（元素的位置和尺寸大小），浏览器需要重新计算元素的几何属性，将其安放在界面的正确的位置。这个过程叫重排。
单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分。比如改变元素高度，这个元素乃至周边dom都需要重新绘制。
即：重绘不一定导致重排，但重排一定会导致重绘。重排对性能的消耗要更多一些
触发重排的方法：
改变元素的位置；改变元素的尺寸，比如边距，填充，边框，宽度，高度等；
页面初始渲染，这是开销最大的一次重排；改变元素的字体大小；
改变浏览器窗口大小，比如resize事件发生时；改变元素内容，字体数量，图片大小；
激活css伪类；设置style属性的值，因为设置style属性会改变结点样式，就会触发重排。查询某些属性、或者调用某些计算方法:offsetwidth，offheight。
避免重排的方法是样式集中改变；使用absolute或fixed脱离文档流；使用gpu加速，transform。
引起重排的几个原因
页面初始渲染，这是开销最大的一次重排
添加/删除可见的DOM元素
改变元素位置
改变元素尺寸，比如边距、填充、边框、宽度和高度等
改变元素内容，比如文字数量，图片大小元素字体大小等
改变浏览器窗口尺寸，比如resize事件发生时
激活CSS伪类（例如：:hover）
设置 style 属性的值，因为通过设置style属性改变结点样式的话，每一次设置都会触发一次reflow
查询某些属性或调用某些计算方法：offsetWidth、offsetHeight等。原理是一样的，都为求一个“即时性”和“准确性”。
重排影响的范围
全局范围：从根节点html开始对整个渲染树进行重新布局。
局部范围：对渲染树的某部分或某一个渲染对象进行重新布局
把一个dom的宽高之类的几何信息定死，然后在dom内部触发重排，就只会重新渲染该dom内部的元素，而不会影响到外界。(例如position为absolut和fixed)
如何最小化重绘(repaint)和回流(reflow)?
(1)需要要对元素进行复杂的操作时，可以先隐藏(display:"none")，操作完成后再显示
(2)需要创建多个 DOM 节点时，使用 DocumentFragment 创建完后一次性的加入 document
(3)缓存 Layout 属性值，如：var left = elem.offsetLeft; 这样，多次使用 left 只产生一次回流
(4)尽量避免用 table 布局（table 元素一旦触发回流就会导致 table 里所有的其它元素回流）
(5)避免使用 css 表达式(expression)，因为每次调用都会重新计算值（包括加载页面）
(6)尽量使用 css 属性简写，如：用 border 代替 border-width, border-style, border-color
(7)批量修改元素样式：elem.className 和 elem.style.cssText 代替 elem.style.xxx
3、CSS 的盒模型？
盒子模型分为两种:
第一种是 W3C 标准的盒子模型（标准盒模型）
第二种 IE 标准的盒子模型（怪异盒模型）
标准盒模型与怪异盒模型的表现效果的区别之处：
1、标准盒模型中
width 指的是内容区域 content 的宽度
height 指的是内容区域 content 的高度
标准盒模型下盒子的大小 = content + border + padding + margin
2、怪异盒模型中
width 指的是内容、边框、内边距总的宽度（content + border + padding）；
height 指的是内容、边框、内边距总的高度
怪异盒模型下盒子的大小=width（content + border + padding） + margin；
除此之外，我们还可以通过属性 box-sizing 来设置盒子模型的解析模式
可以为 box-sizing 赋两个值：
content-box：默认值，border 和 padding 不算到 width 范围内，可以理解为是 W3c 的
标准模型(default)。总宽=width+padding+border+margin
border-box：border 和 padding 划归到 width 范围内，可以理解为是 IE 的怪异盒 模
型，总宽=width+margin
4、CSS的引入方式有哪些？有什么区别？
方式一：内联样式
内联样式也叫行内样式，指的是直接在HTML标签中的 style 属性中添加 css。
方式二：嵌入样式
嵌入样式指的是在HTML头部中的 style 标签中写入CSS代码。
方式三：链接样式
链接方式指的是使用HTML头部的标签引入外部的 CSS 文件。
方式四：导入样式
导入样式指的是使用 CSS 规则引入外部 CSS 文件。
使用link和@import区别：
1、从属关系的区别：link属于HTML标签，而@import是CSS提供的语法规则，link除了加载CSS，还可以定义RSS，定义rel连接属性等；@import就只能加载CSS。
2、加载顺序的区别：link引入的样式在页面加载的同时加载；@import引入的样式需等页面加载完成后再加载。
3、兼容性区别：link是HTML标签，所以没有兼容性问题；@import不兼容IE5以下。
4、DOM可控性区别：link可以通过js操作DOM 动态引入样式；由于DOM方法是基于文档的，无法使用@import方式插入样式。
5、用过哪些css动画属性？都是干啥用的？简单实现一个无限旋转动画
animation 主要包含6个属性，具体含义如下：
animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟，默认值为0。
animation-iteration-count 规定动画应该播放的次数，默认值为1。
animation-direction 规定是否应该轮流反向播放动画，默认值是正向
animation-fill-mode : none | forwards | backwards | both;规定动画在播放之前或之后，其动画效果是否可见
animation-play-state: paused|running 规定动画正在运行还是暂停。
transition 属性是一个简写属性，用于设置四个过渡属性：
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。
@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的布局规则？
1、内部的Box会在垂直方向，一个接一个地放置。
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）
3、每个元素的margin box的左边， 与包含块border box的左边相接触
4、BFC的区域不会与float box重叠。
5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
6、计算BFC的高度时，浮动元素也参与计算
哪些元素或属性能触发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的应用
1、自适应两栏布局
2、清除内部浮动
3、防止margin上下重叠
7、什么是防抖和节流？有什么区别？
防抖和节流本质是不一样的。防抖是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。
防抖(debounce):
防抖触发高频率事件时n秒后只会执行一次,如果n秒内再次触发,则会重新计算。
概述:每次触发时都会取消之前的延时调用。
节流(thorttle):
高频事件触发,每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法。
概述:每次触发事件时都会判断是否等待执行的延时函数。
区别:降低回调执行频率,节省计算资源。
函数防抖一定时间连续触发的事件,只在最后执行一次,而函数节流一段时间内只执行一次。
function debounce_A(fn, delay) {
let timer = null;
// 真正执行的函数
const _debounce = function () {
if (timer) {
// 取消上一次的定时器
clearTimeout(timer);
}
timer = setTimeout(function () {
fn();
}, delay);
};
return _debounce;
}
8、img iframe script 来发送跨域请求有什么优缺点？
图片
优点：可以访问任何url，一般用来进行点击追踪，做页面分析常用的方法
缺点：不能访问响应文本，只能监听是否响应
script（JsonP）
优点：可以直接返回json格式的数据
缺点：只接受GET请求方式
frame
优点：跨域完毕之后DOM操作和互相之间的JavaScript调用都是没有问题的
缺点：1.若结果要以URL参数传递，这就意味着在结果数据量很大的时候需要分割传递，麻烦。2.还有一个是iframe本身带来的，母页面和iframe本身的交互本身就有安全性限制。
9、setTimeout、Promise、Async/Await 的区别？
1、JS是单线程语言，包括同步任务、异步任务，异步任务又包括宏观任务和微观任务
2、执行顺序：同步任务——>微观任务——>宏观任务
3、宏观任务的方法有：script(整体代码)、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境)
4、微观任务的方法有：Promise.then、MutaionObserver、process.nextTick(Node.js 环境)，async/await实际上是promise+generator的语法糖，也就是promise，也就是微观任务
10、什么是事件流？
一、事件流的定义
页面触发一个事件时，会按照一定的顺序来响应事件，事件的响应过程为事件流
事件流就是，事件传播的过程。
DOM中完整的事件流包括了三个阶段：事件捕获阶段、目标阶段和事件冒泡阶段