js笔记整理4-CSDN博客

本文链接：https://blog.csdn.net/qq_43145310/article/details/113761446

本文详细阐述了浏览器从输入网址到显示页面的工作流程，包括DNS解析、HTTP通信、页面解析与渲染等步骤。同时，深入探讨了JavaScript的执行机制，包括单线程模型、事件循环和定时器。通过示例展示了DOM加载、事件处理和浏览器API的使用，如弹窗、页面导航及历史操作。此外，还提及了JavaScript对浏览器DOM和BOM的操作，以及计时器的使用方法。

摘要由CSDN通过智能技术生成

浏览器的工作原理：
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秒以后停止)