前端知识点汇总(连载中...)

1. 介绍一下 EventLoop

由于 JS 是单线程语言的特点，所有任务都必须排队执行，这样会造成很大程度的阻塞。为了实现不阻塞就产生了事件循环机制，结合异步任务解决阻塞问题。具体实现为所有同步任务会被压入执行栈，遇到异步任务时会先交给其他线程处理，等到异步任务有响应返回后，将其回调事件按照响应返回顺序放入事件队列中，主线程会读取执行栈内代码进行执行，当执行栈为空时，会去询问事件队列是否有存在待处理的事件，如果有的话主线程便读取事件队列头部的事件，压入执行栈开启下一轮执行。这个过程会反复轮询也就是我们所说的事件循环机制。

2. 浏览器渲染页面的过程

浏览器渲染会经过已下几个步骤：

① 处理 HTML，构建 DOM 树；
② 处理 CSS，构建 CSSOM 树；
③ 将 DOM 树和 CSSOM 树合并，形成最终用于渲染的渲染树；
④ 根据具体加载设备，计算出每个节点的大小和位置；
⑤ 按照渲染树和布局将每个节点绘制到屏幕上。

3. 什么情况会阻塞页面的加载

思路：页面的渲染过程我们称之为关键渲染路径，页面加载的时间和关键渲染路径的执行时间有关。从关键渲染路径各个步骤分析造成页面加载阻塞会有以下几种情况：

1. JS 执行阻塞 DOM 解析

在解析HTML构建DOM树时，遇到script标签会停止解析，等待脚本加载并执行完毕，才会继续开始解析。因此耗时的脚本执行会阻塞DOM解析。

2. CSS 阻塞 JS 执行

因为无法预知script标签内容，有可能需要依赖元素样式，所以默认如果script标签前存在link标签的话，会等link标签资源全部下载完毕，才会加载并执行script标签。因此CSS阻塞JS执行，而被阻塞的JS执行则会造成DOM解析被阻塞。

3. CSS 阻塞页面渲染

构建出渲染树需要DOM树和CSSOM树，为了避免不必要的渲染浪费，只有在完整的CSSOM树构建完成之后，才会进行页面渲染。因此如果CSS文件体积过大等原因造成CSSOM树构建耗时，则会阻塞页面渲染。

4. 优化页面加载速度有哪些方法

尽量使用 CDN（CDN 会根据你的网络状态，就近挑选一个具有缓存内容的节点提供资源，节省加载时间）；
压缩 CSS、JS 文件体积（以降低下载所需要的时间）；
减少 HTTP 请求次数（页面加载速度大部分都是消耗在了页面内容元素的下载上，诸如 HTML、CSS、JS、媒体资源等，所以减少需要请求的资源个数会很直接的提升加载速度）；
合理的利用缓存（对于已缓存的一些资源不用重复下载，节省了消耗在下载资源上的时间）；
CSS 文件尽量方头部，JS 文件放尾部（减少 JS 阻塞 DOM 解析或 CSS 阻塞 JS 执行的概率）。

待补充...

5. script 放在 body 头部就一定会阻塞吗

不是，对于外部脚本script标签加上async或defer属性，可以延迟脚本执行从而达到不影响dom解析的效果。

补充：

async属性：通知浏览器立即下载脚本，在脚本下载完成后自动执行。脚本的执行顺序和script标签的声明顺序无关，只和下载完成的顺序有关。

defer属性：通知浏览器立即下载脚本，在页面加载解析完成后(dom解析和页面渲染完成后)执行脚本。脚本的执行顺序按照script标签的声明顺序。

6. script 标签的 async 是什么时候加载的

标记了async的script标签会被立即加载，但脚本的真正执行顺序，会按照脚本被下载完成的顺序，在下载完成后被立即执行。

7. script 与 css 还有页面的渲染顺序

