从输入URL到页面渲染

解析URL，自动补全获取协议、端口 80/443，构建请求行请求头请求体等信息。
浏览器基于URL查找本地缓存，如果cache hit，则直接返回缓存内容，不再发送请求
通过DNS解析域名，获取IP地址
浏览器和目标服务器建立TCP连接，完成三次握手后，建立连接通道
若使用了HTTPS协议，则进行SSL握手，建立加密信道。检验HTTP2. 0
浏览器附带需要的Cookie。
设置请求头、协议版本、cookie等，发出HTTP GET请求
服务器处理请求，完成处理后，响应一个HTTP报文给浏览器
浏览器基于协议版本，Connection字段，决定是否关闭连接，如果关闭，四次挥手
浏览器根据响应的状态码, 具体处理，比如重定向
浏览器基于响应头完成缓存、Cookie设置
浏览器基于Content-Type字段，决定如何解析响应内容, 如果是text/html，则开始解析HTML
从上到下解析HTML，如遇到外部资源，则进一步请求资源，其中CSS会预加载，JS会阻塞解析
解析HTML过程中，依次生成DOM树、CSSOM树、合成两者为渲染树Render树，然后进行布局Reflow/Layout,计算每个节点的严格几何信息、绘制（包括分块、光栅化和绘制等过程）
解析过程中会触发一系列事件，如DOMContentLoaded、load等

DOMContentLoaded:当DOM树构建完成时触发，不等待CSSOM、图片和子框架iframe的加载完成, 此时可以操作DOM元素，但避免操作style
load:当页面所有资源（包括图片、样式表、脚本等）都加载完成后触发，此时页面完全可用

javascript

  // 监听DOM解析完成
  // document = 文档相关事件
  document.addEventListener('DOMContentLoaded', function() {
      console.log('DOM解析完成，可以操作DOM元素');
  });

  // 监听页面完全加载
  // window = 窗口/页面全局相关事件
  window.addEventListener('load', function() {
      console.log('页面完全加载完成');
  });

从输入URL到页面渲染 ​

从输入URL到页面渲染