在这之前首先要了解浏览器的原理这能让你更加深刻的了解问题也能够让你站在更高的角度去理解前端

浏览器内核分成两部分：渲染引擎和js引擎

目前使用的主流浏览器有五个：

Internet Explorer、Firefox、Safari、Chrome 浏览器和 Opera。

浏览器的主要功能是向服务器发出请求，在浏览器窗口中展示您选择的网络资源。这里所说的资源一般是指 HTML 文档，也可以是 PDF、图片或其他的类型。

资源的位置由用户使用 URI（统一资源标示符）指定。

呈现引擎一开始会从网络层获取请求文档的内容，内容的大小一般限制在 8000 个块以内。

主流程示例

WebKit 主流程

Mozilla 的 Gecko 呈现引擎主流程

解析的过程可以分成两个子过程：词法分析和语法分析。

从源文档到解析树

解析通常是在翻译过程中使用的，而翻译是指将输入文档转换成另一种格式。

编译流程

学习浏览器的工作原理

第一，可以评估web开发项目的可能性，第二，从更高的纬度去审视页面，第三，在快节奏的技术迭代中把握本质。

为啥打开一个页面，有4个进程

Chrome打开一个页面需要启动多少进程？可以点击Chrome浏览器右上角的“选项”菜单，选择“更多工具”子菜单，点击“任务管理器”。查看进程，任务管理器。

多线程可以并行处理任务，但是线程是不能单独存在的，它是由进程来启动和管理的。一个进程就是一个程序的运行实例。线程是依附于进程的，而进程中使用多线程并行处理能提升运算效率。

进程中的任意一线程执行出错，都会导致整个进程的崩溃。线程之间共享进程中的数据。当一个进程关闭之后，操作系统会回收进程所占用的内存。进程之间的内容相互隔离。

单进程浏览器时代单进程浏览器是指浏览器的所有功能模块都是运行在同一个进程里，单进程浏览器不稳定、不流畅和不安全。

多进程浏览器时代

最新的Chrome浏览器包括：

1个浏览器（Browser）主进程、1个 GPU 进程、1个网络（NetWork）进程、多个渲染进程和多个插件进程。

仅打开了1个页面，为什么有4个进程

因为打开1个页面至少需要1个网络进程、1个浏览器进程、1个GPU进程以及1个渲染进程，共4个。

多进程模型提升了浏览器的稳定性、流畅性和安全性，但是资源占用大，体系架构复杂。

什么叫FP，指的是首次渲染，影响FP指标的是网络加载速度。

如何保证页面文件能被完整地送达浏览器呢？

从“数据包如何送达主机”“主机如何将数据包转交给应用”和“数据是如何被完整地送达应用程序”这三个方面。

互联网中的数据是通过数据包来传输的

TCP（Transmission Control Protocol，传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层通信协议。

一个完整的TCP连接的生命周期包括了“建立连接”“传输数据”和“断开连接”三个阶段。

互联网中的数据是通过数据包来传输的，数据包在传输过程中容易丢失或出错。

IP负责把数据包送达目的主机。

UDP负责把数据包送达具体应用。

TCP保证了数据完整地传输，它的连接可分为三个阶段：建立连接、传输数据和断开连接。

丢包一般是什么原因

网络问题，线路故障，路由错误等底层的问题都有可能导致丢包

你怎么理解 HTTP 和 TCP 的关系？

HTTP是建立在TCP协议之上的，属于应用层，TCP提供给HTTP可靠的连接，HTTP给应用提供更方便的使用接口。

http协议是超文本协议，浏览器发出http请求，TCP会把请求向底层传递知道web服务器，然后web服务器返回http请求的response，浏览器渲染数据，下层为上层提供服务。

HTTP协议和TCP协议都是TCP/IP协议簇的子集。HTTP协议属于应用层，TCP协议属于传输层，HTTP协议位于TCP协议的上层。

请求方要发送的数据包，在应用层加上HTTP头以后会交给传输层的TCP协议处理，应答方接收到的数据包，在传输层拆掉TCP头以后交给应用层的HTTP协议处理。

建立 TCP 连接后会顺序收发数据，请求方和应答方都必须依据 HTTP 规范构建和解析HTTP报文。

为啥打开第二次网站，速度比较快，第一次比较慢呢？

HTTP是一种允许浏览器向服务器获取资源的协议，是Web的基础，HTTP是浏览器使用最广的协议。

为啥打开第二次快呢？

因为第一次加载时，缓存了一些耗时的资源，浏览器缓存的有DNS缓存和页面资源缓存。

首先，用户从浏览器进程里输入请求信息，然后，网络进程发起url请求，服务器响应url请求后，浏览器进程就又要开始准备渲染进程了，渲染进程准备好后，向渲染进程提交页面数据，渲染进程接收后，开始解析页面和加载。

用户发出URL请求到页面开始解析的这个过程，就叫做导航。

一、URL

我们常见的URL是这样的:www.baidu.com，这个域名由三部分组成：协议名、域名、端口号，这里端口是默认所以隐藏。除此之外URL还会包含一些路径、查询或其他片段，例如：www.tuicool.com/search?kw=%…。我们最常见的的协议是HTTP协议，除此之外还有加密的HTTPS协议、FTP协议等等。URL的中间部分为域名或者是IP，之后是端口号。通常端口号不常见是因为大部分都是使用默认端口，如HTTP默认端口80，HTTPS默认端口443。

二、缓存

HTTP缓存有多种规则，根据是否需要向服务器重新发起请求来分类，将其分为强制缓存，对比缓存。

强制缓存：判断HTTP首部字段：Expires 和 cache-control。

