整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
程序開發(fā)如火如荼，如果你是程序員，你還不懂小程序的開發(fā)，恐怕會(huì)被同行認(rèn)為太LOW了吧！不過，新入行小程序開發(fā)者確實(shí)會(huì)被新的名詞搞得一頭霧水。
比如JavaScript不是在瀏覽器端運(yùn)行嗎，怎么還可以寫服務(wù)器端的程序，NodeJS是干啥的，V8和NodeJS有啥區(qū)別，什么NMP命令，它是干嘛的，想把這些東東的本質(zhì)看透嗎，我們來(lái)剖析一下吧。
JavaScript
JavaScript是一種屬于網(wǎng)絡(luò)的解釋性腳本語(yǔ)言,已經(jīng)被廣泛用于Web應(yīng)用開發(fā),用來(lái)給HTML網(wǎng)頁(yè)增加動(dòng)態(tài)功能,為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來(lái)實(shí)現(xiàn)自身的功能的。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分。
V8引擎
V8引擎就是JavaScript運(yùn)行的解釋器，是JavaScript一種引擎。它是Google開發(fā)的，作為chrome瀏覽器的JavaScript執(zhí)行解釋器，性能十分優(yōu)秀，被廣泛的使用。
NodeJS
在2009年的歐洲JavaScript大會(huì)上， 年輕程序員Ryan Dahl展示了他正在從事的一個(gè)項(xiàng)目，該項(xiàng)目是一個(gè)集成了Google V8 JavaScript引擎、事件循環(huán)和底層I/O應(yīng)用編程接口(Application Programming Interface, API）的平臺(tái)。
與其他服務(wù)器端的JavaScript平臺(tái)不同，Dahl的平臺(tái)中所有I/O原語(yǔ)都是事件驅(qū)動(dòng)的，除此以外別無(wú)他途。借助JavaScript的影響力和易用性，Dahl的項(xiàng)目使得編寫基于事件驅(qū)動(dòng)的服務(wù)器端應(yīng)用程序的任務(wù)由難變易， 因此，該項(xiàng)目受到了熱烈歡迎， 并且它的發(fā)展、普及和被接受程度都是前所未有的。這個(gè)項(xiàng)目被命名為NodeJS。NodeJS不單單是JavaScript引擎，JavaScript引擎只是它的一個(gè)子集。
NodeJS中的JavaScript引擎沒有BOM、DOM。NodeJS是JavaScript的一種運(yùn)行環(huán)境，是對(duì)Google V8引擎進(jìn)行的封裝。是一個(gè)服務(wù)器端的JavaScript的解釋器。
nmp管理工具
除了使用NodeJS語(yǔ)言特性及核心函數(shù)，我們還需要使用一些已經(jīng)編寫好的優(yōu)秀的第三方庫(kù)， 這也是為什么大多數(shù)編程平臺(tái)都具有一個(gè)系統(tǒng)用來(lái)下載、 安裝和管理第三方模塊的原因。 在NodeJS中這個(gè)系統(tǒng)被稱為NodeJS包管理器(NodePackage Manager, NPM）。NPM是三位一體的系統(tǒng)第三方包庫(kù)、管理計(jì)算機(jī)中安裝的包的機(jī)制以及定義包依賴關(guān)系的標(biāo)準(zhǔn)。NPM提供了一種公共注冊(cè)服務(wù)，它包含了程序員在NPM中發(fā)布的所有包，NPM還提供了一個(gè)命令行工具用來(lái)下載、安裝和管理這些包。
在早期，NPM和NodeJS是要分別獨(dú)立安裝的，但是從0.6.0版開始，NPM就己經(jīng)包含在Node的安裝包中。NodeJS中含有NPM。
css即時(shí)按需的原子化CSS引擎有何作用？例如在這里給它一個(gè)相關(guān)的dlass，最終它生成了一個(gè)CSS代碼，就是下面相關(guān)的樣式了。也就是說可以在html代碼中直接書寫樣式。
例如在這里，想讓一段文本向右移動(dòng)，只需給它一個(gè)right的樣式即可。例如再給它添加一個(gè)顏色red，就變成紅色了。對(duì)于不熟悉樣式的人，可以參考這里的文檔。在這里，可以搜索相關(guān)樣式并查看效果。
例如W4是一個(gè)單位，默認(rèn)使用R、e m作為單位。如果項(xiàng)目通常使用PX，可以在這里進(jìn)行轉(zhuǎn)換，并提供相關(guān)配置和圖標(biāo)、字體等。可以在常用的Vite項(xiàng)目中進(jìn)行整合。首先安裝依賴，然后在Vite配置文件中引入，在插件中聲明figl，然后導(dǎo)入CSS即可使用。
當(dāng)然，官方文檔是英文版的，因此許多人會(huì)參考Windi CSS文檔進(jìn)行學(xué)習(xí)。這是一個(gè)非常聰明的方法，因?yàn)樗梢酝ㄟ^Uno CSS減輕樣式代碼，提高生產(chǎn)效率。
可能已經(jīng)聽說過Project Quantum ...它是Firefox的內(nèi)部部件的重大改寫，使Firefox快速。我們正在從我們的實(shí)驗(yàn)瀏覽器Servo中進(jìn)行部分交換，并對(duì)引擎的其他部分進(jìn)行了大量改進(jìn)。
該項(xiàng)目已經(jīng)與噴氣式飛機(jī)仍在飛行中替換噴氣發(fā)動(dòng)機(jī)相比較。我們正在按組件進(jìn)行更改，以便在每個(gè)組件準(zhǔn)備就緒后，您可以在Firefox中看到效果。
而Servo的第一個(gè)主要組件 - 名為Quantum CSS（以前稱為Stylo）的新CSS引擎 - 現(xiàn)在可以在我們的Nightly版本中進(jìn)行測(cè)試。您可以通過轉(zhuǎn)到about:config并設(shè)置layout.css.servo.enabled為true 來(lái)確保它已打開。
這款新引擎將來(lái)自四個(gè)不同瀏覽器的最先進(jìn)的創(chuàng)新融合在一起，以創(chuàng)建一個(gè)新的超級(jí)CSS引擎。
它利用了現(xiàn)代硬件，并行化了機(jī)器中所有內(nèi)核的工作。這意味著它最多可以運(yùn)行2或4甚至18倍。
除此之外，它結(jié)合了來(lái)自其他瀏覽器的現(xiàn)有最新優(yōu)化。所以即使沒有并行運(yùn)行，它仍然是一個(gè)快速的CSS引擎。
但是什么是CSS引擎呢？首先，我們來(lái)看看CSS引擎，以及它如何適應(yīng)瀏覽器的其余部分。那么我們可以看看Quantum CSS如何使它更快。
什么是CSS引擎？
CSS引擎是瀏覽器渲染引擎的一部分。渲染引擎采用網(wǎng)站的HTML和CSS文件，并將其轉(zhuǎn)換為屏幕上的像素。
每個(gè)瀏覽器都有一個(gè)渲染引擎。在Chrome中，它叫做Blink。在Edge中，它被稱為EdgeHTML。在Safari中，它被稱為WebKit。在Firefox中，它被稱為Gecko。
要從文件到像素，所有這些渲染引擎基本上都做同樣的事情：
將文件解析為瀏覽器可以理解的對(duì)象，包括DOM。在這一點(diǎn)上，DOM知道頁(yè)面的結(jié)構(gòu)。它知道元素之間的父/子關(guān)系。不知道這些元素應(yīng)該是什么樣的。
找出這些元素應(yīng)該是什么樣的。對(duì)于每個(gè)DOM節(jié)點(diǎn)，CSS引擎都會(huì)確定哪些CSS規(guī)則適用。然后，它會(huì)為該DOM節(jié)點(diǎn)的每個(gè)CSS屬性確定值。
繪出每個(gè)節(jié)點(diǎn)的尺寸及其在屏幕上的位置。將為屏幕上顯示的每個(gè)東西創(chuàng)建框。這些方框不僅僅代表DOM節(jié)點(diǎn)，還可以為DOM節(jié)點(diǎn)內(nèi)的東西，如文本行。
畫不同的盒子。這可能發(fā)生在多層。我想起了這個(gè)像老式的手繪動(dòng)畫，帶有洋蔥的紙層。這樣就可以改變一個(gè)層，而不必在其他層上重繪某些東西。
拿這些不同的繪圖層，應(yīng)用任何只有合成器的屬性，如transforms，并將它們變成一個(gè)圖像。這基本上就像是將層疊在一起的圖片。此圖像將在屏幕上呈現(xiàn)。
這意味著當(dāng)它開始計(jì)算樣式時(shí)，CSS引擎有兩件事情：
一個(gè)DOM樹
風(fēng)格規(guī)則清單
它逐個(gè)瀏覽每個(gè)DOM節(jié)點(diǎn)，并計(jì)算出該DOM節(jié)點(diǎn)的樣式。作為其中的一部分，它為DOM節(jié)點(diǎn)提供了每個(gè)CSS屬性的值，即使樣式表未聲明該屬性的值。
我想像這樣像一個(gè)人通過填寫一個(gè)表單。他們需要為每個(gè)DOM節(jié)點(diǎn)填寫這些表單之一。而對(duì)于每個(gè)表格領(lǐng)域，他們需要有一個(gè)答案。
要做到這一點(diǎn)，CSS引擎需要做兩件事情：
找出哪些規(guī)則適用于節(jié)點(diǎn) - aka 選擇器匹配
使用父級(jí)值或默認(rèn)值（也稱為級(jí)聯(lián)）填充任何缺少的值
選擇器匹配
對(duì)于此步驟，我們將添加與DOM節(jié)點(diǎn)匹配的任何規(guī)則到列表。因?yàn)槎鄠€(gè)規(guī)則可以匹配，所以同一屬性可能有多個(gè)聲明。
此外，瀏覽器本身還添加了一些默認(rèn)的CSS（稱為用戶代理樣式表）。CSS引擎知道要選擇哪個(gè)值？
這就是特定性規(guī)則的出現(xiàn)。CSS引擎基本上創(chuàng)建一個(gè)電子表格。然后它根據(jù)不同的列對(duì)聲明進(jìn)行排序。
具有最高特異性的規(guī)則勝出。所以基于這個(gè)電子表格，CSS引擎填寫了它可以的值。
對(duì)于其余的，我們將使用級(jí)聯(lián)。
級(jí)聯(lián)
級(jí)聯(lián)使得CSS易于編寫和維護(hù)。因?yàn)榧?jí)聯(lián)，可以設(shè)置color在機(jī)身性能和知道該文本p，并span和li元素都將使用該顏色（除非你有一個(gè)更具體的覆蓋）。
為此，CSS引擎會(huì)查看其表單上的空白框。如果該屬性默認(rèn)繼承，那么CSS引擎將向上爬樹，以查看其中一個(gè)祖先是否具有值。如果沒有一個(gè)祖先有一個(gè)值，或者該屬性不繼承，它將獲得一個(gè)默認(rèn)值。
所以現(xiàn)在所有的樣式都已經(jīng)為這個(gè)DOM節(jié)點(diǎn)計(jì)算了。
一個(gè)sidenote：風(fēng)格結(jié)構(gòu)共享
我向你展示的形式有點(diǎn)虛偽。CSS有數(shù)以百計(jì)的屬性。如果CSS引擎持有每個(gè)DOM節(jié)點(diǎn)的每個(gè)屬性的值，它將很快耗盡內(nèi)存。
相反，引擎通常會(huì)做一些所謂的樣式結(jié)構(gòu)共享。它們通常在一起被稱為樣式結(jié)構(gòu)的不同對(duì)象中存儲(chǔ)數(shù)據(jù)（如字體屬性）。然后，代替在同一對(duì)象中擁有所有屬性，計(jì)算的樣式對(duì)象只有指針。對(duì)于每個(gè)類別，都有一個(gè)指向具有該DOM節(jié)點(diǎn)正確值的樣式結(jié)構(gòu)的指針。
這將節(jié)省內(nèi)存和時(shí)間。具有類似屬性的節(jié)點(diǎn)（如兄弟姐妹）可以指向與它們共享的屬性相同的結(jié)構(gòu)體。并且因?yàn)樵S多屬性都被繼承，所以祖先可以與沒有指定自己的覆蓋的任何后代共享一個(gè)結(jié)構(gòu)體。
現(xiàn)在，我們?nèi)绾巫龅竭@一點(diǎn)呢？
那么當(dāng)你沒有優(yōu)化它時(shí)，這就是什么樣的計(jì)算。
這里有很多工作。它不僅僅需要在第一頁(yè)的加載中發(fā)生。當(dāng)用戶與頁(yè)面進(jìn)行交互，將鼠標(biāo)懸停在元素上或?qū)OM進(jìn)行更改時(shí)，會(huì)重復(fù)出現(xiàn)，從而觸發(fā)重新啟動(dòng)。
這意味著CSS樣式計(jì)算是優(yōu)化的最佳選擇...而瀏覽器已經(jīng)測(cè)試出不同的策略，以優(yōu)化它在過去20年。什么Quantum CSS做的是從不同的引擎中充分利用這些策略，并結(jié)合它們來(lái)創(chuàng)建一個(gè)超快的新引擎。
所以我們來(lái)看看這些工作如何共同的細(xì)節(jié)。
并行運(yùn)行
Servo項(xiàng)目（Quantum CSS來(lái)自）是一個(gè)實(shí)驗(yàn)瀏覽器，它試圖并行化渲染網(wǎng)頁(yè)的所有不同部分。這意味著什么？
一臺(tái)電腦就像一只大腦。有一部分做這個(gè)想法（ALU）。在這個(gè)附近，有一些短期記憶（寄存器）。這些在CPU上組合在一起。那么長(zhǎng)期的內(nèi)存是RAM。
早期的電腦一次只能用這種CPU來(lái)思考一件事情。但是在過去十年中，CPU已經(jīng)轉(zhuǎn)移到擁有多個(gè)ALU和寄存器，分組在一起。這意味著CPU可以一次思考多個(gè)東西 - 并行。
Quantum CSS通過分散不同核心上的不同DOM節(jié)點(diǎn)的樣式計(jì)算來(lái)利用計(jì)算機(jī)的最新功能。
這似乎是一件容易的事情，只需拆分樹的分支，并在不同的核心上進(jìn)行。這實(shí)際上比這更難，原因很多。一個(gè)原因是DOM樹往往是不均勻的。這意味著一個(gè)核心將比其他核心更多的工作要做。
為了平衡工作，Quantum CSS使用了一種稱為工作竊取的技術(shù)。正在處理DOM節(jié)點(diǎn)時(shí)，代碼將其直接子代并將其分解為1個(gè)或多個(gè)“工作單元”。這些工作單位放在隊(duì)列中。
當(dāng)一個(gè)核心完成了隊(duì)列中的工作時(shí)，它可以在其他隊(duì)列中查找更多的工作。這意味著我們可以平均分配工作，而不用花時(shí)間去走樹，找出如何提前平衡。
在大多數(shù)瀏覽器中，很難得到這個(gè)權(quán)利。并行是一個(gè)已知的困難問題，CSS引擎非常復(fù)雜。它也坐在渲染引擎的另外兩個(gè)最復(fù)雜的部分之間 - DOM和布局。所以很容易引入一個(gè)bug，并行性可能會(huì)導(dǎo)致很難追蹤的錯(cuò)誤，稱為數(shù)據(jù)競(jìng)爭(zhēng)。我在另一篇文章中更多地解釋了這些錯(cuò)誤。
如果您接受來(lái)自數(shù)百或數(shù)千名工程師的貢獻(xiàn)，您如何并行編程而不用擔(dān)心？這就是我們有Rust的。
使用Rust，您可以靜態(tài)地驗(yàn)證您沒有數(shù)據(jù)競(jìng)爭(zhēng)。這意味著您只需不要讓他們進(jìn)入您的代碼，避免棘手的調(diào)試錯(cuò)誤。編譯器不會(huì)讓你這樣做。我將在以后的文章中寫下更多關(guān)于這一點(diǎn)。在此期間，您可以觀看關(guān)于Rust中的并行性的介紹視頻，或者更深入地討論工作竊取。
有了這個(gè)CSS樣式計(jì)算就會(huì)變成一個(gè)令人尷尬的并行問題 - 幾乎沒有什么可以讓你有效地并行運(yùn)行它。這意味著我們可以接近線性加速。如果您的機(jī)器上有4個(gè)內(nèi)核，那么它的運(yùn)行速度將提高近4倍。
用規(guī)則樹加速重新開始
對(duì)于每個(gè)DOM節(jié)點(diǎn)，CSS引擎需要完成所有規(guī)則以進(jìn)行選擇器匹配。對(duì)于大多數(shù)節(jié)點(diǎn)，這種匹配可能不會(huì)很頻繁地變化。例如，如果用戶將鼠標(biāo)懸停在父項(xiàng)上，則與之匹配的規(guī)則可能會(huì)更改。我們?nèi)匀恍枰匦掠?jì)算其后代的樣式來(lái)處理屬性繼承，但是與這些后代匹配的規(guī)則可能不會(huì)改變。
如果我們可以記下哪些規(guī)則與這些后代相匹配，那么這將是很好的，所以我們不必再為它們進(jìn)行選擇器匹配，這就是Firefox以前的CSS引擎借來(lái)的規(guī)則樹。
CSS引擎將通過查找匹配的選擇器的過程，然后通過特異性對(duì)它們進(jìn)行排序。從此，它創(chuàng)建了一個(gè)鏈接的規(guī)則列表。
該列表將被添加到樹中。
CSS引擎嘗試將樹中的分支數(shù)保持在最小。為此，它將盡可能地重用一個(gè)分支。
如果列表中的大多數(shù)選擇器與現(xiàn)有分支相同，則它將遵循相同的路徑。但是它可能會(huì)到達(dá)列表中的下一個(gè)規(guī)則不在樹的這個(gè)分支中。只有在這一點(diǎn)上它才會(huì)添加一個(gè)新的分支。
DOM節(jié)點(diǎn)將獲得指向最后插入的規(guī)則的指針（在本示例中為div#warning規(guī)則）。這是最具體的一個(gè)。
在restyle上，引擎會(huì)快速檢查以查看父母的更改是否可能改變與孩子相匹配的規(guī)則。如果沒有，則對(duì)于任何后代，引擎可以跟隨后代節(jié)點(diǎn)上的指針來(lái)獲得該規(guī)則。從那里，它可以將樹跟隨到根，以獲得匹配規(guī)則的完整列表，從最具體到最不具體。這意味著它可以完全跳過選擇器匹配和排序。
因此，這有助于減少重建期間所需的工作。但是，在初始設(shè)計(jì)時(shí)，還是有很多工作。如果您有10,000個(gè)節(jié)點(diǎn)，您仍然需要選擇器匹配10,000次。但還有另一種加速方式。
加快樣式共享緩存的初始渲染（和級(jí)聯(lián)）
想想一個(gè)具有數(shù)千個(gè)節(jié)點(diǎn)的頁(yè)面。許多節(jié)點(diǎn)將匹配相同的規(guī)則。例如，想想一個(gè)漫長(zhǎng)的維基百科頁(yè)面...主要內(nèi)容區(qū)域中的段落應(yīng)該完全匹配完全相同的規(guī)則，并且具有完全相同的計(jì)算樣式。
如果沒有優(yōu)化，則CSS引擎必須單獨(dú)匹配每個(gè)段落的選擇器和計(jì)算樣式。但是，如果有一種方式來(lái)證明樣式將從段落到段落相同，則引擎可以只做一次工作，并將每個(gè)段落節(jié)點(diǎn)指向相同的計(jì)算方式。
這就是Safari和Chrome瀏覽器啟發(fā)的風(fēng)格共享緩存。完成處理節(jié)點(diǎn)后，將計(jì)算的樣式放入緩存中。然后，在開始下一個(gè)節(jié)點(diǎn)的計(jì)算樣式之前，它會(huì)運(yùn)行一些檢查來(lái)查看是否可以使用緩存中的某些內(nèi)容。
這些支票是：
2節(jié)點(diǎn)是否具有相同的ids，類等？如果是這樣，那么他們會(huì)匹配相同的規(guī)則。
對(duì)于任何不是基于選擇器的內(nèi)聯(lián)樣式，例如，節(jié)點(diǎn)是否具有相同的值？如果是這樣，那么上面的規(guī)則也不會(huì)被覆蓋，也不會(huì)被同樣的覆蓋。
父母雙方指向相同的計(jì)算樣式對(duì)象嗎？如果是這樣，那么繼承的值也將是一樣的。
這些檢查一開始就在早期的風(fēng)格共享緩存中。但是還有很多其他樣式可能不匹配的小案例。例如，如果CSS規(guī)則使用:first-child選擇器，則兩個(gè)段落可能不匹配，即使上面的檢查表明它們應(yīng)該是。
在WebKit和Blink中，樣式共享緩存將在這些情況下放棄，而不使用緩存。隨著越來(lái)越多的網(wǎng)站使用這些現(xiàn)代選擇器，優(yōu)化越來(lái)越有用，所以Blink團(tuán)隊(duì)最近刪除了它。但事實(shí)證明，風(fēng)格共享緩存有一種方法來(lái)跟上這些變化。
在Quantum CSS中，我們收集所有這些奇怪的選擇器，并檢查它們是否適用于DOM節(jié)點(diǎn)。然后我們將答案存儲(chǔ)為1和0。如果兩個(gè)元素具有相同的一個(gè)和零個(gè)，我們知道它們絕對(duì)匹配。
如果DOM節(jié)點(diǎn)可以共享已經(jīng)計(jì)算的樣式，則可以跳過幾乎所有的工作。因?yàn)轫?yè)面通常具有多個(gè)具有相同樣式的DOM節(jié)點(diǎn)，所以這種風(fēng)格共享緩存可以節(jié)省內(nèi)存并且還能夠加快速度。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
