javascript 网页永不停止加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14387518/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Web page never stops loading
提问by Julien Tanay
I'm currently working on a student project and I encounter an issue with my code. We built an e-doc which mixes video, images, sounds and texts datas about people working during the night. It's made of HTML, Javascript and a bit of PHP to access a DB.
我目前正在处理一个学生项目，但我的代码遇到了问题。我们构建了一个电子文档，它混合了人们在夜间工作的视频、图像、声音和文本数据。它由 HTML、Javascript 和一些 PHP 组成，用于访问数据库。
Recently we discovered that the page keeps loading infinitely when you arrive on the website... It brokes some of our JS code and we don't know how to identify the ressource that might be corrupted or so...
最近我们发现当你到达网站时页面一直在无限加载......它破坏了我们的一些JS代码，我们不知道如何识别可能已损坏的资源等等......
What can make a page load "forever" ? And what kind of tools (ie firebugg or the built-in chrome stuff) should we use to identify the problem ?
什么可以使页面“永远”加载？我们应该使用什么样的工具（即 firebugg 或内置 chrome 的东西）来识别问题？
You can find our dev- version right here : http://mgprddev2012.dream-valenciennes.com
你可以在这里找到我们的开发版本：http: //mgprddev2012.dream-valenciennes.com
EDIT : PHP Error is now OK, i forgot to upload the newest version of the code on the dev platform.
编辑：PHP 错误现在可以了，我忘了在开发平台上上传最新版本的代码。
Many thanks
非常感谢
回答by brianchirls
You're not crazy - this page does indeed take a very, very long time to load.
你不是疯了——这个页面确实需要非常非常长的时间来加载。
If you look at the Network tab in Chrome Developer tools, you can see that there are a lot of images, audio files and video files loading up all at the beginning, and most of them are not visible right away. And some of them are very big. This is probably one of those situations where it's best to defer loading of most of these assets until you need to display them, or at the very least until after you've loaded the assets you need right away.
如果您查看 Chrome 开发者工具中的网络选项卡，您会发现一开始有很多图片、音频文件和视频文件都在加载，而且大部分都不是立即可见的。其中一些非常大。这可能是最好将大多数这些资产的加载推迟到您需要显示它们的情况之一，或者至少推迟到您立即加载所需的资产之后。
I recommend checking you YSlow, which is an auditing tool that will give you some tips on how to make your web page load faster and appearto load faster. The site also has some good tips and thorough explanations for why different strategies are effective.
我建议您检查YSlow，这是一个审核工具，可以为您提供有关如何使您的网页加载速度更快并看起来加载速度更快的一些提示。该网站还提供了一些很好的技巧和详尽的解释，说明为什么不同的策略是有效的。
A few hints for this particular page:
此特定页面的一些提示：
A lot of your images are pictures of text. Consider rendering these as actual html text. You can still modify the size of each letter with CSS, and you'll have the added benefit that Chrome will be able to translate the text for non-French-speaking users. You should be able to use CSS borders to get those lines around the text, or try SVG.
Your background image is 2.2 MB. That's quite big. Try saving it at a lower compression setting.
You have a bunch of icons in individual png files. Consider putting them all in in one file and display them as CSS Sprites.
There are several png files that look like they could be jpg's, except for the transparency. If you're feeling ambitious, you can make a jpg with the color channels on the left side, and the alpha channel rendered as grayscale on the right, and use canvas to composite them.
You also have a few png files containing sprites for animation. You can convert them to videos and try the same canvas trick as above. If you're willing to use WebGL, I have some code you can use.
你的很多图片都是文字图片。考虑将这些呈现为实际的 html 文本。您仍然可以使用 CSS 修改每个字母的大小，并且您将获得 Chrome 能够为非法语用户翻译文本的额外好处。您应该能够使用 CSS 边框来获取文本周围的线条，或者尝试使用 SVG。
您的背景图片为 2.2 MB。这是相当大的。尝试以较低的压缩设置保存它。
您在单个 png 文件中有一堆图标。考虑将它们全部放在一个文件中，并将它们显示为CSS Sprites。
有几个 png 文件看起来像是 jpg，但透明度除外。如果你有野心，你可以用左边的颜色通道制作一个jpg，右边渲染为灰度的alpha通道，并使用canvas合成它们。
您还有一些包含动画精灵的 png 文件。您可以将它们转换为视频并尝试与上述相同的画布技巧。如果您愿意使用 WebGL，我有一些您可以使用的代码。
回答by Leeish
Stops loading fine for me. Firebug will usually tell you if something is loading in the background. Look at the console area to see if any thing is stalling upon page load. Are you saying in it's current state it hangs, because for me it finished just fine.
停止加载对我来说很好。Firebug 通常会告诉您是否在后台加载某些内容。查看控制台区域，看看是否有任何东西在页面加载时停止。你是说在它的当前状态下它挂起，因为对我来说它完成得很好。
In the console you can also see javascript errors that may cause things to not work properly.
在控制台中，您还可以看到可能导致无法正常工作的 javascript 错误。
回答by XCS
In JavaScript console:
在 JavaScript 控制台中：
Uncaught TypeError: Cannot call method 'pause' of undefined debout.js:979
It says that debout.pop02is not declared. Where do you initialize it?
它说debout.pop02没有声明。你在哪里初始化它？