Expires是一个绝对时间，即服务器时间。浏览器检查当前时间，如果还没到失效时间就直接使用缓存文件。但是该方法存在一个问题：服务器时间与客户端时间可能不一致

cache-control中的max-age保存了一个相对时间。例如Cache-Control: max-age = 484200，表示浏览器收到文件后，缓存在484200s内有效。如果同时存在cache-control和Expires，浏览器总是优先使用cache-control。

对比缓存：通过HTTP的 last-modified（最新-改进），Etag字段进行判断。

last-modified 表示请求的URL（资源）最后一次更新的时间。下一次浏览器请求资源时就发送if-modified-since字段。服务器用本地Last-modified时间与if-modified-since时间比较，如果不一致则认为缓存已过期并返回新资源给浏览器；如果时间一致则发送304状态码，让浏览器继续使用缓存。

Etag：资源的实体标识（哈希字符串），当资源内容更新时，Etag会改变。服务器会判断Etag是否发生变化，如果变化则返回新资源，否则返回304。

三、DNS域名解析

DNS域名解析（域名解析），DNS实际上是一个域名和IP对应的数据库。

IP地址往都难以记住，但机器间互相只认IP地址，于是人们发明了域名，让域名与IP地址之间一一对应，它们之间的转换工作称为域名解析，域名解析需要由专门的域名解析服务器来完成，整个过程是自动进行的。

首先浏览器先检查本地hosts文件是否有这个网址映射关系，如果有就调用这个IP地址映射，完成域名解析。如果没找到则会查找本地DNS解析器缓存，如果找到则返回。如果还是没有找到则会查找本地DNS服务器，如果找到则返回。

最后迭代查询，按根域服务器库（.com,.cn,.vip,.top...）->顶级域（.com），然后根据顶级域（.com）->第二层域子域（baidu.com），最后根据baidu.com的域名找到相应的IP，返回给浏览器。

四、TCP连接

在通过上一步的DNS域名解析后，获取到了服务器的IP地址后，便会开始建立一次连接，这是由TCP协议完成的，主要通过三次握手进行连接。

第一次握手：建立连接时，客户端发送syn包（syn=j）到服务器，并进入等待服务器确认的状态；

第二次握手：服务器收到syn包，必须确认客户端的syn（ack=j+1），同时自己根据syn生成一个ACK包，此时服务器进入等待状态；

第三次握手：客户端收到服务器的ACK包，向服务器发送确认，此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手。

五、浏览器向服务器发送HTTP请求

完整的HTTP请求包含请求起始行、请求主体和请求头部三部分。

六、浏览器接收响应

服务器在收到浏览器发送的HTTP请求之后，会将收到的HTTP报文封装成HTTP的Request对象，并通过不同的Web服务器进行处理，处理完的结果以HTTP的Response对象返回，主要包括状态码，响应头，响应报文三个部分。

状态码：

1：信息性状态码
100：（继续）请求者应当继续提出请求。
101：（切换协议）请求者已要求服务器切换协议，服务器已确认并准备切换。
2：成功状态码
200：OK 请求正常处理
204：No Content 请求处理成功，但没有资源可返回
206：Partial Content 对资源的某一部分的请求
3：重定向状态码
301：Moved Permanently 永久重定向
302：Found 临时重定向
4：客户端错误状态码
400：Bad Request 请求报文中存在语法错误
403：Forbidden 访问被拒绝
404：Not Found 无法找到请求资源
5：服务器错误状态码
500：Internal Server Error 服务器端在执行时发生错误
503：Service Unavailable 服务器处于超负载或者正在进行停机维护

响应报文：

渲染是怎么变成页面的呢？

HTML的内容是由标记和文本组成。CSS又称为层叠样式表，是由选择器和属性组成。JavaScript（简称为JS），使用它可以使网页的内容“动”起来。

构建DOM树

浏览器无法直接理解和使用HTML，所以需要将HTML转换为浏览器能够理解的结构——DOM树。

重排和重绘都是渲染进程的主线程中进行的，减少这类操作可以减少主线程的资源占用，提高主线程绘制效率

在编写js时尽量减少dom操作或合并dom操作，dom操作需要重新生成dom树，如果影响布局就需要重新生成布局树，再重新生成分层树，再进行绘制。

什么是JavaScript的调用栈

管理执行上下文的栈称为执行上下文栈，又称调用栈

栈溢出，是一种用来管理执行上下文的数据结构，符合后进先出的规则，调用栈是有大小的。

回流，重绘

引起回流的因素，第一是dom节点增加或者是删除，第二是元素的尺寸，边距，填充，边框，宽高，第三dom节点位置变化，第四dom节点display显示与否，第五，页面渲染初始化，浏览器窗口尺寸变化，向浏览器请求某些样式信息。

浏览器性能优化

回流比重绘的代价更高，回流的花销更render tree有多少节点需要重新构建有关系，使用队列处理来优化，尽可能减少重绘和回流

原理，浏览器会维护一个队列，把所有会引起的回流，重绘的操作放入在这个队列，等队列中的数量或者到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。

时间线定义：在浏览器加载页面开始的那一刻到页面加载完全结束的这个过程中，按照顺序发生的每一件事情的总流程，就是时间线

时间线产生过程，页面加载就产生一个document对象，js就起作用了，涉及到dom功能体就生效了。

查看文档解析的三个状态变化

// 只要 readyState 状态发生变化就触发，浏览器JS引擎实时监听
console.log(document.readyState); // loading
document.onreadystatechange = function() {
    console.log(document.readyState); // interactive -> complete
}

监听 DOMContentLoaded

// 监听 DOMContentLoaded：在'interactive' ：文档解析完成之后触发
document.addEventListener('DOMContentLoaded', function(){
    console.log('DOMContentLoaded');
}, false);