从输入url到页面展示我们可以做那些优化？
从输入url到页面展示有几步骤？需要浏览器的那些能力参与？
- 解析用户输入的内容。如果内容符合url规则就会添加协议变成完整的url进行访问。否则就使用浏览器默认的搜索引擎搜索用户输入的内容。
- 当进行url访问的时候。浏览器进程会通过进程间通信（IPC）把url发送给网络进程进行真正的网络请求。
- 在网络进程中，网络进程会检查资源缓存是否存在。如果存在直接返回资源。如果不存在则通过DNS解析ip(访问过一次后会使用DNS缓存)。用ip来访问服务器资源 (优化点1:使用缓存，减少重新请求资源消耗的时间)。如果重定向会从第2步重新开始。
- 网络进程获取到响应头信息后，会根据响应头Content-Type的不同做不同的处理。当Content-Type是text/html时，浏览器进程会准备渲染进程。随后建立网络进程和渲染进程数据传输的管道。当数据传输完成后会进入渲染阶段(大多数的优化都在这个阶段)。
渲染阶段?都有那些流程？
- 解析html，生成dom树。(建立网络进程和渲染进程数据传输的管道后。html解析器会在数据传输的同时解析html。而不是等整个文档加载完成才解析html)。
- 在解析html过程中如果遇到script标签会停止对dom的解析。针对引入的script标签会等待下载执行完成才继续进行dom解携 (优化点2:使用CDN加速script文件的加载、针对没有操作dom的代码设置延迟加载async 或 defer、使用preload/prefetch预加载资源)。
- 解析css，构建CSSOM(CSSOM 体现在 DOM 中就是document.styleSheets)。
- 基于dom树和CSSOM经过样式计算和布局计算生成布局树。
- 基于布局树对特定的节点生成层树。拥有层叠上下文属性(position: fiexd/absolute、z-index、filter、opacity)或者需要裁剪的元素(overflow)会创建为一个图层。
- 为每个图层生成绘制列表，并将其提交到合成线程。
- 合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。
- 合成线程发送绘制图块命令 DrawQuad 给浏览器进程。
- 浏览器进程根据 DrawQuad 消息生成页面，并显示到显示器上。