Question

这两个片段之间确实存在差异吗？有什么好处吗？它们都通过脚本标签嵌入我的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代码？

Answer 1

这两个片段之间确实存在差异吗？

是的，有几点不同。

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

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

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

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

是的，但不是你期望的。使用与正文中的DOM交互的代码放置script标记将对性能产生负面影响。现代浏览器尽可能地优化页面加载并同时执行多项操作（管道）以尽快显示您的内容。如果在文档准备好之前读取或写入DOM属性，则会强制浏览器在页面中使用的数据结构之间保持一致状态，从而丢弃任何管道传输的可能性。如果脚本位于body标记的末尾，则会减轻此效果。

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

函数中的Javascript环绕代码？

1 个答案: