JavaScriptDay04

'"<>{{7*7}}

于 2019-03-11 22:55:55 发布

阅读量108

点赞数

分类专栏： # JavaScript

本文链接：https://blog.csdn.net/weixin_43415644/article/details/88395613

版权

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

浏览器如何加载页面

浏览器类似于简单的操作系统。

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秒之后停止

'"<>{{7*7}}

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScriptDay04

浏览器如何加载页面浏览器类似于简单的操作系统。1.输入一个网址。2.浏览器把网址转化为ip地址。通过ip地址可以定位到服务器（一台电脑）。不使用虚拟主机的话，一台服务器上只可以绑定一个网站（一种域名）。但是如果一台服务器上使用多个虚拟主机，一个虚拟主机上绑定一个网站，这样多个网站就能共用一个ip地址，共用一台服务器。域名：www.baidu.com 因为ip地址不是很好记。一个ip...
复制链接

扫一扫

专栏目录