经典问题：从输入URL到页面渲染经历了什么

• 首先浏览器主进程接管，新开了一个下载线程。

• 然后进行HTTP请求（包括DNS查询IP、IP寻址等等）

• TCP的三次握手，等待响应，开始下载响应报文。

• 将下载完的内容转交给Renderer进程管理。

• Renderer进程开始解析dom树和cssom树，这两个过程是并行的，因此一般会把link标签放在页面顶部。

• 解析绘制过程中，当浏览器遇到link标签或者script、img等标签，浏览器会去下载这些内容，遇到时候缓存的使用缓存，不适用缓存的重新下载资源。

• dom树和cssom树生成完了之后，开始合成render tree，这个时候浏览器会进行layout，开始计算每一个节点的位置，然后进行绘制。

• 绘制结束后，关闭TCP连接，过程有四次挥手

个人对计网比较熟，在DNS解析的递归、迭代过程、TCP三次握手的、四次挥手上面多扯一点。

DOMContentLoaded和window.onload的区别？

从MDN文档看

DOMContentLoaded

MDN: 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载

load

页面上所有的资源（图片，音频，视频等）被加载以后才会触发load事件。所以 load 所需要的时间必然大于等于 DOMContentLoaded 所需要的时间。

DOM 文档的加载步骤

• 解析HTML结构

• 加载外部脚本和样式表文件

• 解析并执行脚本

• 构建 HTML DOM模型 // DOMContentLoaded

• 加载外部资源文件（image等）

• 页面渲染完成 // load

从上述步骤中可以看出

• 当 DOMContentLoaded 事件触发时,仅当 DOM 解析完成后,不包括样式表,图片。我们前面提到 CSS 加载会阻塞 Dom 的渲染和后面 js 的执行,js 会阻塞 Dom 解析,所以我们可以得到结论:

• 当文档中没有脚本时,浏览器解析完文档便能触发 DOMContentLoaded 事件。如果文档中包含脚本,则脚本会阻塞文档的解析,而脚本需要等 CSSOM 构建完成才能执行。在任何情况下,DOMContentLoaded 的触发不需要等待图片等其他资源加载完成

• 当 onload 事件触发时,页面上所有的 DOM,样式表,脚本,图片等资源已经加载完毕

• DOMContentLoaded -> load

box-sizing: content-box & border-box以及W3C和IE两种盒式模型布局

两种模型，分清content-box 对应W3C盒式模型，width、height不包含padding和border，border-box对应IE盒式模型

box-sizing其实有3种赋值：content-box 、border-box、inherit（继承父元素）

.container {
    display:flex;
    align-items: center;
}
.left {
    width: 100px;
}
.middle {
    flex: 1;
}
.right {
    width: 100px;
}

flex布局有哪些属性

说了flex-direction方向,justify-content主轴对齐，align-items交叉轴对齐方式，重新找了一份

父元素的设置：

flex-direction : row | row-reverse | column | column-reverse; 该属性定义了 子元素排列方向

flex-wrap：nowrap | wrap | wrap-reverse; 该属性称"轴线"

flex-flow： || ; flex-direction和flex-wrap的简写形式，默认值为row nowrap

justify-content: flex-start | flex-end | center | space-between | space-around; 该属性定义了子元素在主轴上的对齐方式。

align-items: flex-start | flex-end | center | baseline | stretch;定义项目在交叉轴上如何对齐。

align-content: flex-start | flex-end | center | space-between | space-around | stretch; 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

子元素的属性：

order属性：order属性定义子元素或者子容器的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow属性：flex-grow: ;flex-grow属性定义子元素或者子容器的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink属性：flex-shrink: ; flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex-basis属性：flex-basis: | auto; flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex属性：none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

align-self属性：align-self: auto | flex-start | flex-end | center | baseline | stretch;align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

有兴趣可以玩这个游戏熟悉flex布局全部内容:CSS3 flex布局实战

伪类你知道吗

知道，举例:hover和:befor，还知道伪元素::before，实在想不起来太多了

知道他们的区别吗，前者是选择器，后者是真实创造了一个元素。

查了一下，说的不严谨：

伪类：

1. 获取不存在于DOM树中的信息。比如<a>标签的:link、visited等，这些信息不存在与DOM树结构中，只能通过CSS选择器来获取；

2. 获取不能被常规CSS选择器获取的信息。比如伪类:target，它的作用是匹配文档(页面)的URI中某个标志符的目标元素，例如我们可以通过如下代码来实现页面内的区域跳转：

伪元素：

伪元素创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容。另外，开发者还可以为伪元素定制样式。

