个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我们正在尝试将 CSS 内联到站点的 <head> 中减少页面加载时间。因为我们使用的 CMS 允许非常灵活的内容管理，所以只内联“关键”CSS 不是一种选择，因为我们无法在编译时知道将/不会使用什么标记(因此显示在“上方”折叠')在以后的日期。
因此，我们正在研究内联 main.css 的全部 内容的选项。文件进入主页<head>然后预取 main.css以便当用户导航到站点上的另一个页面时，它可以在缓存中使用。
这将减少网站最常见入口点的页面加载时间，同时仍会为任何后续页面访问缓存 CSS。
我想我有几个问题，但感觉它们有内在联系，所以我想把它们都包括在这里，而不是将它们分成单独的 SO 问题。
内联 main.css 的全部内容有什么缺点吗？进入首页<head> ？我主要关心的是文件大小，但是当 gzip 压缩时，有/没有内联 CSS 的差异非常小，而且无论哪种方式，样式都必须在某个时候下载，无论是在 html 文件还是 CSS 文件中。
什么时候是预取实际文件的最佳时机？实际上，考虑的是预取是否会在解析时触发对服务器的同步请求，这将计入并行连接的限制，从而可能阻止其他请求。如果是这样，我猜 <link>应该位于文档的底部，或者异步写入 DOM。如果不是，我认为住在 <link rel="stylesheet"> 的地方最有意义。本来是，在<head> .
最佳答案
tl;dr:
转换 main.css进入base64并添加到 <head>的主页。然后为main.css添加预取链接 就在正文关闭标签之前 </body>
这个答案可能有点非正统但是，这里是。
是的，你完全可以按照你描述的去做；但是，您将在主页上下载 CSS 两次。
注意事项:
还有兴趣吗？ 好的
main.css文件css使用任何 css 的内容清洁工具main.css 的副本在某处归档main.css归档到base64 base64字符串将以下内容添加到 <head>你的文件
<link rel="stylesheet" type="text/css" href="data:text/css;base64,###" />
添加base64 main.css 的字符串文件代替 "###" 在上面代码结束
这包括内联 CSS在你的主页上。
如果您正确执行此操作，
您将能够加载整个 css主页 无需任何额外请求。 它将成为主页的一部分 html
考虑因素:
这 block CSS 不会被浏览器缓存 除非你服务器配置为提供缓存的 html 页面
只有这样它才会被缓存为 html 的一部分用于主页。
它只会为主页缓存。 这个CSS block 是无用的对于任何后续页面
现在，对于后续页面
main.css服务器上的文件rel="prefetch"链接 - 在您主页的最底部 - 链接到该文件。主页的 html 应该是这样的:
<head>
<link rel="stylesheet" type="text/css" href="data:text/css;base64,###" />
/* stuff */
</head>
<body>
/* stuff */
<link rel="prefetch" href="main.css">
</body>
结论:
如果操作正确；浏览器将:
css用于主页。Prefetch 可缓存 css文件后续页面奖励:
您可以更进一步，将您拥有的任何字体文件更改为 base64然后将它们内联到 main.css 中文件，然后将其转换为 base64
这将进一步减少请求的数量。
考虑因素:
.woff只有它几乎得到了支持93% 的浏览器根据 Can I Use 最后的话:
Gzip main.css文件被缩小。关于html - 为主页和预取内联整个 CSS 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41188917/
25
4
0
如果应用程序是通过企业签名分发的，那么是否有任何框架允许我在后台接收Home 或Power 按下事件？ 最佳答案 iOS 中的所有事件都是 UIEvent，它是 GSEvent 的包装器。通过一些技巧
版本为 1.4.1.4 的 Prestashop 网站使用 category.php 文件作为类别页面。不幸的是，1.6.0.6 的更新删除了该文件，因为它已被视为已弃用。 ( URL structu
我最近在 Github 存储库中为我的公司创建了一个全局 wiki。这是一个空的存储库，我创建它只是为了使用它的 wiki。 我的问题:在这个 wiki 存储库的首页上，显示了自述文件。这个自述文件是
我有一个非常简单的体育网站，主页上有不同运动的链接，如足球、篮球、无挡板篮球等。我想要的是当用户点击 Football 时，要存储的值，以便下次访问者访问该页面时它将打开足球页面。 到目前为止，我已经
我已经实现了onOptionsItemSelected来控制主页按钮: override fun onOptionsItemSelected(item: MenuItem): Boolean {
我不知道如何为匿名用户隐藏主页选项卡，Plone 版本是 4.3.7。最好隐藏导航栏，我发现可以通过 ZMI Portal_actions/portal_tabs/index_html 来做到这一点，
我正在尝试通过修改注册表来更改 IE 主页。我已经使用 bat 文件成功完成了此操作； REG ADD "HKCU\SOFTWARE\MICROSOFT\INTERNET EXPLORER\MAIN"
我已经使用 Spring Roo 生成了一些页面，我需要在应用程序的主页上显示数据库中的一些项目。那么我如何将带有数据的模型传递到主页，Roo 添加了以下行，我已注释掉 我使用 Roo 创建
我有 HomeController 类: @Controller public class HomeController { @RequestMapping("/") public S
用户按下“主页”按钮时，我需要显示退出确认对话框。如果是，则需要退出该应用程序。 按下“主页”按钮时是否可以显示？ 最佳答案 这可能会导致您的应用被拒绝 从Apple HIG: 总是准备停止 当人们按
我只是想知道是否有人在Magento中格式化面包屑有任何经验？ 我想用图片替换当前显示文本“HOME”的链接。 我以为用图片替换某些文本是一种简单的情况，但是似乎“HOME”文本/链接是动态创建的，因
我制作了登录功能，因此当用户登录时，它将导航到其他页面，但问题是登录成功后，用户只需按物理后退按钮即可再次返回登录页面。现在我想要的是登录后用户无法再次返回登录页面，因此当按下物理后退按钮时，它将关闭
我有 2 个 Activity ，1 个用于注册，1 个用于我的应用程序主页。现在为了在它们之间做出选择，我必须创建另一个 Activity 来检查一些细节并决定去哪个 Activity 。问题是，在
public void onBackPressed() { Intent intent = new Intent(Intent.ACTION_MAIN); intent.addCa
实际上我正在开发一个应用程序，这个应用程序应该在安装的设备上打开，这样我就可以阻止/禁用返回、主页、多任务的物理按钮。 我已经阅读了一些关于如何做到这一点的文章，但仍然不知道如何在我的应用程序中实现它
我在浏览器中输入以下 URL http://localhost:8081 并以连接错误告终。使用 catalina 脚本启动 tomcat 后，我得到一个空白页面。有人知道为什么会这样吗？ 最佳答
我正在尝试在 Eclipse 中设置一个 spring mvc 项目。我创建了一个动态 Web 项目并创建了源和配置文件。当我在由 eclipse 启动的 tomcat 上运行该项目时，我总是遇到 4
我在Tomcat中部署了我的应用程序，应用程序路径是: http://localhost:8080/myapp 但我想限制我的用户看不到 Tomcat 主页，即如果他们输入: http://local
在创建一个 vue nativescript 应用程序并通过以下方式运行之后: tns preview 我得到: *** Terminating app due to uncaught excepti
与其说我是网页设计师，我更像是一个程序员，我正在尝试做一个简单的(我认为)设计，比如 gmail 的主页 https://mail.google.com/intl/fr/mail/help/about
我是一名优秀的程序员,十分优秀！