前端杂谈 · Web

前端性能优化 将 JavaScript 放在页面底部

•̀.̫•́✧ · 5月1日 · 2020年 · 本文472字 · 阅读2分钟40

浏览器下载脚本时,会阻塞其他资源并行下载,即使是来自不同域名的资源。因此,最好将脚本放在底部,以提高页面加载速度。

前端性能优化  将 JavaScript 放在页面底部-歪?是3.1415926吗

脚本会阻塞并行下载,HTTP/1.1 官方文档建议浏览器每个主机名下并行下载的组件数不要超过两个,如果图片来自多个域名,并行下载的数量就可以超过两个。如果脚本正在下载,浏览器就不开始任何其它下载任务,即使是在不同域名下的。

有时候,并不容易把脚本移动到底部。举个例子,如果脚本是用 document.write 插入到页面内容中的,就没办法再往下移了。还可能存在作用域问题,在多数情况下,这些问题都是可以解决的。

一个常见的建议是用推迟(deferred)脚本,有 DEFER 属性的脚本意味着不能含有 document.write,并且提示浏览器告诉他们可以继续渲染。不幸的是,Firefox 不支持 DEFER 属性。在 IE 中,脚本可能被推迟,但不尽如人意。如果脚本可以推迟,我们就可以把它放到页面底部,页面就可以更快地载入。

一些特殊场景无法将脚本放到页面底部的,可以考虑<script>的以下属性:

  • defer 属性;
  • HTML5 新增的async属性。
0 条回应