579得票11回答
浏览器中的最大并行HTTP连接数是多少?

我正在创建一些暂停的连接到一个HTTP服务器(长轮询,反向AJAX等)。它能正常工作,但是我发现浏览器仅允许同时对给定域名建立两个挂起的连接。因此,如果用户在其浏览器的标签页1中查看我的网站,然后又尝试在标签页2中加载它,他们已经使用了我的站点的两个允许的连接。 我认为我可以做一些通配符域名的...

127得票21回答
制作CSS雪碧图的工具?

有没有好用的工具可以制作CSS雪碧图? 理想情况下,我希望它可以接收一个图片目录和一个已经引用这些图片的.css文件,并生成一个包含所有小图片优化后的大图片,并自动修改我的.css文件以便引用新的图片。 至少,我希望它能够接收一个图片目录并生成一个大的雪碧图以及必要的.css文件来将每张图...

32得票5回答
“display:none”会提高还是降低性能?

我有一个页面需要大量垂直滚动和数千个DOM元素。为了提高性能,我考虑将视口上方和下方的div内容设置为display: none;,也就是那些不可见的div(同时保持它们的高度,显然): 为了验证我的想法是否有道理,我在SO上搜索并找到了这个问题。根据评论和被接受的答案,最好的策略是什么...

18得票2回答
对于具有不同宽高比的响应式图片,如何最小化累积布局偏移量?

如果您在不同断点上具有不同纵横比的图像源的<picture>元素,那么通过在CSS中使用纵横比和媒体查询来最小化CLS的最佳方法是什么?

18得票3回答
等待时间长的请求如何传递给Service Worker?

我注意到等待服务工作者从缓存中响应项目的时间并不像您期望的那样快。我在使用sw-precache和自定义编写的服务工作者时都看到了相同的等待时间。 导致这种等待时间的可能原因是什么,我如何减少它? 我自定义服务工作者上的fetch事件如下:self.addEventListener('...

13得票2回答
使用HTTP/2单独加载图片比使用类似HTTP/1.1的精灵图同时加载所有图片慢的情况是什么?

HTTP/2使多路连接成为可能,消除了需要向服务器建立多个连接的需求。通过单一连接,可以将许多独立的图像发送到客户端。这消除了以前的图像精灵模式,即将许多图像合并成一个,并使用CSS将其分开的方法。 我很好奇在HTTP/2世界里,图像精灵是否仍然会更快。如果是这样,在什么情况下呢?

13得票1回答
Chrome Dev Tools网络选项卡中,发起者列中的VM前缀是什么意思?

在Chrome开发者工具的网络选项卡中,有时脚本的初始化程序前缀为VM。我的第一反应是这代表虚拟机,但数字代表什么呢?如果我点击查看源代码,我仍然不清楚该脚本的来源是什么?

10得票3回答
我怎样才能检查链接[rel=preconnect]是否已经完成了它的工作?

我在我的页面的HTML代码中添加了link[rel=preconnect]。但是我如何检查preconnect是否起作用? 在DevTools的网络面板中看不到preconnect,在chrome://tracing中也找不到它。 我可以使用哪些工具来查看这个事件?

10得票3回答
支持无障碍和打印的懒加载图片

我正在寻找一种适当的方法来实现图片的懒加载,而不会影响可打印性和可访问性,并且不会引入布局移位(内容跳动),最好是使用本地 loading=lazy 和针对旧浏览器的回退。对于问题 如何使用JavaScript进行图像的懒加载? 的答案包括各种解决方案,但没有一个能够完全满足所有这些要求。 一...

10得票4回答
使用NextJS进行自托管字体

我正在尝试使用我的NextJS应用程序进行自托管Web字体,并且遇到了麻烦。 这是浏览器尝试访问这些字体的URL: localhost:3000/_next/static/css/fonts/Avenir.woff2 实际路径是: _project_dir/static/fonts/A...