script标签前如果存在link标签的话，会等link标签文件下载完，才会执行。
script标签会暂停dom解析，等待script脚本下载并执行完毕后才会继续解析，最后形成DOM树。
DOM树和CSSOM树结合形成一颗完整的渲染树，浏览器按照渲染树进行页面渲染。
只有完整的CSSOM树构建完成后，浏览器才会进行页面渲染，若CSS加载计算耗时，则会阻塞页面渲染。

8. 首屏加载优化

连载中...

9. SSR 的使用场景

连载中...

10. 介绍一下 CSS 选择器的优先级

CSS 选择器主要有四大类，它们的优先级如下：内联 > ID 选择器 > 类选择器(类/属性/伪类选择器) > 标签选择器

在具体计算选择器优先级时，按照四类选择器的优先级顺序分为 A、B、C、D 四个等级，计算规则如下：

存在内联选择器则 A = 1，否则 A = 0；
出现其余三类选择器，则按照出现次数累加；(例如：.a.b.c 类选择器出现三次 C = 3)

按照上述方法，优先级的计算结果会是例如 {0, 1, 1, 0} 的 4 位数值，分别代表着 A、B、C、D 四个等级。采用按位比较的方式，当前位数值较大的优先级就高，当前位相等则再比较下一位。

11. 介绍一下事件委托

事件委托是利用 DOM 事件流中事件冒泡的特性，对于同一类型的事件只指定一个事件处理程序。在绑定大量事件的时候通常使用事件委托。

首先需要理解什么是事件和事件流

事件是 DOM 文档或浏览器窗口中发生的一些特定的交互，事件流是用来描述页面接收事件的顺序，也叫做事件传播。

事件流分为哪几个阶段

1）事件捕获阶段
2）处于目标阶段
3）事件冒泡阶段

事件捕获

事件从不具体的节点开始向下传播，直到具体目标节点为止。

事件冒泡

事件由具体目标节点开始向上传播到非具体节点，直到最外层节点。

事件触发顺序通常是

1）进行事件捕获，提供外层节点截获事件的机会
2）事件到达目标节点，处于目标阶段
3）进行事件冒泡，可以在这个阶段对事件做出响应

回到问题，利用事件冒泡的特性，当我们有大量的节点需要绑定同类事件时，可以利用事件冒泡会将事件从具体目标节点一直向上传播的特点，只指定一个事件处理程序绑定在它们共同的父级节点上，这就是事件委托的概念。

事件委托的优点

首先只有一个事件处理程序，减少了事件注册，节省了内存。其次，当有新增的节点时不需要再次绑定事件，适用于动态添加元素。

由于是利用了事件冒泡的特性实现事件委托，针对那些没有事件冒泡机制的事件，就无法实现委托。事件绑定的默认事件传播为事件冒泡。

12. 内联元素和块状元素有哪些？区别

行内元素：span

特点：
1）设置宽高无效
2）不会自动换行
3）子元素都是内联元素
4）设置上下 margin 无效

块状元素：div、p、img、ul、li...

特点：
1）能够设置宽高
2）默认宽度为 100%

13. postion 有哪些属性？分别说一说应用场景

static 默认定位

元素默认 position 为 static，元素会始终处于文档流给与它的位置。
relative 相对定位

相对于自身在文档流中的原始位置进行定位。

应用场景：自身需要偏移量的时候
absolute 绝对定位

脱离正常文档流，相对于最近的 position 设置为非 static 的父元素进行定位。

应用场景：元素需要基于父元素内部水平居中的时候。
fixed 固定

脱离正常文档流，永远基于浏览器窗口进行定位。

应用场景：导航栏
sticky 粘性定位

基于 position 设置为非 static 的父元素进行定位，父元素要设置 overflow: visible 才会生效。

应用场景：当元素需要基于某一父元素（非浏览器窗口）吸顶。

本文使用 mdnice 排版

【建议收藏】前端面试FLEX(连载中...)