HTML

如何理解 HTML 语义化？

• 让人更容易读懂（增加代码可读性）。
• 让搜索引擎更容易读懂，有助于爬虫抓取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重（SEO）。
• 在没有 CSS 样式下，页面也能呈现出很好地内容结构、代码结构。

script 标签中 defer 和 async 的区别？

• script ：会阻碍 HTML 解析，只有下载好并执行完脚本才会继续解析 HTML。
• async script ：解析 HTML 过程中进行脚本的异步下载，下载成功立马执行，有可能会阻断 HTML 的解析。
• defer script：完全不会阻碍 HTML 的解析，解析完成之后再按照顺序执行脚本。

从浏览器地址栏输入 url 到请求返回发生了什么

• 输入 URL 后解析出协议、主机、端口、路径等信息，并构造一个 HTTP 请求。
• DNS 域名解析。
• TCP 连接。
• http请求
• 服务器处理请求并返回 HTTP 报文。
• 浏览器渲染页面。
• 断开 TCP 连接。

CSS

盒模型介绍

• 两种盒子模型都是由 content + padding + border + margin 构成，其大小都是由 content + padding + border 决定的，但是盒子内容宽/高度（即 width/height）的计算范围根据盒模型的不同会有所不同
• 标准盒模型：只包含 content 。IE（替代）盒模型：content + padding + border 。
• box-sizing: content-box ：标准盒模型（默认值）。box-sizing: border-box ：IE（替代）盒模型。

重排（reflow）和重绘（repaint）

• 重排：无论通过什么方式影响了元素的几何信息(元素在视口内的位置和尺寸大小)，浏览器需要重新计算元素在视口内的几何属性，这个过程叫做重排。
• 重绘：通过构造渲染树和重排（回流）阶段，我们知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息(元素在视口内的位置和尺寸大小)，接下来就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘。

如何减少重排和重绘？

• 最小化重绘和重排，比如样式集中改变，使用添加新样式类名 .class 或 cssText 。
• 批量操作 DOM，比如读取某元素 offsetWidth 属性存到一个临时变量，再去使用，而不是频繁使用这个计算属性；又比如利用 document.createDocumentFragment() 来添加要被添加的节点，处理完之后再插入到实际 DOM 中。
• 使用 **absolute** 或 **fixed** 使元素脱离文档流，这在制作复杂的动画时对性能的影响比较明显
• 开启 GPU 加速，利用 css 属性 transform 、will-change 等，比如改变元素位置，我们使用 translate 会比使用绝对定位改变其 left 、top 等来的高效，因为它不会触发重排或重绘，transform 使浏览器为元素创建⼀个 GPU 图层，这使得动画元素在一个独立的层中进行渲染。当元素的内容没有发生改变，就没有必要进行重绘。

对 BFC 的理解

BFC 即块级格式上下文，根据盒模型可知，每个元素都被定义为一个矩形盒子，然而盒子的布局会受到尺寸，定位，盒子的子元素或兄弟元素，视口的尺寸等因素决定，所以这里有一个浏览器计算的过程，计算的规则就是由一个叫做视觉格式化模型的东西所定义的，BFC 就是来自这个概念，它是 CSS 视觉渲染的一部分，用于决定块级盒的布局及浮动相互影响范围的一个区域。

BFC 具有一些特性：

• 块级元素会在垂直方向一个接一个的排列，和文档流的排列方式一致。
• 在 BFC 中上下相邻的两个容器的 margin 会重叠，创建新的 BFC 可以避免外边距重叠。
• 计算 BFC 的高度时，需要计算浮动元素的高度。
• BFC 区域不会与浮动的容器发生重叠。
• BFC 是独立的容器，容器内部元素不会影响外部元素。
• 每个元素的左 margin 值和容器的左 border 相接触。

JS

数据类型

• 在 JS 中共有 8 种基础的数据类型，分别为： Undefined 、 Null 、 Boolean 、 Number 、 String 、 Object 、 Symbol 、 BigInt 。

数据类型的判断

• typeof：能判断所有值类型，函数。不可对 null、对象、数组进行精确判断，因为都返回 object 。
• instanceof：能判断对象类型，不能判断基本数据类型，其内部运行机制是判断在其原型链中能否找到该类型的原型。
• Object.prototype.toString.call()：所有原始数据类型都是能判断的，还有 Error 对象，Date 对象等。

原型和原型链

• 原型：每一个 JavaScript 对象（null 除外）在创建的时候就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型"继承"属性，其实就是 prototype 对象。
• 原型链：由相互关联的原型组成的链状结构就是原型链。

作用域与作用域链

• 作用域：规定了如何查找变量，也就是确定当前执行代码对变量的访问权限。换句话说，作用域决定了代码区块中变量和其他资源的可见性。（全局作用域、函数作用域、块级作用域）
• 作用域链：从当前作用域开始一层层往上找某个变量，如果找到全局作用域还没找到，就放弃寻找 。这种层级关系就是作用域链。（由多个执行上下文的变量对象构成的链表就叫做作用域链，学习下面的内容之后再考虑这句话）