从输入url到页面加载全过程

246 阅读2分钟

07253ce7efac115082f687fba8e049fc.jpg 是不是又是一脸懵逼的问题昂!稍加解析,简明扼要,思路清晰,不拖沓。

1.加载回答流程要点

  • 浏览器工具DNS服务器得到域名的ip地址
  • 向这个ip的机器发送HTTP请求
  • 服务器收到,处理并返回HTTP请求
  • 浏览器得到返回内容

2.分析过程

  • 比如我们在浏览器输入https//baiduXX.com的时候,首先经过NDS解析,baiduXX.com对应的ip是1010.20002.然后浏览器向ip发送HTTP请求
  • server端收到HTTP请求,计算处理(向不同的用户推送不同的内容),返回请求(返回的内容就是一堆html格式的字符串),因为只有是html格式浏览器才可解析,这是w3c标准

3.渲染过程,重点!

-根据html结构生成dom树
-根据css生成css树
-把dom树和css树整合形成 RenderTree
-根据RenderTree 开始渲染和展示
-遇到script时,会执行并阻塞渲染

为何要将css放在HTML头部?

这样浏览器就会尽快拿到cs尽早生成css树,然后在解析html之后可一次性生成RendTree,渲染一次即可,如果css放底部,会出现渲染卡顿的情况,影响性能

为何要将js放放在HTML头部?

1注意js放在底部可以保证让浏览器优先渲染完,现有的HTML内容,让用户看到内容,体验好,另外,2js执行如果涉及dom操作,得等到dom解析完成才行,3js放在底部执行时,html肯定都执行成了dom结构,4js如果放在html的顶部,js执行的时候html还没来得及转换为dom结构,可能会报错。

简述过程补充?

1浏览器将css生成css树,再将dom树和css树整合成RenderTree,然后针对RenderTree即可进行渲染,有了dom结构,有样式,此时满足了渲染条件,2注意在解析过程中遇到<link src="">,<script src="">这种外链形式的css和js标签,浏览器会异步下载执行,3最后在渲染过程中如果遇到<script>就停止渲染,执行js代码,