**HTML 篇
页面导入样式时，使用 link 和 @import 有什么区别。
1.从属关系区别。@import 只能导入样式表，link 还可以定义 RSS、rel 连接属性、引入网站图标等；
2.加载顺序区别；加载页面时，link 标签引入的 CSS 被同时加载；@import 引入的 CSS 将在页面加载完毕后被加载；
3.兼容性区别；
常见浏览器内核
内核
Trident：IE 浏览器内核；
Gecko：Firefox 浏览器内核；
Presto：Opera 浏览器内核；
Webkit：Safari 浏览器内核；
Blink：谷歌浏览器内核，属于 Webkit 的一个分支，与 Opera 一起在研发；
浏览器
IE：Trident，IE 内核；
Chrome：以前是 Webkit，现在是 Blink 内核；
Firefox：Gecko 内核；
Safari：Webkit 内核；
Opera：一起是 Presto，现在是 Blink 内核；
360、猎豹浏览器内核：IE + Blink 双内核；
搜狗、遨游、QQ 浏览器内核：Trident（兼容模式）+ Webkit（高速模式）；
百度浏览器、世界之窗内核：IE 内核；
2345 浏览器：以前是 IE 内核，现在是 IE + Blink 双内核；
UC 浏览器内核：Webkit + Trident；
简述浏览器的渲染原理
首先解析收到的文档，根据文档定义构建一颗 DOM 树，DOM 树是由 DOM 元素及属性节点组成的；
然后对 CSS 进行解析，生成 CSSOM 规则树；
根据 DOM 树和 CSSOM 规则树构建 Render Tree。渲染树的节点被称为渲染对象，渲染对象是一个包含有颜色和大小等属性的矩形，渲染对象和 DOM 对象相对应，但这种对应关系不是一对一的，不可见的 DOM 元素不会被插入渲染树。
当渲染对象被创建并添加到树中，它们并没有位置和大小，所以当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流）。这一阶段浏览器要做的事情就是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”。
布局阶段结束后是绘制阶段，比那里渲染树并调用对象的 paint 方法将它们的内容显示在屏幕上，绘制使用 UI 基础组件。
为了更好的用户体验，渲染引擎会尽可能早的将内容呈现到屏幕上，并不会等到所有的 html 解析完成之后再去构建和布局 render tree。它是解析完一部分内容就显示一部分内容，同时可能还在网络下载其余内容。
HTML5 的 form 的自动完成功能是什么？
autocomplete 属性规定输入字段是否应该启用自动完成功能，默认为启用，设置为 autocomplete=off 可以关闭该功能。
自动完成允许浏览器预测对字段的输入。在用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项
如何实现浏览器内多个标签页之间的通信？
实现多个标签页之间的通信，本质上都是通过中介者模式来实现的。因为标签页之间没有办法直接通信，因此我们可以找一个中介者来让标签页和中介者进行通信，然后让这个中介者来进行消息的转发。
使用 Websocket，通信的标签页连接同一个服务器，发送消息到服务器后，服务器推送消息给所有连接的客户端；
可以地调用 localStorage，localStorage 在另一个浏览上下文里被添加、修改或删除时，它都会触发一个 storage 事件，我们可以通过监听 storage 事件，控制它的值来进行页面信息通信；
如果我们能够获得对应标签页的引用，通过 postMessage 方法也是可以实现多个标签页通信的；
简述前端性能优化
页面内容方面
通过文件合并、css 雪碧图、使用 base64 等方式来减少 HTTP 请求数，避免过多的请求造成等待的情况；
通过 DNS 缓存等机制来减少 DNS 的查询次数；
通过设置缓存策略，对常用不变的资源进行缓存；
通过延迟加载的方式，来减少页面首屏加载时需要请求的资源，延迟加载的资源当用户需要访问时，再去请求加载；
通过用户行为，对某些资源使用预加载的方式，来提高用户需要访问资源时的响应速度
服务器方面
使用 CDN 服务，来提高用户对于资源请求时的响应速度；
服务器端自用 Gzip、Deflate 等方式对于传输的资源进行压缩，减少传输文件的体积；
尽可能减小 cookie 的大小，并且通过将静态资源分配到其他域名下，来避免对静态资源请求时携带不必要的 cookie；
什么是 webp
WebP 是谷歌开发的一种新图片格式，它是支持有损和无损两种压缩方式的使用直接色的点阵图。使用 webp 格式的最大优点是是，在相同质量的文件下，它拥有更小的文件体积。因此它非常适合于网络图片的传输，因为图片体积的减少，意味着请求时间的减少，这样会提高用户的体验。这是谷歌开发的一种新的图片格式。
浏览器如何判断是否支持 webp 格式图片？
通过创建 Image 对象，将其 src 属性设置为 webp 格式的图片，然后在 onload 事件中获取图片的宽高，如果能够获取，则说明浏览器支持 webp 格式图片。如果不能获取或者触发了 onerror 函数，那么就说明浏览器不支持 webp 格式的图片。
CSS 篇
介绍下 BFC 及其应用
BFC（Block Format Context）块级格式化上下文，是页面盒模型中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。
创建 BFC 的方式有：
html 根元素 float 浮动 绝对定位 overflow 不为 visible display 为表格布局或者弹性布局； BFC 主要的作用是：
清除浮动 防止同一 BFC 容器中的相邻元素间的外边距重叠问题
怎么让一个 div 水平垂直居中
< class="parent">
< class="child">
div.parent {
display: flex;
justify-content: center;
align-items: center;
}
div.parent {
position: relative;
}
div.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
div.parent {
display: grid;
}
div.child {
justify-self: center;
align-self: center;
}
div.parent {
font-size: 0;
text-align: center;
&::before {
content: "";
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
} } div.child {
display: inline-block;
vertical-align: middle;
}
介绍下重绘和回流（Repaint & Reflow），以及如何进行优化
浏览器渲染机制
浏览器采用流式布局模型（Flow Based Layout）；
浏览器会把 HTML 解析成 DOM，把 CSS 解析成 CSSOM,DOM 和 CSSOM 合并就产生了渲染树（Render Tree）；
有了 RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上；
由于浏览器使用流式布局，对 Render Tree 的计算通常只需要遍历一次就可以完成，但 table 及其内部元素除外，他们可能需要多次计算，通常要花 3 倍于同等元素的时间，这也是为什么要避免使用 table 布局的原因之一；
重绘
由于节点的集合属性发生改变或者由于样式改变而不会影响布局的，成为重绘，例如 outline、visibility、color、background-color 等，重绘的代价是高昂的，因此浏览器必须验证 DOM 树上其他节点元素的可见性。
回流
回流是布局或者几何属性需要改变就称为回流。回流是影响浏览器性能的关键因素，因为其变化涉及到部分页面（或是整个页面）的布局更新。一个元素的回流可能会导致其素有子元素以及 DOM 中紧随其后的节点、祖先节点元素的随后的回流。大部分的回流将导致页面的重新渲染。
回流必定会发生重绘，重绘不一定会引发回流。
分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景
display: none - 不占空间，不能点击，会引起回流，子元素不影响
visibility: hidden - 占据空间，不能点击，引起重绘，子元素可设置 visible 进行显示
opacity: 0 - 占据空间，可以点击，引起重绘，子元素不影响
简述 CSS 盒模型
盒子由 margin、border、padding、content 组成；
标准盒模型：box-sizing: content-box;
IE 盒模型：box-sizing: border-box;
简述 Rem 及其转换原理
rem 是 CSS3 新增的相对长度单位，是指相对于根元素 html 的 font-size 计算值的大小。
默认根元素的 font-size 都是 16px的。如果想要设置 12px 的字体大小也就是 12px/16px = 0.75rem。
由于 px 是相对固定单位，字号大小直接被定死，无法随着浏览器进行缩放； rem 直接相对于根元素 html，避开层级关系，移动端新型浏览器对其支持较好；
个人用 vw + 百分比布局用的比较多，可以使用 webpack 的 postcss-loader 的一个插件 postcss-px-to-viewport 实现对 px 到 vw 的自动转换，非常适合开发。
移动端视口配置
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
initial-scale: 初始的缩放比例；
minimum-scale: 允许用户缩放到的最小比例；
maximum-scale: 允许用户缩放到的最大比例；
user-scalable: 用户是否可以手动缩放
简述伪类和伪元素
伪类
伪类用于当已有元素处于某种状态时，为其添加对应的样式，这个状态是根据用户行为变化而变化的。比如说 :hover。它只有处于 dom 树无法描述的状态才能为元素添加样式，所以称为伪类。
伪元素
伪元素用于创建一些原本不在文档树中的元素，并为其添加样式，比如说 ::before。虽然用户可以看到这些内容，但是其实他不在文档树中。
区别
伪类的操作对象是文档树中已存在的元素，而伪元素是创建一个文档树外的元素。
css 规范中用双冒号 :: 表示伪元素，用一个冒号 : 表示伪类。
行内元素的 margin 和 padding
水平方向：水平方向上，都有效；
垂直方向：垂直方向上，都无效；
（padding-top 和 padding-bottom 会显示出效果，但是高度不会撑开，不会对周围元素有影响）
CSS 中哪些属性可以继承？
字体系列属性
font-family
font-size
font-weight
font-style
文本系列属性
text-indent
text-align
line-hight
word-spacing
letter-spacing
color
其他
cursor
visibility
CSS3 新增伪类有那些？（例如 nth-child）
elem:nth-child(n): 选中父元素下的第 n 个标签名为 elem 的元素；
elem:nth-last-child(n): 作用同上，从后开始查找；
elem:last-child：最后一个子元素
elem:only-child：如果 elem 是父元素下唯一的子元素，则选中；
elem:nth-of-type(n)：选择父元素下第 n 个 elem 类型元素；
elem:empty：选中不包含子元素和内容的 elem 类型元素；
:not(elem)：选择非 elem 元素的每个元素；
:enabled：启用状态的表单组件
**用纯 CS#demo {
width: 0;
height: 0;
border-width: 20;
border-style: "solid";
border-color: transparent transparent red transparent;
}
原理是相邻边框连接处是均分的原理。S 创建一个三角形**
min-width/max-width 和 min-height/max-height 属性间的覆盖规则？ max-width 会覆盖 width，即使 width 是行内样式或者设置了 !important。
min-width 会覆盖 max-width，此规则发生在 min-width 和 max-width 冲突的时候；
