浏览器如何加载页面
浏览器类似于简单的操作系统。
1.输入一个网址。
2.浏览器把网址转化为ip地址。通过ip地址可以定位到服务器(一台电脑)。不使用虚拟主机的话,一台服务器上只可以绑定一个网站(一种域名)。但是如果一台服务器上使用多个虚拟主机,一个虚拟主机上绑定一个网站,这样多个网站就能共用一个ip地址,共用一台服务器。
域名:www.baidu.com 因为ip地址不是很好记。一个ip地址可以对应多个域名,但是一个域名一定对应一个ip地址
DNS服务器:浏览器把www.baidu.com发送给DNS服务器(例如谷歌的DNS服务器为8.8.8.8),DNS服务器会返回对应的ip地址
3.浏览器接收到ip地址。浏览器将该ip地址缓存到本地,下一次访问该域名时,就不要DNS服务器再次转换,直接访问本地缓存即可。
4.浏览器向对应的ip地址的服务器发送请求包。http则是请求包的发送方式
5.服务器收到请求包。http://www.baidu.com:端口名
端口:将服务器当成政府的办公大楼,端口相当于办公大楼的办事窗口1~65536
端口名不写的话,默认为80端口。即http://www.baidu.com:80表示向ip地址为xxxx的服务器的80端口发送请求包
6.服务器把请求的内容 返回给浏览器。即把页面的内容返回给浏览器。
7.浏览器收到文件内容,进行解析。
8..看到一个页面
浏览器:
是多线程的:可以同时做很多事情,例如:
1.可以解析js引擎
2.可以做UI渲染
3.事件触发的线程
4.发起请求的线程
5.定时器的线程
然而,浏览器处理js相关事情的时候是单线程的。好比银行中只有一个柜台处理和js相关的事情,很多人来只能排队。
单线程又有同步任务和异步任务之分:
同步任务:我要存一万块钱,柜台给我一堆单子,我填好单子,然后把钱存进去,这一系列过程中,我身后排队的人一直在等着
异步任务:即我先自己在旁边把单子填好,然后去排队。
js如何在浏览器中生效的?(js的时间线)
第一阶段:载入阶段 默认情况下是同步的
浏览器收到页面内容之后,就会进行解析,即
1.获取页面内容(例如2.html文件),进行解析
2.生成DOM树
例如:2.html文件为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本语法</title>
<script src="1.js"></script>
<script>alert("Hello world2")</script>
</head>
<body onload="alert('hello world3');">
</body>
</html>
则解析生成DOM树为:
html
head
meta title script
遇到script因为它是外部文件,这时DOM树卡住了,停止解析,去从服务器下载1.js文件到本地,下载完成之后,用js解释器对1.js脚本解析,解析完成之后执行该文件。执行完脚本之后,继续生成DOM树
html
head
meta title script
body
一直把DOM树生成完毕为止
解析完成
3.浏览器进行渲染(即让你眼睛能看得见页面内容),渲染的同时还有一些文件正在下载,比如图片。
4.载入阶段loading结束
//操作DOM树
var n=document.getElementById("div1");//获取编号为div1的DOM节点
console.log(n);
n=document.getElementById("div2");
console.log(n);
//这个时候打印出来的一定是null,因为现在只是执行到js脚本执行哪一步,
//DOM树还没有解析到div那一部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基本语法</title>
<script src="1.js"></script>
<script>alert("Hello world2")</script>
</head>
<body onload="alert('hello world3');">
<div id="div1"> aaaaa</div>
<div id="div2">bbbbbb</div>
</body>
</html>
第二阶段:事件阶段 onload 一般是异步的
DOM操作和BOM操作
js给我们提供的库都放在了windows对象里面。windows 是一个全局的对象,里面的方法都是全局的方法。
console.log(window.cc);
var cc=10;
console.log(window.cc);//window里面本来没有cc这个变量,但是在定义了cc之后,
//就存在了window里面,即全局变量本质上都是存在window里面的,也就是window可以不写
//直接写cc就可以。
//BOM
//弹窗 浏览器的弹窗
//1.alert弹窗
window.alert("弹窗");//同步:阻断式,即html中遇到script脚本,必须把脚本执行完才能往下走
//window 可以省略
//2.confirm弹窗
var b=confirm("你是否已经满18岁?");
//alert是一个很干净的弹窗什么都没有
//但是confirm弹窗有一个返回值,返回一个布尔值
//弹窗有两个按钮,选择确定返回T,选择取消返回false
//3.prompt弹窗
var strpt=prompt("prompt输入:");
//返回值为用户输入的字符串。
console.log("用户输入了"+strpt,"默认是哈哈");
//什么都不填为空,点取消则为null,当然也可以自己设置默认值
//获取浏览器的导航栏(即url栏)的信息
//使用window.location window对象中的location对象
//例如:
// location中
// href为https://www.baidu.com/
// host为// 与 /中间的内容
//pathname为href取掉/之间的内容剩余的东西
//origin为href中/之前的内容
//port为端口,默认为80端口
location.href;
location.toString();//两者相同,均为显示完整网址
var b=confirm("草度娘好不好?")
if(b){
location.replace("http://www.baidu.com/")//打开新网址
}
elselocation.reload;//刷新页面
//浏览器的历史:前进,后退
history.back;//后退
history.forward;//前进
history.go(-1);//后退一次
history.go(-2);//后退两次
history.go(2);//前进两次
//获取浏览器信息
navigator;//输入该对象即可
//userAgent中几乎包含了和浏览器相关的所有信息。
//获取浏览器的分辨率
screen;//输入该对象即可
//屏幕的大小 height width 这个值包含屏幕下方的任务栏
//浏览器的大小:availHeight availWidth这个值不含下方的任务栏
// //计时器
// //循环执行:
// var sil=setInterval(函数名,时间);//返回值的作用是便于停止该循环
// //表示每隔这个时间循环执行这个函数名。
// //让循环停止,即让setInterval()的返回值清除掉
// clearInterval(sil);
// //执行一次:
// var sil=setTimeout(函数名,时间);
// //表示到了这个时间,执行一次这个函数
// clearTimeout(sil);//强制中断这个执行一次的线程。
var num=0;
function add(){
console.log("num="+ ++num);
}
var sil=setInterval(add,1000);
function end(){
clearInterval(sil);
}
setTimeout(end,10000);//10秒之后停止