javascript - 加快网站速度 - 将脚本/图像标记为可选？

Question

在我的网站上，我有来自加载速度不是特别快的网络的广告。除非广告加载，否则某些浏览器不会绘制页面，从而使网站看起来比实际速度慢 - 有什么办法可以防止这种情况发生吗？就像将脚本标记为非必要的一样，或者做一些javascript技巧只在加载后才绘制它？我尝试谷歌搜索解决方案，但无济于事。

此外，一些广告作为 iframe 添加到网站，一些作为 JS 脚本（很像 adsense）

Answer 1

如果加载广告是可选的，您可以做的是等待加载它们，然后使用 ajax 稍后使用 jquery 加载/添加它们。

Answer 2

最好的办法是推迟加载您的广告以及其他任何非必要的内容，直到页面加载完毕。

附加代码以将这些加载到window.onload. 当页面上的所有内容完成加载时，该事件就会触发。您甚至可以稍后通过将其添加到 DOM 来延迟加载整个脚本。我为此使用jQuery.getScript()，但还有其他方法。

Answer 3

在加载 DOM 后加载广告。您将正常加载页面，然后绑定一个注入广告的函数（JavaScript）。

标签上还有 defer 属性，但不完全支持跨浏览器。

JavaScript：延迟执行

Answer 4

您可以尝试将脚本标签放在页面底部，在结束正文标签之前。http://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-6-move-scripts-bottom-7200.html 或者您可以尝试异步加载它们。

在 HTML5 中（没有那么多浏览器支持）

<script async src="http://your.com/script.js"></script>

另一种方式（适用于更多浏览器）

<script>
   var resource = document.createElement('script'); 
   resource.src = "//your.com/script.js";
   var script = document.getElementsByTagName('script')[0];
   script.parentNode.insertBefore(resource, script);
</script>

http://css-tricks.com/thinking-async/