1、输出URL

  • 在地址栏输出网址后回车，浏览器对输出内容进行判断：查看输出内容是否为非法的URL连贯。

    • 非法，判断输出的URL是否残缺。如果不残缺，浏览器智能补齐地址前缀或者后缀。
    • 不非法，将输出内容作为搜寻条件，应用搜索引擎进行搜寻。

2、DNS解析

  • 把URL地址解析为ip地址这一过程就是DNS解析。
  • 操作系统查看浏览器缓存和本地hosts文件是否有这个网址所对应的ip地址。有则实现DNS解析，否则进行下一步。
  • 查看本地DNS服务器（路由器）是否缓存有该网址对应的ip地址，没有则进行下一步。
  • 本地DNS服务器发送查问报文到根DNS服务器进行查问，实现域名解析。

1）优化： dns-prefetch

  • 当浏览器从（第三方）服务器申请资源时，必须先将该跨域域名解析为 IP 地址，而后浏览器能力发出请求。

  • dns-prefetch(DNS预获取)是前端网络性能优化的一种措施。它依据浏览器定义的规定，提前解析之后可能会用到的域名，使解析后果缓存到零碎缓存中，缩短DNS解析工夫，进而进步网站的访问速度。

    <link rel="dns-prefetch" href="https://fonts.googleapis.com/">

3、TCP三次握手

  • 当浏览器失去服务器的ip地址后，浏览器通过随机端口号向服务器80端口发动TCP连贯申请。
  • 客户端发送SYN包，示意申请连贯；
  • 服务端收到SYN包，回复SYN+ACK包，表示同意连贯；
  • 客户端收到SYN+ACK包，回复ACK包，示意胜利连贯。

4、发送 HTTP/HTTPS 申请

（1）HTTP

  • 建设连贯后，浏览器向服务器发送一个初始的HTTP GET申请，申请指标通常是一个HTML文件。

（2）HTTPS

  • 如果应用 HTTPS，会在TCP与HTTP之间增加一层协定作为加密及认证的服务，该层协定个别为SSL和TLS协定
  • SSL协定和TLS协定的作用是认证客户端和服务器，加密数据避免数据中途被窃取，并且保护数据的完整性，确保数据在传输过程中不被扭转。

5、响应申请

  • 服务器收到申请后，发送一个HTTP响应报文，内容蕴含响应头和HTML注释。

6、页面渲染

  • link 不会阻塞渲染
  • script 可能会阻塞渲染

1）构建DOM树

  1. 解决HTML标记并构建DOM树。

2）构建CSSOM树

  1. 解决CSS标记并构建CSSOM树。
  2. 在匹配一个节点对应的 CSS 规定时，是依照从右到左的程序的，例如：div p { font-size :14px }会先寻找所有的p标签而后判断它的父元素是否为div。
  3. 所以咱们写 CSS 时，尽量用 id 和 class，千万不要适度层叠。

3）合并渲染树

  1. 将DOM树和CSSOM树合并成一个渲染树。
  2. 渲染树会疏忽那些不须要渲染的节点，比方设置了display:none的节点。

4）布局与绘制

  1. 依据渲染树布局，计算每个节点的几何信息。

5）回流与重绘

  • display:none 会触发回流，而 visibility:hidden 只会触发重绘。

（1）回流

  1. 当浏览器发现某个局部发现变动影响了布局时，须要倒回去从新渲染，会从html标签开始递归往下，从新计算地位和大小。
  2. reflow根本是无奈防止的，因为当你滑动一下鼠标、resize 窗口，页面就会产生变动。

（2）重绘

  • 扭转了某个元素的背景色、文字色彩等等不会影响四周元素的地位变动时，就会产生重绘。
  • 每次重绘后，浏览器还须要合并渲染层并输入到屏幕上。
  • 回流的老本要比重绘高很多，所以咱们应该尽量避免产生回流。

7）优化

（1）首屏渲染FCP

  • 第一次渲染的工夫点，产生在 head 标签加载实现后。
  • 将要害款式放在 head 标签中。
  • 尽量把 script 标签放在 body 标签开端，因为 script 可能会阻塞渲染。

7、断开连接

  • 实现渲染后就能够断开TCP连贯了。
  • 然而当初浏览器为了缩小申请耗时，默认开启了长久连贯，只有标签页敞开的时候，TCP连贯才敞开。