1.浏览器会构建HTTP请求编码\n2.DNS将域名解析为ip地址，浏览器也会提供DNS缓存，如果之前解析过这个域名，则直接命中缓存\n3.先查强缓存，命中直接使用缓存\n4.可能经过正向代理、反向代理、负载均衡、源服务器\n5.建立TCP连接，会经历三次握手、数据包发送、四次挥手\n6.发送http请求，包含请求行、请求头、请求体\n7.服务器接收到请求，进行网络响应，返回响应行(HTTP协议版本、状态码和状态描述)\n8.最后判断connection字段，如果请求头或响应头包含Connection: Keep-Alive，表示建立长连接，TCP连接会一直保持，否则断开连接
\n1.如果响应头中Content-Type的值是text/html，进行解析和渲染工作\n2.构建DOM树，由于浏览器无法直接理解HTML字符串，因此将字节流转换为一种有意义并且方便操作的数据结构，这种数据结构就是DOM树\n3.因为HTML是非上下文无关的，所以需要特殊的解析器来完成\n4.解析算法分为两步，标记化和建树，标记化可以通过有限状态自动机来完成\n5.建树算法，会将DOM对象加入 DOM 树中。还会将对应标记压入存放开放(与闭合标签意思对应)元素的栈中。\n6.进行样式计算，浏览器是无法直接识别 CSS 样式文本的，因此渲染引擎接收到 CSS 文本之后第一件事情就是将其转化为一个结构化的对象，即styleSheets。\n7.标准化样式，比如em => px , black => #000\n8.计算每个节点的样式,每个子节点都会默认继承父节点的样式属性，如果父节点中没有找到，就会采用浏览器默认样式，也叫UserAgent样式。这就是继承规则，非常容易理解。\n9.生成布局树，过浏览器的布局系统确定元素的位置，遍历DOM树节点，并把他们添加到布局树中，计算布局树节点的坐标位置。
\n1.构建图层树，比如进行3D变换的效果，当元素含有层叠上下文时怎样显示或隐藏元素，浏览器在构建完布局树之后，还会对特定的节点进行分层，构建一棵图层树\n2.生成绘制列表，渲染引擎会将图层的绘制拆分成一个个绘制指令，按顺序组成绘制列表\n3.在渲染进程中，合成线程负责绘制操作，绘制列表准备好了之后，渲染进程的主线程会给合成线程发送commit消息，把绘制列表提交给合成线程。\n4.合成线程会将将图层分块，这样会加速首屏显示\n5.因为图块上传到GPU内存会比较慢，在首次绘制时会先绘制低分辨率的图片，绘制好后再进行替换\n6.合成线程会选择视口附近的图块，把它交给栅格化线程池生成位图，过程中使用GPU进行加速，生成的位图最后发送给合成线程\n7.栅格化操作完成后，合成线程会生成一个绘制命令，并发送给浏览器进程\n8.浏览器进程把页面内容绘制到内存，也就是生成了页面，然后把这部分内存发送给显卡
","timeToRead":2,"frontmatter":{"title":"经典题目：从输入URL到页面呈现发生了什么","date":"June 30, 2020","spoiler":null},"fields":{"slug":"/classic-topic-what-happened-from-URL-input-to-page-rendering/"}}},"pageContext":{"slug":"/classic-topic-what-happened-from-URL-input-to-page-rendering/","previous":{"fields":{"slug":"/garbage-collection-mechanism-of-v8-engine/"},"frontmatter":{"title":"v8引擎垃圾内存回收机制"}},"next":{"fields":{"slug":"/browser-cache/"},"frontmatter":{"title":"浏览器缓存"}}}},"staticQueryHashes":["3649515864","63159454"]}