浏览器的工作原理:
1.输入网址:www.baidu.com
2.浏览器将网址转换为IP地址:(www.baidu.com —> 10.10.10.10)
域名:www.baidu.com
DNS服务器:浏览器将 www.baidu.com 发送给DNS服务器(IP地址为 8.8.8.8)
DNS服务器将域名转化为IP地址。
3.DNS发送地址,比如10.10.10.10给浏览器,然后浏览器将地址缓存在本地。
4.浏览器就向www.baidu.com这个服务器提出请求。
浏览器 要与 服务器相通需要http协议,或者https(加密),所以网址前会有http
5.服务器收到了一个请求:www.baidu.com//8080
服务器有很多的端口,开一个端口8080来获取网页地址。
6.服务器把请求的内容 处理 返回给浏览器 页面内容。
7.浏览器收到文件 内容 然后解析。
8.看到页面。
浏览器:多线程
1.解析js的引擎
2.UI渲染
3.事件线程
4.发起请求的线程
5.定时器的线程
JS: 单线程
js时间线
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>客户端</title>
<script src="12.js"></script>
</head>
<body>
<div id="div1">aaaa</div>
<div id="div2">bbbb</div>
</body>
</html>
第一阶段: 载入阶段 默认:同步 loading
1.获取页面内容,进行解析
2.DOM树:html —> head —> meta title script
3.同步:某.js下载 —> js解释器 —> 脚本解析 —> 执行
4.DOM树:html —> head —> meta title script —> body —> …
5.解析完成
6.渲染 —> 文件在下载 图片在加载
7.载入阶段结束(页面完全能看见)
第二阶段: 事件阶段 异步 onload
获取节点
var n = document.getElementById(""div1);
console.log(n);
n = document.getElementById("div2");
console.log(n);
此时请求不到div1和div2,因为没有在DOM树里
如果将<script src="12.js"></script>
放在body的最下端,那么就可以请求到<div1><div2>
DOM BOM:
js提供的库(能对浏览器进行操作) 都放在了windows对象(全局的)里面。
比如:定义一个全局对象
var cc = 100;
console.log(windows.cc); //windows可以不写。
弹窗:浏览器的弹窗
第一种: alert(“alert 弹窗”) / windows.alert(“alert 弹窗”) ;只有一个确定按钮。
第二种: confirm(“confirm 弹窗”);有返回值(0,1)。 有确定和取消两个按钮,分别代表布尔值true和false。
var bcf = confirm(“confirm 弹窗”);
console.log(“点击:” + bcf);
点击确定输出(点击:true)/ 点击取消输出 (点击:false)。
第三种: prompt(“prompt 输入”);获取用户输入的东西。返回值是用户输入的东西。
1、var strpt = prompt(“prompt 输入:”);
console.log(“填了:”+strpt);
输入框中就会出现用户输入的内容。
2、如果什么都没有填并点取消,那么就返回null。
3、var strpt = prompt(“prompt 输入:”,“默认是cc”); //给了一个默认值(默认是cc)。
输入框中自己就会出现“默认是cc”
浏览器的导航栏的信息:
window.location对象:包含该网页的全部对象。
location.reload();刷新页面
//刷新页面,打开新的页面
var bcf = confirm("confirm 弹窗");
if(bcf){
location.replace("http://www.baidu.com/"); //跳转页面
}
else location.reload(); //刷新页面
(如果bcf的值为真,那么跳转到百度页面,否则刷新页面)
浏览器的历史:前进,后退
history.back()后退
history.forward()前进
history.go();括号里面输入1就是前进一个页面,输入-2就是后退两个页面。
浏览器的信息:版本,厂家
输入navigator就可以获取到很多信息。
获取浏览器的分辨率:screen
计时器:
循环执行:var sil = serInterval(函数名,时间);每隔一段时间就执行一次函数
停掉:clearInterval(sil);
一次执行:var sil = setTimeout(函数名,时间);到了这个时间就开始执行。
示例:
var num = 0;
function add(){
console.log("num = "+ ++num);
}
var sil = setInterval(add,1000); //每隔一秒加一次。
function end(){
clearInterval(sil);
}
setTimeout(end,10000);
//(num加一每1秒执行一次,执行10秒以后停止)