js基础----用户在浏览器输入网址后页面的加载
Posted sunshine_uniq
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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基础----用户在浏览器输入网址后页面的加载的主要内容，如果未能解决你的问题，请参考以下文章
当用户输入一个url地址后，到看到页面的过程，期间发生了啥？