个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
为了页面速度，我正在解决网站 css 的加载方式。最初该站点在每个页面上调用了几个 css 文件。我采用了标准方法，将所有 css 组合并缩小到一个文件中，利用浏览器缓存并使用 CDN。这提供了很大的改进。
我的下一步是将全局 css 与每页 css 分开，以避免加载任何未使用的 css。我最初的目标是在每个包含全局 css 规则的页面上调用一个缩小的 css 文件，并在 <head> 内部输出每页 css。页面的一部分。
全局 css 文件将可由浏览器缓存并可重复用于每个页面，但确实算作渲染阻塞 css 和一个额外的 http 请求。
页面速度在<head> 内部输出全局样式会更好吗？每个页面的部分以避免额外的 http 请求，即使它会牺牲全局样式作为可重用的浏览器缓存 css？
编辑:我正在使用 PHP 并缓存页面，所以这不是什么更容易开发的问题，这只是输出(HTML/CSS)性能的问题。
最佳答案
这很复杂......
在 head 中包含样式意味着它们不会被缓存，并且您传输的内容超出呈现页面所需的内容。此外，通过 <link> 导入的外部 CSS s 是流水线式的，这样您就不会在获取下一个之前等待一个完成。结果是，通常两张 100kb 的工作表会传输并且渲染速度确实比一个 200kb 的文件快。
当然，某些网络问题(如 DNS 速度慢)会影响结果，但通常情况下，在 CPU 未过载、带宽充足且 ping 时间短的情况下，管道会提高页面速度，尤其是在缓存了一个或多个管道的情况下。
将规则内嵌在 <head> 中还可以为 gzip 每页提供更多工作，与可以缩小一次并缓存的内容相比，这将降低带宽。
简而言之，它在某种程度上取决于用户、网络和代码，但如果没有配置错误或硬件损坏，使用全局导入应该比内联运输更快。
最后一点:如果您只需要少量 CSS，将其内联存储在头部会更快。例如，我发现 body { opacity: 0; transition: 500ms opacity;}在更多情况下可以帮助隐藏 FOUC 比外部表更好，因此对于此类 UX 优化，非常有必要使用一些 CSS 内联。
关于css - 对于页面速度、缓存的全局 css 文件或在内部加载全局 css 哪个更好？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38533001/
24
4
0
这是我的测试用例。 http://tobeythorn.com/isi/dummy2.svg http://tobeythorn.com/isi/isitest.html 如果我自己打开 svg，内部
这是我的测试用例。 http://tobeythorn.com/isi/dummy2.svg http://tobeythorn.com/isi/isitest.html 如果我自己打开 svg，内部
我正在尝试做类似的事情: SELECT SUM( CASE WHEN ( AND EXISTS(SELECT 1
我想问如何在外部 ng-repeat 内部正确使用内部 ng-repeat: 这意味着你想使用这样的东西: {{milestone.id}} {{
我希望在 wordpress 的仪表板内编辑 css 样式并且如果可能的话不必编辑 php 文件。 我知道至少可以编辑一些属性，所以我希望我可以直接在仪表板中编辑所有属性。 更具体地说如何更改自定义类
我在安装在 windows10 上的 vmware 中的 Ubuntu 上安装了伪分布式独立 hadoop 版本。 我从网上下载了一个文件，复制到ubuntu本地目录/lab/data 我在 ubun
我有一个如下所示的 WHERE 语句: WHERE ((@Value1 IS NULL AND [value1_id] IS NULL) OR [value1_id] = ISNULL(@Va
我有一个如下所示的 WHERE 语句: WHERE ((@Value1 IS NULL AND [value1_id] IS NULL) OR [value1_id] = ISNULL(@Va
在我的一些测试帮助程序代码中，我有一个名为 FakeDbSet(Of T) 的 IDbSet(Of T) 实现，它模拟了许多 EF 行为，但没有实际的数据库。我将类声明为 Friend ，因为我想强制
我正在寻找 Cassandra/CQL 的常见 SQL 习语 INSERT INTO ... SELECT ... FROM ... 的表亲。并且一直无法找到任何以编程方式或在 CQL 中执行此类操作
如何防止内部 while 循环无限运行？问题是，如果没有外部 while 循环，内部循环将毫无问题地运行。我知道它必须对外循环执行某些操作，但我无法弄清楚是什么导致了问题。 import java.u
我正在努力学习更多有关 C++ 的知识，但在国际象棋程序中遇到了一些代码，需要帮助才能理解。我有一个 union ，例如: union b_union { Bitboard b; st
这是我项目网页中的代码片段。这里我想显示用户选择的类别，然后想显示属于该类别的主题。在那里，用户可以拥有多个类别，这没有问题。我可以在第一个 while 循环中打印所有这些类别。问题是当我尝试打印主题
我想知道如何在 swing 中显示内部框架。这意味着，当需要 JFrame 时，通常我所做的是， new MyJFrame().setVisible(true); 假设之前的表单也应该显示。当显示这个
我最近发现了一些有趣的行为，这让我想知道对象如何知道存在哪些全局变量。例如，假设我有一个文件“test.py”: globalVar = 1 toDelete = 2 class Test(objec
我知道它已经在这里得到回答: google maps drag and drop objects into google maps from outside the Map ,但这并不完全是我所需要的
我目前正在学习Javascript DOM和innerHTML，发现在理解innerHTML方面存在一些问题。 这是我的代码:http://jsfiddle.net/hphchan/bfjx1w70/
我构建了一个布局如下的库: lib/ private_class_impl.cc private_class_decl.h public_class_impl.cc include/
我有一个使用 bootstrap 3 的组合 wordpress 网站。它基本上是一个图像网格。当屏幕展开时，它会从三列变为四列。移动时它是一列。 我想出了如何调整图像的顶部和底部边距，但我希望图像的
我正在试用 MSP-EXP430G2 的教程程序，使用 Code Composer Studio 使 LED 闪烁。最初，它有一个闪烁的无限循环: for(;;) // This emp
我是一名优秀的程序员,十分优秀！