js基础----用户在浏览器输入网址后页面的加载

问题: 用户输入网址(假设是个html页面,并且是第一次访问)

假设html 文件demo如下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" href="css/out.css" rel="stylesheet">
    <style>

        .box {
            height: 200px;
            width: 200px;
            background-color: orange;
        }

    </style>
</head>
<body>
<img src="img/3.jpg">

<div class="box"></div>
<button>点我</button>
<script>
    /**
     * 页面的加载顺序
     * 1.请求html页面
     * 2.加载外部资源
     *
     */
    var button = document.querySelector(‘button‘);
    var box = document.querySelector(‘.box‘);
    button.onclick = function () {
        box.style.display = ‘none‘;
    }

</script>

</body>
</html>

 

 

1- 根据用户输入的域名查找到对应的ip地址(DNS),浏览器向这个ip对应的服务器发送请求,服务器返回html文件

2- 浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部的css文件;

3- 浏览器又发出css文件的请求, 服务器返回这个css文件

4- 浏览器继续载入html中<body>部分的代码,并且css已经拿到手了,可以开始渲染页面了

5- 浏览器在代码中发现一个<img>标签引用了一张图片,继续向服务器发送获取图片的请求。此时浏览器不会等待图片加载完,而是继续渲染后面的代码

6-服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码

7-浏览器发现了包含js代码的<script>标签,赶快运行它;js脚本执行代码,命令浏览器隐藏掉代码中的某个<div> ( display: none)。浏览器发现少了一个元素,不得不重新渲染这部分代码(回流和重绘)

8- 继续执行,一直到</html;

9- 用户点击了页面的按钮, js让浏览器更换了一下浏览器标签的css路径;

浏览器需要重复上面的3往后的动作, 获取新的css文件,重新渲染页面

 

js基础----用户在浏览器输入网址后页面的加载

上一篇:JsonSerialize的字段[include]已经过时,已被JsonInclude代替


下一篇:第47天: Web 开发 RESTful