是不是又是一脸懵逼的问题昂!稍加解析,简明扼要,思路清晰,不拖沓。
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代码,