该preload指令未按预期在Chrome中执行.下面是一个完整的HTML页面,可以在Chrome中打开以进行结果比较.它应该应用所有5种字体; 相反,它只应用第一个预加载的字体,为应该是第二个字符制作一个虚假斜体,并简单地用默认的衬线代替剩下的3个字体.
此外,在开发人员的控制台中,对于五种字体中的每一种,此消息在大约3秒后出现:
The resource [URL] was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.
奇怪的是,它确实将第一个字体(Muli)应用于h1和h2标签(尽管为它制作了一个虚假的斜体h2); 您可以单击错误消息中的URL,并在开发人员的控制台中显示预加载字体的预览.
有什么问题在这里有什么不妥？(我在Windows 8.1专业版的Chrome 56上测试了这个.)
<!DOCTYPE html>
<html>
<head>
<title>Preload Font Test</title>
<link rel="preload" href="https://fonts.gstatic.com/s/muli/v10/zscZFkjVRGyfQ_Pw-5exXPesZW2xOQ-xsNqO47m55DA.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/muli/v10/YxNEAWILjDc466nftZdqXuvvDin1pK8aKteLpeZ5c0A.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxv79_ZuUxCigM2DespTnFaw.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/lato/v13/tI4j516nok_GrVf4dhunkg.woff2" as="font" type="font/woff2" …当我打开WAVE(Web辅助功能评估工具)扩展程序时,我的服务工作者在Chrome中抛出此错误:
未捕获(承诺)TypeError:sw.js不支持请求方案'chrome-extension':52(匿名)@ sw.js:52 Promise.then(async)(匿名)@ sw.js:50 Promise.then( async)(匿名)@ sw.js:45 Promise.then(async)(匿名)@ sw.js:38
我的服务人员代码是:
(function () {
'use strict';
var consoleLog;
var writeToConsole;
const CACHE_NAME = '20180307110051';
const CACHE_FILES = [
'https://fonts.gstatic.com/s/notosans/v6/9Z3uUWMRR7crzm1TjRicDv79_ZuUxCigM2DespTnFaw.woff2',
'https://fonts.gstatic.com/s/notosans/v6/ByLA_FLEa-16SpQuTcQn4Igp9Q8gbYrhqGlRav_IXfk.woff2',
'https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nJBw1xU1rKptJj_0jans920.woff2',
'https://fonts.gstatic.com/s/notosans/v6/PIbvSEyHEdL91QLOQRnZ1xampu5_7CjHW5spxoeN3Vs.woff2',
'https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2',
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2',
'favicon.20180205072319.ico',
'favicons/android-chrome-512x512.20180211120531.png',
'favicons/android-chrome-192x192.20180211120531.png',
'offline.html'
];
// for debugging:
writeToConsole = false;
consoleLog = function (message) {
if (writeToConsole) {
console.log(message);
}
};
// https://stackoverflow.com/questions/37117933/service-workers-not-updating
self.addEventListener('install', function (e) {
e.waitUntil(
Promise.all([caches.open(CACHE_NAME), self.skipWaiting()]).then(function (storage) {
var static_cache = storage[0];
return Promise.all([static_cache.addAll(CACHE_FILES)]);
})
);
});
// intercept network requests: …javascript google-chrome google-chrome-extension promise service-worker
我的 .htaccess 文件中有一个 Content-Security-Policy 标头，它适用于包含多个页面的整个网站。每个页面上都有内联元素，我不会（也不能）移动到单独的 .js 文件中，我希望 CSP 也允许它们而不使用“不安全内联”。因此，我想使用动态生成的带有 FALSE 标志的 PHP header() 将它们添加到每个页面的顶部。FALSE 标志（在此处记录）将附加到任何现有的传入标头而不覆盖它。从理论上讲，这应该可以解决我的问题……但事实并非如此。
由于未知原因，我无法在 HTML 内容之前使用 PHP header() 附加或替换 .htaccess 文件中设置的 CSP。下面是演示问题的代码： (1) 页面的 .htaccess 文件；(2) PHP 页面本身。您应该能够轻松重现这一点。（我使用 Chrome 57 进行测试）。
sha256 哈希值用于如下所示的元素；更改其中的一个字符，哈希将不再对其有效。（如果您使用某些浏览器扩展程序，Chrome 可能会抱怨需要额外的哈希值；只需将它们添加到 PHP header()；方便地，Chrome 将为您提供每个内联<script>CSP的正确哈希值）
如果您重新删除 .htaccess 文件中的 CSP 指令，则脚本将执行。为了进一步证明它的工作原理，更改散列中的一个字符并在控制台打开的情况下重新加载页面；它应该报告一个错误，指出 CSP 对脚本无效，然后报告应该使用什么散列来验证（这将是原始散列）。
但是，如果您随后取消对 .htaccess 文件中的 CSP 指令的 rem，则 PHP header() 无效，无论是否带有 FALSE 标志。
这就是问题所在：当 .htaccess 文件具有 CSP 标头时，PHP CSP header() 不起作用。
我不想使用 anonce并且我不想在 .htaccess 文件中使用unsafe-inline或unsafe-eval...而且我不想将哈希添加到 …
当通过滚动侦听器调整某些 div 时，Edge 浏览器会导致某些 div 出现卡顿。这种卡顿现象不会在 IE、Chrome、Opera 或 Firefox 中发生。
\n\n尽管 Firefox 不会导致卡顿，但当它检测到首次使用滚动侦听器时，它会在控制台中引发一个标志，并将我引导到此页面以进行说明：
\n\nhttps://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects
\n\n该文章似乎准确描述了我在 Edge 中遇到的问题：
\n\n\n\n\n在异步滚动模型中，视觉滚动位置在合成器线程中更新，并且在滚动事件在 DOM 中更新并在主线程上触发之前对用户可见。这意味着实现的效果将稍微落后于用户看到的滚动位置。简而言之，这可能会导致效果迟缓、卡顿或紧张，这是我们想要避免的。
\n
它只提供两种解决方案，第一种（位置：粘性）仅具有有限的浏览器支持，第二种（滚动捕捉）已从网络标准中删除。
\n\n更进一步，我发现了 Edge 开发团队关于 APZ（异步平移和缩放）的一篇好文章：
\n\nhttps://blogs.windows.com/msedgedev/2017/03/08/scrolling-on-the-web/#ahrEuFu6fybJ1uwj.97
\n\n如果有一种方法可以打开和关闭 APZ，那就太理想了，但我找不到解决方法。然而，Firefox 的实现对我的日常工作来说没有任何问题，但 Edge 的实现却存在极大的问题，特别是因为它不提供对position:sticky 的支持。
\n\n还有其他方法可以解决这个问题吗？这是一个问题。
\njavascript scroll asynchronous onscrolllistener microsoft-edge
我正在使用 Babel-Standalone 在 React 应用程序中使用 JSX，而不使用 NPM。Babel 显然将“import”语句翻译成“require”语句；导入 'require.js' 和其他依赖项以使这项工作产生更多错误。
当然，必须有一种简单的方法来在客户端 JSX 的上下文中执行导入/导出。请告知（此处不寻求 Node/NPM/Webpack 解决方案；寻求适当库的 CDN 和 import 语句的重写等）。
<!doctype html>
<html lang="en-us">
<head>
<title>React JSX Babel-Standalone Import/Export Problem</title>
<meta charset="utf-8">
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
// See MyExport.js text below this SCRIPT
// Goal: to employ <MyExport /> in the return of App.
// import MyExport from "./MyExport";
const App = () => {
return (
<div>Hello</div>
);
};
ReactDOM.render(<App />, document.querySelector("#root")); …当 Babel Standalone 作为 SCRIPT 标签的 SRC 属性提供时，Babel Standalone 可用于动态附加的 JSX 代码。当使用 JavaScript 将其附加到 DOM 时，它不起作用。对于 React 库来说情况并非如此，当动态附加 React 库时，它可以与动态附加的 JSX 一起正常工作。
首先，这是 JSX 文件 (react.jsx)：
class HelloMessage extends React.Component {
render() {
return <h1>Hello</h1>;
}
}
ReactDOM.render(<HelloMessage/>, document.getElementById('app'));
接下来，这是使用它的 HTML。请注意，React 库和 JSX 文件是动态添加的；这工作正常。但是，Babel Standalone 仅在将 Babel Standalone 添加为 SCRIPT 元素的 SRC 时才转译 JSX，而不是在使用附加 JS/JSX 其余部分的相同 JavaScript 进行附加时转译。通过重新删除一个 Babel Standalone 调用并取消重新删除另一个来在两种状态之间切换。我想动态附加 Babel Standalone...有什么问题吗？
<!doctype html>
<html>
<head>
<title>Inscrutable Babel Problem</title>
</head>
<body>
<div>
<p>Babel works only when added as a …我有一个两侧的移动菜单抽屉，它依赖一个隐藏的复选框在两侧之间切换/切换。
有两个 LABEL 元素，菜单抽屉的每一侧一个。每个 LABEL 通过其 FOR 属性引用隐藏 INPUT 复选框的 ID。因此，单击显示的 LABEL 会检查 INPUT 复选框并导致菜单切换侧（通过 CSS）。HTML的提炼是：
<ul class=main-menu>
<li>
<input id=toggle-drawer type=checkbox title="hidden checkbox">
<label for=toggle-drawer>See Sub Menu</label>
<ul class=sub-menu>
<li>
<label for=toggle-drawer>See Main Menu</label>
</li>
<li>Sub-menu item 1</li>
<li>Sub-menu item 2</li>
<li>Sub-menu item 3</li>
</ul>
</li>
<li>Main Menu item 1</li>
<li>Main Menu item 2</li>
<li>Main Menu item 3</li>
</ul>
事实上，具有多个引用同一输入项的标签是完全有效的 HTML。
见https://www.w3.org/TR/html401/interact/forms.html#h-17.9.1：
“通过 for 属性创建多个引用，可以将多个 LABEL 与同一个控件相关联。”
但是，WebAIM WAVE（Web 可访问性评估工具）浏览器扩展将这两个标签标记为错误，说明：
“一个表单控件最多应该有一个关联的标签元素。如果多个标签元素与控件关联，辅助技术可能无法读取适当的标签。”
作为补救措施，它继续说明：
“如果需要多个表单标签，请使用 aria-labelledby。”
aria-labelledby 似乎不适用于我的情况，因为它会被放在一个 DIV …