前端面试--浏览器篇_前端面试浏览器

简述浏览器缓存？

讲讲浏览器本地存储，各自优劣势是什么？

讲讲从输入URL到页面呈现发生了什么？

1. 用户输入URL，浏览器会根据用户输入的信息判定是搜索还是网址。如果是搜索内容，就将搜索内容+默认搜索引擎合成新的URL；如果用户输入的内容符合URL规则，浏览器就会根据URL协议，在这段内容上加上协议合成合法的URL。
2. 用户输入完内容，按下回车键，浏览器导航栏显示loading状态。但是此时页面还是呈现前一个页面，这是因为新页面的响应数据还没有获得。
3. 浏览器进程通过**进程间通信**（IPC）把URL发送给网络请求。
4. 网络请求接收到URL请求后会检查本地缓存是否缓存了该资源。如果有，那么拦截请求，返回状态值200，并将该资源返回给浏览器进程。
5. 否则的话，网络进程会向WEB服务器发起http请求（网络请求），流程如下：
 5.1：进行DNS解析，返回对应的域名，对应的IP和端口号。如果之前DNS数据缓存服务器缓存过当前域名信息，就会直接返回缓存信息；否则发起请求获取根据域名解析出来的IP和端口号；
5.2：利用IP地址和服务器建立**TCP连接**。（由于chrome机制，统一域名同时最多只能建立6个TCP连接，少于6个可直接建立）
5.3:建立请求头信息。http请求加上TCP头部----包括源端口号，目的程序端口号和用于校验数据的完整性的序号，向下传输。
5.4：发送请求头信息。
5.5：服务器响应后，网络进程接收响应头和响应信息，并解析响应内容。
6 网络进程解析响应流程。
6.1：检查状态码，如果为301/302，则需重定向。从Location中读取地址，重新操作第四步。
6.2：为200，需要检查响应类型Content-Type,如果为字节流类型，则将该请求提交给下载管理器，改导航流程结束，也不会进行后续的渲染；如果是html，渲染进程将会准备。

7. 渲染进程准备：浏览器会检查当前URL是否和之前打开的渲染进程根域名是否相同，如果相同，则复用原来的进程，如果不同，则开启新的渲染进程。
8. 浏览器会发出“提交文档”的消息给渲染进程，渲染进程收到消息后，会和网络进程建立传输数据的“管道”，文档数据传输完成后，渲染进程会返回“确认提交”的消息给浏览器进程。
9. 浏览器进程收到“确认提交”的消息后，会更新浏览器的页面状态，包括了安全状态，地址栏的URL，前进后退的历史状态，并更新web页面，此时web页面是空白页。
10. 渲染进程对文档进行页面解析及子资源加载：
10.1：HTML通过HTML解析器转成DOM Tree；
10.2：CSS按照CSS规则和CSS解析器转成CSSOM Tree；
10.3：两个Tree相结合，形成Render Tree；
10.4：通过Layout可以计算出每个元素的具体宽高，结合起来，开始绘制，最后显示在新页面中。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22