HTML5教程

一次完整的HTML请求[含HTML渲染过程]

本文主要是介绍一次完整的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属性时会触发页面渲染
  1. 获取HTML文件,对其进行DOM解析
  2. 如果遇到css文件,怎并行下载并解析CSSOM
  3. 遇到js文件,并行下载,如果css的link在js的link的上面,则会等到CSSOM解析完成后再立刻执行js,注意此时DOM的解析一直处于停止状态,如果js的link在css的上面,则会先执行js,不用等待CSSDOM解析完成,但是js执行时DOM和CSSOM都是暂停解析的

image-20220301192735130

请求html后会进行DOM构建,过程中遇到css引用会并行请求css并且进行cssom构建,当DOM和CSSOM构建完成,渲染树会进行合并渲染,但是如果过程中出现js引用并且没有使用async标签,则会停止dom树解析,先执行js

这篇关于一次完整的HTML请求[含HTML渲染过程]的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航