T之家 7 月 4 日消息 隨著首個 Win11 預(yù)覽版的發(fā)布，全新的微軟商店現(xiàn)已上線，并將在今年晚些時候開始向主流用戶推出。

在 6 月 24 日的發(fā)布會上，微軟表示 Windows 11 商店已經(jīng)經(jīng)過了“從頭到腳重新設(shè)計”。整個界面都進(jìn)行了更新，滾動速度更快，還為更多內(nèi)容增加了空間。據(jù)微軟官方稱，用戶操作更簡單，HTML 組件也已經(jīng)被砍掉了。

在 Windows 10 上，微軟商店的前端部分構(gòu)建于 HTML/CSS (web 組件) 中。例如產(chǎn)品頁面完全基于 html，雖然兼容性高一點(diǎn)但這大大降低了用戶體驗，尤其是當(dāng)用戶點(diǎn)擊“獲取”或“安裝”按鈕時還會崩潰。

例如，之前有網(wǎng)友反饋稱下載大文件時大概率會失敗，而且錯誤代碼還沒有給出任何解釋。

在 Windows 11 中，微軟將用 XAML/c# 語言編寫的全新商店取代現(xiàn)有的商店，據(jù)微軟官方員稱，它是完全“UWP”的。

據(jù)稱，新版應(yīng)用商店的性能得到了顯著改善，例如下載不再出現(xiàn)之前出現(xiàn)的中、大型應(yīng)用和游戲的下載失敗問題。一些不愿透露姓名的消息人士也證實，用戶在新版商店中下載大型游戲的速度也變得更快。

Microsoft Store 店商業(yè)模式的巨大改變

通過 Windows 11，微軟也在嘗試改變其 Microsoft Store 的商業(yè)模式。

該公司希望所有開發(fā)者都去盡可能為 Microsoft Store 開發(fā)應(yīng)用程序和游戲，而開發(fā)者現(xiàn)可使用自己的第三方商業(yè)支付系統(tǒng)，相對來說更加寬容和自由。

IT之家了解到，微軟還支持通過添加更多使用不同框架創(chuàng)建的應(yīng)用和游戲來擴(kuò)展 Store 目錄。微軟 Teams 和 Visual Studio 預(yù)計將在今年年底上線全新商店。

值得一提的是，Adobe, Zoom, OBS Studio 和 Canva 等著名應(yīng)用現(xiàn)已上架微軟新版 Microsoft Store。

此外，Windows Insider 體驗者可以通過使用舊版商店手動更新來下載新設(shè)計的 Microsoft Store。當(dāng)然，雖然商店已經(jīng)經(jīng)過重新設(shè)計，但一些功能，如通過亞馬遜應(yīng)用商店 整合 Android 應(yīng)用的功能仍未上線。

微軟還表示，Windows 10 用戶將在今年晚些時候獲得相同的商店體驗，其商店的質(zhì)量將在未來幾個月得到顯著提高，例如搜索結(jié)果將不再包括低質(zhì)量的指南/教程等內(nèi)容。

言

在現(xiàn)代Web開發(fā)中，JavaScript（JS）扮演著至關(guān)重要的角色，它使網(wǎng)頁具備了動態(tài)交互的能力。通過JS，開發(fā)者能夠?qū)崟r地改變頁面的布局、樣式以及內(nèi)容，極大地提升了用戶體驗。本文將聚焦于如何使用JS來修改文檔對象模型（DOM）中的元素樣式和屬性，通過具體的示例和深入的分析，讓你全面掌握這一技能。

技術(shù)概述

定義

DOM是一套標(biāo)準(zhǔn)，用于表示和修改HTML和XML文檔的結(jié)構(gòu)。JavaScript提供了多種方法來訪問和修改DOM中的元素。通過JS，我們可以改變元素的CSS樣式和HTML屬性，從而實現(xiàn)頁面的動態(tài)更新。

核心特性和優(yōu)勢

• 實時響應(yīng)：JS能夠立即響應(yīng)用戶事件，如點(diǎn)擊、輸入等，即時更新頁面。
• 樣式與行為分離：通過JS修改樣式，可以保持CSS的整潔，遵循良好的分離原則。
• 增強(qiáng)交互性：動態(tài)地改變頁面元素，可以創(chuàng)建豐富的用戶界面和交互效果。

