网页中动态添加的样式表为何不阻塞页面渲染
浏览器默认只会在 head 中解析到的 link 标签阻塞渲染，动态添加的样式表必须设置 blocking 属性才能生效。
默认行为与位置限制
浏览器在解析 HTML 文档时，默认只对位于 head 元素中的 link 元素进行阻塞渲染处理。当解析器在 head 中发现 rel 属性为 stylesheet 的 link 标签时，会立即暂停后续内容的解析，直到该样式表及其关键子资源下载并应用完毕。这种机制是为了防止页面在样式未就绪时出现布局跳动。如果将 link 元素放在 body 中，浏览器通常不会将其视为阻塞渲染的资源，而是异步加载。因此，仅仅将 link 标签移动到 head 中并不能保证其具备阻塞能力，必须满足特定的位置和属性条件。
当通过 JavaScript 动态创建 link 元素并插入到 head 中时，浏览器可能不会自动识别其阻塞意图。这是因为动态插入的节点可能被浏览器视为非关键资源或异步加载项。为了确保动态添加的样式表能够像静态 head 中的样式表一样阻塞渲染，开发者需要显式地添加 blocking 属性。这告诉浏览器必须等待该资源加载完成并应用样式后，才能继续显示页面内容。忽略这一属性可能导致页面在样式加载期间短暂显示未格式化的内容，影响用户体验。
blocking 属性的设置方法
blocking 属性是一个枚举属性，必须与 rel 属性中的 stylesheet 关键字配合使用。它接受一个特定的字符串值 'render'，表示阻塞渲染。当在动态创建的 link 元素上设置 blocking = 'render' 时，浏览器会将其视为阻塞资源。这意味着在样式表及其关键子资源下载并应用之前，浏览器不会绘制页面内容。设置该属性的正确语法是在创建元素后，通过属性赋值或 setAttribute 方法将其添加到元素上。例如，在 JavaScript 中，可以使用 linkElement.setAttribute('blocking', 'render') 来实现。
需要注意的是，blocking 属性仅对 rel 属性包含 stylesheet 关键字的 link 元素有效。如果 rel 属性设置为其他值，如 icon 或 preload，设置 blocking 属性将不会产生阻塞渲染的效果。此外，blocking 属性只能接受 'render' 这一个值。如果设置了其他无效值，浏览器可能会忽略该属性或将其视为无效。因此，在编写代码时，必须确保 rel 属性和 blocking 属性的值正确匹配，以避免意外的渲染行为。
复现检查步骤
要验证动态添加的样式表是否阻塞渲染，可以编写一个简单的测试页面。首先，创建一个包含少量文本内容的 HTML 文件，并在 head 中放置一个静态的 link 标签，指向一个较大的 CSS 文件。然后，在页面底部添加一个按钮，点击按钮后通过 JavaScript 动态创建一个 link 元素，指向另一个较大的 CSS 文件，并设置 blocking = 'render'。在浏览器中打开页面，点击按钮，观察页面内容是否在样式加载期间保持空白或显示未格式化的内容。如果页面内容在样式加载期间保持不变，说明阻塞渲染生效。
为了更精确地判断结果，可以使用浏览器开发者工具的 Network（网络）面板和 Rendering（渲染）面板。在 Network 面板中，可以查看样式表的加载状态和请求优先级。在 Rendering 面板中，可以勾选 'Paint flashing'（绘制闪烁）选项，观察页面内容是否在样式加载期间保持静态。如果页面内容在样式加载期间保持静态，并且没有出现布局跳动，说明动态添加的样式表成功阻塞了渲染。如果页面内容在样式加载期间发生变化，说明阻塞渲染未生效。
判断结果的方法
判断结果的核心在于观察页面内容在样式加载期间的表现。如果页面内容在样式加载期间保持空白或显示未格式化的内容，并且没有出现布局跳动，说明动态添加的样式表成功阻塞了渲染。这表明浏览器在样式表及其关键子资源下载并应用完毕之前，不会绘制页面内容。如果页面内容在样式加载期间发生变化，或者出现了布局跳动，说明动态添加的样式表未成功阻塞渲染。这表明浏览器在样式表加载期间仍然绘制了页面内容，可能导致用户体验不佳。
此外，还可以通过浏览器开发者工具的 Console（控制台）面板查看是否有错误信息。如果动态添加的 link 元素设置阻塞属性时出现错误，控制台可能会显示相关的错误信息。例如，如果 rel 属性未设置为 stylesheet，或者 blocking 属性的值不是 'render'，控制台可能会显示警告或错误。因此，在判断结果时，不仅要观察页面内容的表现，还要检查控制台是否有错误信息，以确保代码的正确性。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。