那些遇到过的问题

标签: prefetch

在 webpack 上，如何在不评估的情况下导入脚本？

我最近在做一些网站优化工作，我开始使用 webpack 中的代码拆分，使用 import 语句，如下所示：

import(/* webpackChunkName: 'pageB-chunk' */ './pageB')

哪个正确创建了pageB-chunk.js，现在假设我想在 pageA 中预取这个块，我可以通过在 pageA 中添加以下语句来实现：

import(/* webpackChunkName: 'pageB-chunk' */ /* webpackPrefetch: true */ './pageB')

这将导致

<link rel="prefetch" href="pageB-chunk.js">

附加到 HTML 的头部，然后浏览器将预取它，到目前为止一切顺利。

问题是我在这里使用的import语句不仅预取 js 文件，还评估 js 文件，意味着该 js 文件的代码被解析并编译为字节码，执行该 JS 的顶级代码。

这是移动设备上非常耗时的操作，我想优化它，我只想要预取部分，我不想要评估和执行部分，因为稍后发生一些用户交互时，我会触发解析& 评价我自己

在此处输入图片说明

????????? 我只想触发前两步，图片来自https: //calendar.perfplanet.com/2011/lazy-evaluation-of-commonjs-modules/?????????

当然我可以通过自己添加预取链接来做到这一点，但这意味着我需要知道我应该在预取链接中放入哪个 URL，webpack 肯定知道这个 URL，我如何从 webpack 获取它？

webpack 有什么简单的方法来实现这一点吗？

javascript lazy-loading prefetch webpack

ilo*_*zcd
2020 02-04
12
推荐指数
1
解决办法
2385
查看次数

如何测试预取/预渲染

我已经开始使用prefetch/prerender系统加载一些关键资源和页面.

有没有办法确保有问题的资源实际上是预先加载的？

testing html5 prefetch prerender

Mil*_*uzz
lucky-day
11
推荐指数
2
解决办法
6499
查看次数

在HTML中设置新的预呈现或预取的正确方法是什么？ 

<!DOCTYPE html>
<meta charset="utf-8">
<title>An HTML Document</title>
<link rel="prefetch" href="https://www.apple.com/">
<link rel="prerender" href="https://www.apple.com/">
<script>
    document.addEventListener('click', function () {
        // Prerendering https://www.apple.com/ipad on Chrome.
        // ...

        // Prefetching https://www.apple.com/ipad on Firefox.
        // ...
    }, false);
</script>
Run Code Online (Sandbox Code Playgroud)

打开页面时,https ://www.apple.com/已预呈现并在不同的浏览器上预取.单击文档后,我希望预呈现并预取其他页面,https://www.apple.com/ipad.

看来我们有两种方法可供选择.我们可以替换当前2个link元素中的URL .或者我们可以在link元素中插入2个新元素head.

在HTML中设置新的预渲染的正确方法是什么？

在HTML中设置新预取的正确方法是什么？

我尝试将Chrome中的prerender link元素的URL从https://www.apple.com/替换为https://www.apple.com/ipad.我打开Chrome的任务管理器,发现https://www.apple.com/ipad没有预先进行预先处理.唯一预呈现的页面仍然是https://www.apple.com/.所以看来这种方法不起作用？

firefox html5 google-chrome prefetch prerender

wei*_*lou
2017 06-23
11
推荐指数
2
解决办法
1万
查看次数

当程序将受益于预取和非临时加载/存储？