你知道p:first-child是什么吗：

第一个子元素，然后说了类似last-child,nth-child

找了找伪类的分类

伪类-状态

1. :link 选择未访问的链接

2. :visited 选择已访问的链接

3. :hover选择鼠标指针浮动在其上的元素

4. :active选择活动的链接

5. :focus 选择获取焦点的输入字段

伪类-结构化

1. :not 一个否定伪类，用于匹配不符合参数选择器的元素

2. :first-child 匹配元素的第一个子元素

3. :last-child 匹配元素的最后一个子元素

4. :first-of-type 表示一组兄弟元素中其类型的第一个元素

5. :last-of-type 表示一组兄弟元素中其类型的最后一个元素

6. :nth-child 根据元素的位置匹配一个或者多个元素，它接受一个an+b形式的参数

   0n+3或简单的3匹配第三个元素 2n+1匹配位置为1,3,5,7...的元素 你可以用odd替换奇数行，even代替偶数行

7. :nth-last-child 与:nth-child相似，不同之处在于它从最后一个子元素开始计数

8. :nth-of-type与nth-child相似，不同之处在于它是只匹配特定类型的元素

9. :nth-last-type 与nth-of-type相似，不同之处在于它是从最后一个子元素开始计数的。

10. :only-child 当元素是其父元素中唯一的子元素时，:only-child匹配该元素

11. :only-of-type 当元素是其父元素中唯一特定类型的子元素时，:only-child匹配该元素

12. :target 当url带有锚名称，指向文档内某个具体的元素时:target匹配该元素

伪类-表单相关

1. :checked 匹配被选中的input元素，这个input元素包裹radio和checkbox.

2. :default 匹配默认选中的元素

3. :disabled 匹配禁用的表单元素

4. :empty 匹配没有子元素的元素，如果元素中含有文本节点，html元素或者一个空格，则:empty不能匹配这个元素

5. :enabled 匹配没有设置disabled属性的表单元素

6. :in-range 匹配在指定区域内元素，

7. :out-of-range 匹配不在指定区域内的元素

8. :indetermimate 当某组中的单选框或复选框还没有选取状态时，：indeterminate匹配该组中所有的单选框或复选框

9. :valid 匹配条件验证正确的表单元素

10. :invalid 匹配提交验证错误的表单元素

11. :optional :required匹配设置有无设置required属性的表单元素

12. :read-only 匹配设置了只读属性的元素

13. :read-write匹配处于编辑状态的元素

伪类-其他关联元素

1. :root 匹配文档的跟元素

2. :fullscreen 匹配处于全屏模式下的元素

找到W3C中的所有伪类

所有 CSS 伪元素，找到W3C中的所有伪元素

JS事件循环

事件循环是指: 执行一个宏任务，然后执行清空微任务列表，循环再执行宏任务，再清微任务列表

const data = [
    { id: 10, parentId: 0, text: "一级菜单-1" }, 
    { id: 20, parentId: 0, text: "一级菜单-2" },
    { id: 30, parentId: 20, text: "二级菜单-3" },
    { id: 25, parentId: 30, text: "三级菜单-25" },
    { id: 35, parentId: 30, text: "三级菜单-35" }
];

let result = [
  {
    id: 10,
    text: '一级菜单-1',
    parentId: 0
  },
  {
    id: 20,
    text: '一级菜单-2',
    parentId: 0,
    children: [
      {
        id: 10,
        text: '一级菜单-3',
        parentId: 20,
        children: [...]
      }
    ]
  }
];

function conver(data) {
    data.sort((a, b) => a.parentId - b.parentId);
    for (let i = data.length - 1; i>= 0; i--) {
        for (let j = i - 1; j >= 0; j--) {
            if (findParent(data[i], data[j])) {
                data.slice(i, 1);
                break;
            }
        }
    }
    return data;
    function findParent(a, b) {
        if (a.parentId == b.id) {
            b.children = b.children || [];
            b.child.push({...a});
            return true;
        }
        return false;
    }
}

只答出来3条，列出5条打算记住的。

1. 浏览器在回退时，get 不会重新请求，但是post会重新请求。【重要】

2. get请求会被浏览器主动缓存，而post不会。【重要】

3. get请求的参数，会报保留在浏览器的历史记录里，而post不会。做业务时要注意。为了防止CSRF攻击，很多公司把get统一改成了post。

4. get请求在url中传递的参数有大小限制，基本是2kb`，不同的浏览器略有不同。而post没有注意。

5. get的参数是直接暴露在url上的，相对不安全。而post是放在请求体中的。