360前端一面30min疯狂拷打+解析

前端一面， 被疯狂拷打， 当然也是因为我本来就菜

1. 为什么没有实习

啊？当然是找不到实习（bushi）
大二技术不过关， 大三在搞科研（）差不多就这样

2. 简单介绍一下你感觉自己最突出的项目

balabalaba开始吟唱

3.说一下输入url以后发生了什么

看起来很简单的问题， 但是疯狂拷打了（）

（3.1）先根据域名，协议，端口检查是否合法

但是反问：如果url不合法会发生什么

当 URL 不合法时，浏览器通常会通过显示错误消息或警告来通知用户。具体的表现形式取决于 URL 的错误类型以及浏览器的实现。 当协议不合法的时候，服务器会返回400错误。当域名不合法的时候，会提示无法找到服务器/DNS解析失败/无效的url。

（3.2）将域名进行dns解析服务，得到ip地址

但是反问：DNS的具体流程

先检查本地缓存：浏览器首先检查本地 DNS 缓存，看看是否已经缓存了该域名的 IP 地址。如果有，直接使用这个地址。

向本地 DNS 服务器查询：如果本地缓存中没有，浏览器会向配置的本地 DNS 服务器（通常由互联网服务提供商提供）发送查询请求。本地 DNS 服务器会检查自己的缓存。如果找到该域名的 IP 地址，则将其返回给浏览器。如果没有找到，继续进行下一步。

递归查询：本地 DNS 服务器开始进行递归查询。它会向根 DNS 服务器发送请求。 通过根服务器， 顶级服务器，域名服务器进行递归查找。 找到域名服务器以后， 本地服务器向这个域名服务器发送请求， 并将结果缓存。最后反馈给浏览器。

（3.3）然后建立tcp链接

但是反问：请说出三次握手的具体情况;

第一次握手：客户端发送报文段, 告知服务端客户端已经准备好

第二次握手：服务端接受到客户端发送过来的报文段以后， 向客户端发送一个报文段， 告知客户端：服务端已经接受到客户端准备好的情况

第三次握手：客户端接受到返回的报文段以后， 向客户端发送最终的确认报文段， 服务端接受以后， 双方建立起稳定的tcp链接。双方都知道彼此的存在， 并且双方确认了对方也知道自己的存在。

（3.4）然后发送http请求

但是反问: http和https有了解吗

（开始吟唱）端口不一样。 明文传递。安全性

（3.5）得到后端发送过来的资源html，css，js

但是反问：浏览器怎么判断资源类型呢？
1. 首先根据http响应头部进行判断
2.根据资源后缀名进行判断
3. 根据请求的形式进行判断
4. 根据文件的具体内容进行判断
5. 在html内部， 根据link标签以及script标签进行判断

（3.6）然后构建dom树， 渲染规则， 合并render树

但是反问：dom树是怎么构建的

解析 HTML：浏览器从 HTML 文档的开头开始逐行读取内容。

构建 DOM 节点：创建节点，设置属性

处理嵌套结构： 父子关系: 当浏览器遇到开始标签时，会将其添加到当前的父节点中。当遇到结束标签时，浏览器会识别出当前节点的结束，从而将其与父节点的关系建立起来。 文本节点: 如果在标签之间有文本内容，浏览器会创建一个文本节点并将其与相应的元素节点关联。

处理特殊情况
    自闭合标签: 对于自闭合标签（如 、
），浏览器会直接创建节点而不需要结束标签。
    错误处理: 尽可能修补

构建完成后的 是一个dom树对象

后续处理：样式和脚本: 在 DOM 树构建完成后，浏览器会根据 CSS 和 JavaScript 进行样式计算和脚本执行。这可能会导致 DOM 的进一步变化（如添加、删除节点）。

（3.7）布局， 绘制什么的

但是反问：重排和回流了解吗

但是反问：如何减少回流

1. 尽量减少或者合并dom操作
2. 尽量使用css来表示样式， 减少js样式修改
3. 尽量减少使用表格布局
4. 尽可能缩减dom树的深度
5. 避免频繁读取样式， 使用变量进行缓存

4. 手写js继承， 这个真的没有半点准备，没写出来

原型链继承， 组合继承， 寄生继承

组合集成， 在子类中调用父类的构造函数

//父类对象
function Parent(name) {
    this.name = name;
}

// 子类对象
function Child(name, age) {
    // 调用父类构造函数
    Parent.call(this, name);
    this.age = age;
}

寄生继承，在子类构造函数中创建一个父类对象, 然后给追加东西

//父类对象
function Parent(name) {
    this.name = name;
}

// 子类对象
function Child(name, age) {
    const child=new Parent（name）;
    child.age=age;
    return child;
}