前言

在前端工作负责领域，我相信每一个前端工程师每天都在跟浏览器打交道，chrome、firefox、Edge等浏览器，好像说了一个不得了的浏览器(haha...)，接下来我们一起来了解一下我们日常 软友

主体

先来了解一下浏览器从URL -> 呈现 的过程

1. 当我们输入域名 举个栗子 输入

2. 我们会通过 https 协议向服务端请求页面

   1. 浏览器会通过域名查询 IP 地址
   2. 从浏览器缓存中查询。浏览器会存储一定时间的DNS记录，操作系统不会告诉浏览器每个DNS记录的保存时限，不同浏览器设置保存时限为一个固定值（不同浏览器情况不同，一般在2-30分钟）。
   3. 从操作系统缓存中查询。如果浏览器中没有包含想要的缓存记录，那浏览器就会发起操作系统请求，继续查询操作系统缓存
   4. 从路由器中查询DNS缓存。请求持续发送到你的路由，它通常会有自己的DNS缓存。
   5. 从ISP中查询DNS缓存。下一个被查询地方是ISP缓存DNS的服务器。
   6. 域名服务器递归查询。首先从root域名服务器中查询如.com域名服务器，然后逐步向前查询，.com顶级域名服务器到ladies.ren的域名服务器。一般来说，.com级别的都已经在缓存中了，所以一般不会进行对root域名服务器的查询。
   7. 然后我们会通过GET请求会向服务器发送请求
   8. 当然也有服务器会重定向，但是搜索引擎会把他们当作两个站，比如 也会请求到 ，因为这个被我重定向了
   9. 如果有重定向浏览器会再发送一个GET请求到服务端
   10. 服务端返回HTML响应

   3.浏览器把请求回来 的 HTML 经过解析构成DOM树

   4. 计算DOM树的CSS属性
   5. 根据CSS进行逐个渲染，得到内存中的位图，然后会进行合成
   6. 合成完成，渲染页面

   看图解析

   HTML构建成DOM树的过程

   这里就简单的说一下，因为涉及了编印原理

   1. TOKEN 的拆分
   2. 状态机
   3. 构建DOM树

   DOM树构建CSS

   其实这里是根据html构建dom的节点构造的时候添加上去的，根据CSS的词(token)，拆分每一段，然后添加到元素属性身上

   确定每一个元素的位置

   这里涉及到了 盒模型，正常流排版，正常流盒，绝对定位，浮动元素排版，其他排版，大家自己找相关资料学习吧,haha...

   为每个元素在内存中渲染它的图形，并且把它绘制到对应的位置

   这里涉及了，渲染，合成，绘制

   发布于: 易山博客/掘金

   本文参考了《重学前端》，和

   本片文章不涉及任何商业用途，如果侵犯，还请通知下架此文。

   转载时必须以链接形式注明原始出处及本声明。