Wonderjar's Blog

打开一个网页,到底发生了什么

2018-08-09

  1. request
    DNS
    /etc/hosts相当于一个小的DNS,优先查找
    其次去网上的DNS,通常连接一个wifi,会定DNS
    得到一个公网IP

CDN
如果有CDN存在,会得到一个更优的IP

发起HTTP request
HTTP基于TCP协议
建立TCP连接需进行三次握手,主要是确认对方能收到自己的消息并给出应答
所谓TCP连接其实在网络链路是没有记录的,只是各个设备在本地维持一个状态,知道自己有一个连接,给它分配资源,因为要分配资源,所以连接数有限
在TCP连接之上,HTTP定义请求和返回是什么样子的
请求方法
(CRUD, OPTIONS跨域预检,HEAD处理缓存,TRACE测试诊断,CONNECT)
请求其实就是很多行,请求方法路径是第一行,header是第二段(多行),空行,数据(多行)
response是 状态码(一行),header(多行),空行,数据(多行)

解析HTML
Firefox使用Geoko——Mozilla自主研发的渲染引擎,Safari和Chrome都使用webkit
解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树
dom树的节点可以是标签,也可以是标签中的文本
dom树按照顺序渲染
css tree
cssRule

  • Selectors
    • p
    • div
  • Declaration
    • Margin-top
    • 3px
      解析到一个script标签时立即解析执行脚本,并阻塞文档的解析直到脚本执行完。
      如果脚本是外引的,则网络必须先请求到这个资源——这个过程也是同步的,会阻塞文档的解析直到资源被请求到。
      这个模式保持了很多年,并且在html4及html5中都特别指定了。
      开发者可以将脚本标识为defer,以使其不阻塞文档解析,并在文档解析结束后执行。
      Html5增加了标记脚本为异步的选项,以使脚本的解析执行使用另一个线程。

渲染对象和Dom元素相对应,但这种对应关系不是一对一的,不可见的Dom元素不会被插入渲染树,例如head元素。
另外,display属性为none的元素也不会在渲染树中出现(visibility属性为hidden的元素将出现在渲染树中)。

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=zh-CN