本文探讨了前端性能优化中关于script标签的使用策略，尤其是async和defer属性的差异。当script无这些属性时，会阻塞页面呈现。为避免“白屏”现象，推荐将script放在底部。同时，分析了script放在head中可能遇到的问题，如需操作body元素时可能找不到目标，此时通常需绑定window.onload事件。通过测试实例展示了脚本位置对页面加载的影响。
script的两个属性——async和defer：
① 没有defer或async，浏览器会立即加载并执行指定的JS脚本，不等待后续文档元素，读到JS脚本就加载并执行。
② 有async，加载后续文档元素的过程将和JS的加载与执行并行进行（异步）。
③ 有defer，加载后续文档元素的过程将和JS的加载并行进行（异步），但JS的执行要在所有文档元素解析完成之后，DOMContentLoaded 事件触发之前完成。
二者的详细对比请见：http://blog.csdn.net/zhouziyu2011/article/details/60149590
最低0.47元/天 解锁文章
扫一扫
2303
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
