什么使网站在滚动时感觉很重？

I'm just finishing up, built my first website, but the problem is it feels heavy, i.e., scrolling up or down feels like, choppy. The page loads initially quite decent (5 secs), but once you're there it feels very similar to theblaze.com in terms of heaviness.

我刚刚完成,建立了我的第一个网站,但问题是感觉很重,即向上或向下滚动感觉像是不稳定。页面最初加载相当不错(5秒),但是一旦你在那里感觉非常类似于theblaze.com的沉重感。

What is it that makes a site feel heavy, and what are the troubleshooting steps to figure out what the causes are? It's an html site with a few jquery plugins. I've googled around for "heavy site", "choppy scrolling", etc., but not much has come up, other than the usual "lazyload your images" or whatever. (I'm doing that.) Most people seem concerned about initial loading speed, but not the feel of the scrolling once you're on the site.

什么使网站感到沉重,以及找出原因的故障排除步骤是什么?这是一个带有一些jquery插件的html站点。我已经搜索了“重型网站”,“乱七八糟的滚动”等,但除了通常的“懒加载你的图像”或其他什么之外,没有多少出现。 (我正在这样做。)大多数人似乎都担心初始加载速度,但一旦你在网站上就不会感觉滚动。

What are the likely culprits?

可能的罪魁祸首是什么?

To me it feels like a memory thing. Like when you have photoshop open and the computer starts to lag.

对我而言,这感觉就像一件记忆。就像你打开photoshop并且计算机开始滞后一样。

3 个解决方案

#1

Well, apart of the tools mentioned, the process to find the problem is quite easy;

好吧,除了提到的工具之外,找到问题的过程非常简单;

check the size of the page, including images

检查页面的大小,包括图像

remove any script and "feel" the page, if still heavy, the problem is something else, if it feels right, then the problem is/are the script(s)

删除任何脚本和“感觉”页面,如果仍然很重,问题是别的,如果感觉正确,那么问题是/是脚本

if the problem is the script, start by moving it to the bottom of the page

如果问题是脚本,首先将其移动到页面底部

if still affects, check that it works properly

如果仍然影响,请检查它是否正常工作

if without the script is too heavy, try to reduce the amount and size of images

如果没有脚本太重,请尝试减少图像的数量和大小

if you use tables, try to set dimensions

如果您使用表格,请尝试设置尺寸

try to avoid nested tables or many nested divs, that takes some rendering time.

尽量避免嵌套表或许多嵌套的div,这需要一些渲染时间。

scrolling and refreshing effects are heavy on the rendering engine of the browser.

滚动和刷新效果在浏览器的渲染引擎上很重要。

Check all that and then check for specific solutions for the right problem.

检查所有这些,然后检查正确问题的具体解决方案。

Bye

#2

If you go to the Google Page speed Insights: , it will list all of the pitfallss your site is having and at the time will suggest ways for you to improve on them.

如果您使用Google Page speed Insights :,它将列出您网站所遇到的所有陷阱,并在当时建议您改进它们的方法。

Google will rate your site in terms of performance on Mobile and Desktop. If you get a score of around 90+, you should think that you have done a great Job.

谷歌将根据移动和桌面的性能对您的网站进行评级。如果你得到大约90+的分数,你应该认为你做得很好。

#3

This sounds like processing delays within your browser - it might make sense to watch CPU/ mem usage as you scroll. You could try removing elements one at a time to find the culprit.

这听起来像浏览器中的处理延迟 - 在滚动时观察CPU /内存使用情况可能是有意义的。你可以尝试一次删除一个元素来找到罪魁祸首。

I've noticed this sort of lag when asking the browser to resize images rather than doing it in advance.

当我要求浏览器调整图像大小而不是事先进行调整时,我注意到了这种延迟。

#1