T之家 7 月 4 日消息 随着首个 Win11 预览版的发布，全新的微软商店现已上线，并将在今年晚些时候开始向主流用户推出。

在 6 月 24 日的发布会上，微软表示 Windows 11 商店已经经过了“从头到脚重新设计”。整个界面都进行了更新，滚动速度更快，还为更多内容增加了空间。据微软官方称，用户操作更简单，HTML 组件也已经被砍掉了。

在 Windows 10 上，微软商店的前端部分构建于 HTML/CSS (web 组件) 中。例如产品页面完全基于 html，虽然兼容性高一点但这大大降低了用户体验，尤其是当用户点击“获取”或“安装”按钮时还会崩溃。

例如，之前有网友反馈称下载大文件时大概率会失败，而且错误代码还没有给出任何解释。

在 Windows 11 中，微软将用 XAML/c# 语言编写的全新商店取代现有的商店，据微软官方员称，它是完全“UWP”的。

据称，新版应用商店的性能得到了显著改善，例如下载不再出现之前出现的中、大型应用和游戏的下载失败问题。一些不愿透露姓名的消息人士也证实，用户在新版商店中下载大型游戏的速度也变得更快。

Microsoft Store 店商业模式的巨大改变

通过 Windows 11，微软也在尝试改变其 Microsoft Store 的商业模式。

该公司希望所有开发者都去尽可能为 Microsoft Store 开发应用程序和游戏，而开发者现可使用自己的第三方商业支付系统，相对来说更加宽容和自由。

IT之家了解到，微软还支持通过添加更多使用不同框架创建的应用和游戏来扩展 Store 目录。微软 Teams 和 Visual Studio 预计将在今年年底上线全新商店。

值得一提的是，Adobe, Zoom, OBS Studio 和 Canva 等著名应用现已上架微软新版 Microsoft Store。

此外，Windows Insider 体验者可以通过使用旧版商店手动更新来下载新设计的 Microsoft Store。当然，虽然商店已经经过重新设计，但一些功能，如通过亚马逊应用商店 整合 Android 应用的功能仍未上线。

微软还表示，Windows 10 用户将在今年晚些时候获得相同的商店体验，其商店的质量将在未来几个月得到显著提高，例如搜索结果将不再包括低质量的指南/教程等内容。

言

在现代Web开发中，JavaScript（JS）扮演着至关重要的角色，它使网页具备了动态交互的能力。通过JS，开发者能够实时地改变页面的布局、样式以及内容，极大地提升了用户体验。本文将聚焦于如何使用JS来修改文档对象模型（DOM）中的元素样式和属性，通过具体的示例和深入的分析，让你全面掌握这一技能。

技术概述

定义

DOM是一套标准，用于表示和修改HTML和XML文档的结构。JavaScript提供了多种方法来访问和修改DOM中的元素。通过JS，我们可以改变元素的CSS样式和HTML属性，从而实现页面的动态更新。

核心特性和优势

• 实时响应：JS能够立即响应用户事件，如点击、输入等，即时更新页面。
• 样式与行为分离：通过JS修改样式，可以保持CSS的整洁，遵循良好的分离原则。
• 增强交互性：动态地改变页面元素，可以创建丰富的用户界面和交互效果。

示例代码

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

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

技术细节

工作原理

当JS修改DOM元素的样式或属性时，实际上是在改变浏览器对这些元素的渲染方式。JS通过访问DOM API，如style属性和setAttribute方法，来实现这一过程。

难点分析

• 性能考虑：频繁的DOM操作可能会导致页面重绘和回流，影响性能。
• 兼容性问题：不同浏览器对某些CSS属性的支持程度不同，需要进行适配。

实战应用

应用场景

假设我们有一个登录表单，当用户输入信息时，我们希望实时显示输入状态，如输入框边框颜色的变化。

代码示例

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

优化与改进

性能瓶颈

频繁的DOM操作可能导致页面性能下降，尤其是当涉及到大量元素时。

