整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
几天教大家从入门到精通，当然仅靠那一篇文章是不足以带领大家精通JavaScript的，今天给大家带来第二讲！
BOM和DOM简介
BOM，Browser Object Model ,浏览器对象模型。
BOM主要提供了访问和操作浏览器各组件的方式。
浏览器组件：
window(浏览器窗口)
location(地址栏)
history(浏览历史)
screen(显示器屏幕)
navigator(浏览器软件)
document(网页)
DOM，Document Object Model，文档对象模型。
DOM主要提供了访问和操作HTML标记的方式。
HTML标记：
图片标记
表格标记
表单标记
body、html标记
……
BOM和DOM不是JS的内容。它们是W3C制定的规范。但是，BOM和DOM在浏览器中以对象的形式得以实现。
换句话说：BOM和DOM都是由一组对象构成。
W3C是制作互联网标准的一个国际化的组织，如：XHTML、CSS、JavaScript、AJAX等。
BOM对象结构图
各对象之间是有层级关系的，那么各对象之间如何访问呢？
window.document.write(“OK”)
window.document.body.bgColor = “#FF0000”;
window对象是所有其它对象的最顶层对象，因此，可以省略。
document.write(“OK”);
document.body.bgColor = “#FF0000”;
window.alert(“OK”); ——> alert(“OK”);
window.prompt(“请输入一个分数”)； ——> prompt(“请输入一个分数”);
Window对象属性
name：指浏览器窗口的名字或框架的名字。这个名字是给<a>标记的target属性来用的。
设置窗口的名字：window.name = “newWin”
获取窗口的名字：document.write(name);
top：代表最顶层窗口。如：window.top
parent：代表父级窗口，主要用于框架。
self：代表当前窗口，主要用于框架中。
innerWidth：指浏览器窗口的内宽(不含菜单栏、工具栏、地址栏、状态栏)，该属性Firefox支持。
在IE下，使用 document.documentElement.clientWidth 来代替 window.innerWidth
innerHeight：指浏览器窗品的内高(不含菜单栏、工具栏、地址栏、状态栏)，该属性Firefox支持。
在IE下，使用 document.documentElement.clientHeight 来代替 window.innerHeight
document.documentElement就是<html>标记对象
document.body 就是 <body>标记对象
window对象方法
alert()：弹出一个警告对话框。
prompt()：弹出一个输入对话框。
confirm()：弹出一个确认对话框。如果单击“确定按钮”返回true，如果单击“取消”返回false。
close()：关闭窗口
print()：打印窗口
open()方法
功能：打开一个新的浏览器窗口。
语法：var winObj = window.open([url][,name][,options]);
说明：参数可有可无。如果没有指定参数，则打开一个选项卡式的窗口(大小是最大大化)。
参数：
url：准备在新窗口中显示哪个文件。url可以为空字符串，表示显示一个空的页面。
name：新窗口的名字，该名字给<a>标记的target属性来用。
options：窗口的规格。
width：新窗口的宽度
height：新窗口的高度
left：新窗口距离屏幕左边的距离
top：新窗口距离屏幕上边的距离
menubar：是否显示菜单栏，取值：yes、no
toolbar：是否显示工具栏。
location：是否显示地址栏。
status：是否显示状态栏。
scrollbars：是否显示滚动条，不能省略s字母。
返回值：返回一个window对象的变量，可以通过该名称跟踪该窗口。winObj具备window对象的所有属性和方法。
onload事件：当网页加载完成，指<body>标记的所有内容全部加载完成，才触发该事件(条件)。通过onload事件属性，去调用JS的函数。onload属性只有<body>标记才有。
onclick事件：当单击时，去调用JS代码。所有HTML标记都具有该事件属性。
延时器方法——setTimeout()
setTimeout()
功能：设置一个延时器，换句话说：时间一到，就执行JS代码一次。
语法：var timer = window.setTimeout(code,millisec)
参数：
code：是任何合法的JS代码，一般情况下是JS函数。该函数要放在引号中。
举例：window.setTimeout(“close()” , 2000)
举例：window.setTimeout(init, 2000); //传函数地址，因此不需要加括号。如果加括号，是将函数的执行结果传到方法中。
millisec：毫秒值。1秒=1000毫秒
返回值：返回一个延时器的id变量，这个id变量给clearTimeout()用来清除。
clearTimeout()
功能：清除延时器id变量
语法：window.clearTimeout(timer)
参数：timer就是由setTimeout()设置的延时器的id变量。
实例：计数器
定时器方法
setInterval()
功能：设置一个定时器。定时器，重复不断的执行JS代码(周期性)。
语法： var timer = window.setInterval(code , millisec)
参数：
code：是任何合法的JS代码，一般情况下是JS函数。该函数要放在引号中。
举例：window.setInterval(“init()” , 2000)
举例：window.setInterval(init, 2000); //传函数地址，因此不需要加括号。如果加括号，是将函数的执行结果传到方法中。
millisec：毫秒值。1秒=1000毫秒
返回值：返回一个定时器的id变量，这个id变量给clearInterval()用来清除。
clearInterval()
功能：清除定时器id变量
语法：window.clearInterval(timer)
参数：timer就是由setInterval()设置的定时器的id变量。
实例：图片自动切换
screen屏幕对象
Width：屏幕的宽度，只读属性。
Height：屏幕的高度，只读属性。
availWidth：屏幕的有效宽度，不含任务栏。只读属性。
availHeight：屏幕的有效高度，不含任务栏。只读属性。
navigator对象
appName：浏览器软件名称，主要用来判断客户使用的是什么核心的浏览器。
如果是IE浏览器的话，返回值为：Microsoft Internet Explorer
如果是Firefox浏览器的话，返回值为：Netscape
appVersion：浏览器软件的核心版本号。
systemLanguage：系统语言
userLanguage：用户语言
platform：平台
Location地址栏对象
href：获取地址栏中完整的地址。可以实现JS的网页跳转。location.href = “http://www.sina.com.cn”;
host：主机名
hostname：主机名
pathname：文件路径及文件名
search：查询字符串。
protocol：协议，如：http://、ftp://
hash：锚点名称。如：#top
reload([true])：刷新网页。true参数表示强制刷新
注意：所有的属性，重新赋值后，网页将自动刷新。
<meta http-equiv = “refresh” content = “5;url=http://www.sina.com.cn” />
history对象
length：历史记录的个数
go(n)：同时可以实现“前进”和“后退。”
i.history.go(0) 刷新网页
ii.history.go(-1) 后退
iii.history.go(1) 前进一步
iv.history.go(3) 前进三步
forward()：相当于浏览器的“前进”按钮
back()：相当于浏览器的“后退”按钮
下面我们来讲DOM
DOM的官方定义
DOM ， Document Object Model ，文档对象模型。我们可以把网页中的所有“东西”看成是“对象”。
DOM是W3C制定的网页标准或规则，而这个标准，在浏览器中，以“对象”的形式得以实现。
DOM的官方定义：DOM可以使脚本，动态的访问或操作，网页的内容、网页外观、网页结构。
DOM的分类
核心DOM：提供了同时操作HTML文档和XML文档的公共的属性和方法。
HTML DOM：针对HTML文档提供的专用的属性方法。
XML DOM：针对XML文档提供的专用的属性和方法。(就业班讲)
CSS DOM：提供了操作CSS的属性和方法。
Event DOM：事件对象模型。如：onclick、 onload等。
HTML节点树
节点关系
根节点，一个HTML文档只有一个根，它就是HTML节点。
子节点：某一个节点的下级节点。
父节点：某一个节点的上级节点。
兄弟节点：两个子节点同属于一个父节点。
DOM中节点类型
document文档节点，代表整个网页，不代表任何HTML标记。但它是html节点的父节点。
element元素节点，指任何HTML标记。每一个HTML标记就称一个“元素节点”。它可以有文本节点和属性节点。
attribute属性节点。指HTML标记的属性。
text节点。是节点树的最底节点。
核心DOM中的公共的属性和方法
提示：核心DOM中查找节点(标记)，都是从根节点开始的(html节点)。
1、节点访问
nodeName：节点名称。
nodeValue：节点的值。只有文本节点才有值，元素节点没有值。nodeValue的值只能是“纯文本”，不能含有任何的HTML标记或CSS属性。
firstChild：第1个子节点。
lastChild：最后1个子节点。
childNodes：子节点列表，是一个数组。
parentNode：父节点。
查找<html>标记的方法
document.firstChild
document.documentElement
查找<body>标记的方法
document.firstChild.lastChild
document.body
为什么，document.body.firstChild找不到<table>节点？
核心DOM的属性和方法，主要是针对HTML4.0开发的。
在Firefox下，会把空格或换行，当成文本节点。
HTML4.0是有没有DTD类型定义的。
2、对节点的属性操作
setAttribute(name,value)：给某个节点添加一个属性。
getAttribute(name)：获取某个节点属性的值。
removeAttribute(name)：删除某个节点的属性。
3、节点的创建
document.createElement(tagName)：创建一个指定的HTML标记，一个节点
tagName：是指不带尖括号的HTML标记名称。
举例：var imgObj = document.createElement(“img”)
parentNode.appendChild(childNode)：将创建的节点，追加到某个父节点下。
parentNode代表父节点，父节点必须存在。
childNode代表子节点。
举例：document.body.appendChild(imgObj)
parentNode.removeChild(childNode)：删除某个父节点下的子节点。
parentNode代表父节点。
childNode代表要删除的子节点。
举例：document.body.removeChild(imgObj)
综合实例：随机显示小星星
<script type="text/javascript">
//实例：随机显示小星星
/*
(1)网页背景色为黑色
(2)创建图片节点，追加到<body>父节点
(3)图片随机大小
(4)图片随机定位坐标(x,y)
(5)定时器
(6)网页加载完成，开始星星
(7)星星显示的范围，跟窗口的宽高一样。(0,window.innerWidth)
(8)点击星星，星星消失
*/
//网页加载完成
window.onload = function(){
//更改网页背景色
document.body.bgColor = "#000";
//定时器：1秒钟，显示一个星星
window.setInterval("star()",1000);
}
//动画主函数
function star()
{
//创建图片节点
var imgObj = document.createElement("img");
//添加src属性
imgObj.setAttribute("src","images/xingxing.gif");
//添加width属性。getRandom()随机数函数
var width = getRandom(15,85);
imgObj.setAttribute("width",width);
//添加style属性(行内样式)。
var x = getRandom(0,window.innerWidth);
var y = getRandom(0,window.innerHeight);
imgObj.setAttribute("style","position:absolute;left:"+x+"px;top:"+y+"px;");
//添加onclick事件属性
//this代表当前对象，this是一个对象。
//this是系统关键字。this只能在函数内使用。
imgObj.setAttribute("onclick","removeImg(this)");
//将图片节点，挂载到<body>父节点下
document.body.appendChild(imgObj);
}
//函数：求随机数函数
function getRandom(min,max)
{
//随机数
var random = Math.random()*(max-min)+min;
//向下取整
random = Math.floor(random);
//返回结果
return random;
}
//函数：删除节点
function removeImg(obj)
{
document.body.removeChild(obj);
}
</script>
</head>
<body>
</body>
HTML DOM简介和新特性
1、简介
核心DOM中，提供的属性和方法，已经可以操作网页了。为什么还要有HTMLDOM呢？
如果在核心DOM中，网页中节点层级很深时，访问这个节点时将十分麻烦。
那么，HTMLDOM中就提供了通过id直接找节点的方法，而不用再HTML根节点开始。
2、HTMLDOM的新特性
每一个HTML标记，都对应一个元素对象。如：<img>对应一个图片对象
每一个HTML标记的属性，与对应的元素对象的属性，一一对应。
HTML DOM访问HTML元素的方法(最常用)
1、getElementById()
功能：查找网页中指定id的元素对象。
语法：var obj = document.getElementById(id)
参数：id是指网页中标记的id属性的值。
返回值：返回一个元素对象。
举例：var imgObj = document.getElementById(“img01”)
2、getElementsByTagName(tagName)
功能：查找指定的HTML标记，返回一个数组。
语法：var arrObj = parentNode.getElementsByTagName(tagName)
参数：tagName是要查找的标记名称，不带尖括号。
返回值：返回一个数组。如果只有一个节点，也返回一个数组。
举例：var arrObj = ulObj.getElementsByTagName(“li”)
元素对象的属性
tagName：标签名称，与核心DOM中nodeName一样。
className：CSS类的样式。
id：同HTML标记id属性一样。
title：同HTML标记的title属性一样。
style：同HTML标记的style属性一样。
innerHTML：包含HTML标记中的所有的内容，包括HTML标记等。
以上元素对象属性的应用，详细看文件。
offsetWidth：元素对象的可见宽度，不带px单位。
offsetHeight：元素对象的可见高度，不带px单位。
scrollWidth：元素对象的总宽度，包括滚动条中的内容，不带px单位。
scrollHeight：元素对象的总高度，包括滚动条中的内容，不带px单位。
scrollTop：指内容向上滚动上去了多少距离(有滚动条时才有效)，默认值为0
scrollLeft：指内容向左滚动过去了多少距离(有滚动条时才有效)。
onscroll：当拖动滚动条时，调用JS函数。
综合案例：书讯快递
oochow Instruments 发布 Delay Lab 是一款适用于 Korg drumlogue 鼓机的全新免费用户延迟插件。据开发者称，drumlogue 已具备延时功能，但无法产生明显的合唱或镶边效果。因此，Boochow Instruments 决定开发一款专为合唱和镶边效果而设计的插件。
Boochow Instruments 是一款立体声延时器，提供正、负和交叉反馈选项。此外，它还配备了一个 LFO，用于调节延迟时间。此外，它还内置了滤波器，可对延迟特性进行微调。
开发者称，它可用于制作各种基于延迟的效果，包括节奏延迟、镶边和合唱效果。
Boochow Instruments Delay Lab 现提供免费下载。它只能在 Korg drumlogue 上运行，采用第二代 SDK 逻辑引擎。
Boochow Instruments 官网：https://synthanatomy.com/2023/10/boochow-instruments-delay-lab-free-delay-plugin-for-korg-drumlogue.html
youtobe视频链接：https://youtu.be/tXW_degI5GM
Boochow Instruments 发布 Delay Lab 适用于Korg drumlogue 免费鼓机延迟插件
https://www.audioapp.cn/bbs/thread-221990-1-1.html
(出处: 音频应用)
作为一个前端工程师，浏览器是我们密不可分的朋友，想要深耕前端，就必须和浏览器“交心”。
为什么你觉得偶尔看浏览器的工作原理，但总是忘呢，因为你没有形成一个完整的知识网络，你的记忆是碎片化的。正如人的神经网络，只有当你的记忆相互依赖，相互链接，才能形成长期稳定的记忆。
所以本文我将用一条知识线将浏览器工作原理的知识串联起来，因为本文的目的是为了帮助大家建立浏览器基础的思维树，所以很多细节点不做过多阐述，先有了树，后面你在上面伸展枝叶就会发现清晰明了很多。欢迎点赞支持或评论指正。
进程：计算机正在运行的一个程序的实例。每个进程都有自己的内存空间、系统资源（如文件描述符、I/O 等），以及一个或多个线程（执行指令的基本单位）；
线程：线程是进程中的执行单元，是操作系统调度的最小单位。在一个进程中可以有多个线程，它们共享进程的资源，但拥有各自的执行流。线程是进程的一部分，同一个进程中的多个线程可以并发执行，共享进程的地址空间和系统资源。
通俗的说，比如浏览器是一座工厂，进程就是工厂里的不同车间，线程是车间里的流水线，它是是工厂中的实际运作单位。
你需要了解：
关于并行和并发的概念一定要清晰，因为很多问题的根源或者性能优化方案都是依靠并行或并发的。
并发是指多个任务在同一时间段内交替执行，从外部看似乎是同时执行的
并行是指多个任务在同一时刻同时执行
进程间通信方式有以下七种：
根据交换信息量的多少和效率的高低，分为低级通信和高级通信。以上共享内存、管道、消息队列、套接字属于高级通信。
这里简单说下Chrome的 IPC 通信机制。它的渲染器进程通信由 Mojo 实现（以前是使用Chromium IPC），Mojo 是源于 Chrome 的 IPC 跨平台框架，它诞生于 chromium ，用来实现 chromium 进程内/进程间的通信。目前，它也被用于 ChromeOS。
想了解 Mojo的，可以看下 Mojo 设计者写的文档：Mojo介绍
上面我提到了，线程会共享进程的地址空间和系统资源。所以这些拥有共享数据的多条线程处理并发式任务时，由于多个线程操作同一资源，操作时间并未错开，而使得内存中的操作重复，从而数据错乱，造成线程安全问题。具体线程安全的原因可以总结为以下5点：
总结来讲，就是线程并发或者内核优化机制导致的线程安全问题。那怎么解决线程安全问题呢？一般有以下几种思路：
现在的浏览器基本都是采用多进程架构设计，即一个标签页（也就是一个网页）会启用多个进程，一般至少有如下四个进程：
除此以外，还可能开辟插件进程，如果页面使用了插件（例如 Flash、Java 等），则会有对应的插件进程。
渲染进程（也叫内核进程，因为浏览器内核、js引擎就是在渲染进程中工作的）和网络进程是我们前端程序员最需要关注的两个进程，下面我们就分别说说这两个进程究竟干了些什么？
渲染进程共有以下5类线程：
注意是5类线程，不是5个线程，例如GUI渲染线程就有渲染主线程、布局线程、合成器线程、栅格线程等；
注意：GUI渲染线程和JS引擎线程是互斥的（因为GUI 渲染线程和 JavaScript 引擎线程都需要访问和操作 DOM，所以做了线程安全的处理），当JS引擎执行时GUI线程会被挂起，GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。这也就是为什么js文件会阻塞页面加载，一般最好放在html底部引入的原因。
为什么事件触发、定时器触发、异步异步HTTP请求都会有各自的线程处理呢？因为JS引擎是单线程的，这些异步任务会阻塞js的执行。所以要单独开启几个线程和主线程并行执行。
这些处理异步操作的线程会把所有异步任务推到一个任务队列里，等待 JS 引擎空闲时，再把他们添加到可执行栈中，开始执行（这里就又延伸到 Event Loop 的机制了）
看到这里有同学就要问了，渲染进程中的异步HTTP请求线程负责处理异步 HTTP 请求，那浏览器的另一个进程-网络进程是干嘛呢？两个有什么区别？
渲染进程中的异步 HTTP 请求线程是专门用来处理 JavaScript 层面的异步网络请求的，例如使用XMLHttpRequest 对象或 Fetch API。而网络进程就比较全面了，它负责处理所有的网络操作，包括页面导航、处理主页面的请求、子页面的请求、资源加载等。
另外他们两个是协同工作的，例如 JS 发起的异步网络请求，要经历：DNS 解析：-> 建立连接 -> 发送请求 -> 接收响应
当HTTP 异步请求线程处理 JS 代码发起的请求时，DNS 解析和建立连接通常在网络进程中执行，HTTP 异步请求线程则负责发送请求和接收响应。
上面我们说了事件循环机制基于 JS 线程是单线程的。虽然渲染进程有很多线程，但是JavaScript执行是在一个单一的线程中进行的。
以下是事件循环的过程：
从上面渲染引擎的几大线程角度来说，JS事件循环机制可以这么理解：
当 JS 引擎从上至下按顺序执行代码时，遇到异步任务，会交由其他几个负责异步任务的线程去执行（事件触发线程、定时器线程、异步Http请求线程）并将异步回调推到任务队列里。
想要快速理解事件循环机制？了解以下这几点就明白了，不明白你提刀来砍我
网络进程里我们需要知道以下线程：
网络进程的主要工作包括：
本章主要讲解浏览器的两个引擎：渲染引擎、js引擎的工作原理。包括渲染引擎的渲染过程、js引擎的工作原理、js引擎的垃圾回收机制、内存泄漏问题定位等
书接下回，点个关注敬请期待（更新后会在此处贴上链接）
本章主要讲解与网络进程息息相关的网络通信协议相关的知识，例如TCP/IP协议、TCP建立连接的过程、https加密机制、http首部字段等知识
书接下回，点个关注敬请期待（更新后会在此处贴上链接）
从 URL 输入到页面展现到底发生了什么？这是一个老生常谈的问题。我将会从网络通信协议、进程协作、浏览器引擎工作流程等全方位讲解这个过程。帮你真正理解网页的加载过程，而不是浮于表面。
书接下回，点个关注敬请期待（更新后会在此处贴上链接）
因为篇幅问题，本文先列出来整体的思维网络，后面详细的一些讲解单独抽离，作为系列文章以后更新，感兴趣的可以点个关注，不要错过～
先看后赞，养成习惯
收藏吃灰，不如学会
点个关注，不要迷路
作者：前端阿彬
链接：https://juejin.cn/post/7341983885726187559
*请认真填写需求信息，我们会在24小时内与您取得联系。
