从输入url到得到html的整个过程,需要分为几步走:
加载资源的形式:
手动输入页面的地址得到html文件,或者通过页面跳转加载html文件,www.baidu.com
加载html中的静态资源(css,js,图片视频等静态资源)
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
加载一个资源的过程:
浏览器根据DNS服务器解析得到域名的IP地址,域名对应着IP地址
向这个IP的机器发送HTTP请求或者HTTPS请求
服务器收到,处理并返回HTTP请求
浏览器得到返回的内容
浏览器渲染页面的过程:
根据HTML结构生成DOM树(Document Object Model)
根据CSS结构生成CSSOM树 (CSS Object Model)
根据DOM和CSS生成Render树
根据Render树开始渲染和展示页面
在Render树渲染过程中遇到
<script>
标签会阻塞渲染,要先执行<script>
标签的内容,再往下渲染,Render树渲染和JS文件必须分步执行,这是因为JS文件有权利去操作和修改DOM树的结构,如果渲染到<script>
标签的地方先让JS文件执行,若DOM结构有修改再渲染修改后的DOM树。