javascript - 为什么我的元素在页面加载和 javascript 执行时四处移动？

Question

考虑此页面:http://www.collegeanswerz.com/adelphi-university/academics/professors/do-professors-explain-things-clearly-are-professors-interesting .

有问题的元素是“它们使事情变得容易理解吗？它们有趣吗？”在右上角的浅灰色框中。当页面加载时，它从高处开始，然后向下移动 30px。当您在导航栏中单击“信息”时，会发生同样的事情。

这是元素:<div id="question_sub" class="well"></div> .

为什么会发生这种情况，我该如何解决？

Answer 1

回答为什么会发生

如果您尝试在不使用 javascript 的情况下加载您的页面，该页面看起来像

问题您的页面非常依赖 js 来修改 dom 元素和样式。解决方案 为了尽可能避免这种样式你的页面在css 中，应该使用JS 进行交互或使网页具有吸引力。

可能的问题如果您正在加载大量与页面内容无关的外部脚本，例如 head 元素中的铁饼解决方案如果您不这样做，请将所有外部 js 从 head 移动到 body 的末尾，或者您可以异步加载它们。引用Mozilla Synch and Async

另一种方式如果您希望仅当内容的某些部分发生更改时才从服务器加载内容，然后使用应用程序缓存技术，页面将从客户端计算机加载，因此只有初始页面加载会在第一次加载时花费时间，然后它会相当快速地检查Using Application Cache

其他方式

• 压缩 Javascript 和 CSS
• 使用gzip压缩

还有很多，搜索一下知识的海洋，reference