小编Ale*_*lov的帖子

事情:我有一个页面,它必须显示未确定数量的图像,通过AJAX(在服务器端使用base64编码)逐个加载.

var position = 'front';
while(GLOB_PROCEED_FETCH)
{
    getImageRequest(position);
}

function getImageRequest(position)
{
    GLOB_IMG_CURR++;
$.ajax({
        url: urlAJAX + 'scan=' + position,
        method: 'GET',
        async: false,
        success: function(data) {
            if ((data.status == 'empty') || (GLOB_IMG_CURR > GLOB_IMG_MAX))
            {
                GLOB_PROCEED_FETCH = false;
                return true;
            }
            else if (data.status == 'success')
            {
                renderImageData(data);
            }
        }
    });
}

问题是只有在获取所有图像时,图像(使用renderImageData()函数构造)才会附加(全部在一起)到特定的DIV.我的意思是,在循环结束之前,没有任何DOM操作可能.

我需要逐个加载和显示图像,因为可能有大量的图像,所以我不能将它们堆叠起来,直到它们都被取出.

我一直在分析复杂应用程序的缓存存储使用情况,当我意识到存储的图像或具有特定内容长度的脚本N实际上占用5N-10N了缓存存储空间.

考虑这个示例:我通过服务工作者从OpenStreetMap请求图像并将其存储在缓存中.缓存中只存储一个图像.Chrome版本是最新版本(版本65.0.3325.146(官方版本)(64位)).

这是刷新后缓存存储的视图:

这是清除缓存选项卡的视图:

因此,问题在于具有6.4KB实际占用13.8MB高速缓存存储大小的图像.我错过了什么吗？

实例可以在https://googlechrome.github.io/samples/service-worker/basic/上看到- 少于10KB几乎占用50KB缓存存储的脚本.

因此,问题是:当文件通过服务工作者缓存时,它们占用的空间会显着增加？我同意实际请求的权重大于实际响应,但不是10倍.

可能有用的链接:

1. Chrome开发工具显示高缓存存储利用率
2. 服务工作者问题
3. https://bugs.chromium.org/p/chromium/issues/detail?id=795134

每当带有 Service Worker 的 Web 应用程序在硬刷新后重新加载时（Ctrl + F5例如，对于 Chrome），Service Worker 之后将无法注册。

根据W3C的文档

注意：如果请求是强制刷新（shift+refresh），navigator.serviceWorker.controller 将返回 null。从此属性 getter 返回的表示同一 Service Worker 的 ServiceWorker 对象是相同的对象。

那么，问题来了：硬刷新完成后，真的不可能立即注册Service Worker吗？我正在使用 来检查 Service Worker 是否存在navigator.serviceWorker.controller。请参阅随附的 GIF，其中显示了与https://googlechrome.github.io/samples/service-worker/basic/页面的交互

我有一名注册的服务人员

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.bundle.js').then(registration => {
        console.log('Service worker was registered');
    }).catch(error => {
        console.log('Registration failed: ', error);
    });
}

实际的服务工作者正在使用常规的 console.log() 调用来记录其事件install和activate事件，所有这些都按预期工作。

然而，当涉及到测试自动化时，Headless Chrome / puppeteer解决方案没有按预期工作，服务工作线程也没有工作installed（安装事件没有发生）。那么，问题是，是否有任何特殊的方法可以使用Headless Chrome / puppeteer来测试服务工作者的页面？

傀儡师代码：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ args: ['--no-sandbox']});
  const page = await browser.newPage();
  page.on('console', msg => console.log('PAGE LOG:', msg.text()));

  await page.goto('https://***.com', { waitUntil: 'networkidle0' });
  await page.waitFor(1*4000);
  console.log('Before …

Visual Studio Code随机(50%的情况)取代了JavaScript中的console.log(with console((ES6,Vanilla).默认设置所有设置,不使用快捷方式或扩展名.

有没有人经历过这种行为？

请考虑以下示例

// Example state
let exampleState = {
  counter: 0;
  modules: {
    authentication: Object,
    geotools: Object
  };
};

class MyAppComponent {
  counter: Observable<number>;
  constructor(private store: Store<AppState>){
    this.counter = store.select('counter');
  }
}

在这里，MyAppComponent我们对counter状态属性发生的变化做出反应。但是，例如，如果我们想对状态的嵌套属性做出反应modules.geotools怎么办？似乎应该可以调用a store.select('modules.geotools')，因为将所有内容置于全局状态的第一层似乎对整体状态结构不利。

更新资料

@cartant的答案肯定是正确的，但是在Angular 5中使用的NgRx版本需要一些不同的状态查询方式。这个想法是，我们不能只提供store.select()调用的键，我们需要提供一个返回特定状态分支的函数。让我们将其称为stateGetter并将其编写为接受任意数量的参数（即查询深度）。

// The stateGetter implementation
const getUnderlyingProperty = (currentStateLevel, properties: Array<any>) => {
  if (properties.length === 0) {
    throw 'Unable to get the underlying property';
  } else if (properties.length === 1) {
    const …