web前端

前言

风和日丽: 我正笑嘻嘻地抓着我炫酷的ikbc键盘疯狂的敲着Bug.
晴天霹雳: 被拉进了一个群,产品说我做的网站很卡,需要做性能优化.
难以置信: 我可是用尊贵的Vue3+Ts开发的呢 (手动狗头).
十分抗拒: 迫于yin威,我给网站做了体检和手术.

本文章向大家介绍新的跨域策略：使用COOP、COEP为浏览器创建更安全的环境，主要包括新的跨域策略：使用COOP、COEP为浏览器创建更安全的环境使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

可组合性是 Web 的非常强大的一项能力，你可以轻而易举的加载来自不同来源的资源来增强网页的功能，例如：font、image、video 等等。

这些服务非常强大，也很方便，但是这样的策略同样会加大信息泄漏的风险，攻击者可以利用某些手段泄漏你的用户信息。

浏览器在阻止这些攻击上做的也很好。同源策略我们已经很熟悉了，它用于限制不同源的站点的资源访问。详细可以戳浏览器的同源策略，这里不再过多介绍。

但是同源策略也有一些例外，任何网站都可以不受限制的加载下面的资源：…

预计从今年 5 月的 Chrome 91 开始，所有平台都将需要启用跨域隔离，以访问诸如 SharedArrayBuffer 和 performance.measureUserAgentSpecificMemory() 之类的 API 。这将使桌面平台与 Android 保持一致，后者在 Chrome 88 中发布了此限制。

如果需要使用这些 API，必须为页面提供以下标头来确保页面是跨域隔离的：

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

在执行此操作后，除非资源通过 Cross-Origin-Resource-Policy 标头或 CORS 标头（Access-Control-Allow- *等）明确允许，否则页面将无法加载跨域内容。

SharedArrayBuffer 于 2017 年 7 月的 …

1. Web 应用性能优化的关键

关于 Web 应用性能优化，有一点是毫无疑问的：「页面加载越久，用户体验就越差」。我们几乎可以说 Web 应用性能优化的关键之处就在于：减少页面初载时，所需加载资源的「数量」和「体积」。

那么当所需加载的资源数量到达多少或资源体积小于多少，我们才可以自信地宣称我们的 Web 应用拥有出色的性能呢？下面是给出的一些参考值，该参考值考虑到了移动端与国外等多种访问环境：

• 页面初载时，所有未压缩的 JavaScript 脚本大小：<=200KB；
• 页面初载时，所有未压缩的 CSS 资源大小：<=100KB；
• HTTP 协议下，请求资源数：<=6 个；
• HTTP/2 协议下，请求资源数：<=20 个 ；
• 90% 的代码利用率（也就是说，仅允许 10%