整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
幾天教大家從入門到精通，當(dāng)然僅靠那一篇文章是不足以帶領(lǐng)大家精通JavaScript的，今天給大家?guī)淼诙v！
BOM和DOM簡介
BOM，Browser Object Model ,瀏覽器對(duì)象模型。
BOM主要提供了訪問和操作瀏覽器各組件的方式。
瀏覽器組件：
window(瀏覽器窗口)
location(地址欄)
history(瀏覽歷史)
screen(顯示器屏幕)
navigator(瀏覽器軟件)
document(網(wǎng)頁)
DOM，Document Object Model，文檔對(duì)象模型。
DOM主要提供了訪問和操作HTML標(biāo)記的方式。
HTML標(biāo)記：
圖片標(biāo)記
表格標(biāo)記
表單標(biāo)記
body、html標(biāo)記
……
BOM和DOM不是JS的內(nèi)容。它們是W3C制定的規(guī)范。但是，BOM和DOM在瀏覽器中以對(duì)象的形式得以實(shí)現(xiàn)。
換句話說：BOM和DOM都是由一組對(duì)象構(gòu)成。
W3C是制作互聯(lián)網(wǎng)標(biāo)準(zhǔn)的一個(gè)國際化的組織，如：XHTML、CSS、JavaScript、AJAX等。
BOM對(duì)象結(jié)構(gòu)圖
各對(duì)象之間是有層級(jí)關(guān)系的，那么各對(duì)象之間如何訪問呢？
window.document.write(“OK”)
window.document.body.bgColor = “#FF0000”;
window對(duì)象是所有其它對(duì)象的最頂層對(duì)象，因此，可以省略。
document.write(“OK”);
document.body.bgColor = “#FF0000”;
window.alert(“OK”); ——> alert(“OK”);
window.prompt(“請輸入一個(gè)分?jǐn)?shù)”)； ——> prompt(“請輸入一個(gè)分?jǐn)?shù)”);
Window對(duì)象屬性
name：指瀏覽器窗口的名字或框架的名字。這個(gè)名字是給<a>標(biāo)記的target屬性來用的。
設(shè)置窗口的名字：window.name = “newWin”
獲取窗口的名字：document.write(name);
top：代表最頂層窗口。如：window.top
parent：代表父級(jí)窗口，主要用于框架。
self：代表當(dāng)前窗口，主要用于框架中。
innerWidth：指瀏覽器窗口的內(nèi)寬(不含菜單欄、工具欄、地址欄、狀態(tài)欄)，該屬性Firefox支持。
在IE下，使用 document.documentElement.clientWidth 來代替 window.innerWidth
innerHeight：指瀏覽器窗品的內(nèi)高(不含菜單欄、工具欄、地址欄、狀態(tài)欄)，該屬性Firefox支持。
在IE下，使用 document.documentElement.clientHeight 來代替 window.innerHeight
document.documentElement就是<html>標(biāo)記對(duì)象
document.body 就是 <body>標(biāo)記對(duì)象
window對(duì)象方法
alert()：彈出一個(gè)警告對(duì)話框。
prompt()：彈出一個(gè)輸入對(duì)話框。
confirm()：彈出一個(gè)確認(rèn)對(duì)話框。如果單擊“確定按鈕”返回true，如果單擊“取消”返回false。
close()：關(guān)閉窗口
print()：打印窗口
open()方法
功能：打開一個(gè)新的瀏覽器窗口。
語法：var winObj = window.open([url][,name][,options]);
說明：參數(shù)可有可無。如果沒有指定參數(shù)，則打開一個(gè)選項(xiàng)卡式的窗口(大小是最大大化)。
參數(shù)：
url：準(zhǔn)備在新窗口中顯示哪個(gè)文件。url可以為空字符串，表示顯示一個(gè)空的頁面。
name：新窗口的名字，該名字給<a>標(biāo)記的target屬性來用。
options：窗口的規(guī)格。
width：新窗口的寬度
height：新窗口的高度
left：新窗口距離屏幕左邊的距離
top：新窗口距離屏幕上邊的距離
menubar：是否顯示菜單欄，取值：yes、no
toolbar：是否顯示工具欄。
location：是否顯示地址欄。
status：是否顯示狀態(tài)欄。
scrollbars：是否顯示滾動(dòng)條，不能省略s字母。
返回值：返回一個(gè)window對(duì)象的變量，可以通過該名稱跟蹤該窗口。winObj具備window對(duì)象的所有屬性和方法。
onload事件：當(dāng)網(wǎng)頁加載完成，指<body>標(biāo)記的所有內(nèi)容全部加載完成，才觸發(fā)該事件(條件)。通過onload事件屬性，去調(diào)用JS的函數(shù)。onload屬性只有<body>標(biāo)記才有。
onclick事件：當(dāng)單擊時(shí)，去調(diào)用JS代碼。所有HTML標(biāo)記都具有該事件屬性。
延時(shí)器方法——setTimeout()
setTimeout()
功能：設(shè)置一個(gè)延時(shí)器，換句話說：時(shí)間一到，就執(zhí)行JS代碼一次。
語法：var timer = window.setTimeout(code,millisec)
參數(shù)：
code：是任何合法的JS代碼，一般情況下是JS函數(shù)。該函數(shù)要放在引號(hào)中。
舉例：window.setTimeout(“close()” , 2000)
舉例：window.setTimeout(init, 2000); //傳函數(shù)地址，因此不需要加括號(hào)。如果加括號(hào)，是將函數(shù)的執(zhí)行結(jié)果傳到方法中。
millisec：毫秒值。1秒=1000毫秒
返回值：返回一個(gè)延時(shí)器的id變量，這個(gè)id變量給clearTimeout()用來清除。
clearTimeout()
功能：清除延時(shí)器id變量
語法：window.clearTimeout(timer)
參數(shù)：timer就是由setTimeout()設(shè)置的延時(shí)器的id變量。
實(shí)例：計(jì)數(shù)器
定時(shí)器方法
setInterval()
功能：設(shè)置一個(gè)定時(shí)器。定時(shí)器，重復(fù)不斷的執(zhí)行JS代碼(周期性)。
語法： var timer = window.setInterval(code , millisec)
參數(shù)：
code：是任何合法的JS代碼，一般情況下是JS函數(shù)。該函數(shù)要放在引號(hào)中。
舉例：window.setInterval(“init()” , 2000)
舉例：window.setInterval(init, 2000); //傳函數(shù)地址，因此不需要加括號(hào)。如果加括號(hào)，是將函數(shù)的執(zhí)行結(jié)果傳到方法中。
millisec：毫秒值。1秒=1000毫秒
返回值：返回一個(gè)定時(shí)器的id變量，這個(gè)id變量給clearInterval()用來清除。
clearInterval()
功能：清除定時(shí)器id變量
語法：window.clearInterval(timer)
參數(shù)：timer就是由setInterval()設(shè)置的定時(shí)器的id變量。
實(shí)例：圖片自動(dòng)切換
screen屏幕對(duì)象
Width：屏幕的寬度，只讀屬性。
Height：屏幕的高度，只讀屬性。
availWidth：屏幕的有效寬度，不含任務(wù)欄。只讀屬性。
availHeight：屏幕的有效高度，不含任務(wù)欄。只讀屬性。
navigator對(duì)象
appName：瀏覽器軟件名稱，主要用來判斷客戶使用的是什么核心的瀏覽器。
如果是IE瀏覽器的話，返回值為：Microsoft Internet Explorer
如果是Firefox瀏覽器的話，返回值為：Netscape
appVersion：瀏覽器軟件的核心版本號(hào)。
systemLanguage：系統(tǒng)語言
userLanguage：用戶語言
platform：平臺(tái)
Location地址欄對(duì)象
href：獲取地址欄中完整的地址。可以實(shí)現(xiàn)JS的網(wǎng)頁跳轉(zhuǎn)。location.href = “http://www.sina.com.cn”;
host：主機(jī)名
hostname：主機(jī)名
pathname：文件路徑及文件名
search：查詢字符串。
protocol：協(xié)議，如：http://、ftp://
hash：錨點(diǎn)名稱。如：#top
reload([true])：刷新網(wǎng)頁。true參數(shù)表示強(qiáng)制刷新
注意：所有的屬性，重新賦值后，網(wǎng)頁將自動(dòng)刷新。
<meta http-equiv = “refresh” content = “5;url=http://www.sina.com.cn” />
history對(duì)象
length：歷史記錄的個(gè)數(shù)
go(n)：同時(shí)可以實(shí)現(xiàn)“前進(jìn)”和“后退。”
i.history.go(0) 刷新網(wǎng)頁
ii.history.go(-1) 后退
iii.history.go(1) 前進(jìn)一步
iv.history.go(3) 前進(jìn)三步
forward()：相當(dāng)于瀏覽器的“前進(jìn)”按鈕
back()：相當(dāng)于瀏覽器的“后退”按鈕
下面我們來講DOM
DOM的官方定義
DOM ， Document Object Model ，文檔對(duì)象模型。我們可以把網(wǎng)頁中的所有“東西”看成是“對(duì)象”。
DOM是W3C制定的網(wǎng)頁標(biāo)準(zhǔn)或規(guī)則，而這個(gè)標(biāo)準(zhǔn)，在瀏覽器中，以“對(duì)象”的形式得以實(shí)現(xiàn)。
DOM的官方定義：DOM可以使腳本，動(dòng)態(tài)的訪問或操作，網(wǎng)頁的內(nèi)容、網(wǎng)頁外觀、網(wǎng)頁結(jié)構(gòu)。
DOM的分類
核心DOM：提供了同時(shí)操作HTML文檔和XML文檔的公共的屬性和方法。
HTML DOM：針對(duì)HTML文檔提供的專用的屬性方法。
XML DOM：針對(duì)XML文檔提供的專用的屬性和方法。(就業(yè)班講)
CSS DOM：提供了操作CSS的屬性和方法。
Event DOM：事件對(duì)象模型。如：onclick、 onload等。
HTML節(jié)點(diǎn)樹
節(jié)點(diǎn)關(guān)系
根節(jié)點(diǎn)，一個(gè)HTML文檔只有一個(gè)根，它就是HTML節(jié)點(diǎn)。
子節(jié)點(diǎn)：某一個(gè)節(jié)點(diǎn)的下級(jí)節(jié)點(diǎn)。
父節(jié)點(diǎn)：某一個(gè)節(jié)點(diǎn)的上級(jí)節(jié)點(diǎn)。
兄弟節(jié)點(diǎn)：兩個(gè)子節(jié)點(diǎn)同屬于一個(gè)父節(jié)點(diǎn)。
DOM中節(jié)點(diǎn)類型
document文檔節(jié)點(diǎn)，代表整個(gè)網(wǎng)頁，不代表任何HTML標(biāo)記。但它是html節(jié)點(diǎn)的父節(jié)點(diǎn)。
element元素節(jié)點(diǎn)，指任何HTML標(biāo)記。每一個(gè)HTML標(biāo)記就稱一個(gè)“元素節(jié)點(diǎn)”。它可以有文本節(jié)點(diǎn)和屬性節(jié)點(diǎn)。
attribute屬性節(jié)點(diǎn)。指HTML標(biāo)記的屬性。
text節(jié)點(diǎn)。是節(jié)點(diǎn)樹的最底節(jié)點(diǎn)。
核心DOM中的公共的屬性和方法
提示：核心DOM中查找節(jié)點(diǎn)(標(biāo)記)，都是從根節(jié)點(diǎn)開始的(html節(jié)點(diǎn))。
1、節(jié)點(diǎn)訪問
nodeName：節(jié)點(diǎn)名稱。
nodeValue：節(jié)點(diǎn)的值。只有文本節(jié)點(diǎn)才有值，元素節(jié)點(diǎn)沒有值。nodeValue的值只能是“純文本”，不能含有任何的HTML標(biāo)記或CSS屬性。
firstChild：第1個(gè)子節(jié)點(diǎn)。
lastChild：最后1個(gè)子節(jié)點(diǎn)。
childNodes：子節(jié)點(diǎn)列表，是一個(gè)數(shù)組。
parentNode：父節(jié)點(diǎn)。
查找<html>標(biāo)記的方法
document.firstChild
document.documentElement
查找<body>標(biāo)記的方法
document.firstChild.lastChild
document.body
為什么，document.body.firstChild找不到<table>節(jié)點(diǎn)？
核心DOM的屬性和方法，主要是針對(duì)HTML4.0開發(fā)的。
在Firefox下，會(huì)把空格或換行，當(dāng)成文本節(jié)點(diǎn)。
HTML4.0是有沒有DTD類型定義的。
2、對(duì)節(jié)點(diǎn)的屬性操作
setAttribute(name,value)：給某個(gè)節(jié)點(diǎn)添加一個(gè)屬性。
getAttribute(name)：獲取某個(gè)節(jié)點(diǎn)屬性的值。
removeAttribute(name)：刪除某個(gè)節(jié)點(diǎn)的屬性。
3、節(jié)點(diǎn)的創(chuàng)建
document.createElement(tagName)：創(chuàng)建一個(gè)指定的HTML標(biāo)記，一個(gè)節(jié)點(diǎn)
tagName：是指不帶尖括號(hào)的HTML標(biāo)記名稱。
舉例：var imgObj = document.createElement(“img”)
parentNode.appendChild(childNode)：將創(chuàng)建的節(jié)點(diǎn)，追加到某個(gè)父節(jié)點(diǎn)下。
parentNode代表父節(jié)點(diǎn)，父節(jié)點(diǎn)必須存在。
childNode代表子節(jié)點(diǎn)。
舉例：document.body.appendChild(imgObj)
parentNode.removeChild(childNode)：刪除某個(gè)父節(jié)點(diǎn)下的子節(jié)點(diǎn)。
parentNode代表父節(jié)點(diǎn)。
childNode代表要?jiǎng)h除的子節(jié)點(diǎn)。
舉例：document.body.removeChild(imgObj)
綜合實(shí)例：隨機(jī)顯示小星星
<script type="text/javascript">
//實(shí)例：隨機(jī)顯示小星星
/*
(1)網(wǎng)頁背景色為黑色
(2)創(chuàng)建圖片節(jié)點(diǎn)，追加到<body>父節(jié)點(diǎn)
(3)圖片隨機(jī)大小
(4)圖片隨機(jī)定位坐標(biāo)(x,y)
(5)定時(shí)器
(6)網(wǎng)頁加載完成，開始星星
(7)星星顯示的范圍，跟窗口的寬高一樣。(0,window.innerWidth)
(8)點(diǎn)擊星星，星星消失
*/
//網(wǎng)頁加載完成
window.onload = function(){
//更改網(wǎng)頁背景色
document.body.bgColor = "#000";
//定時(shí)器：1秒鐘，顯示一個(gè)星星
window.setInterval("star()",1000);
}
//動(dòng)畫主函數(shù)
function star()
{
//創(chuàng)建圖片節(jié)點(diǎn)
var imgObj = document.createElement("img");
//添加src屬性
imgObj.setAttribute("src","images/xingxing.gif");
//添加width屬性。getRandom()隨機(jī)數(shù)函數(shù)
var width = getRandom(15,85);
imgObj.setAttribute("width",width);
//添加style屬性(行內(nèi)樣式)。
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代表當(dāng)前對(duì)象，this是一個(gè)對(duì)象。
//this是系統(tǒng)關(guān)鍵字。this只能在函數(shù)內(nèi)使用。
imgObj.setAttribute("onclick","removeImg(this)");
//將圖片節(jié)點(diǎn)，掛載到<body>父節(jié)點(diǎn)下
document.body.appendChild(imgObj);
}
//函數(shù)：求隨機(jī)數(shù)函數(shù)
function getRandom(min,max)
{
//隨機(jī)數(shù)
var random = Math.random()*(max-min)+min;
//向下取整
random = Math.floor(random);
//返回結(jié)果
return random;
}
//函數(shù)：刪除節(jié)點(diǎn)
function removeImg(obj)
{
document.body.removeChild(obj);
}
</script>
</head>
<body>
</body>
HTML DOM簡介和新特性
1、簡介
核心DOM中，提供的屬性和方法，已經(jīng)可以操作網(wǎng)頁了。為什么還要有HTMLDOM呢？
如果在核心DOM中，網(wǎng)頁中節(jié)點(diǎn)層級(jí)很深時(shí)，訪問這個(gè)節(jié)點(diǎn)時(shí)將十分麻煩。
那么，HTMLDOM中就提供了通過id直接找節(jié)點(diǎn)的方法，而不用再HTML根節(jié)點(diǎn)開始。
2、HTMLDOM的新特性
每一個(gè)HTML標(biāo)記，都對(duì)應(yīng)一個(gè)元素對(duì)象。如：<img>對(duì)應(yīng)一個(gè)圖片對(duì)象
每一個(gè)HTML標(biāo)記的屬性，與對(duì)應(yīng)的元素對(duì)象的屬性，一一對(duì)應(yīng)。
HTML DOM訪問HTML元素的方法(最常用)
1、getElementById()
功能：查找網(wǎng)頁中指定id的元素對(duì)象。
語法：var obj = document.getElementById(id)
參數(shù)：id是指網(wǎng)頁中標(biāo)記的id屬性的值。
返回值：返回一個(gè)元素對(duì)象。
舉例：var imgObj = document.getElementById(“img01”)
2、getElementsByTagName(tagName)
功能：查找指定的HTML標(biāo)記，返回一個(gè)數(shù)組。
語法：var arrObj = parentNode.getElementsByTagName(tagName)
參數(shù)：tagName是要查找的標(biāo)記名稱，不帶尖括號(hào)。
返回值：返回一個(gè)數(shù)組。如果只有一個(gè)節(jié)點(diǎn)，也返回一個(gè)數(shù)組。
舉例：var arrObj = ulObj.getElementsByTagName(“l(fā)i”)
元素對(duì)象的屬性
tagName：標(biāo)簽名稱，與核心DOM中nodeName一樣。
className：CSS類的樣式。
id：同HTML標(biāo)記id屬性一樣。
title：同HTML標(biāo)記的title屬性一樣。
style：同HTML標(biāo)記的style屬性一樣。
innerHTML：包含HTML標(biāo)記中的所有的內(nèi)容，包括HTML標(biāo)記等。
以上元素對(duì)象屬性的應(yīng)用，詳細(xì)看文件。
offsetWidth：元素對(duì)象的可見寬度，不帶px單位。
offsetHeight：元素對(duì)象的可見高度，不帶px單位。
scrollWidth：元素對(duì)象的總寬度，包括滾動(dòng)條中的內(nèi)容，不帶px單位。
scrollHeight：元素對(duì)象的總高度，包括滾動(dòng)條中的內(nèi)容，不帶px單位。
scrollTop：指內(nèi)容向上滾動(dòng)上去了多少距離(有滾動(dòng)條時(shí)才有效)，默認(rèn)值為0
scrollLeft：指內(nèi)容向左滾動(dòng)過去了多少距離(有滾動(dòng)條時(shí)才有效)。
onscroll：當(dāng)拖動(dòng)滾動(dòng)條時(shí)，調(diào)用JS函數(shù)。
綜合案例：書訊快遞
oochow Instruments 發(fā)布 Delay Lab 是一款適用于 Korg drumlogue 鼓機(jī)的全新免費(fèi)用戶延遲插件。據(jù)開發(fā)者稱，drumlogue 已具備延時(shí)功能，但無法產(chǎn)生明顯的合唱或鑲邊效果。因此，Boochow Instruments 決定開發(fā)一款專為合唱和鑲邊效果而設(shè)計(jì)的插件。
Boochow Instruments 是一款立體聲延時(shí)器，提供正、負(fù)和交叉反饋選項(xiàng)。此外，它還配備了一個(gè) LFO，用于調(diào)節(jié)延遲時(shí)間。此外，它還內(nèi)置了濾波器，可對(duì)延遲特性進(jìn)行微調(diào)。
開發(fā)者稱，它可用于制作各種基于延遲的效果，包括節(jié)奏延遲、鑲邊和合唱效果。
Boochow Instruments Delay Lab 現(xiàn)提供免費(fèi)下載。它只能在 Korg drumlogue 上運(yùn)行，采用第二代 SDK 邏輯引擎。
Boochow Instruments 官網(wǎng)：https://synthanatomy.com/2023/10/boochow-instruments-delay-lab-free-delay-plugin-for-korg-drumlogue.html
youtobe視頻鏈接：https://youtu.be/tXW_degI5GM
Boochow Instruments 發(fā)布 Delay Lab 適用于Korg drumlogue 免費(fèi)鼓機(jī)延遲插件
https://www.audioapp.cn/bbs/thread-221990-1-1.html
(出處: 音頻應(yīng)用)
作為一個(gè)前端工程師，瀏覽器是我們密不可分的朋友，想要深耕前端，就必須和瀏覽器“交心”。
為什么你覺得偶爾看瀏覽器的工作原理，但總是忘呢?，因?yàn)槟銢]有形成一個(gè)完整的知識(shí)網(wǎng)絡(luò)，你的記憶是碎片化的。正如人的神經(jīng)網(wǎng)絡(luò)，只有當(dāng)你的記憶相互依賴，相互鏈接，才能形成長期穩(wěn)定的記憶。
所以本文我將用一條知識(shí)線將瀏覽器工作原理的知識(shí)串聯(lián)起來，因?yàn)楸疚牡哪康氖菫榱藥椭蠹医g覽器基礎(chǔ)的思維樹，所以很多細(xì)節(jié)點(diǎn)不做過多闡述，先有了樹，后面你在上面伸展枝葉就會(huì)發(fā)現(xiàn)清晰明了很多。歡迎點(diǎn)贊支持或評(píng)論指正。
進(jìn)程：計(jì)算機(jī)正在運(yùn)行的一個(gè)程序的實(shí)例。每個(gè)進(jìn)程都有自己的內(nèi)存空間、系統(tǒng)資源（如文件描述符、I/O 等），以及一個(gè)或多個(gè)線程（執(zhí)行指令的基本單位）；
線程：線程是進(jìn)程中的執(zhí)行單元，是操作系統(tǒng)調(diào)度的最小單位。在一個(gè)進(jìn)程中可以有多個(gè)線程，它們共享進(jìn)程的資源，但擁有各自的執(zhí)行流。線程是進(jìn)程的一部分，同一個(gè)進(jìn)程中的多個(gè)線程可以并發(fā)執(zhí)行，共享進(jìn)程的地址空間和系統(tǒng)資源。
通俗的說，比如瀏覽器是一座工廠，進(jìn)程就是工廠里的不同車間，線程是車間里的流水線，它是是工廠中的實(shí)際運(yùn)作單位。
你需要了解：
關(guān)于并行和并發(fā)的概念一定要清晰，因?yàn)楹芏鄦栴}的根源或者性能優(yōu)化方案都是依靠并行或并發(fā)的。
并發(fā)是指多個(gè)任務(wù)在同一時(shí)間段內(nèi)交替執(zhí)行，從外部看似乎是同時(shí)執(zhí)行的
并行是指多個(gè)任務(wù)在同一時(shí)刻同時(shí)執(zhí)行
進(jìn)程間通信方式有以下七種：
根據(jù)交換信息量的多少和效率的高低，分為低級(jí)通信和高級(jí)通信。以上共享內(nèi)存、管道、消息隊(duì)列、套接字屬于高級(jí)通信。
這里簡單說下Chrome的 IPC 通信機(jī)制。它的渲染器進(jìn)程通信由 Mojo 實(shí)現(xiàn)（以前是使用Chromium IPC），Mojo 是源于 Chrome 的 IPC 跨平臺(tái)框架，它誕生于 chromium ，用來實(shí)現(xiàn) chromium 進(jìn)程內(nèi)/進(jìn)程間的通信。目前，它也被用于 ChromeOS。
想了解 Mojo的，可以看下 Mojo 設(shè)計(jì)者寫的文檔：Mojo介紹
上面我提到了，線程會(huì)共享進(jìn)程的地址空間和系統(tǒng)資源。所以這些擁有共享數(shù)據(jù)的多條線程處理并發(fā)式任務(wù)時(shí)，由于多個(gè)線程操作同一資源，操作時(shí)間并未錯(cuò)開，而使得內(nèi)存中的操作重復(fù)，從而數(shù)據(jù)錯(cuò)亂，造成線程安全問題。具體線程安全的原因可以總結(jié)為以下5點(diǎn)：
總結(jié)來講，就是線程并發(fā)或者內(nèi)核優(yōu)化機(jī)制導(dǎo)致的線程安全問題。那怎么解決線程安全問題呢？一般有以下幾種思路：
現(xiàn)在的瀏覽器基本都是采用多進(jìn)程架構(gòu)設(shè)計(jì)，即一個(gè)標(biāo)簽頁（也就是一個(gè)網(wǎng)頁）會(huì)啟用多個(gè)進(jìn)程，一般至少有如下四個(gè)進(jìn)程：
除此以外，還可能開辟插件進(jìn)程，如果頁面使用了插件（例如 Flash、Java 等），則會(huì)有對(duì)應(yīng)的插件進(jìn)程。
渲染進(jìn)程（也叫內(nèi)核進(jìn)程，因?yàn)闉g覽器內(nèi)核、js引擎就是在渲染進(jìn)程中工作的）和網(wǎng)絡(luò)進(jìn)程是我們前端程序員最需要關(guān)注的兩個(gè)進(jìn)程，下面我們就分別說說這兩個(gè)進(jìn)程究竟干了些什么？
渲染進(jìn)程共有以下5類線程：
注意是5類線程，不是5個(gè)線程，例如GUI渲染線程就有渲染主線程、布局線程、合成器線程、柵格線程等；
注意：GUI渲染線程和JS引擎線程是互斥的（因?yàn)镚UI 渲染線程和 JavaScript 引擎線程都需要訪問和操作 DOM，所以做了線程安全的處理），當(dāng)JS引擎執(zhí)行時(shí)GUI線程會(huì)被掛起，GUI更新會(huì)被保存在一個(gè)隊(duì)列中等到JS引擎空閑時(shí)立即被執(zhí)行。這也就是為什么js文件會(huì)阻塞頁面加載，一般最好放在html底部引入的原因。
為什么事件觸發(fā)、定時(shí)器觸發(fā)、異步異步HTTP請求都會(huì)有各自的線程處理呢？因?yàn)镴S引擎是單線程的，這些異步任務(wù)會(huì)阻塞js的執(zhí)行。所以要單獨(dú)開啟幾個(gè)線程和主線程并行執(zhí)行。
這些處理異步操作的線程會(huì)把所有異步任務(wù)推到一個(gè)任務(wù)隊(duì)列里，等待 JS 引擎空閑時(shí)，再把他們添加到可執(zhí)行棧中，開始執(zhí)行（這里就又延伸到 Event Loop 的機(jī)制了）
看到這里有同學(xué)就要問了，渲染進(jìn)程中的異步HTTP請求線程負(fù)責(zé)處理異步 HTTP 請求，那瀏覽器的另一個(gè)進(jìn)程-網(wǎng)絡(luò)進(jìn)程是干嘛呢？兩個(gè)有什么區(qū)別？
渲染進(jìn)程中的異步 HTTP 請求線程是專門用來處理 JavaScript 層面的異步網(wǎng)絡(luò)請求的，例如使用XMLHttpRequest 對(duì)象或 Fetch API。而網(wǎng)絡(luò)進(jìn)程就比較全面了，它負(fù)責(zé)處理所有的網(wǎng)絡(luò)操作，包括頁面導(dǎo)航、處理主頁面的請求、子頁面的請求、資源加載等。
另外他們兩個(gè)是協(xié)同工作的，例如 JS 發(fā)起的異步網(wǎng)絡(luò)請求，要經(jīng)歷：DNS 解析：-> 建立連接 -> 發(fā)送請求 -> 接收響應(yīng)
當(dāng)HTTP 異步請求線程處理 JS 代碼發(fā)起的請求時(shí)，DNS 解析和建立連接通常在網(wǎng)絡(luò)進(jìn)程中執(zhí)行，HTTP 異步請求線程則負(fù)責(zé)發(fā)送請求和接收響應(yīng)。
上面我們說了事件循環(huán)機(jī)制基于 JS 線程是單線程的。雖然渲染進(jìn)程有很多線程，但是JavaScript執(zhí)行是在一個(gè)單一的線程中進(jìn)行的。
以下是事件循環(huán)的過程：
從上面渲染引擎的幾大線程角度來說，JS事件循環(huán)機(jī)制可以這么理解：
當(dāng) JS 引擎從上至下按順序執(zhí)行代碼時(shí)，遇到異步任務(wù)，會(huì)交由其他幾個(gè)負(fù)責(zé)異步任務(wù)的線程去執(zhí)行（事件觸發(fā)線程、定時(shí)器線程、異步Http請求線程）并將異步回調(diào)推到任務(wù)隊(duì)列里。
想要快速理解事件循環(huán)機(jī)制？了解以下這幾點(diǎn)就明白了，不明白你提刀來砍我
網(wǎng)絡(luò)進(jìn)程里我們需要知道以下線程：
網(wǎng)絡(luò)進(jìn)程的主要工作包括：
本章主要講解瀏覽器的兩個(gè)引擎：渲染引擎、js引擎的工作原理。包括渲染引擎的渲染過程、js引擎的工作原理、js引擎的垃圾回收機(jī)制、內(nèi)存泄漏問題定位等
書接下回，點(diǎn)個(gè)關(guān)注敬請期待（更新后會(huì)在此處貼上鏈接）
本章主要講解與網(wǎng)絡(luò)進(jìn)程息息相關(guān)的網(wǎng)絡(luò)通信協(xié)議相關(guān)的知識(shí)，例如TCP/IP協(xié)議、TCP建立連接的過程、https加密機(jī)制、http首部字段等知識(shí)
書接下回，點(diǎn)個(gè)關(guān)注敬請期待（更新后會(huì)在此處貼上鏈接）
從 URL 輸入到頁面展現(xiàn)到底發(fā)生了什么？這是一個(gè)老生常談的問題。我將會(huì)從網(wǎng)絡(luò)通信協(xié)議、進(jìn)程協(xié)作、瀏覽器引擎工作流程等全方位講解這個(gè)過程。幫你真正理解網(wǎng)頁的加載過程，而不是浮于表面。
書接下回，點(diǎn)個(gè)關(guān)注敬請期待（更新后會(huì)在此處貼上鏈接）
因?yàn)槠鶈栴}，本文先列出來整體的思維網(wǎng)絡(luò)，后面詳細(xì)的一些講解單獨(dú)抽離，作為系列文章以后更新，感興趣的可以點(diǎn)個(gè)關(guān)注，不要錯(cuò)過～
先看后贊，養(yǎng)成習(xí)慣
收藏吃灰，不如學(xué)會(huì)
點(diǎn)個(gè)關(guān)注，不要迷路
作者：前端阿彬
鏈接：https://juejin.cn/post/7341983885726187559
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
