当前位置: 首页 > 面试经验 >

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

优质
小牛编辑
68浏览
2024-09-23

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 节点:创建节点,设置属性
处理嵌套结构: 父子关系: 当浏览器遇到开始标签时,会将其添加到当前的父节点中。当遇到结束标签时,浏览器会识别出当前节点的结束,从而将其与父节点的关系建立起来。 文本节点: 如果在标签之间有文本内容,浏览器会创建一个文本节点并将其与相应的元素节点关联。
处理特殊情况
自闭合标签: 对于自闭合标签(如 <img />、<br />),浏览器会直接创建节点而不需要结束标签。
错误处理: 尽可能修补
构建完成后的 是一个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;
}
 类似资料: