「前端」2019.10 猿辅导实习生一面_猿辅导前端实习面试经验-CSDN博客

本文链接：https://blog.csdn.net/qq_26377547/article/details/102740065

面试官是个小姐姐，本来有些紧张的，后来突然好了。
视频面试，时间大概50分钟的样子。

自我介绍

这个就不用说了，基本操作。

基础知识

1. 从URL输入到浏览器，到页面显示在浏览器中，这个过程你能说一下吗？

老生常谈，实习生面应该不会问的太细，所以简单说了一下流程：

URL经过DNS解析成IP地址：

首先到浏览器缓存当中查找是否有缓存，没有则下一步
到操作系统缓存当中去查找是否有缓存，没有则下一步
到路由器缓存当中查找是否存在缓存，没有则下一步
通过ISP的DNS服务器查找是否有IP地址，没有则下一步
通过根服务器递归查询

获取到服务器IP地址后：

通过ARP协议，找到服务器的MAC地址
与服务器建立TCP连接（3次握手）

与服务器建立TCP连接后：

向服务器发送HTTP请求
服务器接收到请求并处理后，返回HTML/CSS/JS代码

从服务器接收到HTML/CSS/JS代码后：

浏览器会先对HTML代码进行解析，构建DOM树
对CSS代码进行解析，构建CSS规则树
加载JS代码（过程会阻塞DOM树和CSS规则树的构建，可以使用<script>标签的async/defer实现异步加载/执行）
根据CSS规则树和DOM树，计算各元素位置，构建渲染树（Render Tree）
调用操作系统的Native GUI的API绘制页面

这里强烈安利一个博客：https://github.com/ljianshu/Blog/issues/24

2. DOM事件机制

这点真没看过，直接坦白不会，然后就过了（恶补！！！）

DOM事件分为三个阶段：

捕获阶段
目标阶段
冒泡阶段

捕获阶段：
事件从window对象自顶向下向目标结点传递。
捕获是自顶向下的，事件是从window对象，传递到document对象，然后是html标签（通过document.documentElement获取到html标签），再到body（通过document.body获取到body标签），再按照body结构一层一层向下传递，最后到达目标元素。
在这里插入图片描述
目标阶段：
事件到达目标元素后，目标元素对事件进行处理。

冒泡阶段：
事件从目标元素自底向上向window对象传递。

<div id="outer">
    <div id="inner"></div>
</div>

window.onclick = function() {
   
    console.log('window');
};
document.onclick = function() {
   
    console.log('document');
};
document.documentElement.onclick = function(