Son*_*ngo 5 html javascript browser performance rendering
我阅读了高性能网站:前端工程师的基本知识,其中作者建议所有JavaScript代码都应该外部化并放在页面底部而不是放在头脑中.
这个例子说明了这一点.在外部脚本标签块都下载并逐步呈现页面,因此该解决方案是把它在页面的底部.
然而,在他的第二本书" 更快的网站:网络开发者的性能最佳实践"中,他谈到了内联 JavaScript标签.
内联脚本还阻止下载和呈现页面,因此他建议将它们也移动到页面底部.但是,此操作仍然完全阻止页面的呈现,如此示例中所示
为什么将外部脚本移动到页面底部会让页面逐步呈现,同时移动内联脚本会完全阻止呈现,直到执行脚本为止？
PS:
问题不在于为什么要将JavaScript添加到页面底部而不是将它们放在头部.这就是为什么底部内联脚本阻止渲染而底部外部脚本没有阻止渲染的原因.
在内联脚本中,运行脚本需要时间,这可能会更改DOM.尝试在变异时渲染DOM是一个混乱的秘诀.因此渲染只发生在JS停滞时的点,因此DOM是稳定的.
在等待外部脚本下载时,脚本的运行会停止,因此可以安全地呈现DOM.在渲染完成之前,将不会运行下载的JS.