我做了一个测试

    for (i32 i = 0; i < 0x800000; ++i)
    {
        // Hopefully this can disable hardware prefetch
        i32 k = (i * 997 & 0x7FFFFF) * 0x40;

        _mm_prefetch(data + ((i + 1) * 997 & 0x7FFFFF) * 0x40, _MM_HINT_NTA);

        for (i32 j = 0; j < 0x40; j += 0x10)
        {
            //__m128 v = _mm_castsi128_ps(_mm_stream_load_si128((__m128i *)(data + k + j)));
            __m128 v = _mm_load_ps((float *)(data + k + j));

            a_single_chain_computation

            //_mm_stream_ps((float *)(data2 + k + j), v);
            _mm_store_ps((float *)(data2 …
Run Code Online (Sandbox Code Playgroud)

c sse prefetch temporal

Blu*_*rer
2013 06-26
11
推荐指数
1
解决办法
1622
查看次数

页面完全加载后触发预取

我的情况是:

  • 用户访问domain.com(主页)
  • domain.com/products页面包含大型图像库和相当大的CSS和JS库
  • 当用户访问domain.com并且主页已完全加载时,我们开始预取资源,如果可能的话,至少有一半的图像来自存档.

目前在某些页面上JS "吃掉"相当多的资源,因此在页面加载期间在某些情况下触发预取并不是最好的答案 - 因为当用户与JS创建的事件和元素交互时会导致一个小的延迟.

我的问题是:

  1. 甚至可以(将它可以)触发<link rel="prefetch" href="image.png">或添加CSS文件,<head>以便它可以在当前页面完全加载后从另一个页面预取数据吗？
  2. 我应该这样做类似于使用JS渲染其他样式表,我在其中添加新标记<head>作为样式表文件,以便它可以渲染..还是有另一种方式？

html javascript css prefetch

ric*_*dev
2018 05-23
11
推荐指数
1
解决办法
908
查看次数

Google Lighthouse无法识别preconnect和dns-prefetch

Google Lighthouse中的效果报告提出了以下建议:

避免多次,昂贵的往返任何来源

"避免多次,昂贵的往返任何来源"......然后继续列出8个起源.

因此,我将以下代码添加到<head>我的网站部分的顶部,其中hrefs对应于每个原点.

<link rel='preconnect' href='https://connect.facebook.net' />
<link rel='preconnect' href='https://img.secureserver.net' />
<link rel='preconnect' href='https://advertise.bingads.microsoft.com' />
<link rel='preconnect' href='https://advertiseonbing.blob.core.windows.net' />
<link rel='preconnect' href='https://www.gstatic.com' />
<link rel='preconnect' href='https://js.calltrk.com' />
<link rel='preconnect' href='https://px.ads.linkedin.com' />
<link rel='preconnect' href='https://www.facebook.com' />
<link rel='preconnect' href='https://accounts.google.com' />
Run Code Online (Sandbox Code Playgroud)

我也试过它们<link rel='dns-prefetch' />和它和其他浏览器提示的一些组合.

然而,灯塔报告在一段时间后再次运行后没有任何变化.有人可以引导我朝着正确的方向前进,这样我就可以在灯塔中解决这个问题并更接近完成报告了吗？!

编辑:我猜测为什么这样做可能不会对灯塔报告产生影响,而且在预连接完成之前,文档中会调用资源.因此,即使它在技术上更快地启动并节省了一些ms,但文档的其余部分非常小,并且在预取或预连接完成之前它会请求这些资源.合乎逻辑？

prefetch lighthouse

Dev*_*son
2018 06-07
11
推荐指数
0
解决办法
1010
查看次数

如何在GWT中预取图像？

我尝试了以下代码:

RootPanel root = RootPanel.get("root");
root.clear();
final FlowPanel p = new FlowPanel();
root.add(p);
for (int i=0; i<20; ++i) {
    String url = "/thumb/"+i;
    final Image img = new Image(url);
    img.addLoadHandler(new LoadHandler() {
        @Override
        public void onLoad(LoadEvent event) {
        p.add(img);
    }
});
Image.prefetch(url);
Run Code Online (Sandbox Code Playgroud)

但它对我不起作用.我错过了什么吗？

javascript java gwt image prefetch

Ant*_*nio
2011 01-13
10
推荐指数
2
解决办法
5856
查看次数

是否从Java中的引用数组中预取了对象？

想象一下,我们在内存中分散了1000个相同类型的对象(它们是在不同时间创建的,其他对象是在其间创建的).

我们有一个数组,它包含对1000个对象中每个对象的引用.

题

如果我们按顺序遍历数组,那么将预取到CPU的高速缓存中的是什么？只有数组所包含的引用或这些引用才会被解引用,并且对象也会被加载到缓存中？

Java(JVM)是​​否实现了某种软件预取？如果没有,是否有提供软件预取的库？

java jvm jvm-hotspot prefetch java-memory-model

Pap*_*sar
2017 08-08
10
推荐指数
1
解决办法
484
查看次数

预取的资源加载两次

我想使用html预取来预取字体文件.我按照这里的建议:https://css-tricks.com/prefetching-preloading-prebrowsing/

<!doctype html>
<html>
<head>
<link rel="prefetch" href="https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2">
<style>
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

html, body {
font-family: 'Open Sans';
}
</style>
</head>
<body>
Hello world
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

但是,字体文件实际上在Chrome上加载了两次.我没有尝试过其他浏览器.

结果

我做错了什么吗？

html prefetch

Fra*_*bot
lucky-day
10
推荐指数
1
解决办法
3063
查看次数

Django在预取过滤相关模型上进行注释

我有一个 User 模型，每个 User 可以通过这个关系有很多 Post：

class Post(models.Model):
    ...
    user = models.ForeignKey('User', related_name='posts')
Run Code Online (Sandbox Code Playgroud)

，并且每个帖子都有一个like_count（整数字段），我想让用户（沿着他们的帖子）拥有超过 n 个帖子，并且被喜欢的次数超过 m 次，我这样做：

User.objects.prefetch_related(Prefetch('posts', queryset=Post.objects.filter(like_count__gte=m), to_attr='top_posts')).annotate(top_post_count=Count('top_posts')).filter(top_post_count__gte=n)
Run Code Online (Sandbox Code Playgroud)

但是，我得到：

Traceback (most recent call last):
  File "<console>", line 1, in <module>
  File "/usr/local/lib/python3.4/dist-packages/django/db/models/query.py", line 912, in annotate
    clone.query.add_annotation(annotation, alias, is_summary=False)
  File "/usr/local/lib/python3.4/dist-packages/django/db/models/sql/query.py", line 971, in add_annotation
    summarize=is_summary)
  File "/usr/local/lib/python3.4/dist-packages/django/db/models/aggregates.py", line 19, in resolve_expression
    c = super(Aggregate, self).resolve_expression(query, allow_joins, reuse, summarize)
  File "/usr/local/lib/python3.4/dist-packages/django/db/models/expressions.py", line 513, in resolve_expression
    c.source_expressions[pos] = arg.resolve_expression(query, allow_joins, reuse, summarize, for_save)
  File "/usr/local/lib/python3.4/dist-packages/django/db/models/expressions.py", line 463, in …
Run Code Online (Sandbox Code Playgroud)

django prefetch

Moh*_*sen
2016 09-07
10
推荐指数
1
解决办法
2207
查看次数

标签 统计

prefetch ×10

javascript ×3

html ×2

html5 ×2

java ×2

prerender ×2

c ×1

css ×1

django ×1

firefox ×1

google-chrome ×1

gwt ×1

image ×1

java-memory-model ×1

jvm ×1

jvm-hotspot ×1

lazy-loading ×1

lighthouse ×1

sse ×1

temporal ×1

testing ×1

webpack ×1