优化建议

• 减少重绘和回流：尽量批量操作DOM，减少不必要的样式更改。
• 使用CSS类：通过切换CSS类而非直接修改样式属性，可以利用浏览器的缓存机制。

代码示例

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

常见问题

• Q: 如何避免在修改多个属性时导致的多次重绘？
• A: 可以通过将多个属性设置放在同一个style对象中操作，或者使用CSS类来切换不同的样式集。

总结与展望

掌握通过JS操纵DOM元素的样式和属性是前端开发的基本功之一。它不仅增强了页面的互动性和响应性，也是构建现代Web应用的基础。随着Web技术的不断进步，DOM操作的效率和便捷性也在不断提升，学习和掌握这一技能将为你的前端开发之路打开更多可能性。

希望本文能够帮助你深入理解并熟练运用JS来操控DOM元素的样式和属性，无论是在日常的编码实践中，还是在解决复杂的问题场景下，都能得心应手。如果你有任何疑问或想要分享的经验，欢迎在评论区留言。让我们一起探索前端世界的无限可能！

要：在本文中，将重点关注网页的初始渲染，即它从解析 HTML 开始。 我将探索可能导致高渲染时间的问题，以及如何解决它们。

本文分享自华为云社区《页面首屏渲染性能指南-云社区-华为云》，作者：Ocean2022。

我们知道渲染页面是一个将服务器的响应内容翻译成图片的过程。但是，如果你页面的渲染性能比较糟糕的话，可能会带来相对较高的跳出率。

在本文中，我将重点关注网页的初始渲染，即它从解析 HTML 开始。 我将探索可能导致高渲染时间的问题，以及如何解决它们。

关键渲染路径（CRP）

关键渲染路径 (CRP) 是浏览器将代码转换为屏幕上可显示像素的过程。 它有几个阶段，其中一些可以并行执行以节省时间，但有些部分必须依次完成。 如下图所示：

首先，一旦浏览器得到响应，它就会开始解析它。 当它遇到依赖项时，它会尝试下载它。 如果它是一个样式表文件，浏览器必须在渲染页面之前完全解析它，这就是为什么 CSS 会阻塞渲染的原因。

如果是脚本，浏览器必须：停止解析，下载脚本，然后运行。 只有在那之后它才能继续解析，因为 JavaScript 程序可以改变网页的内容（尤其是 HTML）。 这就是为什么 JS 会阻塞解析的原因。

完成所有解析后，浏览器将构建文档对象模型 (DOM) 和级联样式表对象模型 (CSSOM)。 将它们组合在一起得到渲染树。 页面的不显示部分不会进入渲染树，因为它只包含绘制页面所需的数据。

倒数第二步是将渲染树进行布局， 这个阶段也称为回流：就是计算每个渲染树节点的每个位置及其大小的地方。

最后一步是绘制。 它会根据浏览器在前一阶段计算得到的数据对像素进行着色。

优化相关结论

因此，根据这一过程，我们在优化性能方面，得出了一些结论。如果你要提升页面初始化渲染的性能，你需要：

• 减少传输的数据量
• 减少浏览器必须下载的资源数量（尤其是阻塞的资源）
• 减小 CRP 的长度

同时，我们会根据下面 3 个指标来衡量优化的效率：

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

除了渲染时间之外，还有其他一些因素也需要考虑。例如，你的页面使用了多少阻塞资源以及下载它们需要多长时间。

性能优化策略

鉴于我们在上面得出的结论，我们得出网站性能优化有三种主要策略：

1. 尽量减少通过网络传输的数据量；
2. 减少通过网络传输的资源总数；
3. 缩短关键渲染路径；

1. 减少要传输的数据量

首先，移除所有未使用的部分，例如 JavaScript 中无法访问的函数、带有从不匹配任何元素的选择器的样式以及被 CSS 永远隐藏的 HTML 标签。 其次，删除所有重复项。

