- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我已经为我的项目运行了 chrome 审计,我被建议减少第三方代码的影响。就我而言,我正在加载谷歌地图 api。我这样做是这样的:
在我的 main.js 中,我检查要附加 map 的元素:
if (document.querySelector('.js-map')) {
GMap.GMap('.js-map', process.env.GOOGLE_MAPS_API_KEY);
}
GMap 看起来像这样:
export function GMap(el, apiKey) {
const gApiKey = apiKey
const gmapApi = new GoogleMapsApi(gApiKey)
const mapEl = document.querySelector(el)
const data = {
lat: parseFloat(mapEl.dataset.lat ? mapEl.dataset.lat : 0),
lng: parseFloat(mapEl.dataset.lng ? mapEl.dataset.lng : 0),
zoom: parseFloat(mapEl.dataset.zoom ? mapEl.dataset.zoom: 12),
}
// Call map renderer
gmapApi.load().then(() => {
renderMap(mapEl, data);
document.querySelector('.static-map-img').setAttribute("style", "display:none;");
document.querySelector('.map').removeAttribute('style');
})
}
这是 GoogleMapsApi:
/**
* GoogleMapsApi
* Class to load google maps api with api key
* and global Callback to init map after resolution of promise.
*
* @exports {GoogleMapsApi}
* @example MapApi = new GoogleMapsApi();
* MapApi.load().then(() => {});
*/
class GoogleMapsApi {
/**
* Constructor
* @property {string} apiKey
* @property {string} callbackName
*/
constructor(gApiKey) {
// api key for google maps
this.apiKey = gApiKey;
// Set global callback
if (!window._GoogleMapsApi) {
this.callbackName = '_GoogleMapsApi.mapLoaded';
window._GoogleMapsApi = this;
window._GoogleMapsApi.mapLoaded = this.mapLoaded.bind(this);
}
}
/**
* Load
* Create script element with google maps
* api url, containing api key and callback for
* map init.
* @return {promise}
* @this {_GoogleMapsApi}
*/
load() {
if (!this.promise) {
this.promise = new Promise(resolve => {
this.resolve = resolve;
if (typeof window.google === 'undefined') {
const script = document.createElement('script');
script.src = `//maps.googleapis.com/maps/api/js?key=${this.apiKey}&callback=${this.callbackName}`;
script.async = 'true';
script.defer = 'true';
script.setAttribute('rel', 'preload');
document.body.append(script);
} else {
this.resolve();
}
});
}
return this.promise;
}
/**
* mapLoaded
* Global callback for loaded/resolved map instance.
* @this {_GoogleMapsApi}
*
*/
mapLoaded() {
if (this.resolve) {
this.resolve();
}
}
}
export default GoogleMapsApi;
运行审核后,我已将 map 加载更改为在页面加载后发生:
window.onload = function () {
if (document.querySelector('.js-map')) {
GMap.GMap('.js-map', process.env.GOOGLE_MAPS_API_KEY);
}
};
但是,我仍然从 chrome 的 lighthouse 收到相同的审核消息:
您可以看到一个工作示例 here .
更新
我也试过像这样用异步等待逻辑加载 map :
const loadMap = async () => {
if (document.querySelector('.js-map')) {
setTimeout(async () => {
const GMap = await import('./GMap/index');
GMap.default('.js-map', process.env.GOOGLE_MAPS_API_KEY)
}, 0);
}
}
async function concurrentStart() {
const map = loadMap();
InfoComponent.init();
SelectBuilder.init();
FilterBuilder.init();
window.onload = async function () {
const lightButton = document.querySelector('.light-icon');
const changeTheme = await import('./themeSelector');
lightButton.addEventListener('click', changeTheme.default, { capture: true, passive: true });
};
await map;
}
concurrentStart();
但是,我在运行灯塔审计时一直得到相同的结果。在不阻塞应用程序其余代码的情况下加载 map 的正确方法是什么?
最佳答案
Lighthouse 会一直等到事件循环中没有任何任务为止,因此您将 setTimeout 设置的时间越长,您获得的排名就越低。 Check this out
我只是让浏览器来做肮脏的工作。只需添加脚本,并使用它的异步/延迟属性
这里是关于 async / defer 的更多信息关于 event loop
同时考虑使用其他性能工具,例如 https://developers.google.com/speed和 https://www.webpagetest.org/
如果它很关键,您可以仅在它可见时通过使用滚动事件或交叉点观察器加载库,但灯塔很可能不会感觉到任何改进,上面的在线工具会做。
关于javascript - 在 onload 事件上加载谷歌地图仍然会在页面加载后给出加载它的灯塔消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61631596/
所以我想隐藏一个div,所以我有我的代码 function hide(){hide div code} document.onload = hide(); 不起作用。 window.onload =
我有一个外部 js 文件,它有一个函数,该函数旨在在文档正文加载后运行。这是我到目前为止所拥有的,但它并没有像它应该的那样工作。请一些帮助。 外部JS文件 window.document.body.a
我觉得这很有趣。考虑以下代码, window.onload 和 body onload=""调用相同的函数。但是,结果不同。在我看来,window.onload 的集合有问题。这是代码:
我多次在链接上使用 Shadowbox,我知道 href 指示 Shadowbox 像这样在框中加载什么页面: 但是,我现在需要在用户进入页面时立即显示一个阴影框。不是onclick,而是onloa
我正在制作一个页眉和页脚不变的网站。单击站点时,主 div 会更改。这是代码: Item 1 ... $("#item").click(function(){$("#main").load("i
我在网页中有 2 个函数 (js) 用于将图像附加到 Canvas 元素: function attachImage(tile, x, y) { base_image = new
首先向大家问好。我是 jquery 的新手,并且在学习曲线上。 我的脚本是这样的: $(function () { $('#content').find('#nav a').on('click'
我今天遇到了一个奇怪的错误。我有一个简单的用户脚本,它添加了一个 window.onload事件到所有网站。但是其中一个网站有一个 定义。发生的事情是 window.onload像往常一样工作但是安装
今天我遇到了一个奇怪的问题: window.onload 在引用名为 onload 的函数时似乎不会触发。 我以前从未注意到这一点: 测试 1: window.onload=onload; funct
假设你想用 JS 把一个元素变成蓝色,像这样: Boy, I sure do wish I was blue 上面的行不起作用,因为 this 以该上下文中的 window 对象为目标。您可以使用 I
我的问题与此处提出的问题类似,但又略有不同,window.onload vs 那道题是用 window.onload 和内联 js 的对比。 我的问题是下面的区别。假设正文标签的 ID 为“body
window.onload事件和body标签的onload事件到底有什么区别?我什么时候使用哪个以及如何正确使用? 最佳答案 window.onload = myOnloadFunc和 是使用同一事件
哪个得到更广泛的支持:window.onload 或 document.onload? 最佳答案 他们什么时候开火? window.onload 默认情况下,它会在整个页面加载时触发,包括其内容(图像
之间有什么区别: window.onload = someFunction; window.onload = someFunction(); 括号在最后。它们有什么不同吗? 我们一般使用第一个!如果我
在 this question 的答案中,我们读到 function f() {}在本地定义名称,而 [var] f = function() {}全局定义它。这对我来说很有意义,但是这两个声明之间存
当我将索引值传递给 onLoad() 时,因此当它开始在后台运行时,它将使用索引值来索引数组。问题是,从表面上看,当 onLoad() 开始运行时,它引用的索引值始终是最后一个索引。 我尝试将每个请求
假设我有这个页面: Hello, world! test.html 包含以下内容: huge.png由于某种原因是100mb。 我无法控制 test.html,但我必须在我的页面中包含 ifram
我正在做以下工作。如果启用了 js,它基本上会通过 ?answer=1。在我添加 onload 参数之前它一直有效(因为我希望这在没有用户触发的情况下发生)。但是,添加 onload 似乎会停止(否则
我可以同时使用body onload和window.onload吗?我已经使用此代码尝试过 window.onload = alertSec; 但是没有成功。我只是需要有人向我确认一下
我可以同时使用body onload和window.onload吗?我已经使用此代码尝试过 window.onload = alertSec; 但是没有成功。我只是需要有人向我确认一下
我是一名优秀的程序员,十分优秀!