Steps to input url from browser address bar to display page

Steps to input url from browser address bar to display page

General process

1. 浏览器根据请求的 URL 交给 DNS 域名解析,找到真实 IP ,向服务器发起请求;

2. 服务器交给后台处理完成后返回数据,浏览器接收⽂件( HTML、JS、CSS 、图象等);

3. 浏览器对加载到的资源( HTML、JS、CSS 等)进⾏语法解析,建⽴相应的内部数据结构
(如 HTML 的 DOM );

4. 载⼊解析到的资源⽂件,渲染⻚⾯,完成。

specific

Insert picture description here
Insert picture description here
Insert picture description here
Insert picture description here
Insert picture description here

1. 从浏览器接收 url 到开启⽹络请求线程(这⼀部分可以展开浏览器的机制以及进程与线程
之间的关系)

2. 开启⽹络线程到发出⼀个完整的 HTTP 请求(这⼀部分涉及到dns查询, TCP/IP 请求,
五层因特⽹协议栈等知识)

3. 从服务器接收到请求到对应后台接收到请求(这⼀部分可能涉及到负载均衡,安全拦截以
及后台内部的处理等等)

4. 后台和前台的 HTTP 交互(这⼀部分包括 HTTP 头部、响应码、报⽂结构、 cookie 等知
识,可以提下静态资源的 cookie 优化,以及编码解码,如 gzip 压缩等)

5. 单独拎出来的缓存问题, HTTP 的缓存(这部分包括http缓存头部, ETag , catchcontrol 等)

6. 浏览器接收到 HTTP 数据包后的解析流程(解析 html -词法分析然后解析成 dom 树、解
析 css ⽣成 css 规则树、合并成 render 树,然后 layout 、 painting 渲染、复合图
层的合成、 GPU 绘制、外链资源的处理、 loaded 和 DOMContentLoaded 等)

7. CSS 的可视化格式模型(元素的渲染规则,如包含块,控制框, BFC , IFC 等概念)

8. JS 引擎解析过程( JS 的解释阶段,预处理阶段,执⾏阶段⽣成执⾏上下⽂, VO ,作
⽤域链、回收机制等等)

9. 其它(可以拓展不同的知识模块,如跨域,web安全, hybrid 模式等等内容)

Guess you like

Origin blog.csdn.net/hu1628299958/article/details/115290661