一次完整的HTML请求[含HTML渲染过程]
2022/3/1 23:22:48
本文主要是介绍一次完整的HTML请求[含HTML渲染过程],对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一次完整的HTTP请求过程
域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求,浏览器得到html代码 --> 浏览器解析html代码,并请求html代码中的资源(如js、css、图片等) --> 浏览器对页面进行渲染呈现给用户
页面解析过程
CSS
不会阻塞DOM
解析,但是会阻塞DOM
渲染,严谨一点则是CSS
会阻塞render tree
的生成,进而会阻塞DOM
的渲染JS
会阻塞DOM
解析CSS
会阻塞JS
的执行- 浏览器遇到
<script>
标签且没有defer
或async
属性时会触发页面渲染
- 获取HTML文件,对其进行DOM解析
- 如果遇到css文件,怎并行下载并解析CSSOM
- 遇到js文件,并行下载,如果css的link在js的link的上面,则会等到CSSOM解析完成后再立刻执行js,注意此时DOM的解析一直处于停止状态,如果js的link在css的上面,则会先执行js,不用等待CSSDOM解析完成,但是js执行时DOM和CSSOM都是暂停解析的
请求html后会进行DOM构建,过程中遇到css引用会并行请求css并且进行cssom构建,当DOM和CSSOM构建完成,渲染树会进行合并渲染,但是如果过程中出现js引用并且没有使用async标签,则会停止dom树解析,先执行js
这篇关于一次完整的HTML请求[含HTML渲染过程]的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-11前端CSS的工程化——掌握Sass这四大特性就够了
- 2024-02-21h5关联css样式(html怎么和css关联)-icode9专业技术文章分享
- 2024-02-07Firefox禁止远程字体加速网页加载及图标字体补充安装
- 2024-02-07一个菜鸡前端的3年总结-「2023」
- 2024-01-18最火前端Web组态软件(可视化)
- 2024-01-12程序员提效 x10 的必备开源“神器”
- 2024-01-11前端可以监控静态资源的时间吗-icode9专业技术文章分享
- 2024-01-11前端系列:ES6-ES12新语法
- 2024-01-03前端 Git 使用约定
- 2024-01-03一个WPF版的Layui前端UI库