0

这两个片段之间实际上有区别吗？有什么好处吗？它们都通过脚本标签嵌入到我的 html 文档中

<script>
window.onload = function () {
    var masthead = document.getElementById("js-masthead"),
        pageWidth = masthead.offsetWidth,
        viewportHeight = window.innerHeight,
        fluidPadding = (viewportHeight / pageWidth) * 100;

    masthead.style.paddingTop = fluidPadding + "%";
};
</script>

和

<script>
var masthead       = document.getElementById("js-masthead");
var pageWidth      = masthead.offsetWidth;
var viewportHeight = window.innerHeight;
var fluidPadding   = (viewportHeight/pageWidth) * 100;

masthead.style.paddingTop = fluidPadding + "%";
</script>

您能否建议任何更好的替代方案或更好的方法来编写我的 javascript？

4

1 回答 1

0

这两个片段之间实际上有区别吗？

是的，有几个不同之处。

第一个片段注册了一个在窗口加载事件被调度时要调用的函数。这意味着如果您要在窗口加载后动态加载第一个脚本，则代码将永远不会被执行。

第二个片段在脚本标签被解析后执行。这意味着根据脚本在 HTML 中的放置位置，您可能有也可能没有要使用的#js-masthead元素。

第一个片段将您的代码包装在一个函数中，因此每个变量都是该函数的本地变量。第二个片段用您可能永远不会再使用的变量污染了全局范围。提示：IIFE 可以在这里提供帮助。

例如，如果与 onload 相比，脚本标签直接放在 id 为“js-masthead”的 div 下，速度会不会有很大差异？

是的，但不是你所期望的。在正文中放置script带有与 DOM 交互的代码的标签将对性能产生负面影响。现代浏览器尽可能优化页面加载，并一次做几件事（管道）以尽快显示您的内容。如果您在文档准备好之前读取或写入 DOM 属性，您将强制浏览器在页面中使用的数据结构之间保持一致的状态，从而消除任何管道化的可能性。body如果脚本位于标记的末尾，则可以减轻这种影响。

TL;DR：如果您关心性能，请在 onload 处理程序中进行 DOM 交互。

于 2013-10-03T13:33:46.447 回答