浏览器渲染

问： 输入url到页面展示发生了什么？
答：发生了5步

1. DNS解析
   从本地-服务器根域名往下查，例如www.google.com，顺序是 .（根服务器） .com（.com服务器） .google.com（googlle.com服务器），解析到ip后存在本地。
   tip: dns缓存、DN负载均衡（dns返回就近的ip地址，CDN就是利用的这项重定向技术）

2. TCP连接
   3次握手

3. 发送http请求
   http状态码和http缓存见上一篇博文

4. 服务器处理并返回http报文

5. 浏览器解析并渲染页面
   这一步又分为几步：

   1.解析html生成DOM树 —同时—解析css生成CSSOM树
   2.结合以上二者生成渲染树

   3. 浏览器布局渲染树–绘制到屏幕
      tip：回流（reflow）和重绘(repain)。根据css盒模型计算位置和大小（回流），等颜色大小位置都确定下来后，就会绘制到浏览器（重绘）。但由于js会操作DOM因此会重复前面二者，尽量减少二者，提高性能。
      会引起回流的：首次渲染、节点位置大小改变、浏览器窗口大小改变、增减DOM元素等
      tip: css后紧跟javascript，前者会阻塞后者，因为后者可能会操作样式
      tip: javascript由V8引擎解释，谷歌的DOM由webkit的（coreweb？？）解析，二者不是同一模块。但是JavaScript会阻塞DOM解析，因为他可能会操作DOM。async 和defer可用于异步加载和执行。二者区别已画在js高程书上。
      jsEVENTLOOP：宏事件（同步）–微事件–任务队列（异步）

6. 连接结束