示例代碼

// 改變元素的樣式
document.getElementById('myElement').style.color = 'red';

// 改變元素的HTML屬性
document.getElementById('myLink').setAttribute('href', 'https://www.example.com');

技術(shù)細(xì)節(jié)

工作原理

當(dāng)JS修改DOM元素的樣式或?qū)傩詴r，實際上是在改變?yōu)g覽器對這些元素的渲染方式。JS通過訪問DOM API，如style屬性和setAttribute方法，來實現(xiàn)這一過程。

難點(diǎn)分析

• 性能考慮：頻繁的DOM操作可能會導(dǎo)致頁面重繪和回流，影響性能。
• 兼容性問題：不同瀏覽器對某些CSS屬性的支持程度不同，需要進(jìn)行適配。

實戰(zhàn)應(yīng)用

應(yīng)用場景

假設(shè)我們有一個登錄表單，當(dāng)用戶輸入信息時，我們希望實時顯示輸入狀態(tài)，如輸入框邊框顏色的變化。

代碼示例

const inputField = document.getElementById('username');
inputField.addEventListener('input', function() {
    if (this.value.trim().length > 0) {
        this.style.borderColor = 'green';
    } else {
        this.style.borderColor = 'red';
    }
});

優(yōu)化與改進(jìn)

性能瓶頸

頻繁的DOM操作可能導(dǎo)致頁面性能下降，尤其是當(dāng)涉及到大量元素時。

優(yōu)化建議

• 減少重繪和回流：盡量批量操作DOM，減少不必要的樣式更改。
• 使用CSS類：通過切換CSS類而非直接修改樣式屬性，可以利用瀏覽器的緩存機(jī)制。

代碼示例

const element = document.getElementById('myElement');
element.classList.add('highlight'); // 利用CSS類

常見問題

• Q: 如何避免在修改多個屬性時導(dǎo)致的多次重繪？
• A: 可以通過將多個屬性設(shè)置放在同一個style對象中操作，或者使用CSS類來切換不同的樣式集。

總結(jié)與展望

掌握通過JS操縱DOM元素的樣式和屬性是前端開發(fā)的基本功之一。它不僅增強(qiáng)了頁面的互動性和響應(yīng)性，也是構(gòu)建現(xiàn)代Web應(yīng)用的基礎(chǔ)。隨著Web技術(shù)的不斷進(jìn)步，DOM操作的效率和便捷性也在不斷提升，學(xué)習(xí)和掌握這一技能將為你的前端開發(fā)之路打開更多可能性。

希望本文能夠幫助你深入理解并熟練運(yùn)用JS來操控DOM元素的樣式和屬性，無論是在日常的編碼實踐中，還是在解決復(fù)雜的問題場景下，都能得心應(yīng)手。如果你有任何疑問或想要分享的經(jīng)驗，歡迎在評論區(qū)留言。讓我們一起探索前端世界的無限可能！

要：在本文中，將重點(diǎn)關(guān)注網(wǎng)頁的初始渲染，即它從解析 HTML 開始。 我將探索可能導(dǎo)致高渲染時間的問題，以及如何解決它們。

本文分享自華為云社區(qū)《頁面首屏渲染性能指南-云社區(qū)-華為云》，作者：Ocean2022。

我們知道渲染頁面是一個將服務(wù)器的響應(yīng)內(nèi)容翻譯成圖片的過程。但是，如果你頁面的渲染性能比較糟糕的話，可能會帶來相對較高的跳出率。

在本文中，我將重點(diǎn)關(guān)注網(wǎng)頁的初始渲染，即它從解析 HTML 開始。 我將探索可能導(dǎo)致高渲染時間的問題，以及如何解決它們。

關(guān)鍵渲染路徑（CRP）

關(guān)鍵渲染路徑 (CRP) 是瀏覽器將代碼轉(zhuǎn)換為屏幕上可顯示像素的過程。 它有幾個階段，其中一些可以并行執(zhí)行以節(jié)省時間，但有些部分必須依次完成。 如下圖所示：

