浏览器资源加载最佳优化(JavaScript 篇) - 文章教程

浏览器资源加载最佳优化(JavaScript 篇)

发布于 2021-02-16 字数 1694 浏览 1043 评论 0

不同于过去,从 Yahoo优化网站性能的14条规则 中的第 5,6 条。

 5. 将 CSS 样式放在页面的上方 	[css]
 6. 将脚本移动到底部(包括内联的) 	[javascript]

但已经不完全正确了,例如当使用下午的技术之后,位置不那么重要。

另外,如果是需要 JS 文件的下载和执行不阻塞文档和 cssdom 的执行,提高 JS 网络的并行加载能力,需要的 Script-inject 技术也已经过时了,在以前的法则中:

<!-- BAD: blocking external script -->
<script src="//somehost.com/awesome-widget.js"></script>

<!-- GOOD: remote script is loaded asynchronously -->
<script>
    var script = document.createElement('script');
    script.src = "//somehost.com/awesome-widget.js";
    document.getElementsByTagName('head')[0].appendChild(script);
</script>

但是 ,Ilya Grigorik 在如今浏览器技术突飞猛进的情况下,给出了最新的解决方案(注意实用范围)

<!-- BAD: the pre async / pre preload scanner era -->
<script>
    var script = document.createElement('script');
    script.src = "//somehost.com/awesome-widget.js";
    document.getElementsByTagName('head')[0].appendChild(script);
</script>

<!-- GOOD: simpler, faster, and better all around -->
<!-- Modern browsers will use 'async', older browsers will use 'defer' -->
<script src="//somehost.com/awesome-widget.js" async defer></script>

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0