个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在尝试减少我的网页加载时间。当我搜索时，我来到了这一点 preload css and javascript 。
所以我正在尝试在我的 html 页面中实现它，请在实现前后查看我的 html 代码之前
<html>
<head>
<link href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700" rel="stylesheet" type="text/css"> ...........
</head>
<body>
html contents
<script src="assets/js/jquery-1.12.4.min.js" type="text/javascript"></script>
</body>
</html>
执行后我变成这样
<html>
<head>
<link rel="preload" href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700" as="style">
<link rel="preload" href="assets/js/jquery-1.12.4.min.js" as="script">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700">
</head>
<body>
html contents
<script src="assets/js/jquery-1.12.4.min.js"></script>
</body>
</html>
但我没有注意到速度有任何提高。所以请帮助以正确的方式做到这一点
我读了下面的文章
https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content .
但我想不通。请帮忙。
或者有什么更好的提高页面速度的方法吗？
最佳答案
直接在 HTML 中加载的预加载资源是没有用的。这是因为浏览器在读取实际资源引用的同时读取预加载。
预加载对于减少请求瀑布的长度很有用。想象一下以下情况:
style.css
body {
background-image: url(myimage.png);
}
index.html
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
</body>
</html>
加载上述页面的过程(大致)包括以下步骤:
index.htmlstyle.cssbackground-image，下载myimage.png这意味着您的请求瀑布是 index.html -> style.css -> myimage.png。
通过为 myimage.png 添加预加载，浏览器可以更早地下载图像，因此您的请求瀑布流变为:
index.html +-> style.css
+-> myimage.png
不再是 3 个，现在只有 2 个请求长，这意味着加载时间更快。
一些常见的方式是:
但是为了更好地全面了解您可以改进的事情，您可以使用 Chrome Audit system (Lighthouse) .
关于javascript - 如何将 rel ="preload"用作 ="style"或 ="script"或提高页面速度的更好方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54995009/
26
4
0
我有以下查询: SELECT I.InsuranceID FROM Insurance I INNER JOIN JobDetail JD ON I.AccountID = JD.AccountID
我想在 SwiftUI 布局中将此函数用作具有不可变值的模板，但得到错误 Result of call to 'padding' 未使用: func keys (padding: CGFloat, t
直到最近我才使用 View 的标签元素，此后发现了一些很酷的用途。我遇到了一个不寻常的问题，希望有人能回答。这可能比 Android 更通用，但我不确定。它与 Java 如何处理 Integer 类有
这个问题在这里已经有了答案: What is the purpose of the var keyword and when should I use it (or omit it)? (19 个回
我有以下脚本(见下文)。我有两个问题: 1.在 Knockoutjs 的上下文中，下面这行是什么意思？ ko.observable(null); 2.如何调用这里尚未定义的函数: that.activ
Java 社区中是否存在一种使用 with-repect-to 在方法中使用多个返回的思想流派，如下所示: public SomeClass someMethod(int someValue) {
我一直在尝试为我的网站创建一个小型社交媒体栏。出于某种原因，我无法计算出我想用来创建 Sprite 的图像无法加载。我还应该提一下，我在背景图像不显示方面遇到过类似的问题。 HTML调用是这样的:
我正在尝试使用 std::pair 枚举值作为 unordered_map 容器的键，但我在定义自定义哈希函数时遇到困难。 我尝试了以下方法: // Enum and pair declaration
我正在学习 JS/JQuery 以及匿名函数和闭包。我见过这样的例子: $('.button').click(function(){ /* Animations */ /* Other
我正在尝试使用菜单列表来浏览我的应用程序。尽管应用程序和路由运行良好，但我使用这段代码在控制台中收到了一些警告: {props.itemList.map((item, index) =>(
我只是想创建一个简单的测试，我在其中使用 DelegateHandlers 来实例化一个 HttpClient 而无需引入 Asp.net Core 包。我有 2 个删除处理程序 Throttling
我是answering another question在这里，用户有一个 ListView与 ItemsSource包含 UserControls .我说我不会推荐它，并被问为什么。 这真的让我很惊
我安装了3.5.2和 3.5.3使用 pyenv 的版本。 # pyenv versions * system (set by /usr/local/pyenv/version) 3.5.2
我正在使用 android studio 制作统一插件，但这里有问题。一些 SDK 提供仅使用 AppcompatActivity 来制作 fragment 但我的MainActivity , 正是
我在 Laravel 中使用 whereHas 来构建查询: })->whereHas('results', function ($query) use ($issued, $mode, $reque
我有一个 5Gb .dat 文件(> 1000 万行)。每行的格式如 aaaa bb cccc0123 xxx kkkkkkkkkkkkkk或 aaaaabbbcccc01234xxxkkkkkkkk
我有一个消费者类，它采用 NSInputStream 作为参数，它将被异步处理，并且我想推送来自生产者类的数据，该生产者类要求它提供 NSOutputStream 作为其输出源。现在我如何设置一个缓冲
我正在尝试使用 ENVs在 Symfony2 中设置我的参数。标量值很简单，但我有一些参数是数组，我需要使用 ENV 以某种方式设置它们。 有问题的参数: parameters: redis.se
在我的类作业中，我已经成功地做到了这一点，但只是在非常简单的程序中。今天，我有一个更复杂的程序，在我将 DEBUG 定义为一个符号后，Eclipse 做了可怕的笨拙的事情，并且在我删除定义后这些可怕的
我目前有 2 个复选框类别、一个下拉列表和一个表单中的提交按钮。该按钮应保持“禁用”状态，直到选中 A 类的一个复选框和选中 B 类选项之一并选择选择列表中的一个选项。它适用于复选框(当我在没有列表的
我是一名优秀的程序员,十分优秀！