首先，一旦瀏覽器得到響應(yīng)，它就會開始解析它。 當(dāng)它遇到依賴項時，它會嘗試下載它。 如果它是一個樣式表文件，瀏覽器必須在渲染頁面之前完全解析它，這就是為什么 CSS 會阻塞渲染的原因。

如果是腳本，瀏覽器必須：停止解析，下載腳本，然后運(yùn)行。 只有在那之后它才能繼續(xù)解析，因為 JavaScript 程序可以改變網(wǎng)頁的內(nèi)容（尤其是 HTML）。 這就是為什么 JS 會阻塞解析的原因。

完成所有解析后，瀏覽器將構(gòu)建文檔對象模型 (DOM) 和級聯(lián)樣式表對象模型 (CSSOM)。 將它們組合在一起得到渲染樹。 頁面的不顯示部分不會進(jìn)入渲染樹，因為它只包含繪制頁面所需的數(shù)據(jù)。

倒數(shù)第二步是將渲染樹進(jìn)行布局， 這個階段也稱為回流：就是計算每個渲染樹節(jié)點(diǎn)的每個位置及其大小的地方。

最后一步是繪制。 它會根據(jù)瀏覽器在前一階段計算得到的數(shù)據(jù)對像素進(jìn)行著色。

優(yōu)化相關(guān)結(jié)論

因此，根據(jù)這一過程，我們在優(yōu)化性能方面，得出了一些結(jié)論。如果你要提升頁面初始化渲染的性能，你需要：

• 減少傳輸?shù)臄?shù)據(jù)量
• 減少瀏覽器必須下載的資源數(shù)量（尤其是阻塞的資源）
• 減小 CRP 的長度

同時，我們會根據(jù)下面 3 個指標(biāo)來衡量優(yōu)化的效率：

• FP(First Paint)
• FCP(First Contentful Paint)
• FMP(First Meaningful Paint)

除了渲染時間之外，還有其他一些因素也需要考慮。例如，你的頁面使用了多少阻塞資源以及下載它們需要多長時間。

性能優(yōu)化策略

鑒于我們在上面得出的結(jié)論，我們得出網(wǎng)站性能優(yōu)化有三種主要策略：

1. 盡量減少通過網(wǎng)絡(luò)傳輸?shù)臄?shù)據(jù)量；
2. 減少通過網(wǎng)絡(luò)傳輸?shù)馁Y源總數(shù)；
3. 縮短關(guān)鍵渲染路徑；

1. 減少要傳輸?shù)臄?shù)據(jù)量

首先，移除所有未使用的部分，例如 JavaScript 中無法訪問的函數(shù)、帶有從不匹配任何元素的選擇器的樣式以及被 CSS 永遠(yuǎn)隱藏的 HTML 標(biāo)簽。 其次，刪除所有重復(fù)項。

然后，我建議建立一個自動壓縮過程。 例如，它應(yīng)該從你的后端服務(wù)中刪除所有注釋（但不是源代碼）以及每個不包含附加信息的字符（例如 JS 中的空白字符）。

完成后，我們剩下的可以是文本字符串。 這意味著我們可以安全地應(yīng)用諸如 GZIP（大多數(shù)瀏覽器都理解）之類的壓縮算法。

最后，還有緩存。 瀏覽器第一次呈現(xiàn)頁面時它不會有幫助，但它會在以后的訪問中節(jié)省很多。 但是，記住兩點(diǎn)至關(guān)重要：

• 如果你使用 CDN，請確保支持緩存并在正確設(shè)置。
• 與其等待資源的到期，不如 將文件的“指紋”嵌入到其 URL 中，以使本地緩存無效。

當(dāng)然，應(yīng)該為每個資源定義緩存策略。 有些可能很少改變或根本不會改變，有的則是變化的很快，還有些文件包含敏感的信息（可以使用 “private” 防止 CDN 緩存私有數(shù)據(jù)）。

2. 減少關(guān)鍵資源的總數(shù)

“關(guān)鍵”僅指網(wǎng)頁正確呈現(xiàn)所需的資源。 因此，我們可以直接跳過所有流程中沒有涉及的樣式以及腳本文件。

樣式

為了告訴瀏覽器不需要特定的 CSS 文件，我們應(yīng)該為所有引用樣式表的鏈接設(shè)置媒體屬性。 使用這種方法，瀏覽器將只根據(jù)需要處理與當(dāng)前媒體（設(shè)備類型、屏幕尺寸）匹配的資源，同時降低所有其他樣式表的優(yōu)先級。 例如，如果你將 media=“print” 屬性添加到引用樣式以打印頁面的樣式標(biāo)記，則這些樣式不會在不打印媒體時干擾你的關(guān)鍵渲染路徑。

為了進(jìn)一步改進(jìn)該過程，你還可以將一些樣式內(nèi)聯(lián)，這可以為我們節(jié)省了至少一次到服務(wù)器的往返行程。

腳本

如上所述，腳本會阻塞解析，因為它們可以改變 DOM 和 CSSOM。 為了避免這一點(diǎn)，所有腳本標(biāo)簽都必須用屬性標(biāo)記——異步或延遲。

標(biāo)有 async 的腳本不會阻塞 DOM 構(gòu)建或 CSSOM，因為它們可以在 CSSOM 構(gòu)建之前執(zhí)行。 但請記住，內(nèi)聯(lián)腳本無論如何都會阻止 CSSOM，除非你將它們放在 CSS 之上。

相比之下，標(biāo)有 defer 的腳本將在頁面加載結(jié)束時進(jìn)行執(zhí)行。

換句話說，使用 defer，腳本直到頁面加載事件被觸發(fā)后才會執(zhí)行，而 async 讓腳本在文檔被解析時就會在后臺運(yùn)行。

3.縮短關(guān)鍵渲染路徑長度

最后，應(yīng)將 CRP 長度縮短到可能的最小值。

作為樣式標(biāo)簽屬性的媒體查詢將減少必須下載的資源總數(shù)。 script 標(biāo)簽屬性 defer 和 async 將防止相應(yīng)的腳本阻塞解析。

使用 GZIP 壓縮、壓縮和歸檔資源將減少傳輸數(shù)據(jù)的大?。◤亩矞p少數(shù)據(jù)傳輸時間）。

內(nèi)聯(lián)一些樣式和腳本也可以減少瀏覽器和服務(wù)器之間的往返次數(shù)。

按照最新的最佳性能實踐理念，一個網(wǎng)站應(yīng)該做的最快的第一件事就是展示 ATF 內(nèi)容。 ATF 代表首屏。 這是立即可見的區(qū)域，無需滾動。 因此，最好以首先加載所需樣式和腳本的方式重新排列與渲染相關(guān)的所有內(nèi)容，而其他所有內(nèi)容都停止（既不解析也不渲染）。

結(jié)尾

總而言之，網(wǎng)站性能優(yōu)化包含了網(wǎng)站響應(yīng)的各個方面，例如緩存、設(shè)置 CDN、重構(gòu)、資源優(yōu)化等，但是所有這些都可以逐步完成。 作為 Web 開發(fā)人員，你可以將本文作為參考，并始終記住在實驗之前和之后測量性能。

瀏覽器開發(fā)人員盡最大努力優(yōu)化你訪問的每個頁面的網(wǎng)站性能，這就是瀏覽器通常實現(xiàn)所謂的“預(yù)加載器”的原因。 這部分程序會在你以 HTML 格式請求的資源之前進(jìn)行掃描，以便一次發(fā)出多個請求并讓它們并行運(yùn)行。 這就是為什么在 HTML（逐行）以及腳本標(biāo)簽中保持樣式標(biāo)簽彼此靠近的原因。

此外，嘗試批量更新 HTML 以避免多個布局事件，這些事件不僅由 DOM 或 CSSOM 中的更改觸發(fā)，而且在設(shè)備方向更改和窗口大小調(diào)整時也會觸發(fā)。

點(diǎn)擊下方，第一時間了解華為云新鮮技術(shù)~

華為云博客_大數(shù)據(jù)博客_AI博客_云計算博客_開發(fā)者中心-華為云