导图
文字版
- 浏览器进程捕获输入的内容 如果是网址，则拼上协议，拼成完整的网址转发给网络进程 如果是关键字，则拼成带关键字的搜索网址转发给网络进程
- 浏览器进程准备替换新页面，浏览器给当前页面提供beforeundload状态，允许在页面替换前做些准备工作，如果不取消导航则继续往下走
- 浏览器标签上的ico变为loading状态，页面等待替换，等渲染进程告诉浏览器进程它已经接收完网络进程给它转发的数据后开始替
- 网络进程开始发起真正的请求 （1）检查缓存，有资源缓存就用缓存，没有就请求 （2）有dns解析的缓存就用，没有就进入dns解析，获取ip （3）有了ip，和服务器建立tcp连接，https在建立tcp连接后还建立tls连接，涉及到秘钥等 （4）建立连接后，构建请求头，发送数据 （5）接收响应头，响应头中有http状态码，200是正常，301永久资源变更，302暂时资源变更，如果重定向，响应头里有location字段，是重定向地址，一切重头来 （6）接收后发给浏览器进程
- 浏览器进程通知渲染进程准备接收
- 渲染进程做好准备，与网络进程建立通道，并且通知浏览器进程做好准备
- 浏览器进程接收到渲染进程的通知后，移除当前页面状态，准备替换
- 渲染进程接收数据开始渲染 （1）边加载边解析html，生成dom树 （2）预解析机制，遇到什么资源就加载什么资源 （3）样式计算，浏览器也不是能直接读懂css的，需要根据继承规则、层叠规则这些去计算样式，转换成浏览器能读懂的样式表 （4）布局阶段，遍历dom树，生成布局树，包含了可见节点和每个节点的位置样式等数据，布局树不包含不可见元素，图片资源加载在这个阶段之后 （5）分层，不是每个节点都有一个图层，有一定机制去分层，像裁剪的元素等会分层，有层叠上下文的像定位后的z-index的也会分层 （6）图层绘制，每个图层绘制会分成多个小的绘制命令，这个阶段会将这些绘制命令按顺序排列成一个待绘制列表，提交给合成线程(在这之前是在主线程上的) （7）栅格化，合成线程接收到后，会将图层分成图块，优先按视口附件的图块生成位图（这就是栅格化），存放在显存，这个阶段一般会用到gpu加速 （8）合成和显示，全部图块都栅格化后，合成线程就会生成绘制命令提交给浏览器进程，浏览器进程会协调gpu显示内容 （9）重排：改变几何属性，从布局开始重新走流程。重绘：不改变几何属性，直接从绘制步骤开始
- 渲染完成，渲染进程通知浏览器进程，浏览器进程修改loading状态
注：
css会阻塞dom的渲染，因为生成布局树需要css执行完
css会阻塞js的执行，因为js可能会改css中已设置的样式，所以浏览器会在css加载后再执行js脚本，如果css和js是异步加载的可能不会阻塞
js和css都会阻塞dom的渲染
协议和域名不区分大小写，路径部分是否区分取决于服务器设置，如果路径映射到文件系统，则windows和maxos一般不区分，linux区分。如果不是映射到文件系统，则取决于程序设计
camel_case或者camelCase在搜索引擎上会被当做一个单词，搜索引擎无法区分语义
