|
Post by account_disabled on Dec 24, 2023 1:10:25 GMT -5
默认情况下,浏览器将所有 CSS 文件视为渲染阻塞资源。但是,如果将 media 属性添加到 <link> 标记,则可以通知浏览器条件 CSS 文件的存在。条件 CSS 文件仅在某些情况下应用。如:高于/低于视口尺寸(视口元标记表示每个设备/框架上显示的网站界面)。使用meta 属性,您可以为CSS 文件定义特定于设备的条件。删除 WordPress 显示阻止 javascript在 <link> 标签中添加 media 属性 具体例子: 您可以使用 CSS 文件中的任何媒体查询值来处理每个设备界面的显示问题。 这对你来说可能有点混乱。不过别担心,下面我举个例子,让你更 手机号码数据 容易理解。<link href=”print.css” rel=”stylesheet” media=”print”><link href=”large.css” rel=”stylesheet” media=”screen and (min-width: 1500px)”><link href=”mobile.css” rel=”stylesheet” media=”screen and (max-width: 600px)”>尽管这些文件仍然会在所有设备上加载,但如果它们不满足 CSS 标记中的正确条件,它们将成为被阻止的资源。当然,如果满足正确的条件,这些标签仍然是渲染阻塞资源。下一个例子: 我举个例子让大家更容易理解。上例中的样式表mobile.css标记将成为最大视口宽度为 600 像素的移动设备上的显示阻止资源。但如果设备的Viewport宽度大于600px,上例中的mobile.css样式表标签将成为被阻止显示的资源。现在可能更容易理解了,对吧? 如果您现有的 CSS 文件仅用于一个或几个查询,请提取所有@media规则并使用PostCSS插件将它们保存为单独的文件。这种显示优化技巧称为代码分离。虽然在《与 JavaScript 结合》中提到了这种代码分割方法,但您也可以分割更大的 CSS 文件。 或者,如果您需要缩短重要显示资源的加载时间,减少首页加载时间,也可以单独加载每个文件。PostCSS插件优化资源渲染 PostCSS 插件拥有许多实用工具 3. 使用 defer 和 async 属性来消除阻塞渲染的 JavaScript 标签默认浏览器始终将添加到网页 <head> 标记的 JavaScript 文件视为显示阻止资源。您可以通过以下方式将它们从渲染重要资源中删除: 在结束 </body> 标记之前插入 <script> 标记,而不是通常的 <head> 标记。在这种情况下,浏览器将在完成加载整个 HTML 代码后开始加载 JavaScript 文件。不过,由于JavaScript是稍后加载的,因此它加载的元素如广告、效果、动态函数等也会稍后加载。特别是如果 JavaScript 文件较长,您可能需要等待很长时间才能下载整个网站。
|
|