然后，我建议建立一个自动压缩过程。 例如，它应该从你的后端服务中删除所有注释（但不是源代码）以及每个不包含附加信息的字符（例如 JS 中的空白字符）。

完成后，我们剩下的可以是文本字符串。 这意味着我们可以安全地应用诸如 GZIP（大多数浏览器都理解）之类的压缩算法。

最后，还有缓存。 浏览器第一次呈现页面时它不会有帮助，但它会在以后的访问中节省很多。 但是，记住两点至关重要：

• 如果你使用 CDN，请确保支持缓存并在正确设置。
• 与其等待资源的到期，不如 将文件的“指纹”嵌入到其 URL 中，以使本地缓存无效。

当然，应该为每个资源定义缓存策略。 有些可能很少改变或根本不会改变，有的则是变化的很快，还有些文件包含敏感的信息（可以使用 “private” 防止 CDN 缓存私有数据）。

2. 减少关键资源的总数

“关键”仅指网页正确呈现所需的资源。 因此，我们可以直接跳过所有流程中没有涉及的样式以及脚本文件。

样式

为了告诉浏览器不需要特定的 CSS 文件，我们应该为所有引用样式表的链接设置媒体属性。 使用这种方法，浏览器将只根据需要处理与当前媒体（设备类型、屏幕尺寸）匹配的资源，同时降低所有其他样式表的优先级。 例如，如果你将 media=“print” 属性添加到引用样式以打印页面的样式标记，则这些样式不会在不打印媒体时干扰你的关键渲染路径。

为了进一步改进该过程，你还可以将一些样式内联，这可以为我们节省了至少一次到服务器的往返行程。

脚本

如上所述，脚本会阻塞解析，因为它们可以改变 DOM 和 CSSOM。 为了避免这一点，所有脚本标签都必须用属性标记——异步或延迟。

标有 async 的脚本不会阻塞 DOM 构建或 CSSOM，因为它们可以在 CSSOM 构建之前执行。 但请记住，内联脚本无论如何都会阻止 CSSOM，除非你将它们放在 CSS 之上。

相比之下，标有 defer 的脚本将在页面加载结束时进行执行。

换句话说，使用 defer，脚本直到页面加载事件被触发后才会执行，而 async 让脚本在文档被解析时就会在后台运行。

3.缩短关键渲染路径长度

最后，应将 CRP 长度缩短到可能的最小值。

作为样式标签属性的媒体查询将减少必须下载的资源总数。 script 标签属性 defer 和 async 将防止相应的脚本阻塞解析。

使用 GZIP 压缩、压缩和归档资源将减少传输数据的大小（从而也减少数据传输时间）。

内联一些样式和脚本也可以减少浏览器和服务器之间的往返次数。

按照最新的最佳性能实践理念，一个网站应该做的最快的第一件事就是展示 ATF 内容。 ATF 代表首屏。 这是立即可见的区域，无需滚动。 因此，最好以首先加载所需样式和脚本的方式重新排列与渲染相关的所有内容，而其他所有内容都停止（既不解析也不渲染）。

结尾

总而言之，网站性能优化包含了网站响应的各个方面，例如缓存、设置 CDN、重构、资源优化等，但是所有这些都可以逐步完成。 作为 Web 开发人员，你可以将本文作为参考，并始终记住在实验之前和之后测量性能。

浏览器开发人员尽最大努力优化你访问的每个页面的网站性能，这就是浏览器通常实现所谓的“预加载器”的原因。 这部分程序会在你以 HTML 格式请求的资源之前进行扫描，以便一次发出多个请求并让它们并行运行。 这就是为什么在 HTML（逐行）以及脚本标签中保持样式标签彼此靠近的原因。

此外，尝试批量更新 HTML 以避免多个布局事件，这些事件不仅由 DOM 或 CSSOM 中的更改触发，而且在设备方向更改和窗口大小调整时也会触发。

点击下方，第一时间了解华为云新鲜技术~

华为云博客_大数据博客_AI博客_云计算博客_开发者中心-华为云