在编写html时,一些网站建议在BODY标记的末尾编写脚本,而不是在BODY标记的开头写入,我读到这将增加页面刷新的性能,但是这有助于在html页面呈现时只有在DOM解析了所有标签之后？
小智 17
在head标记中包含依赖项(例如jQuery)是常规.但是,如果不将DOM加载到窗口中,脚本就无法访问它.
看看以下示例:
<!DOCTYPE html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js
</script>
</head>
<script type="text/javascript">
$('#appleTest').html("Apples are great.");
</script>
<body>
<div id="appleTest">
</div>
</body>
如果你要运行它,你就不会看到"苹果很棒".在浏览器窗口中,因为jQuery选择没有任何选择.如果将脚本移动到</body>标记下面,则在调用jQuery选择器方法时,它可以找到div,因为它已加载到窗口中.
ame*_*iel 10
javascript加载不是DOM的一部分,但它是阻塞的,它会中断加载过程直到完成.即使它是一个小脚本,它仍然是一个额外的请求,并将减慢整个过程.
真相是浏览器只需要DOM结构来开始渲染,它们不需要脚本也不需要用于布局.在执行之前,它们只是自重.
即使CSS对于初始渲染过程(或多或少)也可能被认为是不必要的,但由于CSS加载是非阻塞的,因此这不是问题.
将脚本放在底部的性能提升可能会有所不同,即使这是一种推荐的做法,也可能并非总是无害的.例如,在处理CMS时,您可能会设计主题以在底部加载脚本,但您无法控制插件.例如,这会在wordpress中发生很多事情,并且人们最终会将脚本放在头部以避免与插件发生冲突.
奖金追踪(几年后)
在跟踪脚本时,例如mixpanel,inspectlet,甚至谷歌分析...你可能想要检测用户何时进入你的页面并在几秒钟之后由于加载时间缓慢,成人广告块......等等.
如果您将跟踪脚本和底部放在一起可能无法及时启动以检测该访问,那么您将不会知道您具有如此极端的跳出率.在这种情况下,我会考虑将脚本放在头脑中.
如果你把资源提示放在开头,比如说
<link rel="preconnect" href="https://api.mixpanel.com" />
<link rel="preconnect" href="https://cdn.mxpnl.com/" />
要么
<link rel="prefetch" href="https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js" as="script">
它将减轻在头部加载所述脚本的缺点.
| 归档时间： |
|
| 查看次数： |
511 次 |
| 最近记录： |